Merge branch 'main' of https://github.com/GoogleForCreators/web-stori…

…es-wp into feat/13440--amp-story-audio-sticker

.eslintrc

@@ -57,7 +57,7 @@
       "",
       {
         "pattern": " \\* Copyright \\d{4} Google LLC",
-        "template": " * Copyright 2023 Google LLC"
+        "template": " * Copyright 2024 Google LLC"
       },
       " *",
       " * Licensed under the Apache License, Version 2.0 (the \"License\");",

.github/workflows/tests-e2e.yml

@@ -146,6 +146,16 @@ jobs:
             wp: 'latest'
             snapshots: true
             shard: '2/2'
+          - browser: 'chrome'
+            wp: '6.5-RC3'
+            snapshots: false
+            shard: '1/2'
+            experimental: true
+          - browser: 'chrome'
+            wp: '6.5-RC3'
+            snapshots: false
+            shard: '2/2'
+            experimental: true
 
     steps:
       - name: Harden Runner

docs/third-party-integration/story-editor/integration-layer.md

@@ -597,6 +597,65 @@ const Editor = () => {
 };
 ```
 
+## Enabling Shopping Tab
+
+The shopping tab allows inserting a product attachment with a draggable drawer that links to the product URL. To enable the shopping tab, you need to make a couple of changes.
+
+In the `StoryEditor` config, add `isShoppingEnabled: true` and `shoppingProvider: 'None'`. If you have a shopping provider like WooCommerce or Shopify you can add 'Woocommerce' or 'Shopify' instead of 'None'.
+
+```jsx
+<StoryEditor
+    config={{
+        apiCallbacks,
+        autoSaveInterval: 10,
+        capabilities: { hasUploadMediaAction:true, 
+        canManageSettings: true, },
+        MediaUpload,
+        isShoppingEnabled: true,
+        shoppingProvider: 'None'
+    }}
+    initialEdits={{ story }}>
+    <InterfaceSkeleton header={<StoryEditorHeader />}
+        sidebarTabs={{
+            document: {
+                title: 'Document',
+                Pane: DocumentPane,
+            },
+        }}
+    />
+</StoryEditor>
+```
+
+Next, provide `getProducts` in `apiCallbacks`:
+
+```jsx
+const getProducts = () => {
+  const products = [
+    {
+      productId: "1",
+      productBrand: "Nike",
+      productDetails: "Random Nike sneaker",
+      productImages: [
+        {
+          alt: "Image",
+          url: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/4f37fca8-6bce-43e7-ad07-f57ae3c13142/air-force-1-07-shoes-WrLlWX.png",
+        },
+      ],
+      productPrice: 1000,
+      productPriceCurrency: "INR",
+      productTitle: "Nike Sneaker",
+      productUrl:
+        "https://www.nike.com/in/t/air-force-1-07-shoes-WrLlWX/315122-111",
+    },
+  ];
+  return Promise.resolve({ products });
+};
+
+export default getProducts;
+```
+
+After configuring these, you will see a shopping bag icon which will hold products you return from the `getProducts` function. Clicking on the product will insert an attachment.
+
 ## Sidebar Tabs
 
 ### Document Pane

includes/Media/Types.php

@@ -69,6 +69,7 @@ public function get_allowed_mime_types(): array {
 				'image/jpeg',
 				'image/jpg',
 				'image/gif',
+				'image/avif',
 			],
 			'audio'   => [
 				'audio/mpeg',