@wordpress/block-library 10.1.0 → 10.2.0

package/build/gallery/edit.cjs

@@ -39,7 +39,6 @@ var import_block_editor = require("@wordpress/block-editor");
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
 var import_data = require("@wordpress/data");
-var import_primitives = require("@wordpress/primitives");
 var import_blocks = require("@wordpress/blocks");
 var import_blob = require("@wordpress/blob");
 var import_notices = require("@wordpress/notices");
@@ -55,6 +54,9 @@ var import_use_image_sizes = __toESM(require("./use-image-sizes.cjs"));
 var import_use_get_new_images = __toESM(require("./use-get-new-images.cjs"));
 var import_use_get_media = __toESM(require("./use-get-media.cjs"));
 var import_gap_styles = __toESM(require("./gap-styles.cjs"));
+var import_use_dynamic_gallery = __toESM(require("./use-dynamic-gallery.cjs"));
+var import_dynamic_gallery = require("./dynamic-gallery.cjs");
+var import_dynamic_source = require("./dynamic-source.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var MAX_COLUMNS = 8;
 var LINK_OPTIONS = [
@@ -112,8 +114,13 @@ function GalleryEdit(props) {
     clientId,
     isSelected,
     insertBlocksAfter,
-    isContentLocked
+    isContentLocked,
+    context,
+    __unstableLayoutClassNames: layoutClassNames
   } = props;
+  const postId = context?.postId;
+  const postType = context?.postType;
+  const blockEditingMode = (0, import_block_editor.useBlockEditingMode)();
   const [lightboxSetting, defaultRatios, themeRatios, showDefaultRatios] = (0, import_block_editor.useSettings)(
     "blocks.core/image.lightbox",
     "dimensions.aspectRatios.default",
@@ -124,6 +131,7 @@ function GalleryEdit(props) {
     (option) => option.value !== import_constants.LINK_DESTINATION_LIGHTBOX
   ) : LINK_OPTIONS;
   const {
+    align,
     navigationButtonType,
     columns,
     imageCrop,
@@ -172,9 +180,26 @@ function GalleryEdit(props) {
   );
   const imageData = (0, import_use_get_media.default)(innerBlockImages);
   const newImages = (0, import_use_get_new_images.default)(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 = (0, import_use_dynamic_gallery.default)({
+    attributes,
+    setAttributes,
+    clientId,
+    postId,
+    postType
+  });
+  const displayedImageCount = isDynamic ? dynamic.dynamicMedia.length : images.length;
+  let hasLightboxImages;
+  if (isDynamic) {
+    hasLightboxImages = linkTo === import_constants.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
@@ -205,7 +230,7 @@ function GalleryEdit(props) {
     });
   }, [newImages]);
   const imageSizeOptions = (0, import_use_image_sizes.default)(
-    imageData,
+    isDynamic ? dynamic.dynamicMedia : imageData,
     isSelected,
     getSettings
   );
@@ -437,7 +462,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
@@ -447,217 +471,265 @@ function GalleryEdit(props) {
     disableMediaButtons: imagesUploading,
     value: {}
   };
-  const mediaPlaceholder = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_block_editor.MediaPlaceholder,
-    {
-      handleUpload: false,
-      icon: import_shared_icon.sharedIcon,
-      labels: {
-        title: (0, import_i18n.__)("Gallery"),
-        instructions: PLACEHOLDER_TEXT
-      },
-      onSelect: updateImages,
-      allowedTypes: ALLOWED_MEDIA_TYPES,
-      multiple: true,
-      onError: onUploadError,
-      ...mediaPlaceholderProps
-    }
-  );
   const blockProps = (0, import_block_editor.useBlockProps)({
-    className: (0, import_clsx.default)(className, "has-nested-images")
+    className: (0, import_clsx.default)(
+      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 = (0, import_block_editor.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 = (0, import_hooks.useToolsPanelDropdownMenuProps)();
-  if (!hasImages) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_primitives.View, { ...innerBlocksProps, children: [
+  if (!hasImages && !isDynamic) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...innerBlocksProps, children: [
       innerBlocksProps.children,
-      mediaPlaceholder
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.MediaPlaceholder,
+        {
+          handleUpload: false,
+          icon: import_shared_icon.sharedIcon,
+          labels: {
+            title: (0, import_i18n.__)("Gallery"),
+            instructions: PLACEHOLDER_TEXT
+          },
+          onSelect: updateImages,
+          allowedTypes: ALLOWED_MEDIA_TYPES,
+          multiple: true,
+          onError: onUploadError,
+          ...mediaPlaceholderProps,
+          children: blockEditingMode === "default" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              __next40pxDefaultSize: true,
+              variant: "secondary",
+              onClick: dynamic.enableDynamicMode,
+              children: (0, import_dynamic_source.getDynamicSource)(import_dynamic_source.ATTACHED_MEDIA).title
+            }
+          )
+        }
+      )
     ] });
   }
   const hasLinkTo = linkTo && linkTo !== "none";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.__experimentalToolsPanel,
-      {
-        label: (0, import_i18n.__)("Settings"),
-        resetAll: () => {
-          setAttributes({
-            navigationButtonType: "icon",
-            columns: void 0,
-            imageCrop: true,
-            randomOrder: false
-          });
-          setAspectRatio("auto");
-          if (sizeSlug !== import_constants.DEFAULT_MEDIA_SIZE_SLUG) {
-            updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG);
-          }
-          if (linkTarget) {
-            toggleOpenInNewTab(false);
-          }
-        },
-        dropdownMenuProps,
-        children: [
-          images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: (0, import_i18n.__)("Columns"),
-              hasValue: () => !!columns && columns !== images.length,
-              onDeselect: () => setColumnsNumber(void 0),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.RangeControl,
-                {
-                  label: (0, import_i18n.__)("Columns"),
-                  value: columns ? columns : (0, import_shared.defaultColumnsNumber)(images.length),
-                  onChange: setColumnsNumber,
-                  min: 1,
-                  max: Math.min(MAX_COLUMNS, images.length),
-                  required: true,
-                  __next40pxDefaultSize: true
-                }
-              )
-            }
-          ),
-          imageSizeOptions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: (0, import_i18n.__)("Resolution"),
-              hasValue: () => sizeSlug !== import_constants.DEFAULT_MEDIA_SIZE_SLUG,
-              onDeselect: () => updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.SelectControl,
-                {
-                  label: (0, import_i18n.__)("Resolution"),
-                  help: (0, import_i18n.__)(
-                    "Select the size of the source images."
-                  ),
-                  value: sizeSlug,
-                  options: imageSizeOptions,
-                  onChange: updateImagesSize,
-                  hideCancelButton: true,
-                  size: "__unstable-large"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: (0, import_i18n.__)("Crop images to fit"),
-              hasValue: () => !imageCrop,
-              onDeselect: () => setAttributes({ imageCrop: true }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.ToggleControl,
-                {
-                  label: (0, import_i18n.__)("Crop images to fit"),
-                  checked: !!imageCrop,
-                  onChange: toggleImageCrop
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: (0, import_i18n.__)("Randomize order"),
-              hasValue: () => !!randomOrder,
-              onDeselect: () => setAttributes({ randomOrder: false }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.ToggleControl,
-                {
-                  label: (0, import_i18n.__)("Randomize order"),
-                  checked: !!randomOrder,
-                  onChange: toggleRandomOrder
-                }
-              )
-            }
-          ),
-          hasLinkTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              isShownByDefault: true,
-              label: (0, import_i18n.__)("Open images in new tab"),
-              hasValue: () => !!linkTarget,
-              onDeselect: () => toggleOpenInNewTab(false),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.ToggleControl,
-                {
-                  label: (0, import_i18n.__)("Open images in new tab"),
-                  checked: linkTarget === "_blank",
-                  onChange: toggleOpenInNewTab
-                }
-              )
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_dynamic_gallery.GallerySourcePanel,
+        {
+          dynamic,
+          dropdownMenuProps,
+          hasImages
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_components.__experimentalToolsPanel,
+        {
+          label: (0, import_i18n.__)("Settings"),
+          resetAll: () => {
+            setAttributes({
+              navigationButtonType: "icon",
+              columns: void 0,
+              imageCrop: true,
+              randomOrder: false
+            });
+            setAspectRatio("auto");
+            if (sizeSlug !== import_constants.DEFAULT_MEDIA_SIZE_SLUG) {
+              updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG);
             }
-          ),
-          aspectRatioOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              hasValue: () => !!aspectRatio && aspectRatio !== "auto",
-              label: (0, import_i18n.__)("Aspect ratio"),
-              onDeselect: () => setAspectRatio("auto"),
-              isShownByDefault: true,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.SelectControl,
-                {
-                  __next40pxDefaultSize: true,
-                  label: (0, import_i18n.__)("Aspect ratio"),
-                  help: (0, import_i18n.__)(
-                    "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__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalToolsPanelItem,
-            {
-              label: (0, import_i18n.__)("Navigation button type"),
-              isShownByDefault: true,
-              hasValue: () => navigationButtonType !== "icon",
-              onDeselect: () => setAttributes({
-                navigationButtonType: "icon"
-              }),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_components.__experimentalToggleGroupControl,
-                {
-                  label: (0, import_i18n.__)("Navigation button type"),
-                  value: navigationButtonType,
-                  onChange: (value) => setAttributes({
-                    navigationButtonType: value
-                  }),
-                  isBlock: true,
-                  __next40pxDefaultSize: true,
-                  help: (0, import_i18n.__)(
-                    "Adjust the appearance of buttons in the lightbox."
-                  ),
-                  children: NAVIGATION_BUTTON_TYPE_OPTIONS.map(
-                    (option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_components.__experimentalToggleGroupControlOption,
-                      {
-                        value: option.value,
-                        label: option.label
-                      },
-                      option.value
+          },
+          dropdownMenuProps,
+          children: [
+            displayedImageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Columns"),
+                hasValue: () => !!columns && columns !== displayedImageCount,
+                onDeselect: () => setColumnsNumber(void 0),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.RangeControl,
+                  {
+                    label: (0, import_i18n.__)("Columns"),
+                    value: columns ? columns : (0, import_shared.defaultColumnsNumber)(
+                      displayedImageCount
+                    ),
+                    onChange: setColumnsNumber,
+                    min: 1,
+                    max: Math.min(
+                      MAX_COLUMNS,
+                      displayedImageCount
+                    ),
+                    required: true
+                  }
+                )
+              }
+            ),
+            imageSizeOptions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Resolution"),
+                hasValue: () => sizeSlug !== import_constants.DEFAULT_MEDIA_SIZE_SLUG,
+                onDeselect: () => updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.SelectControl,
+                  {
+                    label: (0, import_i18n.__)("Resolution"),
+                    help: (0, import_i18n.__)(
+                      "Select the size of the source images."
+                    ),
+                    value: sizeSlug,
+                    options: imageSizeOptions,
+                    onChange: updateImagesSize,
+                    hideCancelButton: true
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Crop images to fit"),
+                hasValue: () => !imageCrop,
+                onDeselect: () => setAttributes({ imageCrop: true }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    label: (0, import_i18n.__)("Crop images to fit"),
+                    checked: !!imageCrop,
+                    onChange: toggleImageCrop
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Randomize order"),
+                hasValue: () => !!randomOrder,
+                onDeselect: () => setAttributes({ randomOrder: false }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    label: (0, import_i18n.__)("Randomize order"),
+                    checked: !!randomOrder,
+                    onChange: toggleRandomOrder
+                  }
+                )
+              }
+            ),
+            hasLinkTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                isShownByDefault: true,
+                label: (0, import_i18n.__)("Open images in new tab"),
+                hasValue: () => !!linkTarget,
+                onDeselect: () => toggleOpenInNewTab(false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    label: (0, import_i18n.__)("Open images in new tab"),
+                    checked: linkTarget === "_blank",
+                    onChange: toggleOpenInNewTab
+                  }
+                )
+              }
+            ),
+            aspectRatioOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                hasValue: () => !!aspectRatio && aspectRatio !== "auto",
+                label: (0, import_i18n.__)("Aspect ratio"),
+                onDeselect: () => setAspectRatio("auto"),
+                isShownByDefault: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.SelectControl,
+                  {
+                    label: (0, import_i18n.__)("Aspect ratio"),
+                    help: (0, import_i18n.__)(
+                      "Set a consistent aspect ratio for all images in the gallery."
+                    ),
+                    value: aspectRatio,
+                    options: aspectRatioOptions,
+                    onChange: setAspectRatio
+                  }
+                )
+              }
+            ),
+            lightboxSetting?.allowEditing && hasLightboxImages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                label: (0, import_i18n.__)("Navigation button type"),
+                isShownByDefault: true,
+                hasValue: () => navigationButtonType !== "icon",
+                onDeselect: () => setAttributes({
+                  navigationButtonType: "icon"
+                }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToggleGroupControl,
+                  {
+                    label: (0, import_i18n.__)("Navigation button type"),
+                    value: navigationButtonType,
+                    onChange: (value) => setAttributes({
+                      navigationButtonType: value
+                    }),
+                    isBlock: true,
+                    help: (0, import_i18n.__)(
+                      "Adjust the appearance of buttons in the lightbox."
+                    ),
+                    children: NAVIGATION_BUTTON_TYPE_OPTIONS.map(
+                      (option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.__experimentalToggleGroupControlOption,
+                        {
+                          value: option.value,
+                          label: option.label
+                        },
+                        option.value
+                      )
                     )
-                  )
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) }),
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "block", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarDropdownMenu, { icon: import_icons.link, label: (0, import_i18n.__)("Link"), children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: linkOptions.map((linkItem) => {
       const isOptionSelected = linkTo === linkItem.value;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -684,7 +756,7 @@ function GalleryEdit(props) {
       );
     }) }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      !multiGallerySelection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      !multiGallerySelection && !isDynamic && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_block_editor.MediaReplaceFlow,
         {
           allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -700,18 +772,26 @@ function GalleryEdit(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_gap_styles.default,
         {
-          blockGap: attributes.style?.spacing?.blockGap,
+          style: attributes.style,
           clientId
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    isDynamic ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_dynamic_gallery.GalleryDynamicView,
+      {
+        ...props,
+        dynamic,
+        blockProps,
+        innerBlocksProps,
+        multiGallerySelection
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_gallery.default,
       {
         ...props,
         isContentLocked,
         images,
-        mediaPlaceholder: !hasImages ? mediaPlaceholder : void 0,
         blockProps: innerBlocksProps,
         insertBlocksAfter,
         multiGallerySelection