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

package/build/gallery/dynamic-gallery.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/gallery/dynamic-gallery.js"],
-  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport {\n\tButton,\n\tNotice,\n\tPanelBody,\n\tPlaceholder,\n\tSelectControl,\n\tSpinner,\n\tToolbarButton,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalConfirmDialog as ConfirmDialog,\n} from '@wordpress/components';\nimport {\n\tBlockContextProvider,\n\tBlockControls,\n\tuseBlockEditingMode,\n\t__experimentalUseBlockPreview as useBlockPreview,\n} from '@wordpress/block-editor';\nimport { sharedIcon } from './shared-icon';\nimport { Caption } from '../utils/caption';\nimport { DEFAULT_ORDERBY, DEFAULT_ORDER, MAX_IMAGES } from './dynamic-source';\n\n/**\n * Ordering options for a dynamic gallery source. Each value is a composite\n * `\"orderby/order\"` string mapping to the matching `/wp/v2/media` collection\n * params. `menu_order` is deliberately omitted — it isn't a valid REST `orderby`\n * value, so the editor preview couldn't reproduce it (see `dynamic-source.js`).\n */\nconst ORDER_OPTIONS = [\n\t{ label: __( 'Newest to oldest' ), value: 'date/desc' },\n\t{ label: __( 'Oldest to newest' ), value: 'date/asc' },\n\t{\n\t\t/* translators: Label for ordering images by title in ascending order. */\n\t\tlabel: __( 'A → Z' ),\n\t\tvalue: 'title/asc',\n\t},\n\t{\n\t\t/* translators: Label for ordering images by title in descending order. */\n\t\tlabel: __( 'Z → A' ),\n\t\tvalue: 'title/desc',\n\t},\n];\n\n/**\n * \"Order by\" control for a dynamic gallery, mirroring the Query Loop block's\n * `OrderControl`: a single `SelectControl` whose value composites `orderby` and\n * `order`, split apart again on change.\n *\n * @param {Object}   props\n * @param {string}   props.orderby  Current `orderby` value.\n * @param {string}   props.order    Current `order` value (`asc`/`desc`).\n * @param {Function} props.onChange Called with `{ orderby, order }` on change.\n */\nfunction OrderControl( { orderby, order, onChange } ) {\n\treturn (\n\t\t<SelectControl\n\t\t\tlabel={ __( 'Order by' ) }\n\t\t\tvalue={ `${ orderby }/${ order }` }\n\t\t\toptions={ ORDER_OPTIONS }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst [ newOrderby, newOrder ] = value.split( '/' );\n\t\t\t\tonChange( { orderby: newOrderby, order: newOrder } );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\n/**\n * Confirmation for leaving dynamic mode, shown from both the block toolbar and\n * the Source panel so the two entry points explain the change identically.\n *\n * Detaching keeps the images the gallery currently shows but breaks the link to\n * its source, so it's worth confirming — mirroring the dialog `GallerySourcePanel`\n * shows for the opposite direction.\n *\n * @param {Object}   props\n * @param {Function} props.onConfirm Called when the user confirms detaching.\n * @param {Function} props.onCancel  Called when the user dismisses the dialog.\n */\nfunction DetachGalleryDialog( { onConfirm, onCancel } ) {\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen\n\t\t\ttitle={ __( 'Detach Gallery' ) }\n\t\t\t__experimentalHideHeader={ false }\n\t\t\tconfirmButtonText={ __( 'Detach' ) }\n\t\t\tonConfirm={ onConfirm }\n\t\t\tonCancel={ onCancel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t{ __(\n\t\t\t\t'The gallery displays the images attached to the post. Detaching will enable you to add, delete, or reorder images. However, new attachments will no longer be added automatically.'\n\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\n/**\n * The Gallery block's \"Source\" inspector panel.\n *\n * In dynamic mode it shows the resolved source, a control to detach the gallery\n * from it, and the source ordering. In static mode it offers the entry point\n * into dynamic mode. Either direction is a one-way change, so both are behind a\n * confirmation dialog this panel owns. Rendered inside the block's\n * `InspectorControls`, alongside the Settings panel.\n *\n * @param {Object}  props\n * @param {Object}  props.dynamic           The `useDynamicGallery` result.\n * @param {Object}  props.dropdownMenuProps Shared ToolsPanel dropdown menu props.\n * @param {boolean} props.hasImages         Whether the gallery has manually-added images.\n */\nexport function GallerySourcePanel( {\n\tdynamic,\n\tdropdownMenuProps,\n\thasImages,\n} ) {\n\tconst {\n\t\tdynamicContent,\n\t\tcanUseDynamicSource,\n\t\tsourceDescriptor,\n\t\tsourceOrderby,\n\t\tsourceOrder,\n\t\tsetSourceOrder,\n\t\tconvertToStatic,\n\t\tenableDynamicMode,\n\t\tresetSource,\n\t\tisResolvingDynamic,\n\t\thasMoreImagesThanCap,\n\t\tdynamicMediaTotal,\n\t} = dynamic;\n\tconst isDynamic = !! dynamicContent;\n\n\tconst [ isConfirming, setIsConfirming ] = useState( false );\n\tconst [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );\n\n\t// Entering dynamic mode discards any hand-added images, so confirm first\n\t// when there are images to lose; otherwise switch straight away.\n\tfunction requestEnableDynamicMode() {\n\t\tif ( hasImages ) {\n\t\t\tsetIsConfirming( true );\n\t\t} else {\n\t\t\tenableDynamicMode();\n\t\t}\n\t}\n\n\tif ( isDynamic ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Source' ) }\n\t\t\t\t\tresetAll={ resetSource }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"wp-block-gallery__source-settings\">\n\t\t\t\t\t\t<p className=\"wp-block-gallery__source-description\">\n\t\t\t\t\t\t\t{ sourceDescriptor?.description ??\n\t\t\t\t\t\t\t\t__( 'Dynamic images.' ) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ () => setIsConfirmingDetach( true ) }\n\t\t\t\t\t\t\t// Guard the race where the media is still resolving:\n\t\t\t\t\t\t\t// detaching now would map over an incomplete (or\n\t\t\t\t\t\t\t// empty) list and produce a gallery missing images.\n\t\t\t\t\t\t\tdisabled={ isResolvingDynamic }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Detach Gallery' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ hasMoreImagesThanCap && (\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tclassName=\"wp-block-gallery__source-notice\"\n\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t/* translators: 1: number of images shown. 2: total number of matching images. */\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Only the first %1$d of %2$d images will be displayed.'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tMAX_IMAGES,\n\t\t\t\t\t\t\t\tdynamicMediaTotal\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\thasValue={ () =>\n\t\t\t\t\t\t\tsourceOrderby !== DEFAULT_ORDERBY ||\n\t\t\t\t\t\t\tsourceOrder !== DEFAULT_ORDER\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetSourceOrder( undefined, undefined )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OrderControl\n\t\t\t\t\t\t\torderby={ sourceOrderby }\n\t\t\t\t\t\t\torder={ sourceOrder }\n\t\t\t\t\t\t\tonChange={ ( { orderby, order } ) =>\n\t\t\t\t\t\t\t\tsetSourceOrder( orderby, order )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t\t{ isConfirmingDetach && (\n\t\t\t\t\t<DetachGalleryDialog\n\t\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\t\tconvertToStatic();\n\t\t\t\t\t\t\tsetIsConfirmingDetach( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonCancel={ () => setIsConfirmingDetach( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\t// In static mode this panel is just an entry into dynamic mode, so hide it\n\t// when there's no post type to preview against. This is intentionally\n\t// stricter than the placeholder's entry button (see `edit.js`), which stays\n\t// available anywhere because the source resolves at render time.\n\tif ( ! canUseDynamicSource ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ __( 'Source' ) }>\n\t\t\t\t<div className=\"wp-block-gallery__source-settings\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t * Hardcoded on purpose: this single-source entry button (and\n\t\t\t\t\t * its confirm dialog below) is temporary. Once more sources\n\t\t\t\t\t * exist it becomes a \"Choose source\" select whose options read\n\t\t\t\t\t * from each source descriptor's `title`, with help text\n\t\t\t\t\t * carrying the per-source explanation this string does today.\n\t\t\t\t\t */ }\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ requestEnableDynamicMode }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Use images attached to the post' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</PanelBody>\n\t\t\t{ isConfirming && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen\n\t\t\t\t\ttitle={ __( 'Use images attached to the post?' ) }\n\t\t\t\t\t__experimentalHideHeader={ false }\n\t\t\t\t\tconfirmButtonText={ __( 'Use attached images' ) }\n\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\tenableDynamicMode();\n\t\t\t\t\t\tsetIsConfirming( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCancel={ () => setIsConfirming( false ) }\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'The images in this gallery will be replaced, but will remain in the media library.'\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Renders the resolved image blocks as a read-only preview.\n *\n * `useBlockPreview` returns a `useDisabled` ref that makes its subtree inert, so\n * previewed images (including any links) aren't interactive in the editor. The\n * ref needs a real element, yet the images must stay flex children of the gallery\n * `<figure>` and sit beside an editable caption. `display: contents` resolves\n * this: the wrapper carries the ref but generates no box, so the image figures\n * remain the figure's flex items and only they are disabled — the caption sibling\n * stays editable. This relies on the gallery's image styles using descendant\n * (not direct-child) selectors, which the box-less wrapper leaves intact.\n *\n * @param {Object}   props\n * @param {Object[]} props.imageBlocks Non-persisted `core/image` blocks to preview.\n */\nfunction GalleryImagesPreview( { imageBlocks } ) {\n\tconst { children, ref, className } = useBlockPreview( {\n\t\tblocks: imageBlocks,\n\t} );\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ className }\n\t\t\tstyle={ { display: 'contents' } }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * Renders a dynamic-mode gallery on the canvas:\n *\n * - a block-toolbar control to detach the gallery from its source, confirmed in\n *   a dialog;\n * - the gallery `<figure>` wrapper holding a non-editable preview of the\n *   resolved media (or a placeholder while resolving / when nothing is found),\n *   with the gallery's provided context so the previewed images inherit\n *   gallery-wide settings;\n * - an editable gallery-level caption, alongside the read-only preview;\n * - the (empty) inner blocks kept mounted so the container's `allowedBlocks: []`\n *   keeps syncing to block list settings (which blocks insertion and hides the\n *   List View).\n *\n * @param {Object}   props\n * @param {Object}   props.dynamic               The `useDynamicGallery` result.\n * @param {Object}   props.blockProps            The gallery's `useBlockProps()` result.\n * @param {Object}   props.innerBlocksProps      The gallery's `useInnerBlocksProps()` result.\n * @param {Object}   props.attributes            The gallery block attributes.\n * @param {Function} props.setAttributes         The block's `setAttributes`.\n * @param {boolean}  props.isSelected            Whether the gallery block is selected.\n * @param {Function} props.insertBlocksAfter     Inserts blocks after the gallery.\n * @param {boolean}  props.isContentLocked       Whether the gallery is content-locked.\n * @param {boolean}  props.multiGallerySelection Whether multiple galleries are selected.\n */\nexport function GalleryDynamicView( {\n\tdynamic,\n\tblockProps,\n\tinnerBlocksProps,\n\tattributes,\n\tsetAttributes,\n\tisSelected,\n\tinsertBlocksAfter,\n\tisContentLocked,\n\tmultiGallerySelection,\n} ) {\n\tconst {\n\t\tsourceDescriptor,\n\t\tdynamicImageBlocks,\n\t\tgalleryContext,\n\t\tisResolvingDynamic,\n\t\tconvertToStatic,\n\t} = dynamic;\n\n\t// Detaching the gallery materializes editable inner blocks, which is a\n\t// structural change. Only offer it when the block is fully editable:\n\t// under a content lock (e.g. inside a `contentOnly` group) the editing mode\n\t// is `'contentOnly'`/`'disabled'`, where structural toolbar controls are\n\t// hidden and the conversion shouldn't be possible.\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tconst [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );\n\n\t// Empty-state copy for the preview. Framed as forward-looking (\"… will appear\n\t// here\") rather than as an error, since the same empty result covers both a\n\t// post with no matching images and a template with no post in context yet —\n\t// in either case the source simply resolves to nothing right now. The per-\n\t// source wording comes from the source descriptor.\n\tconst emptyInstructions = isResolvingDynamic\n\t\t? __( 'Loading images…' )\n\t\t: sourceDescriptor?.emptyMessage ??\n\t\t  __( 'Dynamic images will appear here.' );\n\n\treturn (\n\t\t<>\n\t\t\t{ blockEditingMode === 'default' && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\tonClick={ () => setIsConfirmingDetach( true ) }\n\t\t\t\t\t\t\t// Same guard as the inspector's \"Detach Gallery\": both end in\n\t\t\t\t\t\t\t// `convertToStatic`, which would map over a\n\t\t\t\t\t\t\t// still-resolving (or empty) media list.\n\t\t\t\t\t\t\t// (`ToolbarButton` stays focusable when disabled by\n\t\t\t\t\t\t\t// default.)\n\t\t\t\t\t\t\tdisabled={ isResolvingDynamic }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Detach' ) }\n\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t\t{ isConfirmingDetach && (\n\t\t\t\t\t\t<DetachGalleryDialog\n\t\t\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\t\t\tconvertToStatic();\n\t\t\t\t\t\t\t\tsetIsConfirmingDetach( false );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCancel={ () => setIsConfirmingDetach( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<figure { ...blockProps }>\n\t\t\t\t{ dynamicImageBlocks.length ? (\n\t\t\t\t\t<BlockContextProvider value={ galleryContext }>\n\t\t\t\t\t\t<GalleryImagesPreview\n\t\t\t\t\t\t\timageBlocks={ dynamicImageBlocks }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockContextProvider>\n\t\t\t\t) : (\n\t\t\t\t\t<Placeholder\n\t\t\t\t\t\ticon={ sharedIcon }\n\t\t\t\t\t\tlabel={ __( 'Gallery' ) }\n\t\t\t\t\t\tinstructions={ emptyInstructions }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isResolvingDynamic && <Spinner /> }\n\t\t\t\t\t</Placeholder>\n\t\t\t\t) }\n\t\t\t\t<Caption\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tshowToolbarButton={\n\t\t\t\t\t\t! multiGallerySelection && ! isContentLocked\n\t\t\t\t\t}\n\t\t\t\t\tclassName=\"blocks-gallery-caption\"\n\t\t\t\t\tlabel={ __( 'Gallery caption text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add gallery caption' ) }\n\t\t\t\t/>\n\t\t\t</figure>\n\t\t\t{ /*\n\t\t\t * Dynamic mode shows a preview instead of real inner blocks, but the\n\t\t\t * empty inner blocks are still rendered here for their side effect:\n\t\t\t * the `allowedBlocks: []` passed to `useInnerBlocksProps` only syncs\n\t\t\t * to block list settings while the inner blocks are mounted (via\n\t\t\t * `useNestedSettingsUpdate`). That setting is what blocks insertion\n\t\t\t * (`canInsertBlockType`) and hides the now-unusable List View\n\t\t\t * (`shouldRenderBlockListView`). With no inner blocks and no appender,\n\t\t\t * this renders no output of its own.\n\t\t\t */ }\n\t\t\t{ innerBlocksProps.children }\n\t\t</>\n\t);\n}\n"],
+  "sources": ["../../src/gallery/dynamic-gallery.jsx"],
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport {\n\tButton,\n\tNotice,\n\tPanelBody,\n\tPlaceholder,\n\tSelectControl,\n\tSpinner,\n\tToolbarButton,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalConfirmDialog as ConfirmDialog,\n} from '@wordpress/components';\nimport {\n\tBlockContextProvider,\n\tBlockControls,\n\tuseBlockEditingMode,\n\t__experimentalUseBlockPreview as useBlockPreview,\n} from '@wordpress/block-editor';\nimport { sharedIcon } from './shared-icon';\nimport { Caption } from '../utils/caption';\nimport { DEFAULT_ORDERBY, DEFAULT_ORDER, MAX_IMAGES } from './dynamic-source';\n\n/**\n * Ordering options for a dynamic gallery source. Each value is a composite\n * `\"orderby/order\"` string mapping to the matching `/wp/v2/media` collection\n * params. `menu_order` is deliberately omitted — it isn't a valid REST `orderby`\n * value, so the editor preview couldn't reproduce it (see `dynamic-source.js`).\n */\nconst ORDER_OPTIONS = [\n\t{ label: __( 'Newest to oldest' ), value: 'date/desc' },\n\t{ label: __( 'Oldest to newest' ), value: 'date/asc' },\n\t{\n\t\t/* translators: Label for ordering images by title in ascending order. */\n\t\tlabel: __( 'A → Z' ),\n\t\tvalue: 'title/asc',\n\t},\n\t{\n\t\t/* translators: Label for ordering images by title in descending order. */\n\t\tlabel: __( 'Z → A' ),\n\t\tvalue: 'title/desc',\n\t},\n];\n\n/**\n * \"Order by\" control for a dynamic gallery, mirroring the Query Loop block's\n * `OrderControl`: a single `SelectControl` whose value composites `orderby` and\n * `order`, split apart again on change.\n *\n * @param {Object}   props\n * @param {string}   props.orderby  Current `orderby` value.\n * @param {string}   props.order    Current `order` value (`asc`/`desc`).\n * @param {Function} props.onChange Called with `{ orderby, order }` on change.\n */\nfunction OrderControl( { orderby, order, onChange } ) {\n\treturn (\n\t\t<SelectControl\n\t\t\tlabel={ __( 'Order by' ) }\n\t\t\tvalue={ `${ orderby }/${ order }` }\n\t\t\toptions={ ORDER_OPTIONS }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst [ newOrderby, newOrder ] = value.split( '/' );\n\t\t\t\tonChange( { orderby: newOrderby, order: newOrder } );\n\t\t\t} }\n\t\t/>\n\t);\n}\n\n/**\n * Confirmation for leaving dynamic mode, shown from both the block toolbar and\n * the Source panel so the two entry points explain the change identically.\n *\n * Detaching keeps the images the gallery currently shows but breaks the link to\n * its source, so it's worth confirming — mirroring the dialog `GallerySourcePanel`\n * shows for the opposite direction.\n *\n * @param {Object}   props\n * @param {Function} props.onConfirm Called when the user confirms detaching.\n * @param {Function} props.onCancel  Called when the user dismisses the dialog.\n */\nfunction DetachGalleryDialog( { onConfirm, onCancel } ) {\n\treturn (\n\t\t<ConfirmDialog\n\t\t\tisOpen\n\t\t\ttitle={ __( 'Detach Gallery' ) }\n\t\t\t__experimentalHideHeader={ false }\n\t\t\tconfirmButtonText={ __( 'Detach' ) }\n\t\t\tonConfirm={ onConfirm }\n\t\t\tonCancel={ onCancel }\n\t\t\tsize=\"medium\"\n\t\t>\n\t\t\t{ __(\n\t\t\t\t'The gallery displays the images attached to the post. Detaching will enable you to add, delete, or reorder images. However, new attachments will no longer be added automatically.'\n\t\t\t) }\n\t\t</ConfirmDialog>\n\t);\n}\n\n/**\n * The Gallery block's \"Source\" inspector panel.\n *\n * In dynamic mode it shows the resolved source, a control to detach the gallery\n * from it, and the source ordering. In static mode it offers the entry point\n * into dynamic mode. Either direction is a one-way change, so both are behind a\n * confirmation dialog this panel owns. Rendered inside the block's\n * `InspectorControls`, alongside the Settings panel.\n *\n * @param {Object}  props\n * @param {Object}  props.dynamic           The `useDynamicGallery` result.\n * @param {Object}  props.dropdownMenuProps Shared ToolsPanel dropdown menu props.\n * @param {boolean} props.hasImages         Whether the gallery has manually-added images.\n */\nexport function GallerySourcePanel( {\n\tdynamic,\n\tdropdownMenuProps,\n\thasImages,\n} ) {\n\tconst {\n\t\tdynamicContent,\n\t\tcanUseDynamicSource,\n\t\tsourceDescriptor,\n\t\tsourceOrderby,\n\t\tsourceOrder,\n\t\tsetSourceOrder,\n\t\tconvertToStatic,\n\t\tenableDynamicMode,\n\t\tresetSource,\n\t\tisResolvingDynamic,\n\t\thasMoreImagesThanCap,\n\t\tdynamicMediaTotal,\n\t} = dynamic;\n\tconst isDynamic = !! dynamicContent;\n\n\tconst [ isConfirming, setIsConfirming ] = useState( false );\n\tconst [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );\n\n\t// Entering dynamic mode discards any hand-added images, so confirm first\n\t// when there are images to lose; otherwise switch straight away.\n\tfunction requestEnableDynamicMode() {\n\t\tif ( hasImages ) {\n\t\t\tsetIsConfirming( true );\n\t\t} else {\n\t\t\tenableDynamicMode();\n\t\t}\n\t}\n\n\tif ( isDynamic ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Source' ) }\n\t\t\t\t\tresetAll={ resetSource }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<div className=\"wp-block-gallery__source-settings\">\n\t\t\t\t\t\t<p className=\"wp-block-gallery__source-description\">\n\t\t\t\t\t\t\t{ sourceDescriptor?.description ??\n\t\t\t\t\t\t\t\t__( 'Dynamic images.' ) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ () => setIsConfirmingDetach( true ) }\n\t\t\t\t\t\t\t// Guard the race where the media is still resolving:\n\t\t\t\t\t\t\t// detaching now would map over an incomplete (or\n\t\t\t\t\t\t\t// empty) list and produce a gallery missing images.\n\t\t\t\t\t\t\tdisabled={ isResolvingDynamic }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Detach Gallery' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ hasMoreImagesThanCap && (\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tclassName=\"wp-block-gallery__source-notice\"\n\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t/* translators: 1: number of images shown. 2: total number of matching images. */\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Only the first %1$d of %2$d images will be displayed.'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tMAX_IMAGES,\n\t\t\t\t\t\t\t\tdynamicMediaTotal\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\thasValue={ () =>\n\t\t\t\t\t\t\tsourceOrderby !== DEFAULT_ORDERBY ||\n\t\t\t\t\t\t\tsourceOrder !== DEFAULT_ORDER\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetSourceOrder( undefined, undefined )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OrderControl\n\t\t\t\t\t\t\torderby={ sourceOrderby }\n\t\t\t\t\t\t\torder={ sourceOrder }\n\t\t\t\t\t\t\tonChange={ ( { orderby, order } ) =>\n\t\t\t\t\t\t\t\tsetSourceOrder( orderby, order )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t\t{ isConfirmingDetach && (\n\t\t\t\t\t<DetachGalleryDialog\n\t\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\t\tconvertToStatic();\n\t\t\t\t\t\t\tsetIsConfirmingDetach( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonCancel={ () => setIsConfirmingDetach( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n\n\t// In static mode this panel is just an entry into dynamic mode, so hide it\n\t// when there's no post type to preview against. This is intentionally\n\t// stricter than the placeholder's entry button (see `edit.jsx`), which stays\n\t// available anywhere because the source resolves at render time.\n\tif ( ! canUseDynamicSource ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ __( 'Source' ) }>\n\t\t\t\t<div className=\"wp-block-gallery__source-settings\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t * Hardcoded on purpose: this single-source entry button (and\n\t\t\t\t\t * its confirm dialog below) is temporary. Once more sources\n\t\t\t\t\t * exist it becomes a \"Choose source\" select whose options read\n\t\t\t\t\t * from each source descriptor's `title`, with help text\n\t\t\t\t\t * carrying the per-source explanation this string does today.\n\t\t\t\t\t */ }\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ requestEnableDynamicMode }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Use images attached to the post' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</PanelBody>\n\t\t\t{ isConfirming && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen\n\t\t\t\t\ttitle={ __( 'Use images attached to the post?' ) }\n\t\t\t\t\t__experimentalHideHeader={ false }\n\t\t\t\t\tconfirmButtonText={ __( 'Use attached images' ) }\n\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\tenableDynamicMode();\n\t\t\t\t\t\tsetIsConfirming( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCancel={ () => setIsConfirming( false ) }\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'The images in this gallery will be replaced, but will remain in the media library.'\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Renders the resolved image blocks as a read-only preview.\n *\n * `useBlockPreview` returns a `useDisabled` ref that makes its subtree inert, so\n * previewed images (including any links) aren't interactive in the editor. The\n * ref needs a real element, yet the images must stay flex children of the gallery\n * `<figure>` and sit beside an editable caption. `display: contents` resolves\n * this: the wrapper carries the ref but generates no box, so the image figures\n * remain the figure's flex items and only they are disabled — the caption sibling\n * stays editable. This relies on the gallery's image styles using descendant\n * (not direct-child) selectors, which the box-less wrapper leaves intact.\n *\n * @param {Object}   props\n * @param {Object[]} props.imageBlocks Non-persisted `core/image` blocks to preview.\n */\nfunction GalleryImagesPreview( { imageBlocks } ) {\n\tconst { children, ref, className } = useBlockPreview( {\n\t\tblocks: imageBlocks,\n\t} );\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ className }\n\t\t\tstyle={ { display: 'contents' } }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * Renders a dynamic-mode gallery on the canvas:\n *\n * - a block-toolbar control to detach the gallery from its source, confirmed in\n *   a dialog;\n * - the gallery `<figure>` wrapper holding a non-editable preview of the\n *   resolved media (or a placeholder while resolving / when nothing is found),\n *   with the gallery's provided context so the previewed images inherit\n *   gallery-wide settings;\n * - an editable gallery-level caption, alongside the read-only preview;\n * - the (empty) inner blocks kept mounted so the container's `allowedBlocks: []`\n *   keeps syncing to block list settings (which blocks insertion and hides the\n *   List View).\n *\n * @param {Object}   props\n * @param {Object}   props.dynamic               The `useDynamicGallery` result.\n * @param {Object}   props.blockProps            The gallery's `useBlockProps()` result.\n * @param {Object}   props.innerBlocksProps      The gallery's `useInnerBlocksProps()` result.\n * @param {Object}   props.attributes            The gallery block attributes.\n * @param {Function} props.setAttributes         The block's `setAttributes`.\n * @param {boolean}  props.isSelected            Whether the gallery block is selected.\n * @param {Function} props.insertBlocksAfter     Inserts blocks after the gallery.\n * @param {boolean}  props.isContentLocked       Whether the gallery is content-locked.\n * @param {boolean}  props.multiGallerySelection Whether multiple galleries are selected.\n */\nexport function GalleryDynamicView( {\n\tdynamic,\n\tblockProps,\n\tinnerBlocksProps,\n\tattributes,\n\tsetAttributes,\n\tisSelected,\n\tinsertBlocksAfter,\n\tisContentLocked,\n\tmultiGallerySelection,\n} ) {\n\tconst {\n\t\tsourceDescriptor,\n\t\tdynamicImageBlocks,\n\t\tgalleryContext,\n\t\tisResolvingDynamic,\n\t\tconvertToStatic,\n\t} = dynamic;\n\n\t// Detaching the gallery materializes editable inner blocks, which is a\n\t// structural change. Only offer it when the block is fully editable:\n\t// under a content lock (e.g. inside a `contentOnly` group) the editing mode\n\t// is `'contentOnly'`/`'disabled'`, where structural toolbar controls are\n\t// hidden and the conversion shouldn't be possible.\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tconst [ isConfirmingDetach, setIsConfirmingDetach ] = useState( false );\n\n\t// Empty-state copy for the preview. Framed as forward-looking (\"… will appear\n\t// here\") rather than as an error, since the same empty result covers both a\n\t// post with no matching images and a template with no post in context yet —\n\t// in either case the source simply resolves to nothing right now. The per-\n\t// source wording comes from the source descriptor.\n\tconst emptyInstructions = isResolvingDynamic\n\t\t? __( 'Loading images…' )\n\t\t: sourceDescriptor?.emptyMessage ??\n\t\t  __( 'Dynamic images will appear here.' );\n\n\treturn (\n\t\t<>\n\t\t\t{ blockEditingMode === 'default' && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\tonClick={ () => setIsConfirmingDetach( true ) }\n\t\t\t\t\t\t\t// Same guard as the inspector's \"Detach Gallery\": both end in\n\t\t\t\t\t\t\t// `convertToStatic`, which would map over a\n\t\t\t\t\t\t\t// still-resolving (or empty) media list.\n\t\t\t\t\t\t\t// (`ToolbarButton` stays focusable when disabled by\n\t\t\t\t\t\t\t// default.)\n\t\t\t\t\t\t\tdisabled={ isResolvingDynamic }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Detach' ) }\n\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t\t{ isConfirmingDetach && (\n\t\t\t\t\t\t<DetachGalleryDialog\n\t\t\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\t\t\tconvertToStatic();\n\t\t\t\t\t\t\t\tsetIsConfirmingDetach( false );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCancel={ () => setIsConfirmingDetach( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<figure { ...blockProps }>\n\t\t\t\t{ dynamicImageBlocks.length ? (\n\t\t\t\t\t<BlockContextProvider value={ galleryContext }>\n\t\t\t\t\t\t<GalleryImagesPreview\n\t\t\t\t\t\t\timageBlocks={ dynamicImageBlocks }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockContextProvider>\n\t\t\t\t) : (\n\t\t\t\t\t<Placeholder\n\t\t\t\t\t\ticon={ sharedIcon }\n\t\t\t\t\t\tlabel={ __( 'Gallery' ) }\n\t\t\t\t\t\tinstructions={ emptyInstructions }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ isResolvingDynamic && <Spinner /> }\n\t\t\t\t\t</Placeholder>\n\t\t\t\t) }\n\t\t\t\t<Caption\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tshowToolbarButton={\n\t\t\t\t\t\t! multiGallerySelection && ! isContentLocked\n\t\t\t\t\t}\n\t\t\t\t\tclassName=\"blocks-gallery-caption\"\n\t\t\t\t\tlabel={ __( 'Gallery caption text' ) }\n\t\t\t\t\tplaceholder={ __( 'Add gallery caption' ) }\n\t\t\t\t/>\n\t\t\t</figure>\n\t\t\t{ /*\n\t\t\t * Dynamic mode shows a preview instead of real inner blocks, but the\n\t\t\t * empty inner blocks are still rendered here for their side effect:\n\t\t\t * the `allowedBlocks: []` passed to `useInnerBlocksProps` only syncs\n\t\t\t * to block list settings while the inner blocks are mounted (via\n\t\t\t * `useNestedSettingsUpdate`). That setting is what blocks insertion\n\t\t\t * (`canInsertBlockType`) and hides the now-unusable List View\n\t\t\t * (`shouldRenderBlockListView`). With no inner blocks and no appender,\n\t\t\t * this renders no output of its own.\n\t\t\t */ }\n\t\t\t{ innerBlocksProps.children }\n\t\t</>\n\t);\n}\n"],
   "mappings": "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",
   "names": ["ConfirmDialog", "ToolsPanel", "ToolsPanelItem", "useBlockPreview"]
 }

package/build/gallery/edit.cjs

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/block-library/src/gallery/edit.js
+// packages/block-library/src/gallery/edit.jsx
 var edit_exports = {};
 __export(edit_exports, {
   default: () => GalleryEdit
@@ -53,12 +53,13 @@ var import_constants = require("./constants.cjs");
 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_flex_styles = __toESM(require("./flex-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_lock_unlock = require("../lock-unlock.cjs");
+var import_responsive_styles = require("./responsive-styles.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var MAX_COLUMNS = 8;
 var LINK_OPTIONS = [
   {
     icon: import_icons.customLink,
@@ -139,8 +140,11 @@ function GalleryEdit(props) {
     linkTarget,
     linkTo,
     sizeSlug,
-    aspectRatio
+    aspectRatio,
+    layout
   } = attributes;
+  const isFlexLayout = (0, import_shared.isGalleryFlexLayout)(layout);
+  const previousLayoutRef = (0, import_element.useRef)(layout);
   const {
     __unstableMarkNextChangeAsNotPersistent,
     replaceInnerBlocks,
@@ -148,14 +152,43 @@ function GalleryEdit(props) {
     selectBlock
   } = (0, import_data.useDispatch)(import_block_editor.store);
   const { createSuccessNotice, createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
-  const { getBlock, getSettings, innerBlockImages, multiGallerySelection } = (0, import_data.useSelect)(
+  (0, import_element.useEffect)(() => {
+    const previousLayout = previousLayoutRef.current;
+    previousLayoutRef.current = layout;
+    if (!(0, import_shared.isObject)(previousLayout) || !(0, import_shared.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
+  } = (0, import_data.useSelect)(
     (select) => {
       const {
         getBlockName,
         getMultiSelectedBlockClientIds,
         getSettings: _getSettings,
-        getBlock: _getBlock
-      } = select(import_block_editor.store);
+        getBlock: _getBlock,
+        getSelectedBlockStyleState
+      } = (0, import_lock_unlock.unlock)(select(import_block_editor.store));
       const multiSelectedClientIds = getMultiSelectedBlockClientIds();
       return {
         getBlock: _getBlock,
@@ -163,11 +196,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 ? (0, import_responsive_styles.getViewportGalleryStyle)(
+    attributes.style,
+    selectedStyleState.viewport
+  ) : {};
+  const baseColumns = (0, import_responsive_styles.isValidGalleryColumns)(columns) ? columns : void 0;
+  const baseImageCrop = typeof imageCrop === "boolean" ? imageCrop : true;
+  const hasViewportColumns = isViewportStyleState && Object.hasOwn(viewportStyle, "columns") && (0, import_responsive_styles.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 = (0, import_element.useMemo)(
     () => innerBlockImages?.map((block) => ({
       clientId: block.clientId,
@@ -368,11 +413,28 @@ function GalleryEdit(props) {
       }
     );
   }
+  function setGalleryFlexSettings(settings) {
+    if (!isViewportStyleState) {
+      setAttributes(settings);
+      return;
+    }
+    setAttributes({
+      style: (0, import_responsive_styles.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 });
@@ -475,9 +537,10 @@ function GalleryEdit(props) {
     className: (0, import_clsx.default)(
       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 && [
@@ -485,9 +548,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
         }
       ]
     )
@@ -542,194 +605,211 @@ function GalleryEdit(props) {
   }
   const hasLinkTo = linkTo && linkTo !== "none";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__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);
-            }
-            if (linkTarget) {
-              toggleOpenInNewTab(false);
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_block_editor.InspectorControls,
+      {
+        group: isViewportStyleState && isFlexLayout ? "viewport" : "default",
+        children: [
+          !isViewportStyleState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dynamic_gallery.GallerySourcePanel,
+            {
+              dynamic,
+              dropdownMenuProps,
+              hasImages
             }
-          },
-          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,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_components.__experimentalToolsPanel,
+            {
+              label: (0, import_i18n.__)("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 !== import_constants.DEFAULT_MEDIA_SIZE_SLUG) {
+                  updateImagesSize(import_constants.DEFAULT_MEDIA_SIZE_SLUG);
+                }
+                if (linkTarget) {
+                  toggleOpenInNewTab(false);
+                }
+              },
+              dropdownMenuProps,
+              children: [
+                isFlexLayout && displayedImageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     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
+                    hasValue: () => isViewportStyleState ? hasViewportColumns : !!activeColumns && activeColumns !== displayedImageCount,
+                    onDeselect: () => setColumnsNumber(void 0),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.RangeControl,
+                      {
+                        label: (0, import_i18n.__)("Columns"),
+                        value: activeColumns ? activeColumns : (0, import_shared.defaultColumnsNumber)(
+                          displayedImageCount
+                        ),
+                        onChange: setColumnsNumber,
+                        min: 1,
+                        max: Math.min(
+                          import_constants.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,
+                ),
+                !isViewportStyleState && imageSizeOptions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: (0, import_i18n.__)("Resolution"),
-                    help: (0, import_i18n.__)(
-                      "Select the size of the source images."
-                    ),
-                    value: sizeSlug,
-                    options: imageSizeOptions,
-                    onChange: updateImagesSize,
-                    hideCancelButton: true
+                    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,
+                ),
+                isFlexLayout && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: (0, import_i18n.__)("Crop images to fit"),
-                    checked: !!imageCrop,
-                    onChange: toggleImageCrop
+                    hasValue: () => isViewportStyleState ? hasViewportImageCrop : !activeImageCrop,
+                    onDeselect: () => setGalleryFlexSettings({
+                      imageCrop: isViewportStyleState ? void 0 : true
+                    }),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.ToggleControl,
+                      {
+                        label: (0, import_i18n.__)("Crop images to fit"),
+                        checked: activeImageCrop,
+                        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,
+                ),
+                !isViewportStyleState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: (0, import_i18n.__)("Randomize order"),
-                    checked: !!randomOrder,
-                    onChange: toggleRandomOrder
+                    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,
+                ),
+                !isViewportStyleState && hasLinkTo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
+                    isShownByDefault: true,
                     label: (0, import_i18n.__)("Open images in new tab"),
-                    checked: linkTarget === "_blank",
-                    onChange: toggleOpenInNewTab
+                    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,
+                ),
+                !isViewportStyleState && aspectRatioOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
+                    hasValue: () => !!aspectRatio && aspectRatio !== "auto",
                     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
+                    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,
+                ),
+                !isViewportStyleState && lightboxSetting?.allowEditing && hasLightboxImages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.__experimentalToolsPanelItem,
                   {
                     label: (0, import_i18n.__)("Navigation button type"),
-                    value: navigationButtonType,
-                    onChange: (value) => setAttributes({
-                      navigationButtonType: value
+                    isShownByDefault: true,
+                    hasValue: () => navigationButtonType !== "icon",
+                    onDeselect: () => setAttributes({
+                      navigationButtonType: "icon"
                     }),
-                    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
-                      )
+                    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)(
@@ -769,8 +849,8 @@ function GalleryEdit(props) {
           variant: "toolbar"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_gap_styles.default,
+      isFlexLayout && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_flex_styles.default,
         {
           style: attributes.style,
           clientId