@wordpress/block-library 10.0.1 → 10.1.1-next.v.202607070741.0

package/build-module/gallery/edit.mjs

@@ -10,7 +10,8 @@ import {
   __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
-  ToolbarDropdownMenu
+  ToolbarDropdownMenu,
+  Button
 } from "@wordpress/components";
 import {
   store as blockEditorStore,
@@ -18,6 +19,7 @@ import {
   InspectorControls,
   useBlockProps,
   useInnerBlocksProps,
+  useBlockEditingMode,
   BlockControls,
   MediaReplaceFlow,
   useSettings
@@ -25,7 +27,6 @@ import {
 import { useEffect, useMemo } from "@wordpress/element";
 import { __, _x, sprintf } from "@wordpress/i18n";
 import { useSelect, useDispatch } from "@wordpress/data";
-import { View } from "@wordpress/primitives";
 import { createBlock } from "@wordpress/blocks";
 import { createBlobURL } from "@wordpress/blob";
 import { store as noticesStore } from "@wordpress/notices";
@@ -56,6 +57,9 @@ import useImageSizes from "./use-image-sizes.mjs";
 import useGetNewImages from "./use-get-new-images.mjs";
 import useGetMedia from "./use-get-media.mjs";
 import GapStyles from "./gap-styles.mjs";
+import useDynamicGallery from "./use-dynamic-gallery.mjs";
+import { GallerySourcePanel, GalleryDynamicView } from "./dynamic-gallery.mjs";
+import { getDynamicSource, ATTACHED_MEDIA } from "./dynamic-source.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MAX_COLUMNS = 8;
 var LINK_OPTIONS = [
@@ -113,8 +117,13 @@ function GalleryEdit(props) {
     clientId,
     isSelected,
     insertBlocksAfter,
-    isContentLocked
+    isContentLocked,
+    context,
+    __unstableLayoutClassNames: layoutClassNames
   } = props;
+  const postId = context?.postId;
+  const postType = context?.postType;
+  const blockEditingMode = useBlockEditingMode();
   const [lightboxSetting, defaultRatios, themeRatios, showDefaultRatios] = useSettings(
     "blocks.core/image.lightbox",
     "dimensions.aspectRatios.default",
@@ -125,6 +134,7 @@ function GalleryEdit(props) {
     (option) => option.value !== LINK_DESTINATION_LIGHTBOX
   ) : LINK_OPTIONS;
   const {
+    align,
     navigationButtonType,
     columns,
     imageCrop,
@@ -173,9 +183,26 @@ function GalleryEdit(props) {
   );
   const imageData = useGetMedia(innerBlockImages);
   const newImages = useGetNewImages(images, imageData);
-  const hasLightboxImages = lightboxSetting?.enabled ? images.filter(
-    (image) => image.attributes?.lightbox?.enabled === void 0 || image.attributes?.lightbox?.enabled === true
-  ).length > 0 : images.filter((image) => image.attributes.lightbox?.enabled).length > 0;
+  const hasImages = !!images.length;
+  const isDynamic = !!attributes.dynamicContent;
+  const dynamic = useDynamicGallery({
+    attributes,
+    setAttributes,
+    clientId,
+    postId,
+    postType
+  });
+  const displayedImageCount = isDynamic ? dynamic.dynamicMedia.length : images.length;
+  let hasLightboxImages;
+  if (isDynamic) {
+    hasLightboxImages = linkTo === LINK_DESTINATION_LIGHTBOX;
+  } else if (lightboxSetting?.enabled) {
+    hasLightboxImages = images.filter(
+      (image) => image.attributes?.lightbox?.enabled === void 0 || image.attributes?.lightbox?.enabled === true
+    ).length > 0;
+  } else {
+    hasLightboxImages = images.filter((image) => image.attributes.lightbox?.enabled).length > 0;
+  }
   const themeOptions = themeRatios?.map(({ name, ratio }) => ({
     label: name,
     value: ratio
@@ -206,7 +233,7 @@ function GalleryEdit(props) {
     });
   }, [newImages]);
   const imageSizeOptions = useImageSizes(
-    imageData,
+    isDynamic ? dynamic.dynamicMedia : imageData,
     isSelected,
     getSettings
   );
@@ -438,7 +465,6 @@ function GalleryEdit(props) {
       });
     }
   }, [linkTo]);
-  const hasImages = !!images.length;
   const hasImageIds = hasImages && images.some((image) => !!image.id);
   const imagesUploading = images.some(
     (img) => !img.id && img.url?.indexOf("blob:") === 0
@@ -448,217 +474,265 @@ function GalleryEdit(props) {
     disableMediaButtons: imagesUploading,
     value: {}
   };
-  const mediaPlaceholder = /* @__PURE__ */ jsx(
-    MediaPlaceholder,
-    {
-      handleUpload: false,
-      icon: sharedIcon,
-      labels: {
-        title: __("Gallery"),
-        instructions: PLACEHOLDER_TEXT
-      },
-      onSelect: updateImages,
-      allowedTypes: ALLOWED_MEDIA_TYPES,
-      multiple: true,
-      onError: onUploadError,
-      ...mediaPlaceholderProps
-    }
-  );
   const blockProps = useBlockProps({
-    className: clsx(className, "has-nested-images")
+    className: clsx(
+      className,
+      "has-nested-images",
+      // In dynamic mode there are no inner blocks and the gallery isn't
+      // rendered through the `Gallery` component, so the classes that
+      // component normally composes onto the `<figure>` (see `gallery.js`)
+      // must be added here to keep the preview's flex/crop layout matching
+      // the static gallery and the frontend.
+      isDynamic && [
+        layoutClassNames,
+        "blocks-gallery-grid",
+        {
+          [`align${align}`]: align,
+          [`columns-${columns}`]: columns !== void 0,
+          "columns-default": columns === void 0,
+          "is-cropped": imageCrop
+        }
+      ]
+    )
   });
   const innerBlocksProps = useInnerBlocksProps(blockProps, {
     defaultBlock: DEFAULT_BLOCK,
     directInsert: true,
     orientation: "horizontal",
-    renderAppender: false
+    renderAppender: false,
+    // In dynamic mode nothing may be inserted: the images are resolved from
+    // the source, not authored as inner blocks. `allowedBlocks: []` enforces
+    // this in every context — unlike `templateLock: 'all'`, it isn't relaxed
+    // to `contentOnly` by a content-locked ancestor — so it blocks insertion
+    // and drag-and-drop (via `canInsertBlockType`). It's also what opts the
+    // gallery out of the List View: a block that can't be inserted into and
+    // has no inner blocks has nothing to navigate or add (see
+    // `shouldRenderBlockListView`). This reaches the block's list settings
+    // only while the inner blocks are mounted, which is why the dynamic view
+    // still renders the (empty) inner blocks.
+    allowedBlocks: isDynamic ? EMPTY_ARRAY : void 0
   });
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-  if (!hasImages) {
-    return /* @__PURE__ */ jsxs(View, { ...innerBlocksProps, children: [
+  if (!hasImages && !isDynamic) {
+    return /* @__PURE__ */ jsxs("div", { ...innerBlocksProps, children: [
       innerBlocksProps.children,
-      mediaPlaceholder
+      /* @__PURE__ */ jsx(
+        MediaPlaceholder,
+        {
+          handleUpload: false,
+          icon: sharedIcon,
+          labels: {
+            title: __("Gallery"),
+            instructions: PLACEHOLDER_TEXT
+          },
+          onSelect: updateImages,
+          allowedTypes: ALLOWED_MEDIA_TYPES,
+          multiple: true,
+          onError: onUploadError,
+          ...mediaPlaceholderProps,
+          children: blockEditingMode === "default" && /* @__PURE__ */ jsx(
+            Button,
+            {
+              __next40pxDefaultSize: true,
+              variant: "secondary",
+              onClick: dynamic.enableDynamicMode,
+              children: getDynamicSource(ATTACHED_MEDIA).title
+            }
+          )
+        }
+      )
     ] });
   }
   const hasLinkTo = linkTo && linkTo !== "none";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
-      ToolsPanel,
-      {
-        label: __("Settings"),
-        resetAll: () => {
-          setAttributes({
-            navigationButtonType: "icon",
-            columns: void 0,
-            imageCrop: true,
-            randomOrder: false
-          });
-          setAspectRatio("auto");
-          if (sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG) {
-            updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG);
-          }
-          if (linkTarget) {
-            toggleOpenInNewTab(false);
-          }
-        },
-        dropdownMenuProps,
-        children: [
-          images.length > 1 && /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: __("Columns"),
-              hasValue: () => !!columns && columns !== images.length,
-              onDeselect: () => setColumnsNumber(void 0),
-              children: /* @__PURE__ */ jsx(
-                RangeControl,
-                {
-                  label: __("Columns"),
-                  value: columns ? columns : defaultColumnsNumber(images.length),
-                  onChange: setColumnsNumber,
-                  min: 1,
-                  max: Math.min(MAX_COLUMNS, images.length),
-                  required: true,
-                  __next40pxDefaultSize: true
-                }
-              )
-            }
-          ),
-          imageSizeOptions?.length > 0 && /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: __("Resolution"),
-              hasValue: () => sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG,
-              onDeselect: () => updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG),
-              children: /* @__PURE__ */ jsx(
-                SelectControl,
-                {
-                  label: __("Resolution"),
-                  help: __(
-                    "Select the size of the source images."
-                  ),
-                  value: sizeSlug,
-                  options: imageSizeOptions,
-                  onChange: updateImagesSize,
-                  hideCancelButton: true,
-                  size: "__unstable-large"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: __("Crop images to fit"),
-              hasValue: () => !imageCrop,
-              onDeselect: () => setAttributes({ imageCrop: true }),
-              children: /* @__PURE__ */ jsx(
-                ToggleControl,
-                {
-                  label: __("Crop images to fit"),
-                  checked: !!imageCrop,
-                  onChange: toggleImageCrop
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: __("Randomize order"),
-              hasValue: () => !!randomOrder,
-              onDeselect: () => setAttributes({ randomOrder: false }),
-              children: /* @__PURE__ */ jsx(
-                ToggleControl,
-                {
-                  label: __("Randomize order"),
-                  checked: !!randomOrder,
-                  onChange: toggleRandomOrder
-                }
-              )
-            }
-          ),
-          hasLinkTo && /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: __("Open images in new tab"),
-              hasValue: () => !!linkTarget,
-              onDeselect: () => toggleOpenInNewTab(false),
-              children: /* @__PURE__ */ jsx(
-                ToggleControl,
-                {
-                  label: __("Open images in new tab"),
-                  checked: linkTarget === "_blank",
-                  onChange: toggleOpenInNewTab
-                }
-              )
+    /* @__PURE__ */ jsxs(InspectorControls, { children: [
+      /* @__PURE__ */ jsx(
+        GallerySourcePanel,
+        {
+          dynamic,
+          dropdownMenuProps,
+          hasImages
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        ToolsPanel,
+        {
+          label: __("Settings"),
+          resetAll: () => {
+            setAttributes({
+              navigationButtonType: "icon",
+              columns: void 0,
+              imageCrop: true,
+              randomOrder: false
+            });
+            setAspectRatio("auto");
+            if (sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG) {
+              updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG);
             }
-          ),
-          aspectRatioOptions.length > 1 && /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              hasValue: () => !!aspectRatio && aspectRatio !== "auto",
-              label: __("Aspect ratio"),
-              onDeselect: () => setAspectRatio("auto"),
-              isShownByDefault: true,
-              children: /* @__PURE__ */ jsx(
-                SelectControl,
-                {
-                  __next40pxDefaultSize: true,
-                  label: __("Aspect ratio"),
-                  help: __(
-                    "Set a consistent aspect ratio for all images in the gallery."
-                  ),
-                  value: aspectRatio,
-                  options: aspectRatioOptions,
-                  onChange: setAspectRatio
-                }
-              )
+            if (linkTarget) {
+              toggleOpenInNewTab(false);
             }
-          ),
-          lightboxSetting?.allowEditing && hasLightboxImages && /* @__PURE__ */ jsx(
-            ToolsPanelItem,
-            {
-              label: __("Navigation button type"),
-              isShownByDefault: true,
-              hasValue: () => navigationButtonType !== "icon",
-              onDeselect: () => setAttributes({
-                navigationButtonType: "icon"
-              }),
-              children: /* @__PURE__ */ jsx(
-                ToggleGroupControl,
-                {
-                  label: __("Navigation button type"),
-                  value: navigationButtonType,
-                  onChange: (value) => setAttributes({
-                    navigationButtonType: value
-                  }),
-                  isBlock: true,
-                  __next40pxDefaultSize: true,
-                  help: __(
-                    "Adjust the appearance of buttons in the lightbox."
-                  ),
-                  children: NAVIGATION_BUTTON_TYPE_OPTIONS.map(
-                    (option) => /* @__PURE__ */ jsx(
-                      ToggleGroupControlOption,
-                      {
-                        value: option.value,
-                        label: option.label
-                      },
-                      option.value
+          },
+          dropdownMenuProps,
+          children: [
+            displayedImageCount > 1 && /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: __("Columns"),
+                hasValue: () => !!columns && columns !== displayedImageCount,
+                onDeselect: () => setColumnsNumber(void 0),
+                children: /* @__PURE__ */ jsx(
+                  RangeControl,
+                  {
+                    label: __("Columns"),
+                    value: columns ? columns : defaultColumnsNumber(
+                      displayedImageCount
+                    ),
+                    onChange: setColumnsNumber,
+                    min: 1,
+                    max: Math.min(
+                      MAX_COLUMNS,
+                      displayedImageCount
+                    ),
+                    required: true
+                  }
+                )
+              }
+            ),
+            imageSizeOptions?.length > 0 && /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: __("Resolution"),
+                hasValue: () => sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG,
+                onDeselect: () => updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG),
+                children: /* @__PURE__ */ jsx(
+                  SelectControl,
+                  {
+                    label: __("Resolution"),
+                    help: __(
+                      "Select the size of the source images."
+                    ),
+                    value: sizeSlug,
+                    options: imageSizeOptions,
+                    onChange: updateImagesSize,
+                    hideCancelButton: true
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: __("Crop images to fit"),
+                hasValue: () => !imageCrop,
+                onDeselect: () => setAttributes({ imageCrop: true }),
+                children: /* @__PURE__ */ jsx(
+                  ToggleControl,
+                  {
+                    label: __("Crop images to fit"),
+                    checked: !!imageCrop,
+                    onChange: toggleImageCrop
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: __("Randomize order"),
+                hasValue: () => !!randomOrder,
+                onDeselect: () => setAttributes({ randomOrder: false }),
+                children: /* @__PURE__ */ jsx(
+                  ToggleControl,
+                  {
+                    label: __("Randomize order"),
+                    checked: !!randomOrder,
+                    onChange: toggleRandomOrder
+                  }
+                )
+              }
+            ),
+            hasLinkTo && /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: __("Open images in new tab"),
+                hasValue: () => !!linkTarget,
+                onDeselect: () => toggleOpenInNewTab(false),
+                children: /* @__PURE__ */ jsx(
+                  ToggleControl,
+                  {
+                    label: __("Open images in new tab"),
+                    checked: linkTarget === "_blank",
+                    onChange: toggleOpenInNewTab
+                  }
+                )
+              }
+            ),
+            aspectRatioOptions.length > 1 && /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                hasValue: () => !!aspectRatio && aspectRatio !== "auto",
+                label: __("Aspect ratio"),
+                onDeselect: () => setAspectRatio("auto"),
+                isShownByDefault: true,
+                children: /* @__PURE__ */ jsx(
+                  SelectControl,
+                  {
+                    label: __("Aspect ratio"),
+                    help: __(
+                      "Set a consistent aspect ratio for all images in the gallery."
+                    ),
+                    value: aspectRatio,
+                    options: aspectRatioOptions,
+                    onChange: setAspectRatio
+                  }
+                )
+              }
+            ),
+            lightboxSetting?.allowEditing && hasLightboxImages && /* @__PURE__ */ jsx(
+              ToolsPanelItem,
+              {
+                label: __("Navigation button type"),
+                isShownByDefault: true,
+                hasValue: () => navigationButtonType !== "icon",
+                onDeselect: () => setAttributes({
+                  navigationButtonType: "icon"
+                }),
+                children: /* @__PURE__ */ jsx(
+                  ToggleGroupControl,
+                  {
+                    label: __("Navigation button type"),
+                    value: navigationButtonType,
+                    onChange: (value) => setAttributes({
+                      navigationButtonType: value
+                    }),
+                    isBlock: true,
+                    help: __(
+                      "Adjust the appearance of buttons in the lightbox."
+                    ),
+                    children: NAVIGATION_BUTTON_TYPE_OPTIONS.map(
+                      (option) => /* @__PURE__ */ jsx(
+                        ToggleGroupControlOption,
+                        {
+                          value: option.value,
+                          label: option.label
+                        },
+                        option.value
+                      )
                     )
-                  )
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) }),
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(ToolbarDropdownMenu, { icon: linkIcon, label: __("Link"), children: ({ onClose }) => /* @__PURE__ */ jsx(MenuGroup, { children: linkOptions.map((linkItem) => {
       const isOptionSelected = linkTo === linkItem.value;
       return /* @__PURE__ */ jsx(
@@ -685,7 +759,7 @@ function GalleryEdit(props) {
       );
     }) }) }) }),
     /* @__PURE__ */ jsxs(Fragment, { children: [
-      !multiGallerySelection && /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
+      !multiGallerySelection && !isDynamic && /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
         MediaReplaceFlow,
         {
           allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -706,13 +780,21 @@ function GalleryEdit(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
+    isDynamic ? /* @__PURE__ */ jsx(
+      GalleryDynamicView,
+      {
+        ...props,
+        dynamic,
+        blockProps,
+        innerBlocksProps,
+        multiGallerySelection
+      }
+    ) : /* @__PURE__ */ jsx(
       Gallery,
       {
         ...props,
         isContentLocked,
         images,
-        mediaPlaceholder: !hasImages ? mediaPlaceholder : void 0,
         blockProps: innerBlocksProps,
         insertBlocksAfter,
         multiGallerySelection