@wordpress/block-editor 15.15.0 → 15.16.0

package/build-module/components/block-inspector/index.mjs

@@ -51,7 +51,8 @@ function StyleInspectorSlots({
       InspectorControls.Slot,
       {
         group: "background",
-        label: __("Background image")
+        label: __("Background image"),
+        className: "background-block-support-panel__inner-wrapper"
       }
     ),
     /* @__PURE__ */ jsx(

package/build-module/components/block-inspector/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-inspector/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tgetBlockType,\n\tgetUnregisteredTypeHandlerName,\n\thasBlockSupport,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport EditContents from './edit-contents';\nimport SkipToSelectedBlock from '../skip-to-selected-block';\nimport BlockCard from '../block-card';\nimport MultiSelectionInspector from '../multi-selection-inspector';\nimport BlockVariationTransforms from '../block-variation-transforms';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { store as blockEditorStore } from '../../store';\nimport BlockStyles from '../block-styles';\nimport { ListViewContentPopover } from '../inspector-controls/list-view-content-popover';\nimport InspectorControls from '../inspector-controls';\nimport { default as InspectorControlsTabs } from '../inspector-controls-tabs';\nimport useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';\nimport InspectorControlsLastItem from '../inspector-controls/last-item';\nimport AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';\nimport PositionControls from '../inspector-controls-tabs/position-controls-panel';\nimport useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';\nimport { useBorderPanelLabel } from '../../hooks/border';\nimport ContentTab from '../inspector-controls-tabs/content-tab';\nimport ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';\nimport { unlock } from '../../lock-unlock';\n\nfunction StyleInspectorSlots( {\n\tblockName,\n\tshowAdvancedControls = true,\n\tshowPositionControls = true,\n\tshowBindingsControls = true,\n} ) {\n\tconst borderPanelLabel = useBorderPanelLabel( { blockName } );\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls.Slot />\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"color\"\n\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\tclassName=\"color-block-support-panel__inner-wrapper\"\n\t\t\t/>\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"background\"\n\t\t\t\tlabel={ __( 'Background image' ) }\n\t\t\t/>\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"typography\"\n\t\t\t\tlabel={ __( 'Typography' ) }\n\t\t\t/>\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"dimensions\"\n\t\t\t\tlabel={ __( 'Dimensions' ) }\n\t\t\t/>\n\t\t\t<InspectorControls.Slot group=\"border\" label={ borderPanelLabel } />\n\t\t\t<InspectorControls.Slot group=\"styles\" />\n\t\t\t{ showPositionControls && <PositionControls /> }\n\t\t\t{ showBindingsControls && (\n\t\t\t\t<InspectorControls.Slot group=\"bindings\" />\n\t\t\t) }\n\t\t\t{ showAdvancedControls && (\n\t\t\t\t<div>\n\t\t\t\t\t<AdvancedControls />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction BlockInspector() {\n\tconst {\n\t\tselectedBlockCount,\n\t\trenderedBlockName,\n\t\trenderedBlockClientId,\n\t\tblockType,\n\t\tisSectionBlock,\n\t\tisSectionBlockInSelection,\n\t\thasBlockStyles,\n\t\teditedContentOnlySection,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\tgetSelectedBlockCount,\n\t\t\tgetBlockName,\n\t\t\tgetParentSectionBlock,\n\t\t\tisSectionBlock: _isSectionBlock,\n\t\t\tgetEditedContentOnlySection,\n\t\t\tisWithinEditedContentOnlySection,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\tconst _selectedBlockClientId = getSelectedBlockClientId();\n\t\tconst isWithinEditedSection = isWithinEditedContentOnlySection(\n\t\t\t_selectedBlockClientId\n\t\t);\n\t\tconst _renderedBlockClientId = isWithinEditedSection\n\t\t\t? _selectedBlockClientId\n\t\t\t: getParentSectionBlock( _selectedBlockClientId ) ||\n\t\t\t  _selectedBlockClientId;\n\t\tconst _renderedBlockName =\n\t\t\t_renderedBlockClientId && getBlockName( _renderedBlockClientId );\n\t\tconst _blockType =\n\t\t\t_renderedBlockName && getBlockType( _renderedBlockName );\n\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\tconst _isSectionBlockInSelection = selectedBlockClientIds.some(\n\t\t\t( id ) => _isSectionBlock( id )\n\t\t);\n\t\tconst blockStyles =\n\t\t\t_renderedBlockName && getBlockStyles( _renderedBlockName );\n\t\tconst _hasBlockStyles = blockStyles && blockStyles.length > 0;\n\n\t\treturn {\n\t\t\tselectedBlockCount: getSelectedBlockCount(),\n\t\t\trenderedBlockClientId: _renderedBlockClientId,\n\t\t\trenderedBlockName: _renderedBlockName,\n\t\t\tblockType: _blockType,\n\t\t\tisSectionBlockInSelection: _isSectionBlockInSelection,\n\t\t\tisSectionBlock: _isSectionBlock( _renderedBlockClientId ),\n\t\t\thasBlockStyles: _hasBlockStyles,\n\t\t\teditedContentOnlySection: getEditedContentOnlySection(),\n\t\t};\n\t}, [] );\n\n\t// Separate useSelect for contentClientIds with proper dependencies\n\tconst contentClientIds = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! isSectionBlock || ! renderedBlockClientId ) {\n\t\t\t\treturn [];\n\t\t\t}\n\n\t\t\tconst {\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst descendants = getClientIdsOfDescendants(\n\t\t\t\trenderedBlockClientId\n\t\t\t);\n\n\t\t\t// Exclude items from the content tab that are already present in the\n\t\t\t// List View tab.\n\t\t\tconst listViewDescendants = new Set();\n\t\t\tdescendants.forEach( ( clientId ) => {\n\t\t\t\tconst blockName = getBlockName( clientId );\n\t\t\t\t// Navigation block doesn't have List View block support, but\n\t\t\t\t// it does have a custom implementation that is shown within\n\t\t\t\t// patterns, so it's included in this condition.\n\t\t\t\tif (\n\t\t\t\t\tblockName === 'core/navigation' ||\n\t\t\t\t\thasBlockSupport( blockName, 'listView' )\n\t\t\t\t) {\n\t\t\t\t\tconst listViewChildren =\n\t\t\t\t\t\tgetClientIdsOfDescendants( clientId );\n\t\t\t\t\tlistViewChildren.forEach( ( childId ) =>\n\t\t\t\t\t\tlistViewDescendants.add( childId )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\treturn descendants.filter( ( current ) => {\n\t\t\t\treturn (\n\t\t\t\t\t! listViewDescendants.has( current ) &&\n\t\t\t\t\tgetBlockEditingMode( current ) === 'contentOnly'\n\t\t\t\t);\n\t\t\t} );\n\t\t},\n\t\t[ isSectionBlock, renderedBlockClientId ]\n\t);\n\n\tconst availableTabs = useInspectorControlsTabs(\n\t\tblockType?.name,\n\t\tcontentClientIds,\n\t\tisSectionBlock,\n\t\thasBlockStyles\n\t);\n\tconst hasMultipleTabs = availableTabs?.length > 1;\n\n\t// The block inspector animation settings will be completely\n\t// removed in the future to create an API which allows the block\n\t// inspector to transition between what it\n\t// displays based on the relationship between the selected block\n\t// and its parent, and only enable it if the parent is controlling\n\t// its children blocks.\n\tconst blockInspectorAnimationSettings =\n\t\tuseBlockInspectorAnimationSettings( blockType );\n\n\tconst hasSelectedBlocks = selectedBlockCount > 1;\n\n\tif ( hasSelectedBlocks && ! isSectionBlockInSelection ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-block-inspector\">\n\t\t\t\t<MultiSelectionInspector />\n\t\t\t\t{ hasMultipleTabs ? (\n\t\t\t\t\t<InspectorControlsTabs tabs={ availableTabs } />\n\t\t\t\t) : (\n\t\t\t\t\t<StyleInspectorSlots\n\t\t\t\t\t\tblockName={ renderedBlockName }\n\t\t\t\t\t\tshowAdvancedControls={ false }\n\t\t\t\t\t\tshowPositionControls={ false }\n\t\t\t\t\t\tshowBindingsControls={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( hasSelectedBlocks && isSectionBlockInSelection ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-block-inspector\">\n\t\t\t\t<MultiSelectionInspector />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst isRenderedBlockUnregistered =\n\t\trenderedBlockName === getUnregisteredTypeHandlerName();\n\n\t/*\n\t * If the rendered block is of an unregistered type, avoid showing it as an actual selection\n\t * because we want the user to focus on the unregistered block warning, not block settings.\n\t */\n\tconst shouldShowWarning =\n\t\t! blockType || ! renderedBlockClientId || isRenderedBlockUnregistered;\n\n\tif ( shouldShowWarning ) {\n\t\treturn (\n\t\t\t<span className=\"block-editor-block-inspector__no-blocks\">\n\t\t\t\t{ __( 'No block selected.' ) }\n\t\t\t</span>\n\t\t);\n\t}\n\n\treturn (\n\t\t<BlockInspectorSingleBlockWrapper\n\t\t\tanimate={ blockInspectorAnimationSettings }\n\t\t\twrapper={ ( children ) => (\n\t\t\t\t<AnimatedContainer\n\t\t\t\t\tblockInspectorAnimationSettings={\n\t\t\t\t\t\tblockInspectorAnimationSettings\n\t\t\t\t\t}\n\t\t\t\t\trenderedBlockClientId={ renderedBlockClientId }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</AnimatedContainer>\n\t\t\t) }\n\t\t>\n\t\t\t<BlockInspectorSingleBlock\n\t\t\t\trenderedBlockClientId={ renderedBlockClientId }\n\t\t\t\tblockName={ blockType.name }\n\t\t\t\tisSectionBlock={ isSectionBlock }\n\t\t\t\tavailableTabs={ availableTabs }\n\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\thasBlockStyles={ hasBlockStyles }\n\t\t\t\teditedContentOnlySection={ editedContentOnlySection }\n\t\t\t/>\n\t\t</BlockInspectorSingleBlockWrapper>\n\t);\n}\n\nconst BlockInspectorSingleBlockWrapper = ( { animate, wrapper, children } ) => {\n\treturn animate ? wrapper( children ) : children;\n};\n\nconst AnimatedContainer = ( {\n\tblockInspectorAnimationSettings,\n\trenderedBlockClientId,\n\tchildren,\n} ) => {\n\tconst animationOrigin =\n\t\tblockInspectorAnimationSettings &&\n\t\tblockInspectorAnimationSettings.enterDirection === 'leftToRight'\n\t\t\t? -50\n\t\t\t: 50;\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tx: 0,\n\t\t\t\topacity: 1,\n\t\t\t\ttransition: {\n\t\t\t\t\tease: 'easeInOut',\n\t\t\t\t\tduration: 0.14,\n\t\t\t\t},\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tx: animationOrigin,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\tkey={ renderedBlockClientId }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n};\n\nconst BlockInspectorSingleBlock = ( {\n\t// The block that is displayed in the inspector. This is the block whose\n\t// controls and information are shown to the user.\n\trenderedBlockClientId,\n\tblockName,\n\tisSectionBlock,\n\tavailableTabs,\n\tcontentClientIds,\n\thasBlockStyles,\n\teditedContentOnlySection,\n} ) => {\n\tconst listViewRef = useRef( null );\n\tconst hasMultipleTabs = availableTabs?.length > 1;\n\tconst hasParentChildBlockCards =\n\t\teditedContentOnlySection &&\n\t\teditedContentOnlySection !== renderedBlockClientId;\n\tconst parentBlockInformation = useBlockDisplayInformation(\n\t\teditedContentOnlySection\n\t);\n\tconst blockInformation = useBlockDisplayInformation(\n\t\trenderedBlockClientId\n\t);\n\tconst isBlockSynced = blockInformation.isSynced;\n\n\treturn (\n\t\t<div className=\"block-editor-block-inspector\">\n\t\t\t{ hasParentChildBlockCards && (\n\t\t\t\t<BlockCard\n\t\t\t\t\t{ ...parentBlockInformation }\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tparentBlockInformation?.isSynced && 'is-synced'\n\t\t\t\t\t}\n\t\t\t\t\tparentClientId={ editedContentOnlySection }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<BlockCard\n\t\t\t\t{ ...blockInformation }\n\t\t\t\tallowParentNavigation\n\t\t\t\tclassName={ isBlockSynced && 'is-synced' }\n\t\t\t\tisChild={ hasParentChildBlockCards }\n\t\t\t\tclientId={ renderedBlockClientId }\n\t\t\t/>\n\t\t\t<ViewportVisibilityInfo clientId={ renderedBlockClientId } />\n\t\t\t<EditContents clientId={ renderedBlockClientId } />\n\t\t\t<BlockVariationTransforms blockClientId={ renderedBlockClientId } />\n\t\t\t{ hasMultipleTabs && (\n\t\t\t\t<>\n\t\t\t\t\t<InspectorControlsTabs\n\t\t\t\t\t\thasBlockStyles={ hasBlockStyles }\n\t\t\t\t\t\tclientId={ renderedBlockClientId }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\ttabs={ availableTabs }\n\t\t\t\t\t\tisSectionBlock={ isSectionBlock }\n\t\t\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasMultipleTabs && (\n\t\t\t\t<>\n\t\t\t\t\t{ hasBlockStyles && (\n\t\t\t\t\t\t<BlockStyles clientId={ renderedBlockClientId } />\n\t\t\t\t\t) }\n\t\t\t\t\t<ContentTab contentClientIds={ contentClientIds } />\n\t\t\t\t\t<InspectorControls.Slot group=\"content\" />\n\t\t\t\t\t<InspectorControls.Slot group=\"list\" ref={ listViewRef } />\n\t\t\t\t\t<ListViewContentPopover listViewRef={ listViewRef } />\n\t\t\t\t\t{ ! isSectionBlock && (\n\t\t\t\t\t\t<StyleInspectorSlots blockName={ blockName } />\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<InspectorControlsLastItem.Slot />\n\t\t\t<SkipToSelectedBlock key=\"back\" />\n\t\t</div>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md\n */\nexport default BlockInspector;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tgetBlockType,\n\tgetUnregisteredTypeHandlerName,\n\thasBlockSupport,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport EditContents from './edit-contents';\nimport SkipToSelectedBlock from '../skip-to-selected-block';\nimport BlockCard from '../block-card';\nimport MultiSelectionInspector from '../multi-selection-inspector';\nimport BlockVariationTransforms from '../block-variation-transforms';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { store as blockEditorStore } from '../../store';\nimport BlockStyles from '../block-styles';\nimport { ListViewContentPopover } from '../inspector-controls/list-view-content-popover';\nimport InspectorControls from '../inspector-controls';\nimport { default as InspectorControlsTabs } from '../inspector-controls-tabs';\nimport useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';\nimport InspectorControlsLastItem from '../inspector-controls/last-item';\nimport AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';\nimport PositionControls from '../inspector-controls-tabs/position-controls-panel';\nimport useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';\nimport { useBorderPanelLabel } from '../../hooks/border';\nimport ContentTab from '../inspector-controls-tabs/content-tab';\nimport ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';\nimport { unlock } from '../../lock-unlock';\n\nfunction StyleInspectorSlots( {\n\tblockName,\n\tshowAdvancedControls = true,\n\tshowPositionControls = true,\n\tshowBindingsControls = true,\n} ) {\n\tconst borderPanelLabel = useBorderPanelLabel( { blockName } );\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls.Slot />\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"color\"\n\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\tclassName=\"color-block-support-panel__inner-wrapper\"\n\t\t\t/>\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"background\"\n\t\t\t\tlabel={ __( 'Background image' ) }\n\t\t\t\tclassName=\"background-block-support-panel__inner-wrapper\"\n\t\t\t/>\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"typography\"\n\t\t\t\tlabel={ __( 'Typography' ) }\n\t\t\t/>\n\t\t\t<InspectorControls.Slot\n\t\t\t\tgroup=\"dimensions\"\n\t\t\t\tlabel={ __( 'Dimensions' ) }\n\t\t\t/>\n\t\t\t<InspectorControls.Slot group=\"border\" label={ borderPanelLabel } />\n\t\t\t<InspectorControls.Slot group=\"styles\" />\n\t\t\t{ showPositionControls && <PositionControls /> }\n\t\t\t{ showBindingsControls && (\n\t\t\t\t<InspectorControls.Slot group=\"bindings\" />\n\t\t\t) }\n\t\t\t{ showAdvancedControls && (\n\t\t\t\t<div>\n\t\t\t\t\t<AdvancedControls />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction BlockInspector() {\n\tconst {\n\t\tselectedBlockCount,\n\t\trenderedBlockName,\n\t\trenderedBlockClientId,\n\t\tblockType,\n\t\tisSectionBlock,\n\t\tisSectionBlockInSelection,\n\t\thasBlockStyles,\n\t\teditedContentOnlySection,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\tgetSelectedBlockCount,\n\t\t\tgetBlockName,\n\t\t\tgetParentSectionBlock,\n\t\t\tisSectionBlock: _isSectionBlock,\n\t\t\tgetEditedContentOnlySection,\n\t\t\tisWithinEditedContentOnlySection,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst { getBlockStyles } = select( blocksStore );\n\t\tconst _selectedBlockClientId = getSelectedBlockClientId();\n\t\tconst isWithinEditedSection = isWithinEditedContentOnlySection(\n\t\t\t_selectedBlockClientId\n\t\t);\n\t\tconst _renderedBlockClientId = isWithinEditedSection\n\t\t\t? _selectedBlockClientId\n\t\t\t: getParentSectionBlock( _selectedBlockClientId ) ||\n\t\t\t  _selectedBlockClientId;\n\t\tconst _renderedBlockName =\n\t\t\t_renderedBlockClientId && getBlockName( _renderedBlockClientId );\n\t\tconst _blockType =\n\t\t\t_renderedBlockName && getBlockType( _renderedBlockName );\n\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\tconst _isSectionBlockInSelection = selectedBlockClientIds.some(\n\t\t\t( id ) => _isSectionBlock( id )\n\t\t);\n\t\tconst blockStyles =\n\t\t\t_renderedBlockName && getBlockStyles( _renderedBlockName );\n\t\tconst _hasBlockStyles = blockStyles && blockStyles.length > 0;\n\n\t\treturn {\n\t\t\tselectedBlockCount: getSelectedBlockCount(),\n\t\t\trenderedBlockClientId: _renderedBlockClientId,\n\t\t\trenderedBlockName: _renderedBlockName,\n\t\t\tblockType: _blockType,\n\t\t\tisSectionBlockInSelection: _isSectionBlockInSelection,\n\t\t\tisSectionBlock: _isSectionBlock( _renderedBlockClientId ),\n\t\t\thasBlockStyles: _hasBlockStyles,\n\t\t\teditedContentOnlySection: getEditedContentOnlySection(),\n\t\t};\n\t}, [] );\n\n\t// Separate useSelect for contentClientIds with proper dependencies\n\tconst contentClientIds = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! isSectionBlock || ! renderedBlockClientId ) {\n\t\t\t\treturn [];\n\t\t\t}\n\n\t\t\tconst {\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst descendants = getClientIdsOfDescendants(\n\t\t\t\trenderedBlockClientId\n\t\t\t);\n\n\t\t\t// Exclude items from the content tab that are already present in the\n\t\t\t// List View tab.\n\t\t\tconst listViewDescendants = new Set();\n\t\t\tdescendants.forEach( ( clientId ) => {\n\t\t\t\tconst blockName = getBlockName( clientId );\n\t\t\t\t// Navigation block doesn't have List View block support, but\n\t\t\t\t// it does have a custom implementation that is shown within\n\t\t\t\t// patterns, so it's included in this condition.\n\t\t\t\tif (\n\t\t\t\t\tblockName === 'core/navigation' ||\n\t\t\t\t\thasBlockSupport( blockName, 'listView' )\n\t\t\t\t) {\n\t\t\t\t\tconst listViewChildren =\n\t\t\t\t\t\tgetClientIdsOfDescendants( clientId );\n\t\t\t\t\tlistViewChildren.forEach( ( childId ) =>\n\t\t\t\t\t\tlistViewDescendants.add( childId )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\treturn descendants.filter( ( current ) => {\n\t\t\t\treturn (\n\t\t\t\t\t! listViewDescendants.has( current ) &&\n\t\t\t\t\tgetBlockEditingMode( current ) === 'contentOnly'\n\t\t\t\t);\n\t\t\t} );\n\t\t},\n\t\t[ isSectionBlock, renderedBlockClientId ]\n\t);\n\n\tconst availableTabs = useInspectorControlsTabs(\n\t\tblockType?.name,\n\t\tcontentClientIds,\n\t\tisSectionBlock,\n\t\thasBlockStyles\n\t);\n\tconst hasMultipleTabs = availableTabs?.length > 1;\n\n\t// The block inspector animation settings will be completely\n\t// removed in the future to create an API which allows the block\n\t// inspector to transition between what it\n\t// displays based on the relationship between the selected block\n\t// and its parent, and only enable it if the parent is controlling\n\t// its children blocks.\n\tconst blockInspectorAnimationSettings =\n\t\tuseBlockInspectorAnimationSettings( blockType );\n\n\tconst hasSelectedBlocks = selectedBlockCount > 1;\n\n\tif ( hasSelectedBlocks && ! isSectionBlockInSelection ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-block-inspector\">\n\t\t\t\t<MultiSelectionInspector />\n\t\t\t\t{ hasMultipleTabs ? (\n\t\t\t\t\t<InspectorControlsTabs tabs={ availableTabs } />\n\t\t\t\t) : (\n\t\t\t\t\t<StyleInspectorSlots\n\t\t\t\t\t\tblockName={ renderedBlockName }\n\t\t\t\t\t\tshowAdvancedControls={ false }\n\t\t\t\t\t\tshowPositionControls={ false }\n\t\t\t\t\t\tshowBindingsControls={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( hasSelectedBlocks && isSectionBlockInSelection ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-block-inspector\">\n\t\t\t\t<MultiSelectionInspector />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst isRenderedBlockUnregistered =\n\t\trenderedBlockName === getUnregisteredTypeHandlerName();\n\n\t/*\n\t * If the rendered block is of an unregistered type, avoid showing it as an actual selection\n\t * because we want the user to focus on the unregistered block warning, not block settings.\n\t */\n\tconst shouldShowWarning =\n\t\t! blockType || ! renderedBlockClientId || isRenderedBlockUnregistered;\n\n\tif ( shouldShowWarning ) {\n\t\treturn (\n\t\t\t<span className=\"block-editor-block-inspector__no-blocks\">\n\t\t\t\t{ __( 'No block selected.' ) }\n\t\t\t</span>\n\t\t);\n\t}\n\n\treturn (\n\t\t<BlockInspectorSingleBlockWrapper\n\t\t\tanimate={ blockInspectorAnimationSettings }\n\t\t\twrapper={ ( children ) => (\n\t\t\t\t<AnimatedContainer\n\t\t\t\t\tblockInspectorAnimationSettings={\n\t\t\t\t\t\tblockInspectorAnimationSettings\n\t\t\t\t\t}\n\t\t\t\t\trenderedBlockClientId={ renderedBlockClientId }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</AnimatedContainer>\n\t\t\t) }\n\t\t>\n\t\t\t<BlockInspectorSingleBlock\n\t\t\t\trenderedBlockClientId={ renderedBlockClientId }\n\t\t\t\tblockName={ blockType.name }\n\t\t\t\tisSectionBlock={ isSectionBlock }\n\t\t\t\tavailableTabs={ availableTabs }\n\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\thasBlockStyles={ hasBlockStyles }\n\t\t\t\teditedContentOnlySection={ editedContentOnlySection }\n\t\t\t/>\n\t\t</BlockInspectorSingleBlockWrapper>\n\t);\n}\n\nconst BlockInspectorSingleBlockWrapper = ( { animate, wrapper, children } ) => {\n\treturn animate ? wrapper( children ) : children;\n};\n\nconst AnimatedContainer = ( {\n\tblockInspectorAnimationSettings,\n\trenderedBlockClientId,\n\tchildren,\n} ) => {\n\tconst animationOrigin =\n\t\tblockInspectorAnimationSettings &&\n\t\tblockInspectorAnimationSettings.enterDirection === 'leftToRight'\n\t\t\t? -50\n\t\t\t: 50;\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tx: 0,\n\t\t\t\topacity: 1,\n\t\t\t\ttransition: {\n\t\t\t\t\tease: 'easeInOut',\n\t\t\t\t\tduration: 0.14,\n\t\t\t\t},\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tx: animationOrigin,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\tkey={ renderedBlockClientId }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n};\n\nconst BlockInspectorSingleBlock = ( {\n\t// The block that is displayed in the inspector. This is the block whose\n\t// controls and information are shown to the user.\n\trenderedBlockClientId,\n\tblockName,\n\tisSectionBlock,\n\tavailableTabs,\n\tcontentClientIds,\n\thasBlockStyles,\n\teditedContentOnlySection,\n} ) => {\n\tconst listViewRef = useRef( null );\n\tconst hasMultipleTabs = availableTabs?.length > 1;\n\tconst hasParentChildBlockCards =\n\t\teditedContentOnlySection &&\n\t\teditedContentOnlySection !== renderedBlockClientId;\n\tconst parentBlockInformation = useBlockDisplayInformation(\n\t\teditedContentOnlySection\n\t);\n\tconst blockInformation = useBlockDisplayInformation(\n\t\trenderedBlockClientId\n\t);\n\tconst isBlockSynced = blockInformation.isSynced;\n\n\treturn (\n\t\t<div className=\"block-editor-block-inspector\">\n\t\t\t{ hasParentChildBlockCards && (\n\t\t\t\t<BlockCard\n\t\t\t\t\t{ ...parentBlockInformation }\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tparentBlockInformation?.isSynced && 'is-synced'\n\t\t\t\t\t}\n\t\t\t\t\tparentClientId={ editedContentOnlySection }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<BlockCard\n\t\t\t\t{ ...blockInformation }\n\t\t\t\tallowParentNavigation\n\t\t\t\tclassName={ isBlockSynced && 'is-synced' }\n\t\t\t\tisChild={ hasParentChildBlockCards }\n\t\t\t\tclientId={ renderedBlockClientId }\n\t\t\t/>\n\t\t\t<ViewportVisibilityInfo clientId={ renderedBlockClientId } />\n\t\t\t<EditContents clientId={ renderedBlockClientId } />\n\t\t\t<BlockVariationTransforms blockClientId={ renderedBlockClientId } />\n\t\t\t{ hasMultipleTabs && (\n\t\t\t\t<>\n\t\t\t\t\t<InspectorControlsTabs\n\t\t\t\t\t\thasBlockStyles={ hasBlockStyles }\n\t\t\t\t\t\tclientId={ renderedBlockClientId }\n\t\t\t\t\t\tblockName={ blockName }\n\t\t\t\t\t\ttabs={ availableTabs }\n\t\t\t\t\t\tisSectionBlock={ isSectionBlock }\n\t\t\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasMultipleTabs && (\n\t\t\t\t<>\n\t\t\t\t\t{ hasBlockStyles && (\n\t\t\t\t\t\t<BlockStyles clientId={ renderedBlockClientId } />\n\t\t\t\t\t) }\n\t\t\t\t\t<ContentTab contentClientIds={ contentClientIds } />\n\t\t\t\t\t<InspectorControls.Slot group=\"content\" />\n\t\t\t\t\t<InspectorControls.Slot group=\"list\" ref={ listViewRef } />\n\t\t\t\t\t<ListViewContentPopover listViewRef={ listViewRef } />\n\t\t\t\t\t{ ! isSectionBlock && (\n\t\t\t\t\t\t<StyleInspectorSlots blockName={ blockName } />\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<InspectorControlsLastItem.Slot />\n\t\t\t<SkipToSelectedBlock key=\"back\" />\n\t\t</div>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md\n */\nexport default BlockInspector;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/block-visibility/modal.mjs

@@ -30,9 +30,9 @@ import {
 } from "./utils.mjs";
 
 // packages/block-editor/src/components/block-visibility/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4334c7deb6']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='e252bf6889']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "4334c7deb6");
+  style.setAttribute("data-wp-hash", "e252bf6889");
   style.appendChild(document.createTextNode(".block-editor-block-visibility-modal{z-index:1000001}.block-editor-block-visibility-modal__options{border:0;list-style:none;margin:24px 0;padding:0}.block-editor-block-visibility-modal__options-item{align-items:center;display:flex;gap:24px;justify-content:space-between;margin:0 0 16px}.block-editor-block-visibility-modal__options-item:last-child{margin:0}.block-editor-block-visibility-modal__options-item--everywhere{align-items:start;flex-direction:column}.block-editor-block-visibility-modal__options-checkbox--everywhere{font-weight:600}.block-editor-block-visibility-modal__options-icon--checked{fill:#ddd}.block-editor-block-visibility-modal__sub-options{padding-inline-start:12px;width:100%}.block-editor-block-visibility-modal__description{color:#757575;font-size:12px}.block-editor-block-visibility-info{align-items:center;display:flex;justify-content:start;margin:0 16px 16px;padding-bottom:4px;padding-top:4px}"));
   document.head.appendChild(style);
 }

package/build-module/components/block-visibility/modal.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-visibility/modal.js", "../../../src/components/block-visibility/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tuseState,\n\tuseMemo,\n\tuseCallback,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\tButton,\n\tCheckboxControl,\n\tFlex,\n\tFlexItem,\n\tIcon,\n\tModal,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBLOCK_VISIBILITY_VIEWPORT_ENTRIES,\n\tBLOCK_VISIBILITY_VIEWPORTS,\n} from './constants';\nimport { store as blockEditorStore } from '../../store';\nimport { cleanEmptyObject } from '../../hooks/utils';\nimport {\n\tgetViewportCheckboxState,\n\tgetHideEverywhereCheckboxState,\n} from './utils';\nimport './style.scss';\n\nconst DEFAULT_VIEWPORT_CHECKBOX_VALUES = {\n\t[ BLOCK_VISIBILITY_VIEWPORTS.mobile.key ]: false,\n\t[ BLOCK_VISIBILITY_VIEWPORTS.tablet.key ]: false,\n\t[ BLOCK_VISIBILITY_VIEWPORTS.desktop.key ]: false,\n};\n\nconst EMPTY_BLOCKS = [];\n\n/**\n * Modal component for configuring block visibility across viewports.\n *\n * Allows users to hide blocks on specific viewport sizes (mobile, tablet, desktop)\n * or hide them everywhere. When editing multiple blocks, checkboxes only show as\n * checked if ALL selected blocks share the same setting to avoid ambiguity.\n *\n * @param {Object}   props           Component props.\n * @param {Array}    props.clientIds The client IDs of the blocks to hide.\n * @param {Function} props.onClose   Callback function invoked when the modal is closed.\n * @return {React.JSX.Element} The modal component.\n */\nexport default function BlockVisibilityModal( { clientIds, onClose } ) {\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst blocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlocksByClientId( clientIds ) ??\n\t\t\tEMPTY_BLOCKS,\n\t\t[ clientIds ]\n\t);\n\tconst listViewShortcut = useSelect( ( select ) => {\n\t\treturn select( keyboardShortcutsStore ).getShortcutRepresentation(\n\t\t\t'core/editor/toggle-list-view'\n\t\t);\n\t}, [] );\n\n\tconst initialViewportValues = useMemo( () => {\n\t\tif ( blocks?.length === 0 ) {\n\t\t\treturn {\n\t\t\t\thideEverywhere: false,\n\t\t\t\tviewportChecked: {},\n\t\t\t};\n\t\t}\n\n\t\tconst viewportValues = {};\n\n\t\tBLOCK_VISIBILITY_VIEWPORT_ENTRIES.forEach( ( [ , { key } ] ) => {\n\t\t\tviewportValues[ key ] = getViewportCheckboxState( blocks, key );\n\t\t} );\n\n\t\treturn {\n\t\t\thideEverywhere: getHideEverywhereCheckboxState( blocks ),\n\t\t\tviewportChecked: viewportValues,\n\t\t};\n\t}, [ blocks ] );\n\n\tconst [ viewportChecked, setViewportChecked ] = useState(\n\t\tinitialViewportValues?.viewportChecked ?? {}\n\t);\n\tconst [ hideEverywhere, setHideEverywhere ] = useState(\n\t\tinitialViewportValues?.hideEverywhere ?? false\n\t);\n\n\tconst handleViewportCheckboxChange = useCallback(\n\t\t( viewport, isChecked ) => {\n\t\t\tsetViewportChecked( {\n\t\t\t\t...viewportChecked,\n\t\t\t\t[ viewport ]: isChecked,\n\t\t\t} );\n\t\t},\n\t\t[ viewportChecked ]\n\t);\n\n\tconst noticeMessage = useMemo( () => {\n\t\tif ( ! hideEverywhere ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: The shortcut key to access the List View.\n\t\t\t\t__(\n\t\t\t\t\t'Block visibility settings updated. You can access them via the List View (%s).'\n\t\t\t\t),\n\t\t\t\tlistViewShortcut\n\t\t\t);\n\t\t}\n\n\t\tconst message =\n\t\t\tblocks?.length > 1\n\t\t\t\t? // translators: %s: The shortcut key to access the List View.\n\t\t\t\t  __(\n\t\t\t\t\t\t'Blocks hidden. You can access them via the List View (%s).'\n\t\t\t\t  )\n\t\t\t\t: // translators: %s: The shortcut key to access the List View.\n\t\t\t\t  __(\n\t\t\t\t\t\t'Block hidden. You can access it via the List View (%s).'\n\t\t\t\t  );\n\n\t\treturn sprintf( message, listViewShortcut );\n\t}, [ hideEverywhere, blocks?.length, listViewShortcut ] );\n\n\tconst isAnyViewportChecked = useMemo(\n\t\t() =>\n\t\t\tObject.values( viewportChecked ).some(\n\t\t\t\t( checked ) => checked === true || checked === null\n\t\t\t),\n\t\t[ viewportChecked ]\n\t);\n\n\tconst isDirty = useMemo( () => {\n\t\tif ( hideEverywhere !== initialViewportValues.hideEverywhere ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(\n\t\t\t( [ , { key } ] ) =>\n\t\t\t\tviewportChecked[ key ] !==\n\t\t\t\tinitialViewportValues.viewportChecked[ key ]\n\t\t);\n\t}, [ hideEverywhere, viewportChecked, initialViewportValues ] );\n\n\tconst hasIndeterminateValues = useMemo( () => {\n\t\tif ( hideEverywhere === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn Object.values( viewportChecked ).some(\n\t\t\t( checked ) => checked === null\n\t\t);\n\t}, [ hideEverywhere, viewportChecked ] );\n\n\tconst handleSubmit = useCallback(\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst newVisibility = hideEverywhere\n\t\t\t\t? false\n\t\t\t\t: {\n\t\t\t\t\t\tviewport: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(\n\t\t\t\t\t\t\t( acc, [ , { key } ] ) => {\n\t\t\t\t\t\t\t\tif ( viewportChecked[ key ] ) {\n\t\t\t\t\t\t\t\t\t// Values are inverted to hide the block on the selected viewport.\n\t\t\t\t\t\t\t\t\t// In the UI, the checkbox is checked (true) when the block is hidden on the selected viewport,\n\t\t\t\t\t\t\t\t\t// so 'false' means hide the block on the selected viewport.\n\t\t\t\t\t\t\t\t\tacc[ key ] = false;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn acc;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t),\n\t\t\t\t  };\n\t\t\tconst attributesByClientId = Object.fromEntries(\n\t\t\t\tblocks.map( ( { clientId, attributes } ) => [\n\t\t\t\t\tclientId,\n\t\t\t\t\t{\n\t\t\t\t\t\tmetadata: cleanEmptyObject( {\n\t\t\t\t\t\t\t...attributes?.metadata,\n\t\t\t\t\t\t\tblockVisibility: newVisibility,\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\tupdateBlockAttributes( clientIds, attributesByClientId, {\n\t\t\t\tuniqueByBlock: true,\n\t\t\t} );\n\n\t\t\tcreateSuccessNotice( noticeMessage, {\n\t\t\t\tid: hideEverywhere\n\t\t\t\t\t? 'block-visibility-hidden'\n\t\t\t\t\t: 'block-visibility-viewports-updated',\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\tonClose();\n\t\t},\n\t\t[\n\t\t\tblocks,\n\t\t\tclientIds,\n\t\t\tcreateSuccessNotice,\n\t\t\thideEverywhere,\n\t\t\tnoticeMessage,\n\t\t\tonClose,\n\t\t\tupdateBlockAttributes,\n\t\t\tviewportChecked,\n\t\t]\n\t);\n\n\tconst hasMultipleBlocks = blocks?.length > 1;\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={\n\t\t\t\tclientIds?.length > 1 ? __( 'Hide blocks' ) : __( 'Hide block' )\n\t\t\t}\n\t\t\tonRequestClose={ onClose }\n\t\t\toverlayClassName=\"block-editor-block-visibility-modal\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form onSubmit={ handleSubmit }>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<legend>\n\t\t\t\t\t\t{ hasMultipleBlocks\n\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t'Select the viewport sizes for which you want to hide the blocks. Changes will apply to all selected blocks.'\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'Select the viewport size for which you want to hide the block.'\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</legend>\n\t\t\t\t\t<ul className=\"block-editor-block-visibility-modal__options\">\n\t\t\t\t\t\t<li className=\"block-editor-block-visibility-modal__options-item block-editor-block-visibility-modal__options-item--everywhere\">\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-visibility-modal__options-checkbox--everywhere\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Omit from published content' ) }\n\t\t\t\t\t\t\t\tchecked={ hideEverywhere === true }\n\t\t\t\t\t\t\t\tindeterminate={ hideEverywhere === null }\n\t\t\t\t\t\t\t\tonChange={ ( checked ) => {\n\t\t\t\t\t\t\t\t\tsetHideEverywhere( checked );\n\t\t\t\t\t\t\t\t\t// Reset viewport checkboxes when hide everywhere is checked.\n\t\t\t\t\t\t\t\t\tsetViewportChecked(\n\t\t\t\t\t\t\t\t\t\tDEFAULT_VIEWPORT_CHECKBOX_VALUES\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ hideEverywhere !== true && (\n\t\t\t\t\t\t\t\t<ul className=\"block-editor-block-visibility-modal__sub-options\">\n\t\t\t\t\t\t\t\t\t{ BLOCK_VISIBILITY_VIEWPORT_ENTRIES.map(\n\t\t\t\t\t\t\t\t\t\t( [ , { label, icon, key } ] ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-visibility-modal__options-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: The viewport name.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t__( 'Hide on %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewportChecked[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t] ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tindeterminate={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewportChecked[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t] === null\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleViewportCheckboxChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchecked\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'block-editor-block-visibility-modal__options-icon--checked':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewportChecked[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t{ hasMultipleBlocks && hasIndeterminateValues && (\n\t\t\t\t\t\t<p className=\"block-editor-block-visibility-modal__description\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Selected blocks have different visibility settings. The checkboxes show an indeterminate state when settings differ.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! hasMultipleBlocks && hideEverywhere === true && (\n\t\t\t\t\t\t<p className=\"block-editor-block-visibility-modal__description\">\n\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: The shortcut key to access the List View.\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Block will be hidden in the editor, and omitted from the published markup on the frontend. You can configure it again by selecting it in the List View (%s).'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tlistViewShortcut\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! hasMultipleBlocks &&\n\t\t\t\t\t\t! hideEverywhere &&\n\t\t\t\t\t\tisAnyViewportChecked && (\n\t\t\t\t\t\t\t<p className=\"block-editor-block-visibility-modal__description\">\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The shortcut key to access the List View\n\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t'Block will be hidden according to the selected viewports. It will be <strong>included in the published markup on the frontend</strong>. You can configure it again by selecting it in the List View (%s).'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\tlistViewShortcut\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tstrong: <strong />,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) }\n\t\t\t\t</fieldset>\n\t\t\t\t<Flex\n\t\t\t\t\tclassName=\"block-editor-block-visibility-modal__actions\"\n\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4334c7deb6']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4334c7deb6\");\n\tstyle.appendChild(document.createTextNode(\".block-editor-block-visibility-modal{z-index:1000001}.block-editor-block-visibility-modal__options{border:0;list-style:none;margin:24px 0;padding:0}.block-editor-block-visibility-modal__options-item{align-items:center;display:flex;gap:24px;justify-content:space-between;margin:0 0 16px}.block-editor-block-visibility-modal__options-item:last-child{margin:0}.block-editor-block-visibility-modal__options-item--everywhere{align-items:start;flex-direction:column}.block-editor-block-visibility-modal__options-checkbox--everywhere{font-weight:600}.block-editor-block-visibility-modal__options-icon--checked{fill:#ddd}.block-editor-block-visibility-modal__sub-options{padding-inline-start:12px;width:100%}.block-editor-block-visibility-modal__description{color:#757575;font-size:12px}.block-editor-block-visibility-info{align-items:center;display:flex;justify-content:start;margin:0 16px 16px;padding-bottom:4px;padding-top:4px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tuseState,\n\tuseMemo,\n\tuseCallback,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\tButton,\n\tCheckboxControl,\n\tFlex,\n\tFlexItem,\n\tIcon,\n\tModal,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBLOCK_VISIBILITY_VIEWPORT_ENTRIES,\n\tBLOCK_VISIBILITY_VIEWPORTS,\n} from './constants';\nimport { store as blockEditorStore } from '../../store';\nimport { cleanEmptyObject } from '../../hooks/utils';\nimport {\n\tgetViewportCheckboxState,\n\tgetHideEverywhereCheckboxState,\n} from './utils';\nimport './style.scss';\n\nconst DEFAULT_VIEWPORT_CHECKBOX_VALUES = {\n\t[ BLOCK_VISIBILITY_VIEWPORTS.mobile.key ]: false,\n\t[ BLOCK_VISIBILITY_VIEWPORTS.tablet.key ]: false,\n\t[ BLOCK_VISIBILITY_VIEWPORTS.desktop.key ]: false,\n};\n\nconst EMPTY_BLOCKS = [];\n\n/**\n * Modal component for configuring block visibility across viewports.\n *\n * Allows users to hide blocks on specific viewport sizes (mobile, tablet, desktop)\n * or hide them everywhere. When editing multiple blocks, checkboxes only show as\n * checked if ALL selected blocks share the same setting to avoid ambiguity.\n *\n * @param {Object}   props           Component props.\n * @param {Array}    props.clientIds The client IDs of the blocks to hide.\n * @param {Function} props.onClose   Callback function invoked when the modal is closed.\n * @return {React.JSX.Element} The modal component.\n */\nexport default function BlockVisibilityModal( { clientIds, onClose } ) {\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst blocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlocksByClientId( clientIds ) ??\n\t\t\tEMPTY_BLOCKS,\n\t\t[ clientIds ]\n\t);\n\tconst listViewShortcut = useSelect( ( select ) => {\n\t\treturn select( keyboardShortcutsStore ).getShortcutRepresentation(\n\t\t\t'core/editor/toggle-list-view'\n\t\t);\n\t}, [] );\n\n\tconst initialViewportValues = useMemo( () => {\n\t\tif ( blocks?.length === 0 ) {\n\t\t\treturn {\n\t\t\t\thideEverywhere: false,\n\t\t\t\tviewportChecked: {},\n\t\t\t};\n\t\t}\n\n\t\tconst viewportValues = {};\n\n\t\tBLOCK_VISIBILITY_VIEWPORT_ENTRIES.forEach( ( [ , { key } ] ) => {\n\t\t\tviewportValues[ key ] = getViewportCheckboxState( blocks, key );\n\t\t} );\n\n\t\treturn {\n\t\t\thideEverywhere: getHideEverywhereCheckboxState( blocks ),\n\t\t\tviewportChecked: viewportValues,\n\t\t};\n\t}, [ blocks ] );\n\n\tconst [ viewportChecked, setViewportChecked ] = useState(\n\t\tinitialViewportValues?.viewportChecked ?? {}\n\t);\n\tconst [ hideEverywhere, setHideEverywhere ] = useState(\n\t\tinitialViewportValues?.hideEverywhere ?? false\n\t);\n\n\tconst handleViewportCheckboxChange = useCallback(\n\t\t( viewport, isChecked ) => {\n\t\t\tsetViewportChecked( {\n\t\t\t\t...viewportChecked,\n\t\t\t\t[ viewport ]: isChecked,\n\t\t\t} );\n\t\t},\n\t\t[ viewportChecked ]\n\t);\n\n\tconst noticeMessage = useMemo( () => {\n\t\tif ( ! hideEverywhere ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: The shortcut key to access the List View.\n\t\t\t\t__(\n\t\t\t\t\t'Block visibility settings updated. You can access them via the List View (%s).'\n\t\t\t\t),\n\t\t\t\tlistViewShortcut\n\t\t\t);\n\t\t}\n\n\t\tconst message =\n\t\t\tblocks?.length > 1\n\t\t\t\t? // translators: %s: The shortcut key to access the List View.\n\t\t\t\t  __(\n\t\t\t\t\t\t'Blocks hidden. You can access them via the List View (%s).'\n\t\t\t\t  )\n\t\t\t\t: // translators: %s: The shortcut key to access the List View.\n\t\t\t\t  __(\n\t\t\t\t\t\t'Block hidden. You can access it via the List View (%s).'\n\t\t\t\t  );\n\n\t\treturn sprintf( message, listViewShortcut );\n\t}, [ hideEverywhere, blocks?.length, listViewShortcut ] );\n\n\tconst isAnyViewportChecked = useMemo(\n\t\t() =>\n\t\t\tObject.values( viewportChecked ).some(\n\t\t\t\t( checked ) => checked === true || checked === null\n\t\t\t),\n\t\t[ viewportChecked ]\n\t);\n\n\tconst isDirty = useMemo( () => {\n\t\tif ( hideEverywhere !== initialViewportValues.hideEverywhere ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(\n\t\t\t( [ , { key } ] ) =>\n\t\t\t\tviewportChecked[ key ] !==\n\t\t\t\tinitialViewportValues.viewportChecked[ key ]\n\t\t);\n\t}, [ hideEverywhere, viewportChecked, initialViewportValues ] );\n\n\tconst hasIndeterminateValues = useMemo( () => {\n\t\tif ( hideEverywhere === null ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn Object.values( viewportChecked ).some(\n\t\t\t( checked ) => checked === null\n\t\t);\n\t}, [ hideEverywhere, viewportChecked ] );\n\n\tconst handleSubmit = useCallback(\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst newVisibility = hideEverywhere\n\t\t\t\t? false\n\t\t\t\t: {\n\t\t\t\t\t\tviewport: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(\n\t\t\t\t\t\t\t( acc, [ , { key } ] ) => {\n\t\t\t\t\t\t\t\tif ( viewportChecked[ key ] ) {\n\t\t\t\t\t\t\t\t\t// Values are inverted to hide the block on the selected viewport.\n\t\t\t\t\t\t\t\t\t// In the UI, the checkbox is checked (true) when the block is hidden on the selected viewport,\n\t\t\t\t\t\t\t\t\t// so 'false' means hide the block on the selected viewport.\n\t\t\t\t\t\t\t\t\tacc[ key ] = false;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\treturn acc;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t),\n\t\t\t\t  };\n\t\t\tconst attributesByClientId = Object.fromEntries(\n\t\t\t\tblocks.map( ( { clientId, attributes } ) => [\n\t\t\t\t\tclientId,\n\t\t\t\t\t{\n\t\t\t\t\t\tmetadata: cleanEmptyObject( {\n\t\t\t\t\t\t\t...attributes?.metadata,\n\t\t\t\t\t\t\tblockVisibility: newVisibility,\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\tupdateBlockAttributes( clientIds, attributesByClientId, {\n\t\t\t\tuniqueByBlock: true,\n\t\t\t} );\n\n\t\t\tcreateSuccessNotice( noticeMessage, {\n\t\t\t\tid: hideEverywhere\n\t\t\t\t\t? 'block-visibility-hidden'\n\t\t\t\t\t: 'block-visibility-viewports-updated',\n\t\t\t\ttype: 'snackbar',\n\t\t\t} );\n\t\t\tonClose();\n\t\t},\n\t\t[\n\t\t\tblocks,\n\t\t\tclientIds,\n\t\t\tcreateSuccessNotice,\n\t\t\thideEverywhere,\n\t\t\tnoticeMessage,\n\t\t\tonClose,\n\t\t\tupdateBlockAttributes,\n\t\t\tviewportChecked,\n\t\t]\n\t);\n\n\tconst hasMultipleBlocks = blocks?.length > 1;\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={\n\t\t\t\tclientIds?.length > 1 ? __( 'Hide blocks' ) : __( 'Hide block' )\n\t\t\t}\n\t\t\tonRequestClose={ onClose }\n\t\t\toverlayClassName=\"block-editor-block-visibility-modal\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form onSubmit={ handleSubmit }>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<legend>\n\t\t\t\t\t\t{ hasMultipleBlocks\n\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t'Select the viewport sizes for which you want to hide the blocks. Changes will apply to all selected blocks.'\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t'Select the viewport size for which you want to hide the block.'\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</legend>\n\t\t\t\t\t<ul className=\"block-editor-block-visibility-modal__options\">\n\t\t\t\t\t\t<li className=\"block-editor-block-visibility-modal__options-item block-editor-block-visibility-modal__options-item--everywhere\">\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-visibility-modal__options-checkbox--everywhere\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Omit from published content' ) }\n\t\t\t\t\t\t\t\tchecked={ hideEverywhere === true }\n\t\t\t\t\t\t\t\tindeterminate={ hideEverywhere === null }\n\t\t\t\t\t\t\t\tonChange={ ( checked ) => {\n\t\t\t\t\t\t\t\t\tsetHideEverywhere( checked );\n\t\t\t\t\t\t\t\t\t// Reset viewport checkboxes when hide everywhere is checked.\n\t\t\t\t\t\t\t\t\tsetViewportChecked(\n\t\t\t\t\t\t\t\t\t\tDEFAULT_VIEWPORT_CHECKBOX_VALUES\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ hideEverywhere !== true && (\n\t\t\t\t\t\t\t\t<ul className=\"block-editor-block-visibility-modal__sub-options\">\n\t\t\t\t\t\t\t\t\t{ BLOCK_VISIBILITY_VIEWPORT_ENTRIES.map(\n\t\t\t\t\t\t\t\t\t\t( [ , { label, icon, key } ] ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ key }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-visibility-modal__options-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: The viewport name.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t__( 'Hide on %s' ),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewportChecked[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t] ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tindeterminate={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewportChecked[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t] === null\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleViewportCheckboxChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tchecked\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'block-editor-block-visibility-modal__options-icon--checked':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tviewportChecked[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t{ hasMultipleBlocks && hasIndeterminateValues && (\n\t\t\t\t\t\t<p className=\"block-editor-block-visibility-modal__description\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Selected blocks have different visibility settings. The checkboxes show an indeterminate state when settings differ.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! hasMultipleBlocks && hideEverywhere === true && (\n\t\t\t\t\t\t<p className=\"block-editor-block-visibility-modal__description\">\n\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: The shortcut key to access the List View.\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Block will be hidden in the editor, and omitted from the published markup on the frontend. You can configure it again by selecting it in the List View (%s).'\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tlistViewShortcut\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! hasMultipleBlocks &&\n\t\t\t\t\t\t! hideEverywhere &&\n\t\t\t\t\t\tisAnyViewportChecked && (\n\t\t\t\t\t\t\t<p className=\"block-editor-block-visibility-modal__description\">\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: The shortcut key to access the List View\n\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t'Block will be hidden according to the selected viewports. It will be <strong>included in the published markup on the frontend</strong>. You can configure it again by selecting it in the List View (%s).'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\tlistViewShortcut\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tstrong: <strong />,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t) }\n\t\t\t\t</fieldset>\n\t\t\t\t<Flex\n\t\t\t\t\tclassName=\"block-editor-block-visibility-modal__actions\"\n\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e252bf6889']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e252bf6889\");\n\tstyle.appendChild(document.createTextNode(\".block-editor-block-visibility-modal{z-index:1000001}.block-editor-block-visibility-modal__options{border:0;list-style:none;margin:24px 0;padding:0}.block-editor-block-visibility-modal__options-item{align-items:center;display:flex;gap:24px;justify-content:space-between;margin:0 0 16px}.block-editor-block-visibility-modal__options-item:last-child{margin:0}.block-editor-block-visibility-modal__options-item--everywhere{align-items:start;flex-direction:column}.block-editor-block-visibility-modal__options-checkbox--everywhere{font-weight:600}.block-editor-block-visibility-modal__options-icon--checked{fill:#ddd}.block-editor-block-visibility-modal__sub-options{padding-inline-start:12px;width:100%}.block-editor-block-visibility-modal__description{color:#757575;font-size:12px}.block-editor-block-visibility-info{align-items:center;display:flex;justify-content:start;margin:0 16px 16px;padding-bottom:4px;padding-top:4px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
   "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,iBAAiB;AACvC,SAAS,SAAS,8BAA8B;AAChD,SAAS,SAAS,oBAAoB;AAKtC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,wBAAwB;AAC1C,SAAS,wBAAwB;AACjC;AAAA,EACC;AAAA,EACA;AAAA,OACM;;;ACvCP,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,65BAA65B,CAAC;AACx8B,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADsOK,cA4BM,YA5BN;AAjML,IAAM,mCAAmC;AAAA,EACxC,CAAE,2BAA2B,OAAO,GAAI,GAAG;AAAA,EAC3C,CAAE,2BAA2B,OAAO,GAAI,GAAG;AAAA,EAC3C,CAAE,2BAA2B,QAAQ,GAAI,GAAG;AAC7C;AAEA,IAAM,eAAe,CAAC;AAcP,SAAR,qBAAuC,EAAE,WAAW,QAAQ,GAAI;AACtE,QAAM,EAAE,oBAAoB,IAAI,YAAa,YAAa;AAC1D,QAAM,EAAE,sBAAsB,IAAI,YAAa,gBAAiB;AAEhE,QAAM,SAAS;AAAA,IACd,CAAE,WACD,OAAQ,gBAAiB,EAAE,oBAAqB,SAAU,KAC1D;AAAA,IACD,CAAE,SAAU;AAAA,EACb;AACA,QAAM,mBAAmB,UAAW,CAAE,WAAY;AACjD,WAAO,OAAQ,sBAAuB,EAAE;AAAA,MACvC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,wBAAwB,QAAS,MAAM;AAC5C,QAAK,QAAQ,WAAW,GAAI;AAC3B,aAAO;AAAA,QACN,gBAAgB;AAAA,QAChB,iBAAiB,CAAC;AAAA,MACnB;AAAA,IACD;AAEA,UAAM,iBAAiB,CAAC;AAExB,sCAAkC,QAAS,CAAE,CAAE,EAAE,EAAE,IAAI,CAAE,MAAO;AAC/D,qBAAgB,GAAI,IAAI,yBAA0B,QAAQ,GAAI;AAAA,IAC/D,CAAE;AAEF,WAAO;AAAA,MACN,gBAAgB,+BAAgC,MAAO;AAAA,MACvD,iBAAiB;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,MAAO,CAAE;AAEd,QAAM,CAAE,iBAAiB,kBAAmB,IAAI;AAAA,IAC/C,uBAAuB,mBAAmB,CAAC;AAAA,EAC5C;AACA,QAAM,CAAE,gBAAgB,iBAAkB,IAAI;AAAA,IAC7C,uBAAuB,kBAAkB;AAAA,EAC1C;AAEA,QAAM,+BAA+B;AAAA,IACpC,CAAE,UAAU,cAAe;AAC1B,yBAAoB;AAAA,QACnB,GAAG;AAAA,QACH,CAAE,QAAS,GAAG;AAAA,MACf,CAAE;AAAA,IACH;AAAA,IACA,CAAE,eAAgB;AAAA,EACnB;AAEA,QAAM,gBAAgB,QAAS,MAAM;AACpC,QAAK,CAAE,gBAAiB;AACvB,aAAO;AAAA;AAAA,QAEN;AAAA,UACC;AAAA,QACD;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAEA,UAAM,UACL,QAAQ,SAAS;AAAA;AAAA,MAEd;AAAA,QACA;AAAA,MACA;AAAA;AAAA;AAAA,MAEA;AAAA,QACA;AAAA,MACA;AAAA;AAEJ,WAAO,QAAS,SAAS,gBAAiB;AAAA,EAC3C,GAAG,CAAE,gBAAgB,QAAQ,QAAQ,gBAAiB,CAAE;AAExD,QAAM,uBAAuB;AAAA,IAC5B,MACC,OAAO,OAAQ,eAAgB,EAAE;AAAA,MAChC,CAAE,YAAa,YAAY,QAAQ,YAAY;AAAA,IAChD;AAAA,IACD,CAAE,eAAgB;AAAA,EACnB;AAEA,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAK,mBAAmB,sBAAsB,gBAAiB;AAC9D,aAAO;AAAA,IACR;AACA,WAAO,kCAAkC;AAAA,MACxC,CAAE,CAAE,EAAE,EAAE,IAAI,CAAE,MACb,gBAAiB,GAAI,MACrB,sBAAsB,gBAAiB,GAAI;AAAA,IAC7C;AAAA,EACD,GAAG,CAAE,gBAAgB,iBAAiB,qBAAsB,CAAE;AAE9D,QAAM,yBAAyB,QAAS,MAAM;AAC7C,QAAK,mBAAmB,MAAO;AAC9B,aAAO;AAAA,IACR;AACA,WAAO,OAAO,OAAQ,eAAgB,EAAE;AAAA,MACvC,CAAE,YAAa,YAAY;AAAA,IAC5B;AAAA,EACD,GAAG,CAAE,gBAAgB,eAAgB,CAAE;AAEvC,QAAM,eAAe;AAAA,IACpB,CAAE,UAAW;AACZ,YAAM,eAAe;AACrB,YAAM,gBAAgB,iBACnB,QACA;AAAA,QACA,UAAU,kCAAkC;AAAA,UAC3C,CAAE,KAAK,CAAE,EAAE,EAAE,IAAI,CAAE,MAAO;AACzB,gBAAK,gBAAiB,GAAI,GAAI;AAI7B,kBAAK,GAAI,IAAI;AAAA,YACd;AACA,mBAAO;AAAA,UACR;AAAA,UACA,CAAC;AAAA,QACF;AAAA,MACA;AACH,YAAM,uBAAuB,OAAO;AAAA,QACnC,OAAO,IAAK,CAAE,EAAE,UAAU,WAAW,MAAO;AAAA,UAC3C;AAAA,UACA;AAAA,YACC,UAAU,iBAAkB;AAAA,cAC3B,GAAG,YAAY;AAAA,cACf,iBAAiB;AAAA,YAClB,CAAE;AAAA,UACH;AAAA,QACD,CAAE;AAAA,MACH;AACA,4BAAuB,WAAW,sBAAsB;AAAA,QACvD,eAAe;AAAA,MAChB,CAAE;AAEF,0BAAqB,eAAe;AAAA,QACnC,IAAI,iBACD,4BACA;AAAA,QACH,MAAM;AAAA,MACP,CAAE;AACF,cAAQ;AAAA,IACT;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,oBAAoB,QAAQ,SAAS;AAE3C,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OACC,WAAW,SAAS,IAAI,GAAI,aAAc,IAAI,GAAI,YAAa;AAAA,MAEhE,gBAAiB;AAAA,MACjB,kBAAiB;AAAA,MACjB,MAAK;AAAA,MAEL,+BAAC,UAAK,UAAW,cAChB;AAAA,6BAAC,cACA;AAAA,8BAAC,YACE,8BACC;AAAA,YACA;AAAA,UACA,IACA;AAAA,YACA;AAAA,UACA,GACJ;AAAA,UACA,oBAAC,QAAG,WAAU,gDACb,+BAAC,QAAG,WAAU,mHACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,OAAQ,GAAI,6BAA8B;AAAA,gBAC1C,SAAU,mBAAmB;AAAA,gBAC7B,eAAgB,mBAAmB;AAAA,gBACnC,UAAW,CAAE,YAAa;AACzB,oCAAmB,OAAQ;AAE3B;AAAA,oBACC;AAAA,kBACD;AAAA,gBACD;AAAA;AAAA,YACD;AAAA,YACE,mBAAmB,QACpB,oBAAC,QAAG,WAAU,oDACX,4CAAkC;AAAA,cACnC,CAAE,CAAE,EAAE,EAAE,OAAO,MAAM,IAAI,CAAE,MAC1B;AAAA,gBAAC;AAAA;AAAA,kBAEA,WAAU;AAAA,kBAEV;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACA,OAAQ;AAAA;AAAA,0BAEP,GAAI,YAAa;AAAA,0BACjB;AAAA,wBACD;AAAA,wBACA,SACC,gBACC,GACD,KAAK;AAAA,wBAEN,eACC,gBACC,GACD,MAAM;AAAA,wBAEP,UAAW,CAAE,YACZ;AAAA,0BACC;AAAA,0BACA;AAAA,wBACD;AAAA;AAAA,oBAEF;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACA;AAAA,wBACA,WAAY,KAAM;AAAA,0BACjB,8DACC,gBACC,GACD;AAAA,wBACF,CAAE;AAAA;AAAA,oBACH;AAAA;AAAA;AAAA,gBAlCM;AAAA,cAmCP;AAAA,YAEF,GACD;AAAA,aAEF,GACD;AAAA,UACE,qBAAqB,0BACtB,oBAAC,OAAE,WAAU,oDACV;AAAA,YACD;AAAA,UACD,GACD;AAAA,UAEC,CAAE,qBAAqB,mBAAmB,QAC3C,oBAAC,OAAE,WAAU,oDACV;AAAA;AAAA,YAED;AAAA,cACC;AAAA,YACD;AAAA,YACA;AAAA,UACD,GACD;AAAA,UAEC,CAAE,qBACH,CAAE,kBACF,wBACC,oBAAC,OAAE,WAAU,oDACV;AAAA,YACD;AAAA;AAAA,cAEC;AAAA,gBACC;AAAA,cACD;AAAA,cACA;AAAA,YACD;AAAA,YACA;AAAA,cACC,QAAQ,oBAAC,YAAO;AAAA,YACjB;AAAA,UACD,GACD;AAAA,WAEH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,UAAW;AAAA,YAEX;AAAA,kCAAC,YACA;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,uBAAqB;AAAA,kBAEnB,aAAI,QAAS;AAAA;AAAA,cAChB,GACD;AAAA,cACA,oBAAC,YACA;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,UAAW,CAAE;AAAA,kBACb,wBAAsB;AAAA,kBACtB,uBAAqB;AAAA,kBAEnB,aAAI,OAAQ;AAAA;AAAA,cACf,GACD;AAAA;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/block-visibility/viewport-visibility-info.mjs

@@ -11,6 +11,7 @@ import { unseen } from "@wordpress/icons";
 import { unlock } from "../../lock-unlock.mjs";
 import { store as blockEditorStore } from "../../store/index.mjs";
 import useBlockVisibility from "./use-block-visibility.mjs";
+import { useBlockElement } from "../block-list/use-block-props/use-block-refs.mjs";
 import { deviceTypeKey } from "../../store/private-keys.mjs";
 import { BLOCK_VISIBILITY_VIEWPORTS } from "./constants.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -43,9 +44,13 @@ function ViewportVisibilityInfo({ clientId }) {
     },
     [clientId]
   );
+  const blockElement = useBlockElement(clientId);
+  const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+  const canvasView = rawCanvasView === null ? void 0 : rawCanvasView;
   const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility({
     blockVisibility: currentBlockVisibility,
-    deviceType: selectedDeviceType
+    deviceType: selectedDeviceType,
+    view: canvasView
   });
   const isBlockParentHiddenAtViewport = useSelect(
     (select) => {

package/build-module/components/block-visibility/viewport-visibility-info.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-visibility/viewport-visibility-info.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { unseen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockVisibility from './use-block-visibility';\nimport { deviceTypeKey } from '../../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from './constants';\n\nconst { Badge } = unlock( componentsPrivateApis );\nconst DEFAULT_VISIBILITY_STATE = {\n\tcurrentBlockVisibility: undefined,\n\thasParentHiddenEverywhere: false,\n\tselectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n};\n\nexport default function ViewportVisibilityInfo( { clientId } ) {\n\tconst {\n\t\tcurrentBlockVisibility,\n\t\tselectedDeviceType,\n\t\thasParentHiddenEverywhere,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn DEFAULT_VISIBILITY_STATE;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockParentHiddenEverywhere,\n\t\t\t\tgetSettings,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tcurrentBlockVisibility:\n\t\t\t\t\tgetBlockAttributes( clientId )?.metadata?.blockVisibility,\n\t\t\t\tselectedDeviceType:\n\t\t\t\t\tgetSettings()?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n\t\t\t\thasParentHiddenEverywhere:\n\t\t\t\t\tisBlockParentHiddenEverywhere( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Use hook to get current viewport and if block is currently hidden (accurate viewport detection)\n\tconst { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {\n\t\tblockVisibility: currentBlockVisibility,\n\t\tdeviceType: selectedDeviceType,\n\t} );\n\n\t/*\n\t * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.\n\t * Separated because it depends on currentViewport from the hook above.\n\t */\n\tconst isBlockParentHiddenAtViewport = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId || ! currentViewport ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t).isBlockParentHiddenAtViewport( clientId, currentViewport );\n\t\t},\n\t\t[ clientId, currentViewport ]\n\t);\n\n\tif (\n\t\t! (\n\t\t\tisBlockCurrentlyHidden ||\n\t\t\thasParentHiddenEverywhere ||\n\t\t\tisBlockParentHiddenAtViewport\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\t// Determine label based on whether block or parent is hidden\n\tlet label;\n\tif ( isBlockCurrentlyHidden ) {\n\t\t// Block is currently hidden - check if hidden everywhere or at specific viewport\n\t\tif ( currentBlockVisibility === false ) {\n\t\t\tlabel = __( 'Block is hidden' );\n\t\t} else {\n\t\t\tconst viewportLabel =\n\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\t\tcurrentViewport;\n\t\t\tlabel = sprintf(\n\t\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t\t__( 'Block is hidden on %s' ),\n\t\t\t\tviewportLabel\n\t\t\t);\n\t\t}\n\t}\n\n\t// Parent is hidden - check if hidden everywhere or at specific viewport\n\tif ( hasParentHiddenEverywhere ) {\n\t\tlabel = __( 'Parent block is hidden' );\n\t} else if ( isBlockParentHiddenAtViewport ) {\n\t\tconst viewportLabel =\n\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\tcurrentViewport;\n\t\tlabel = sprintf(\n\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t__( 'Parent block is hidden on %s' ),\n\t\t\tviewportLabel\n\t\t);\n\t}\n\n\treturn (\n\t\t<Badge className=\"block-editor-block-visibility-info\">\n\t\t\t<HStack spacing={ 2 } justify=\"start\">\n\t\t\t\t<Icon icon={ unseen } />\n\t\t\t\t<Text>{ label }</Text>\n\t\t\t</HStack>\n\t\t</Badge>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,eAAe;AAAA,OACT;AACP,SAAS,iBAAiB;AAC1B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AAKvB,SAAS,cAAc;AACvB,SAAS,SAAS,wBAAwB;AAC1C,OAAO,wBAAwB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AAwGxC,SACC,KADD;AAtGH,IAAM,EAAE,MAAM,IAAI,OAAQ,qBAAsB;AAChD,IAAM,2BAA2B;AAAA,EAChC,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,oBAAoB,2BAA2B,QAAQ;AACxD;AAEe,SAAR,uBAAyC,EAAE,SAAS,GAAI;AAC9D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,OAAQ,gBAAiB,CAAE;AAEvC,aAAO;AAAA,QACN,wBACC,mBAAoB,QAAS,GAAG,UAAU;AAAA,QAC3C,oBACC,YAAY,IAAK,aAAc,GAAG,YAAY,KAC9C,2BAA2B,QAAQ;AAAA,QACpC,2BACC,8BAA+B,QAAS;AAAA,MAC1C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAGA,QAAM,EAAE,wBAAwB,gBAAgB,IAAI,mBAAoB;AAAA,IACvE,iBAAiB;AAAA,IACjB,YAAY;AAAA,EACb,CAAE;AAMF,QAAM,gCAAgC;AAAA,IACrC,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,iBAAkB;AACtC,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN,OAAQ,gBAAiB;AAAA,MAC1B,EAAE,8BAA+B,UAAU,eAAgB;AAAA,IAC5D;AAAA,IACA,CAAE,UAAU,eAAgB;AAAA,EAC7B;AAEA,MACC,EACC,0BACA,6BACA,gCAEA;AACD,WAAO;AAAA,EACR;AAGA,MAAI;AACJ,MAAK,wBAAyB;AAE7B,QAAK,2BAA2B,OAAQ;AACvC,cAAQ,GAAI,iBAAkB;AAAA,IAC/B,OAAO;AACN,YAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,cAAQ;AAAA;AAAA,QAEP,GAAI,uBAAwB;AAAA,QAC5B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,MAAK,2BAA4B;AAChC,YAAQ,GAAI,wBAAyB;AAAA,EACtC,WAAY,+BAAgC;AAC3C,UAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,YAAQ;AAAA;AAAA,MAEP,GAAI,8BAA+B;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AAEA,SACC,oBAAC,SAAM,WAAU,sCAChB,+BAAC,UAAO,SAAU,GAAI,SAAQ,SAC7B;AAAA,wBAAC,QAAK,MAAO,QAAS;AAAA,IACtB,oBAAC,QAAO,iBAAO;AAAA,KAChB,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { unseen } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport useBlockVisibility from './use-block-visibility';\nimport { useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport { deviceTypeKey } from '../../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from './constants';\n\nconst { Badge } = unlock( componentsPrivateApis );\nconst DEFAULT_VISIBILITY_STATE = {\n\tcurrentBlockVisibility: undefined,\n\thasParentHiddenEverywhere: false,\n\tselectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n};\n\nexport default function ViewportVisibilityInfo( { clientId } ) {\n\tconst {\n\t\tcurrentBlockVisibility,\n\t\tselectedDeviceType,\n\t\thasParentHiddenEverywhere,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn DEFAULT_VISIBILITY_STATE;\n\t\t\t}\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockParentHiddenEverywhere,\n\t\t\t\tgetSettings,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\treturn {\n\t\t\t\tcurrentBlockVisibility:\n\t\t\t\t\tgetBlockAttributes( clientId )?.metadata?.blockVisibility,\n\t\t\t\tselectedDeviceType:\n\t\t\t\t\tgetSettings()?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n\t\t\t\thasParentHiddenEverywhere:\n\t\t\t\t\tisBlockParentHiddenEverywhere( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Get the block's DOM element to derive the canvas iframe window,\n\t// so viewport detection matches the actual block rendering context.\n\tconst blockElement = useBlockElement( clientId );\n\tconst rawCanvasView = blockElement?.ownerDocument?.defaultView;\n\tconst canvasView = rawCanvasView === null ? undefined : rawCanvasView;\n\n\tconst { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {\n\t\tblockVisibility: currentBlockVisibility,\n\t\tdeviceType: selectedDeviceType,\n\t\tview: canvasView,\n\t} );\n\n\t/*\n\t * Selector to check if any parent (immediate or further up the chain) is hidden at current viewport.\n\t * Separated because it depends on currentViewport from the hook above.\n\t */\n\tconst isBlockParentHiddenAtViewport = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! clientId || ! currentViewport ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn unlock(\n\t\t\t\tselect( blockEditorStore )\n\t\t\t).isBlockParentHiddenAtViewport( clientId, currentViewport );\n\t\t},\n\t\t[ clientId, currentViewport ]\n\t);\n\n\tif (\n\t\t! (\n\t\t\tisBlockCurrentlyHidden ||\n\t\t\thasParentHiddenEverywhere ||\n\t\t\tisBlockParentHiddenAtViewport\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\t// Determine label based on whether block or parent is hidden\n\tlet label;\n\tif ( isBlockCurrentlyHidden ) {\n\t\t// Block is currently hidden - check if hidden everywhere or at specific viewport\n\t\tif ( currentBlockVisibility === false ) {\n\t\t\tlabel = __( 'Block is hidden' );\n\t\t} else {\n\t\t\tconst viewportLabel =\n\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\t\tcurrentViewport;\n\t\t\tlabel = sprintf(\n\t\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t\t__( 'Block is hidden on %s' ),\n\t\t\t\tviewportLabel\n\t\t\t);\n\t\t}\n\t}\n\n\t// Parent is hidden - check if hidden everywhere or at specific viewport\n\tif ( hasParentHiddenEverywhere ) {\n\t\tlabel = __( 'Parent block is hidden' );\n\t} else if ( isBlockParentHiddenAtViewport ) {\n\t\tconst viewportLabel =\n\t\t\tBLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label ||\n\t\t\tcurrentViewport;\n\t\tlabel = sprintf(\n\t\t\t/* translators: %s: viewport name (Desktop, Tablet, Mobile) */\n\t\t\t__( 'Parent block is hidden on %s' ),\n\t\t\tviewportLabel\n\t\t);\n\t}\n\n\treturn (\n\t\t<Badge className=\"block-editor-block-visibility-info\">\n\t\t\t<HStack spacing={ 2 } justify=\"start\">\n\t\t\t\t<Icon icon={ unseen } />\n\t\t\t\t<Text>{ label }</Text>\n\t\t\t</HStack>\n\t\t</Badge>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,EACxB,eAAe;AAAA,OACT;AACP,SAAS,iBAAiB;AAC1B,SAAS,IAAI,eAAe;AAC5B,SAAS,cAAc;AAKvB,SAAS,cAAc;AACvB,SAAS,SAAS,wBAAwB;AAC1C,OAAO,wBAAwB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,kCAAkC;AA8GxC,SACC,KADD;AA5GH,IAAM,EAAE,MAAM,IAAI,OAAQ,qBAAsB;AAChD,IAAM,2BAA2B;AAAA,EAChC,wBAAwB;AAAA,EACxB,2BAA2B;AAAA,EAC3B,oBAAoB,2BAA2B,QAAQ;AACxD;AAEe,SAAR,uBAAyC,EAAE,SAAS,GAAI;AAC9D,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AACA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,OAAQ,gBAAiB,CAAE;AAEvC,aAAO;AAAA,QACN,wBACC,mBAAoB,QAAS,GAAG,UAAU;AAAA,QAC3C,oBACC,YAAY,IAAK,aAAc,GAAG,YAAY,KAC9C,2BAA2B,QAAQ;AAAA,QACpC,2BACC,8BAA+B,QAAS;AAAA,MAC1C;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAIA,QAAM,eAAe,gBAAiB,QAAS;AAC/C,QAAM,gBAAgB,cAAc,eAAe;AACnD,QAAM,aAAa,kBAAkB,OAAO,SAAY;AAExD,QAAM,EAAE,wBAAwB,gBAAgB,IAAI,mBAAoB;AAAA,IACvE,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,MAAM;AAAA,EACP,CAAE;AAMF,QAAM,gCAAgC;AAAA,IACrC,CAAE,WAAY;AACb,UAAK,CAAE,YAAY,CAAE,iBAAkB;AACtC,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN,OAAQ,gBAAiB;AAAA,MAC1B,EAAE,8BAA+B,UAAU,eAAgB;AAAA,IAC5D;AAAA,IACA,CAAE,UAAU,eAAgB;AAAA,EAC7B;AAEA,MACC,EACC,0BACA,6BACA,gCAEA;AACD,WAAO;AAAA,EACR;AAGA,MAAI;AACJ,MAAK,wBAAyB;AAE7B,QAAK,2BAA2B,OAAQ;AACvC,cAAQ,GAAI,iBAAkB;AAAA,IAC/B,OAAO;AACN,YAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,cAAQ;AAAA;AAAA,QAEP,GAAI,uBAAwB;AAAA,QAC5B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,MAAK,2BAA4B;AAChC,YAAQ,GAAI,wBAAyB;AAAA,EACtC,WAAY,+BAAgC;AAC3C,UAAM,gBACL,2BAA4B,eAAgB,GAAG,SAC/C;AACD,YAAQ;AAAA;AAAA,MAEP,GAAI,8BAA+B;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AAEA,SACC,oBAAC,SAAM,WAAU,sCAChB,+BAAC,UAAO,SAAU,GAAI,SAAQ,SAC7B;AAAA,wBAAC,QAAK,MAAO,QAAS;AAAA,IACtB,oBAAC,QAAO,iBAAO;AAAA,KAChB,GACD;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/background-panel.mjs

@@ -5,15 +5,23 @@ import {
 } from "@wordpress/components";
 import { useCallback, Platform } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
+import { getValueFromVariable } from "@wordpress/global-styles-engine";
 import BackgroundImageControl from "../background-image-control/index.mjs";
+import { ColorPanelDropdown } from "./color-panel.mjs";
+import { useGradientsPerOrigin } from "./hooks.mjs";
 import { useToolsPanelDropdownMenuProps } from "./utils.mjs";
 import { setImmutably } from "../../utils/object.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_CONTROLS = {
-  backgroundImage: true
+  backgroundImage: true,
+  gradient: true
 };
+function useHasBackgroundControl(settings, feature) {
+  return Platform.OS === "web" && settings?.background?.[feature];
+}
 function useHasBackgroundPanel(settings) {
-  return Platform.OS === "web" && settings?.background?.backgroundImage;
+  const { backgroundImage, gradient } = settings?.background || {};
+  return Platform.OS === "web" && (backgroundImage || gradient);
 }
 function hasBackgroundSizeValue(style) {
   return style?.background?.backgroundPosition !== void 0 || style?.background?.backgroundSize !== void 0;
@@ -22,6 +30,9 @@ function hasBackgroundImageValue(style) {
   return !!style?.background?.backgroundImage?.id || // Supports url() string values in theme.json.
   "string" === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
 }
+function hasBackgroundGradientValue(style) {
+  return "string" === typeof style?.background?.gradient && style?.background?.gradient !== "";
+}
 function BackgroundToolsPanel({
   resetAllFilter,
   onChange,
@@ -41,8 +52,12 @@ function BackgroundToolsPanel({
       label: headerLabel,
       resetAll,
       panelId,
+      hasInnerWrapper: true,
+      className: "background-block-support-panel",
+      __experimentalFirstVisibleItemClass: "first",
+      __experimentalLastVisibleItemClass: "last",
       dropdownMenuProps,
-      children
+      children: /* @__PURE__ */ jsx("div", { className: "background-block-support-panel__inner-wrapper", children })
     }
   );
 }
@@ -57,15 +72,76 @@ function BackgroundImagePanel({
   defaultValues = {},
   headerLabel = __("Background")
 }) {
-  const showBackgroundImageControl = useHasBackgroundPanel(settings);
-  const resetBackground = () => onChange(setImmutably(value, ["background"], {}));
-  const resetAllFilter = useCallback((previousValue) => {
-    return {
-      ...previousValue,
-      background: {}
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
+  const gradients = useGradientsPerOrigin(settings);
+  const areCustomGradientsEnabled = settings?.color?.customGradient;
+  const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+  const hasBackgroundGradientControl = useHasBackgroundControl(
+    settings,
+    "gradient"
+  );
+  const showBackgroundGradientControl = hasGradientColors && hasBackgroundGradientControl;
+  const showBackgroundImageControl = useHasBackgroundControl(
+    settings,
+    "backgroundImage"
+  );
+  const resetAllFilter = useCallback(
+    (previousValue) => {
+      return {
+        ...previousValue,
+        background: {},
+        color: hasBackgroundGradientControl ? {
+          ...previousValue?.color,
+          gradient: void 0
+        } : previousValue?.color
+      };
+    },
+    [hasBackgroundGradientControl]
+  );
+  if (!showBackgroundGradientControl && !showBackgroundImageControl) {
+    return null;
+  }
+  const decodeValue = (rawValue) => getValueFromVariable({ settings }, "", rawValue);
+  const encodeGradientValue = (gradientValue) => {
+    const allGradients = gradients.flatMap(
+      ({ gradients: originGradients }) => originGradients
+    );
+    const gradientObject = allGradients.find(
+      ({ gradient }) => gradient === gradientValue
+    );
+    return gradientObject ? "var:preset|gradient|" + gradientObject.slug : gradientValue;
+  };
+  const resetBackground = () => onChange(
+    setImmutably(
+      value,
+      ["background", "backgroundImage"],
+      void 0
+    )
+  );
+  const resetGradient = () => {
+    let newValue = setImmutably(
+      value,
+      ["background", "gradient"],
+      void 0
+    );
+    newValue = setImmutably(newValue, ["color", "gradient"], void 0);
+    onChange(newValue);
+  };
+  const currentGradient = decodeValue(
+    value?.background?.gradient ?? value?.color?.gradient
+  );
+  const inheritedGradient = decodeValue(
+    inheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient
+  );
+  const setGradient = (newGradient) => {
+    let newValue = setImmutably(
+      value,
+      ["background", "gradient"],
+      encodeGradientValue(newGradient)
+    );
+    newValue = setImmutably(newValue, ["color", "gradient"], void 0);
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs(
     Wrapper,
     {
       resetAllFilter,
@@ -73,34 +149,65 @@ function BackgroundImagePanel({
       onChange,
       panelId,
       headerLabel,
-      children: showBackgroundImageControl && /* @__PURE__ */ jsx(
-        ToolsPanelItem,
-        {
-          hasValue: () => !!value?.background,
-          label: __("Image"),
-          onDeselect: resetBackground,
-          isShownByDefault: defaultControls.backgroundImage,
-          panelId,
-          children: /* @__PURE__ */ jsx(
-            BackgroundImageControl,
-            {
-              value,
-              onChange,
-              settings,
-              inheritedValue,
-              defaultControls,
-              defaultValues
-            }
-          )
-        }
-      )
+      children: [
+        showBackgroundImageControl && /* @__PURE__ */ jsx(
+          ToolsPanelItem,
+          {
+            className: "block-editor-background-panel__item",
+            hasValue: () => hasBackgroundImageValue(value),
+            label: __("Image"),
+            onDeselect: resetBackground,
+            isShownByDefault: defaultControls.backgroundImage,
+            panelId,
+            children: /* @__PURE__ */ jsx(
+              BackgroundImageControl,
+              {
+                value,
+                onChange,
+                settings,
+                inheritedValue,
+                defaultControls,
+                defaultValues
+              }
+            )
+          }
+        ),
+        showBackgroundGradientControl && /* @__PURE__ */ jsx(
+          ColorPanelDropdown,
+          {
+            className: "block-editor-background-panel__item",
+            label: __("Gradient"),
+            hasValue: () => hasBackgroundGradientValue(value),
+            resetValue: resetGradient,
+            isShownByDefault: defaultControls.gradient,
+            indicators: [currentGradient],
+            tabs: [
+              {
+                key: "gradient",
+                label: __("Gradient"),
+                inheritedValue: currentGradient ?? inheritedGradient,
+                setValue: setGradient,
+                userValue: currentGradient,
+                isGradient: true
+              }
+            ],
+            colorGradientControlSettings: {
+              gradients,
+              disableCustomGradients: !areCustomGradientsEnabled
+            },
+            panelId
+          }
+        )
+      ]
     }
   );
 }
 export {
   BackgroundImagePanel as default,
+  hasBackgroundGradientValue,
   hasBackgroundImageValue,
   hasBackgroundSizeValue,
+  useHasBackgroundControl,
   useHasBackgroundPanel
 };
 //# sourceMappingURL=background-panel.mjs.map

package/build-module/components/global-styles/background-panel.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/background-panel.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback, Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n};\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\treturn Platform.OS === 'web' && settings?.background?.backgroundImage;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t// Supports url() string values in theme.json.\n\t\t'string' === typeof style?.background?.backgroundImage ||\n\t\t!! style?.background?.backgroundImage?.url\n\t);\n}\n\nfunction BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\theaderLabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ headerLabel }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t{ children }\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n} ) {\n\tconst showBackgroundImageControl = useHasBackgroundPanel( settings );\n\tconst resetBackground = () =>\n\t\tonChange( setImmutably( value, [ 'background' ], {} ) );\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tbackground: {},\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\theaderLabel={ headerLabel }\n\t\t>\n\t\t\t{ showBackgroundImageControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => !! value?.background }\n\t\t\t\t\tlabel={ __( 'Image' ) }\n\t\t\t\t\tonDeselect={ resetBackground }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,OAC1B;AACP,SAAS,aAAa,gBAAgB;AACtC,SAAS,UAAU;AAInB,OAAO,4BAA4B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB;AAgE3B;AA9DF,IAAM,mBAAmB;AAAA,EACxB,iBAAiB;AAClB;AAUO,SAAS,sBAAuB,UAAW;AACjD,SAAO,SAAS,OAAO,SAAS,UAAU,YAAY;AACvD;AAUO,SAAS,uBAAwB,OAAQ;AAC/C,SACC,OAAO,YAAY,uBAAuB,UAC1C,OAAO,YAAY,mBAAmB;AAExC;AASO,SAAS,wBAAyB,OAAQ;AAChD,SACC,CAAC,CAAE,OAAO,YAAY,iBAAiB;AAAA,EAEvC,aAAa,OAAO,OAAO,YAAY,mBACvC,CAAC,CAAE,OAAO,YAAY,iBAAiB;AAEzC;AAEA,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,oBAAoB,+BAA+B;AACzD,QAAM,WAAW,MAAM;AACtB,UAAM,eAAe,eAAgB,KAAM;AAC3C,aAAU,YAAa;AAAA,EACxB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;AAEe,SAAR,qBAAuC;AAAA,EAC7C,IAAI,UAAU;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,gBAAgB,CAAC;AAAA,EACjB,cAAc,GAAI,YAAa;AAChC,GAAI;AACH,QAAM,6BAA6B,sBAAuB,QAAS;AACnE,QAAM,kBAAkB,MACvB,SAAU,aAAc,OAAO,CAAE,YAAa,GAAG,CAAC,CAAE,CAAE;AACvD,QAAM,iBAAiB,YAAa,CAAE,kBAAmB;AACxD,WAAO;AAAA,MACN,GAAG;AAAA,MACH,YAAY,CAAC;AAAA,IACd;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,wCACD;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,MAAM,CAAC,CAAE,OAAO;AAAA,UAC3B,OAAQ,GAAI,OAAQ;AAAA,UACpB,YAAa;AAAA,UACb,kBAAmB,gBAAgB;AAAA,UACnC;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACD;AAAA;AAAA,MACD;AAAA;AAAA,EAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useCallback, Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getValueFromVariable } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport BackgroundImageControl from '../background-image-control';\nimport { ColorPanelDropdown } from './color-panel';\nimport { useGradientsPerOrigin } from './hooks';\nimport { useToolsPanelDropdownMenuProps } from './utils';\nimport { setImmutably } from '../../utils/object';\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n\tgradient: true,\n};\n\n/**\n * Checks site settings to see if the requested feature's control may be used.\n *\n * @param {Object} settings Site settings.\n * @param {string} feature  Background feature to check.\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundControl( settings, feature ) {\n\treturn Platform.OS === 'web' && settings?.background?.[ feature ];\n}\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\tconst { backgroundImage, gradient } = settings?.background || {};\n\treturn Platform.OS === 'web' && ( backgroundImage || gradient );\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t// Supports url() string values in theme.json.\n\t\t'string' === typeof style?.background?.backgroundImage ||\n\t\t!! style?.background?.backgroundImage?.url\n\t);\n}\n\n/**\n * Checks if there is a current value in the background gradient block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background gradient value set.\n */\nexport function hasBackgroundGradientValue( style ) {\n\treturn (\n\t\t'string' === typeof style?.background?.gradient &&\n\t\tstyle?.background?.gradient !== ''\n\t);\n}\n\nfunction BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n\theaderLabel,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={ headerLabel }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\thasInnerWrapper\n\t\t\tclassName=\"background-block-support-panel\"\n\t\t\t__experimentalFirstVisibleItemClass=\"first\"\n\t\t\t__experimentalLastVisibleItemClass=\"last\"\n\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t>\n\t\t\t<div className=\"background-block-support-panel__inner-wrapper\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</ToolsPanel>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n\theaderLabel = __( 'Background' ),\n} ) {\n\tconst gradients = useGradientsPerOrigin( settings );\n\tconst areCustomGradientsEnabled = settings?.color?.customGradient;\n\tconst hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;\n\n\tconst hasBackgroundGradientControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'gradient'\n\t);\n\tconst showBackgroundGradientControl =\n\t\thasGradientColors && hasBackgroundGradientControl;\n\tconst showBackgroundImageControl = useHasBackgroundControl(\n\t\tsettings,\n\t\t'backgroundImage'\n\t);\n\n\tconst resetAllFilter = useCallback(\n\t\t( previousValue ) => {\n\t\t\treturn {\n\t\t\t\t...previousValue,\n\t\t\t\tbackground: {},\n\t\t\t\tcolor: hasBackgroundGradientControl\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...previousValue?.color,\n\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t  }\n\t\t\t\t\t: previousValue?.color,\n\t\t\t};\n\t\t},\n\t\t[ hasBackgroundGradientControl ]\n\t);\n\n\tif ( ! showBackgroundGradientControl && ! showBackgroundImageControl ) {\n\t\treturn null;\n\t}\n\n\tconst decodeValue = ( rawValue ) =>\n\t\tgetValueFromVariable( { settings }, '', rawValue );\n\tconst encodeGradientValue = ( gradientValue ) => {\n\t\tconst allGradients = gradients.flatMap(\n\t\t\t( { gradients: originGradients } ) => originGradients\n\t\t);\n\t\tconst gradientObject = allGradients.find(\n\t\t\t( { gradient } ) => gradient === gradientValue\n\t\t);\n\t\treturn gradientObject\n\t\t\t? 'var:preset|gradient|' + gradientObject.slug\n\t\t\t: gradientValue;\n\t};\n\n\tconst resetBackground = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tvalue,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst resetGradient = () => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tundefined\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\n\t};\n\n\t// Get current gradient value, decoding preset slug references.\n\t// Fall back to color.gradient for legacy blocks that haven't migrated\n\t// to background.gradient yet (mirrors block inspector fallback in\n\t// packages/block-editor/src/hooks/background.js).\n\tconst currentGradient = decodeValue(\n\t\tvalue?.background?.gradient ?? value?.color?.gradient\n\t);\n\tconst inheritedGradient = decodeValue(\n\t\tinheritedValue?.background?.gradient ?? inheritedValue?.color?.gradient\n\t);\n\n\t// Set gradient value, encoding preset matches as slug references.\n\t// Also clear color.gradient to migrate from the legacy location,\n\t// matching the block inspector behavior in hooks/background.js.\n\tconst setGradient = ( newGradient ) => {\n\t\tlet newValue = setImmutably(\n\t\t\tvalue,\n\t\t\t[ 'background', 'gradient' ],\n\t\t\tencodeGradientValue( newGradient )\n\t\t);\n\t\tnewValue = setImmutably( newValue, [ 'color', 'gradient' ], undefined );\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t\theaderLabel={ headerLabel }\n\t\t>\n\t\t\t{ showBackgroundImageControl && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"block-editor-background-panel__item\"\n\t\t\t\t\thasValue={ () => hasBackgroundImageValue( value ) }\n\t\t\t\t\tlabel={ __( 'Image' ) }\n\t\t\t\t\tonDeselect={ resetBackground }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<BackgroundImageControl\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\t\tdefaultControls={ defaultControls }\n\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ showBackgroundGradientControl && (\n\t\t\t\t<ColorPanelDropdown\n\t\t\t\t\tclassName=\"block-editor-background-panel__item\"\n\t\t\t\t\tlabel={ __( 'Gradient' ) }\n\t\t\t\t\thasValue={ () => hasBackgroundGradientValue( value ) }\n\t\t\t\t\tresetValue={ resetGradient }\n\t\t\t\t\tisShownByDefault={ defaultControls.gradient }\n\t\t\t\t\tindicators={ [ currentGradient ] }\n\t\t\t\t\ttabs={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkey: 'gradient',\n\t\t\t\t\t\t\tlabel: __( 'Gradient' ),\n\t\t\t\t\t\t\tinheritedValue:\n\t\t\t\t\t\t\t\tcurrentGradient ?? inheritedGradient,\n\t\t\t\t\t\t\tsetValue: setGradient,\n\t\t\t\t\t\t\tuserValue: currentGradient,\n\t\t\t\t\t\t\tisGradient: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tcolorGradientControlSettings={ {\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomGradients: ! areCustomGradientsEnabled,\n\t\t\t\t\t} }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }