@wordpress/block-library 10.4.0 → 10.5.2-next.v.202608281122.0

package/build-module/gallery/edit.mjs

@@ -1,4 +1,4 @@
-// packages/block-library/src/gallery/edit.js
+// packages/block-library/src/gallery/edit.jsx
 import clsx from "clsx";
 import {
   SelectControl,
@@ -24,7 +24,7 @@ import {
   MediaReplaceFlow,
   useSettings
 } from "@wordpress/block-editor";
-import { useEffect, useMemo } from "@wordpress/element";
+import { useEffect, useMemo, useRef } from "@wordpress/element";
 import { __, _x, sprintf } from "@wordpress/i18n";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { createBlock } from "@wordpress/blocks";
@@ -38,7 +38,12 @@ import {
   fullscreen
 } from "@wordpress/icons";
 import { sharedIcon } from "./shared-icon.mjs";
-import { defaultColumnsNumber, pickRelevantMediaFiles } from "./shared.mjs";
+import {
+  defaultColumnsNumber,
+  isGalleryFlexLayout,
+  isObject,
+  pickRelevantMediaFiles
+} from "./shared.mjs";
 import { getHrefAndDestination } from "./utils.mjs";
 import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
 import {
@@ -51,17 +56,23 @@ import {
   LINK_DESTINATION_MEDIA,
   LINK_DESTINATION_NONE,
   LINK_DESTINATION_LIGHTBOX,
-  DEFAULT_MEDIA_SIZE_SLUG
+  DEFAULT_MEDIA_SIZE_SLUG,
+  MAX_COLUMNS
 } from "./constants.mjs";
 import useImageSizes from "./use-image-sizes.mjs";
 import useGetNewImages from "./use-get-new-images.mjs";
 import useGetMedia from "./use-get-media.mjs";
-import GalleryGapCustomProperties from "./gap-styles.mjs";
+import GalleryFlexStyles from "./flex-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 { unlock } from "../lock-unlock.mjs";
+import {
+  getViewportGalleryStyle,
+  getUpdatedGalleryStyle,
+  isValidGalleryColumns
+} from "./responsive-styles.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MAX_COLUMNS = 8;
 var LINK_OPTIONS = [
   {
     icon: customLink,
@@ -142,8 +153,11 @@ function GalleryEdit(props) {
     linkTarget,
     linkTo,
     sizeSlug,
-    aspectRatio
+    aspectRatio,
+    layout
   } = attributes;
+  const isFlexLayout = isGalleryFlexLayout(layout);
+  const previousLayoutRef = useRef(layout);
   const {
     __unstableMarkNextChangeAsNotPersistent,
     replaceInnerBlocks,
@@ -151,14 +165,43 @@ function GalleryEdit(props) {
     selectBlock
   } = useDispatch(blockEditorStore);
   const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);
-  const { getBlock, getSettings, innerBlockImages, multiGallerySelection } = useSelect(
+  useEffect(() => {
+    const previousLayout = previousLayoutRef.current;
+    previousLayoutRef.current = layout;
+    if (!isObject(previousLayout) || !isObject(layout) || previousLayout.type === layout.type) {
+      return;
+    }
+    const nextLayout = { ...layout };
+    let hasPreservedGridSetting = false;
+    if (!Object.hasOwn(layout, "columnCount") && Number.isInteger(previousLayout.columnCount) && previousLayout.columnCount > 0) {
+      nextLayout.columnCount = previousLayout.columnCount;
+      hasPreservedGridSetting = true;
+    }
+    if (!Object.hasOwn(layout, "minimumColumnWidth") && typeof previousLayout.minimumColumnWidth === "string") {
+      nextLayout.minimumColumnWidth = previousLayout.minimumColumnWidth;
+      hasPreservedGridSetting = true;
+    }
+    if (hasPreservedGridSetting) {
+      previousLayoutRef.current = nextLayout;
+      __unstableMarkNextChangeAsNotPersistent();
+      setAttributes({ layout: nextLayout });
+    }
+  }, [layout, setAttributes, __unstableMarkNextChangeAsNotPersistent]);
+  const {
+    getBlock,
+    getSettings,
+    innerBlockImages,
+    multiGallerySelection,
+    selectedStyleState
+  } = useSelect(
     (select) => {
       const {
         getBlockName,
         getMultiSelectedBlockClientIds,
         getSettings: _getSettings,
-        getBlock: _getBlock
-      } = select(blockEditorStore);
+        getBlock: _getBlock,
+        getSelectedBlockStyleState
+      } = unlock(select(blockEditorStore));
       const multiSelectedClientIds = getMultiSelectedBlockClientIds();
       return {
         getBlock: _getBlock,
@@ -166,11 +209,23 @@ function GalleryEdit(props) {
         innerBlockImages: _getBlock(clientId)?.innerBlocks ?? EMPTY_ARRAY,
         multiGallerySelection: multiSelectedClientIds.length && multiSelectedClientIds.every(
           (_clientId) => getBlockName(_clientId) === "core/gallery"
-        )
+        ),
+        selectedStyleState: getSelectedBlockStyleState(clientId)
       };
     },
     [clientId]
   );
+  const isViewportStyleState = selectedStyleState?.viewport && selectedStyleState.viewport !== "default";
+  const viewportStyle = isViewportStyleState ? getViewportGalleryStyle(
+    attributes.style,
+    selectedStyleState.viewport
+  ) : {};
+  const baseColumns = isValidGalleryColumns(columns) ? columns : void 0;
+  const baseImageCrop = typeof imageCrop === "boolean" ? imageCrop : true;
+  const hasViewportColumns = isViewportStyleState && Object.hasOwn(viewportStyle, "columns") && isValidGalleryColumns(viewportStyle.columns);
+  const hasViewportImageCrop = isViewportStyleState && Object.hasOwn(viewportStyle, "imageCrop") && typeof viewportStyle.imageCrop === "boolean";
+  const activeColumns = hasViewportColumns ? viewportStyle.columns : baseColumns;
+  const activeImageCrop = hasViewportImageCrop ? viewportStyle.imageCrop : baseImageCrop;
   const images = useMemo(
     () => innerBlockImages?.map((block) => ({
       clientId: block.clientId,
@@ -371,11 +426,28 @@ function GalleryEdit(props) {
       }
     );
   }
+  function setGalleryFlexSettings(settings) {
+    if (!isViewportStyleState) {
+      setAttributes(settings);
+      return;
+    }
+    setAttributes({
+      style: getUpdatedGalleryStyle({
+        style: attributes.style,
+        viewport: selectedStyleState.viewport,
+        baseSettings: {
+          columns: baseColumns,
+          imageCrop: baseImageCrop
+        },
+        settings
+      })
+    });
+  }
   function setColumnsNumber(value) {
-    setAttributes({ columns: value });
+    setGalleryFlexSettings({ columns: value });
   }
   function toggleImageCrop() {
-    setAttributes({ imageCrop: !imageCrop });
+    setGalleryFlexSettings({ imageCrop: !activeImageCrop });
   }
   function toggleRandomOrder() {
     setAttributes({ randomOrder: !randomOrder });
@@ -478,9 +550,10 @@ function GalleryEdit(props) {
     className: clsx(
       className,
       "has-nested-images",
+      `wp-block-gallery-${clientId}`,
       // 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`)
+      // component normally composes onto the `<figure>` (see `gallery.jsx`)
       // must be added here to keep the preview's flex/crop layout matching
       // the static gallery and the frontend.
       isDynamic && [
@@ -488,9 +561,9 @@ function GalleryEdit(props) {
         "blocks-gallery-grid",
         {
           [`align${align}`]: align,
-          [`columns-${columns}`]: columns !== void 0,
-          "columns-default": columns === void 0,
-          "is-cropped": imageCrop
+          [`columns-${columns}`]: isFlexLayout && columns !== void 0,
+          "columns-default": isFlexLayout && columns === void 0,
+          "is-cropped": isFlexLayout && imageCrop
         }
       ]
     )
@@ -545,194 +618,211 @@ function GalleryEdit(props) {
   }
   const hasLinkTo = linkTo && linkTo !== "none";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__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);
-            }
-            if (linkTarget) {
-              toggleOpenInNewTab(false);
+    /* @__PURE__ */ jsxs(
+      InspectorControls,
+      {
+        group: isViewportStyleState && isFlexLayout ? "viewport" : "default",
+        children: [
+          !isViewportStyleState && /* @__PURE__ */ jsx(
+            GallerySourcePanel,
+            {
+              dynamic,
+              dropdownMenuProps,
+              hasImages
             }
-          },
-          dropdownMenuProps,
-          children: [
-            displayedImageCount > 1 && /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Columns"),
-                hasValue: () => !!columns && columns !== displayedImageCount,
-                onDeselect: () => setColumnsNumber(void 0),
-                children: /* @__PURE__ */ jsx(
-                  RangeControl,
+          ),
+          /* @__PURE__ */ jsxs(
+            ToolsPanel,
+            {
+              label: __("Settings"),
+              resetAll: () => {
+                if (isViewportStyleState) {
+                  setGalleryFlexSettings({
+                    columns: void 0,
+                    imageCrop: void 0
+                  });
+                  return;
+                }
+                setAttributes({
+                  navigationButtonType: "icon",
+                  randomOrder: false,
+                  ...isFlexLayout && {
+                    columns: void 0,
+                    imageCrop: true
+                  }
+                });
+                setAspectRatio("auto");
+                if (sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG) {
+                  updateImagesSize(DEFAULT_MEDIA_SIZE_SLUG);
+                }
+                if (linkTarget) {
+                  toggleOpenInNewTab(false);
+                }
+              },
+              dropdownMenuProps,
+              children: [
+                isFlexLayout && displayedImageCount > 1 && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: __("Columns"),
-                    value: columns ? columns : defaultColumnsNumber(
-                      displayedImageCount
-                    ),
-                    onChange: setColumnsNumber,
-                    min: 1,
-                    max: Math.min(
-                      MAX_COLUMNS,
-                      displayedImageCount
-                    ),
-                    required: true
+                    hasValue: () => isViewportStyleState ? hasViewportColumns : !!activeColumns && activeColumns !== displayedImageCount,
+                    onDeselect: () => setColumnsNumber(void 0),
+                    children: /* @__PURE__ */ jsx(
+                      RangeControl,
+                      {
+                        label: __("Columns"),
+                        value: activeColumns ? activeColumns : 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,
+                ),
+                !isViewportStyleState && imageSizeOptions?.length > 0 && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: __("Resolution"),
-                    help: __(
-                      "Select the size of the source images."
-                    ),
-                    value: sizeSlug,
-                    options: imageSizeOptions,
-                    onChange: updateImagesSize,
-                    hideCancelButton: true
+                    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,
+                ),
+                isFlexLayout && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: __("Crop images to fit"),
-                    checked: !!imageCrop,
-                    onChange: toggleImageCrop
+                    hasValue: () => isViewportStyleState ? hasViewportImageCrop : !activeImageCrop,
+                    onDeselect: () => setGalleryFlexSettings({
+                      imageCrop: isViewportStyleState ? void 0 : true
+                    }),
+                    children: /* @__PURE__ */ jsx(
+                      ToggleControl,
+                      {
+                        label: __("Crop images to fit"),
+                        checked: activeImageCrop,
+                        onChange: toggleImageCrop
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ToolsPanelItem,
-              {
-                isShownByDefault: true,
-                label: __("Randomize order"),
-                hasValue: () => !!randomOrder,
-                onDeselect: () => setAttributes({ randomOrder: false }),
-                children: /* @__PURE__ */ jsx(
-                  ToggleControl,
+                ),
+                !isViewportStyleState && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: __("Randomize order"),
-                    checked: !!randomOrder,
-                    onChange: toggleRandomOrder
+                    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,
+                ),
+                !isViewportStyleState && hasLinkTo && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: __("Open images in new tab"),
-                    checked: linkTarget === "_blank",
-                    onChange: toggleOpenInNewTab
+                    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,
+                ),
+                !isViewportStyleState && aspectRatioOptions.length > 1 && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
+                    hasValue: () => !!aspectRatio && aspectRatio !== "auto",
                     label: __("Aspect ratio"),
-                    help: __(
-                      "Set a consistent aspect ratio for all images in the gallery."
-                    ),
-                    value: aspectRatio,
-                    options: aspectRatioOptions,
-                    onChange: setAspectRatio
+                    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,
+                ),
+                !isViewportStyleState && lightboxSetting?.allowEditing && hasLightboxImages && /* @__PURE__ */ jsx(
+                  ToolsPanelItem,
                   {
                     label: __("Navigation button type"),
-                    value: navigationButtonType,
-                    onChange: (value) => setAttributes({
-                      navigationButtonType: value
+                    isShownByDefault: true,
+                    hasValue: () => navigationButtonType !== "icon",
+                    onDeselect: () => setAttributes({
+                      navigationButtonType: "icon"
                     }),
-                    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
-                      )
+                    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(
@@ -772,8 +862,8 @@ function GalleryEdit(props) {
           variant: "toolbar"
         }
       ) }),
-      /* @__PURE__ */ jsx(
-        GalleryGapCustomProperties,
+      isFlexLayout && /* @__PURE__ */ jsx(
+        GalleryFlexStyles,
         {
           style: attributes.style,
           clientId