@wordpress/block-library 10.1.0 → 10.2.0

package/build-module/gallery/dynamic-source.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/gallery/dynamic-source.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Source discriminator for \"images attached to the post\" — the only dynamic\n * source implemented so far. Kept as a named constant since it's referenced from\n * several call sites (the query builder, the descriptor, and the entry points\n * that switch a gallery into dynamic mode).\n */\nexport const ATTACHED_MEDIA = 'core/attached-media';\n\n/**\n * Default ordering for a dynamic source. `menu_order` (the manual media-library\n * order) is intentionally not used: it isn't a valid `orderby` value on the\n * media REST endpoint, so the editor preview couldn't reproduce it. Both the\n * editor query and the server resolver default to the same REST-supported order\n * so the preview matches the frontend.\n */\nexport const DEFAULT_ORDERBY = 'date';\nexport const DEFAULT_ORDER = 'desc';\n\n/**\n * Per-source copy, keyed by the `source` discriminator in a gallery's\n * `dynamicContent`. Adding a dynamic source means adding an entry here; the\n * editor components read these strings instead of hardcoding source-specific\n * wording. The fields also map onto a future \"Choose source\" control: `title`\n * becomes an option label, `description` its help text, and `emptyMessage` the\n * canvas preview when the source resolves to nothing.\n */\nconst DYNAMIC_SOURCES = {\n\t[ ATTACHED_MEDIA ]: {\n\t\t// Short label for the entry affordance / future source chooser. Mirrors\n\t\t// the \"Attached images\" media inserter category name.\n\t\ttitle: __( 'Use attached images' ),\n\t\t// Help text shown beneath the Source controls.\n\t\tdescription: __( 'Images attached to the post.' ),\n\t\t// Empty-state copy for the canvas preview.\n\t\temptyMessage: __( 'Images attached to the post will appear here.' ),\n\t},\n};\n\n/**\n * Returns the descriptor for a dynamic source, or `undefined` for an unknown or\n * not-yet-implemented source.\n *\n * @param {?string} source The `dynamicContent.source` discriminator.\n * @return {?Object} The source descriptor (`title`, `description`, `emptyMessage`).\n */\nexport function getDynamicSource( source ) {\n\treturn DYNAMIC_SOURCES[ source ];\n}\n\n/**\n * Upper bound on the number of images a dynamic source resolves, until the\n * gallery supports pagination. Kept in sync with the `posts_per_page` cap in\n * `block_core_gallery_resolve_dynamic_source()`.\n */\nexport const MAX_IMAGES = 100;\n\n/**\n * Maps a gallery's `dynamicContent` attribute to a query for the `attachment`\n * entity (i.e. `/wp/v2/media` collection params), used to resolve the source to\n * a list of media in the editor.\n *\n * The `source` key is the dispatch discriminator and `args` holds the\n * source's parameters. This `{ source, args }` shape mirrors the Block\n * Bindings metadata shape (`metadata.bindings.<key> = { source, args }`) so\n * dynamic mode can migrate to an `innerBlocks` binding with minimal change.\n * `args` keys are camelCase (the block-attribute convention, as used by the\n * Query block's `query` attribute); each source's resolver maps them to the\n * REST/transport names it needs. `core/attached-media` is a context-relative anchor\n * resolved here to the REST `parent` param. The server-side counterpart is\n * `block_core_gallery_resolve_dynamic_source()` in `index.php`.\n *\n * @param {Object} dynamicContent The gallery's `dynamicContent` attribute.\n * @param {Object} context        Resolution context.\n * @param {number} context.postId The current post ID.\n * @return {Object|null} A `getEntityRecords` query, or `null` when the source\n *                       cannot be resolved (unknown source or missing context).\n */\nexport function getSourceQuery( dynamicContent, { postId } ) {\n\tconst { source, args = {} } = dynamicContent ?? {};\n\n\tswitch ( source ) {\n\t\tcase ATTACHED_MEDIA:\n\t\t\tif ( ! postId ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tparent: postId,\n\t\t\t\tper_page: MAX_IMAGES,\n\t\t\t\t// The gallery only accepts images, so constrain the source to\n\t\t\t\t// image media (matching the server resolver). This keeps the\n\t\t\t\t// editor preview in step with the rendered output for posts\n\t\t\t\t// that also have non-image attachments.\n\t\t\t\tmedia_type: 'image',\n\t\t\t\t// Map the camelCase `args` to the REST-named media collection\n\t\t\t\t// params. Unexpected values (only reachable via hand-edited\n\t\t\t\t// markup) are coerced back to the defaults — mirroring the server\n\t\t\t\t// resolver's allow list — so the editor preview stays in step with\n\t\t\t\t// the frontend instead of issuing an invalid REST query.\n\t\t\t\torderby:\n\t\t\t\t\targs.orderBy === 'date' || args.orderBy === 'title'\n\t\t\t\t\t\t? args.orderBy\n\t\t\t\t\t\t: DEFAULT_ORDERBY,\n\t\t\t\torder:\n\t\t\t\t\targs.order === 'asc' || args.order === 'desc'\n\t\t\t\t\t\t? args.order\n\t\t\t\t\t\t: DEFAULT_ORDER,\n\t\t\t};\n\t}\n\n\t// Unknown or not-yet-implemented source.\n\treturn null;\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AAQZ,IAAM,iBAAiB;AASvB,IAAM,kBAAkB;AACxB,IAAM,gBAAgB;AAU7B,IAAM,kBAAkB;AAAA,EACvB,CAAE,cAAe,GAAG;AAAA;AAAA;AAAA,IAGnB,OAAO,GAAI,qBAAsB;AAAA;AAAA,IAEjC,aAAa,GAAI,8BAA+B;AAAA;AAAA,IAEhD,cAAc,GAAI,+CAAgD;AAAA,EACnE;AACD;AASO,SAAS,iBAAkB,QAAS;AAC1C,SAAO,gBAAiB,MAAO;AAChC;AAOO,IAAM,aAAa;AAuBnB,SAAS,eAAgB,gBAAgB,EAAE,OAAO,GAAI;AAC5D,QAAM,EAAE,QAAQ,OAAO,CAAC,EAAE,IAAI,kBAAkB,CAAC;AAEjD,UAAS,QAAS;AAAA,IACjB,KAAK;AACJ,UAAK,CAAE,QAAS;AACf,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN,QAAQ;AAAA,QACR,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,QAKV,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMZ,SACC,KAAK,YAAY,UAAU,KAAK,YAAY,UACzC,KAAK,UACL;AAAA,QACJ,OACC,KAAK,UAAU,SAAS,KAAK,UAAU,SACpC,KAAK,QACL;AAAA,MACL;AAAA,EACF;AAGA,SAAO;AACR;",
+  "names": []
+}

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";
@@ -55,7 +56,10 @@ import {
 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 GalleryGapCustomProperties 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,
@@ -699,20 +773,28 @@ function GalleryEdit(props) {
         }
       ) }),
       /* @__PURE__ */ jsx(
-        GapStyles,
+        GalleryGapCustomProperties,
         {
-          blockGap: attributes.style?.spacing?.blockGap,
+          style: attributes.style,
           clientId
         }
       )
     ] }),
-    /* @__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