@wordpress/block-editor 13.1.0 → 13.3.0

package/build-module/hooks/block-style-variation.js.map

@@ -1 +1 @@
-{"version":3,"names":["getBlockTypes","store","blocksStore","useSelect","useContext","useMemo","GlobalStylesContext","toStyles","getBlockSelectors","useStyleOverride","blockEditorStore","globalStylesDataKey","getVariationNameFromClass","className","registeredStyles","matches","match","variationClass","variation","substring","some","style","name","useBlockStyleVariation","clientId","merged","mergedConfig","globalSettings","globalStyles","select","settings","getSettings","__experimentalFeatures","_mergedConfig$styles","_mergedConfig$setting","styles","variationStyles","blocks","variations","useBlockProps","getBlockStyles","variationConfig","blockSelectors","hasBlockGapSupport","hasFallbackGapSupport","disableLayoutStyles","isTemplate","blockGap","blockStyles","layoutStyles","marginReset","presets","rootPadding","id","css","__unstableType","hasSupport","attributeKeys"],"sources":["@wordpress/block-editor/src/hooks/block-style-variation.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGlobalStylesContext,\n\ttoStyles,\n\tgetBlockSelectors,\n} from '../components/global-styles';\nimport { useStyleOverride } from './utils';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\n\n/**\n * Get the first block style variation that has been registered from the class string.\n *\n * @param {string} className        CSS class string for a block.\n * @param {Array}  registeredStyles Currently registered block styles.\n *\n * @return {string|null} The name of the first registered variation.\n */\nfunction getVariationNameFromClass( className, registeredStyles = [] ) {\n\t// The global flag affects how capturing groups work in JS. So the regex\n\t// below will only return full CSS classes not just the variation name.\n\tconst matches = className?.match( /\\bis-style-(?!default)(\\S+)\\b/g );\n\n\tif ( ! matches ) {\n\t\treturn null;\n\t}\n\n\tfor ( const variationClass of matches ) {\n\t\tconst variation = variationClass.substring( 9 ); // Remove 'is-style-' prefix.\n\t\tif ( registeredStyles.some( ( style ) => style.name === variation ) ) {\n\t\t\treturn variation;\n\t\t}\n\t}\n\treturn null;\n}\n\nfunction useBlockStyleVariation( name, variation, clientId ) {\n\t// Prefer global styles data in GlobalStylesContext, which are available\n\t// if in the site editor. Otherwise fall back to whatever is in the\n\t// editor settings and available in the post editor.\n\tconst { merged: mergedConfig } = useContext( GlobalStylesContext );\n\tconst { globalSettings, globalStyles } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tglobalSettings: settings.__experimentalFeatures,\n\t\t\tglobalStyles: settings[ globalStylesDataKey ],\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst styles = mergedConfig?.styles ?? globalStyles;\n\t\tconst variationStyles =\n\t\t\tstyles?.blocks?.[ name ]?.variations?.[ variation ];\n\n\t\treturn {\n\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t// The variation style data is all that is needed to generate\n\t\t\t// the styles for the current application to a block. The variation\n\t\t\t// name is updated to match the instance specific class name.\n\t\t\tstyles: {\n\t\t\t\tblocks: {\n\t\t\t\t\t[ name ]: {\n\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t[ `${ variation }-${ clientId }` ]: variationStyles,\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};\n\t}, [\n\t\tmergedConfig,\n\t\tglobalSettings,\n\t\tglobalStyles,\n\t\tvariation,\n\t\tclientId,\n\t\tname,\n\t] );\n}\n\n// Rather than leveraging `useInstanceId` here, the `clientId` is used.\n// This is so that the variation style override's ID is predictable\n// when the order of applied style variations changes.\nfunction useBlockProps( { name, className, clientId } ) {\n\tconst { getBlockStyles } = useSelect( blocksStore );\n\n\tconst registeredStyles = getBlockStyles( name );\n\tconst variation = getVariationNameFromClass( className, registeredStyles );\n\tconst variationClass = `is-style-${ variation }-${ clientId }`;\n\n\tconst { settings, styles } = useBlockStyleVariation(\n\t\tname,\n\t\tvariation,\n\t\tclientId\n\t);\n\n\tconst variationStyles = useMemo( () => {\n\t\tif ( ! variation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst variationConfig = { settings, styles };\n\t\tconst blockSelectors = getBlockSelectors(\n\t\t\tgetBlockTypes(),\n\t\t\tgetBlockStyles,\n\t\t\tclientId\n\t\t);\n\t\tconst hasBlockGapSupport = false;\n\t\tconst hasFallbackGapSupport = true;\n\t\tconst disableLayoutStyles = true;\n\t\tconst isTemplate = true;\n\n\t\treturn toStyles(\n\t\t\tvariationConfig,\n\t\t\tblockSelectors,\n\t\t\thasBlockGapSupport,\n\t\t\thasFallbackGapSupport,\n\t\t\tdisableLayoutStyles,\n\t\t\tisTemplate,\n\t\t\t{\n\t\t\t\tblockGap: false,\n\t\t\t\tblockStyles: true,\n\t\t\t\tlayoutStyles: false,\n\t\t\t\tmarginReset: false,\n\t\t\t\tpresets: false,\n\t\t\t\trootPadding: false,\n\t\t\t}\n\t\t);\n\t}, [ variation, settings, styles, getBlockStyles, clientId ] );\n\n\tuseStyleOverride( {\n\t\tid: `variation-${ clientId }`,\n\t\tcss: variationStyles,\n\t\t__unstableType: 'variation',\n\t\t// The clientId will be stored with the override and used to ensure\n\t\t// the order of overrides matches the order of blocks so that the\n\t\t// correct CSS cascade is maintained.\n\t\tclientId,\n\t} );\n\n\treturn variation ? { className: variationClass } : {};\n}\n\nexport default {\n\thasSupport: () => true,\n\tattributeKeys: [ 'className' ],\n\tuseBlockProps,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["getBlockTypes","store","blocksStore","useSelect","useContext","useMemo","GlobalStylesContext","toStyles","getBlockSelectors","useStyleOverride","getValueFromObjectPath","blockEditorStore","globalStylesDataKey","unlock","jsx","_jsx","Fragment","_Fragment","VARIATION_PREFIX","getVariationMatches","className","split","reduce","matches","name","startsWith","match","slice","length","push","getVariationNameFromClass","registeredStyles","variation","some","style","OverrideStyles","override","__unstableBlockStyleVariationOverridesWithConfig","config","getBlockStyles","overrides","select","getStyleOverrides","getBlockName","overridesWithConfig","newOverrides","overriddenClientIds","clientId","includes","blockName","configStyles","styles","blocks","variations","variationConfig","settings","blockSelectors","hasBlockGapSupport","hasFallbackGapSupport","disableLayoutStyles","disableRootPadding","variationStyles","blockGap","blockStyles","layoutStyles","marginReset","presets","rootPadding","id","css","__unstableType","children","map","getVariationStylesWithRefValues","globalStyles","replaceRefs","Object","keys","forEach","key","value","ref","undefined","trim","refValue","JSON","parse","stringify","useBlockStyleVariation","merged","mergedConfig","globalSettings","getSettings","__experimentalFeatures","_mergedConfig$setting","_mergedConfig$styles","_mergedConfig$setting2","useBlockProps","variationClass","hasSupport","attributeKeys","isMatch"],"sources":["@wordpress/block-editor/src/hooks/block-style-variation.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGlobalStylesContext,\n\ttoStyles,\n\tgetBlockSelectors,\n} from '../components/global-styles';\nimport { useStyleOverride } from './utils';\nimport { getValueFromObjectPath } from '../utils/object';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst VARIATION_PREFIX = 'is-style-';\n\nfunction getVariationMatches( className ) {\n\tif ( ! className ) {\n\t\treturn [];\n\t}\n\treturn className.split( /\\s+/ ).reduce( ( matches, name ) => {\n\t\tif ( name.startsWith( VARIATION_PREFIX ) ) {\n\t\t\tconst match = name.slice( VARIATION_PREFIX.length );\n\t\t\tif ( match !== 'default' ) {\n\t\t\t\tmatches.push( match );\n\t\t\t}\n\t\t}\n\t\treturn matches;\n\t}, [] );\n}\n\n/**\n * Get the first block style variation that has been registered from the class string.\n *\n * @param {string} className        CSS class string for a block.\n * @param {Array}  registeredStyles Currently registered block styles.\n *\n * @return {string|null} The name of the first registered variation.\n */\nfunction getVariationNameFromClass( className, registeredStyles = [] ) {\n\t// The global flag affects how capturing groups work in JS. So the regex\n\t// below will only return full CSS classes not just the variation name.\n\tconst matches = getVariationMatches( className );\n\n\tif ( ! matches ) {\n\t\treturn null;\n\t}\n\n\tfor ( const variation of matches ) {\n\t\tif ( registeredStyles.some( ( style ) => style.name === variation ) ) {\n\t\t\treturn variation;\n\t\t}\n\t}\n\treturn null;\n}\n\n// A helper component to apply a style override using the useStyleOverride hook.\nfunction OverrideStyles( { override } ) {\n\tuseStyleOverride( override );\n}\n\n/**\n * This component is used to generate new block style variation overrides\n * based on an incoming theme config. If a matching style is found in the config,\n * a new override is created and returned. The overrides can be used in conjunction with\n * useStyleOverride to apply the new styles to the editor. Its use is\n * subject to change.\n *\n * @param {Object} props        Props.\n * @param {Object} props.config A global styles object, containing settings and styles.\n * @return {JSX.Element|undefined} An array of new block variation overrides.\n */\nexport function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {\n\tconst { getBlockStyles, overrides } = useSelect(\n\t\t( select ) => ( {\n\t\t\tgetBlockStyles: select( blocksStore ).getBlockStyles,\n\t\t\toverrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\n\tconst overridesWithConfig = useMemo( () => {\n\t\tif ( ! overrides?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst newOverrides = [];\n\t\tconst overriddenClientIds = [];\n\t\tfor ( const [ , override ] of overrides ) {\n\t\t\tif (\n\t\t\t\toverride?.variation &&\n\t\t\t\toverride?.clientId &&\n\t\t\t\t/*\n\t\t\t\t * Because this component overwrites existing style overrides,\n\t\t\t\t * filter out any overrides that are already present in the store.\n\t\t\t\t */\n\t\t\t\t! overriddenClientIds.includes( override.clientId )\n\t\t\t) {\n\t\t\t\tconst blockName = getBlockName( override.clientId );\n\t\t\t\tconst configStyles =\n\t\t\t\t\tconfig?.styles?.blocks?.[ blockName ]?.variations?.[\n\t\t\t\t\t\toverride.variation\n\t\t\t\t\t];\n\t\t\t\tif ( configStyles ) {\n\t\t\t\t\tconst variationConfig = {\n\t\t\t\t\t\tsettings: config?.settings,\n\t\t\t\t\t\t// The variation style data is all that is needed to generate\n\t\t\t\t\t\t// the styles for the current application to a block. The variation\n\t\t\t\t\t\t// name is updated to match the instance specific class name.\n\t\t\t\t\t\tstyles: {\n\t\t\t\t\t\t\tblocks: {\n\t\t\t\t\t\t\t\t[ blockName ]: {\n\t\t\t\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t\t\t\t[ `${ override.variation }-${ override.clientId }` ]:\n\t\t\t\t\t\t\t\t\t\t\tconfigStyles,\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},\n\t\t\t\t\t};\n\t\t\t\t\tconst blockSelectors = getBlockSelectors(\n\t\t\t\t\t\tgetBlockTypes(),\n\t\t\t\t\t\tgetBlockStyles,\n\t\t\t\t\t\toverride.clientId\n\t\t\t\t\t);\n\t\t\t\t\tconst hasBlockGapSupport = false;\n\t\t\t\t\tconst hasFallbackGapSupport = true;\n\t\t\t\t\tconst disableLayoutStyles = true;\n\t\t\t\t\tconst disableRootPadding = true;\n\t\t\t\t\tconst variationStyles = toStyles(\n\t\t\t\t\t\tvariationConfig,\n\t\t\t\t\t\tblockSelectors,\n\t\t\t\t\t\thasBlockGapSupport,\n\t\t\t\t\t\thasFallbackGapSupport,\n\t\t\t\t\t\tdisableLayoutStyles,\n\t\t\t\t\t\tdisableRootPadding,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblockGap: false,\n\t\t\t\t\t\t\tblockStyles: true,\n\t\t\t\t\t\t\tlayoutStyles: false,\n\t\t\t\t\t\t\tmarginReset: false,\n\t\t\t\t\t\t\tpresets: false,\n\t\t\t\t\t\t\trootPadding: false,\n\t\t\t\t\t\t\tvariationStyles: true,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tnewOverrides.push( {\n\t\t\t\t\t\tid: `${ override.variation }-${ override.clientId }`,\n\t\t\t\t\t\tcss: variationStyles,\n\t\t\t\t\t\t__unstableType: 'variation',\n\t\t\t\t\t\tvariation: override.variation,\n\t\t\t\t\t\t// The clientId will be stored with the override and used to ensure\n\t\t\t\t\t\t// the order of overrides matches the order of blocks so that the\n\t\t\t\t\t\t// correct CSS cascade is maintained.\n\t\t\t\t\t\tclientId: override.clientId,\n\t\t\t\t\t} );\n\t\t\t\t\toverriddenClientIds.push( override.clientId );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn newOverrides;\n\t}, [ config, overrides, getBlockStyles, getBlockName ] );\n\n\tif ( ! overridesWithConfig || ! overridesWithConfig.length ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ overridesWithConfig.map( ( override ) => (\n\t\t\t\t<OverrideStyles key={ override.id } override={ override } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\n/**\n * Retrieves any variation styles data and resolves any referenced values.\n *\n * @param {Object}    globalStyles A complete global styles object, containing settings and styles.\n * @param {string}    name         The name of the desired block type.\n * @param {variation} variation    The of the block style variation to retrieve data for.\n *\n * @return {Object|undefined} The global styles data for the specified variation.\n */\nexport function getVariationStylesWithRefValues(\n\tglobalStyles,\n\tname,\n\tvariation\n) {\n\tif ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {\n\t\treturn;\n\t}\n\n\t// Helper to recursively look for `ref` values to resolve.\n\tconst replaceRefs = ( variationStyles ) => {\n\t\tObject.keys( variationStyles ).forEach( ( key ) => {\n\t\t\tconst value = variationStyles[ key ];\n\n\t\t\t// Only process objects.\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\t// Process `ref` value if present.\n\t\t\t\tif ( value.ref !== undefined ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof value.ref !== 'string' ||\n\t\t\t\t\t\tvalue.ref.trim() === ''\n\t\t\t\t\t) {\n\t\t\t\t\t\t// Remove invalid ref.\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Resolve `ref` value.\n\t\t\t\t\t\tconst refValue = getValueFromObjectPath(\n\t\t\t\t\t\t\tglobalStyles,\n\t\t\t\t\t\t\tvalue.ref\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( refValue ) {\n\t\t\t\t\t\t\tvariationStyles[ key ] = refValue;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Recursively resolve `ref` values in nested objects.\n\t\t\t\t\treplaceRefs( value );\n\n\t\t\t\t\t// After recursion, if value is empty due to explicitly\n\t\t\t\t\t// `undefined` ref value, remove it.\n\t\t\t\t\tif ( Object.keys( value ).length === 0 ) {\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Deep clone variation node to avoid mutating it within global styles and losing refs.\n\tconst styles = JSON.parse(\n\t\tJSON.stringify(\n\t\t\tglobalStyles.styles.blocks[ name ].variations[ variation ]\n\t\t)\n\t);\n\treplaceRefs( styles );\n\n\treturn styles;\n}\n\nfunction useBlockStyleVariation( name, variation, clientId ) {\n\t// Prefer global styles data in GlobalStylesContext, which are available\n\t// if in the site editor. Otherwise fall back to whatever is in the\n\t// editor settings and available in the post editor.\n\tconst { merged: mergedConfig } = useContext( GlobalStylesContext );\n\tconst { globalSettings, globalStyles } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tglobalSettings: settings.__experimentalFeatures,\n\t\t\tglobalStyles: settings[ globalStylesDataKey ],\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst variationStyles = getVariationStylesWithRefValues(\n\t\t\t{\n\t\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t\tstyles: mergedConfig?.styles ?? globalStyles,\n\t\t\t},\n\t\t\tname,\n\t\t\tvariation\n\t\t);\n\n\t\treturn {\n\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t// The variation style data is all that is needed to generate\n\t\t\t// the styles for the current application to a block. The variation\n\t\t\t// name is updated to match the instance specific class name.\n\t\t\tstyles: {\n\t\t\t\tblocks: {\n\t\t\t\t\t[ name ]: {\n\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t[ `${ variation }-${ clientId }` ]: variationStyles,\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};\n\t}, [\n\t\tmergedConfig,\n\t\tglobalSettings,\n\t\tglobalStyles,\n\t\tvariation,\n\t\tclientId,\n\t\tname,\n\t] );\n}\n\n// Rather than leveraging `useInstanceId` here, the `clientId` is used.\n// This is so that the variation style override's ID is predictable\n// when the order of applied style variations changes.\nfunction useBlockProps( { name, className, clientId } ) {\n\tconst { getBlockStyles } = useSelect( blocksStore );\n\n\tconst registeredStyles = getBlockStyles( name );\n\tconst variation = getVariationNameFromClass( className, registeredStyles );\n\tconst variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;\n\n\tconst { settings, styles } = useBlockStyleVariation(\n\t\tname,\n\t\tvariation,\n\t\tclientId\n\t);\n\n\tconst variationStyles = useMemo( () => {\n\t\tif ( ! variation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst variationConfig = { settings, styles };\n\t\tconst blockSelectors = getBlockSelectors(\n\t\t\tgetBlockTypes(),\n\t\t\tgetBlockStyles,\n\t\t\tclientId\n\t\t);\n\t\tconst hasBlockGapSupport = false;\n\t\tconst hasFallbackGapSupport = true;\n\t\tconst disableLayoutStyles = true;\n\t\tconst disableRootPadding = true;\n\n\t\treturn toStyles(\n\t\t\tvariationConfig,\n\t\t\tblockSelectors,\n\t\t\thasBlockGapSupport,\n\t\t\thasFallbackGapSupport,\n\t\t\tdisableLayoutStyles,\n\t\t\tdisableRootPadding,\n\t\t\t{\n\t\t\t\tblockGap: false,\n\t\t\t\tblockStyles: true,\n\t\t\t\tlayoutStyles: false,\n\t\t\t\tmarginReset: false,\n\t\t\t\tpresets: false,\n\t\t\t\trootPadding: false,\n\t\t\t\tvariationStyles: true,\n\t\t\t}\n\t\t);\n\t}, [ variation, settings, styles, getBlockStyles, clientId ] );\n\n\tuseStyleOverride( {\n\t\tid: `variation-${ clientId }`,\n\t\tcss: variationStyles,\n\t\t__unstableType: 'variation',\n\t\tvariation,\n\t\t// The clientId will be stored with the override and used to ensure\n\t\t// the order of overrides matches the order of blocks so that the\n\t\t// correct CSS cascade is maintained.\n\t\tclientId,\n\t} );\n\n\treturn variation ? { className: variationClass } : {};\n}\n\nexport default {\n\thasSupport: () => true,\n\tattributeKeys: [ 'className' ],\n\tisMatch: ( { className } ) => getVariationMatches( className ).length > 0,\n\tuseBlockProps,\n};\n"],"mappings":"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","ignoreList":[]}

package/build-module/hooks/duotone.js

@@ -233,25 +233,30 @@ function useDuotoneStyles({
       return;
     }
 
-    // Safari does not always update the duotone filter when the duotone colors
-    // are changed. When using Safari, force the block element to be repainted by
-    // the browser to ensure any changes are reflected visually. This logic matches
-    // that used on the site frontend in `block-supports/duotone.php`.
+    // Safari does not always update the duotone filter when the duotone
+    // colors are changed. When using Safari, force the block element to be
+    // repainted by the browser to ensure any changes are reflected
+    // visually. This logic matches that used on the site frontend in
+    // `block-supports/duotone.php`.
     if (blockElement && isSafari) {
       const display = blockElement.style.display;
-      // Switch to `inline-block` to force a repaint. In the editor, `inline-block`
-      // is used instead of `none` to ensure that scroll position is not affected,
-      // as `none` results in the editor scrolling to the top of the block.
+      // Switch to `inline-block` to force a repaint. In the editor,
+      // `inline-block` is used instead of `none` to ensure that scroll
+      // position is not affected, as `none` results in the editor
+      // scrolling to the top of the block.
       blockElement.style.display = 'inline-block';
-      // Simply accessing el.offsetHeight flushes layout and style
-      // changes in WebKit without having to wait for setTimeout.
+      // Simply accessing el.offsetHeight flushes layout and style changes
+      // in WebKit without having to wait for setTimeout.
       // eslint-disable-next-line no-unused-expressions
       blockElement.offsetHeight;
       blockElement.style.display = display;
     }
-  }, [isValidFilter, blockElement]);
+    // `colors` must be a dependency so this effect runs when the colors
+    // change in Safari.
+  }, [isValidFilter, blockElement, colors]);
 }
 function useBlockProps({
+  clientId,
   name,
   style
 }) {
@@ -287,7 +292,7 @@ function useBlockProps({
   const filterClass = `wp-duotone-${id}`;
   const shouldRender = selector && attribute;
   useDuotoneStyles({
-    clientId: id,
+    clientId,
     id: filterClass,
     selector,
     attribute

package/build-module/hooks/duotone.js.map

@@ -1 +1 @@
-{"version":3,"names":["extend","namesPlugin","getBlockSupport","getBlockType","hasBlockSupport","useInstanceId","addFilter","useMemo","useEffect","BlockControls","InspectorControls","__experimentalDuotoneControl","DuotoneControl","useSettings","getDuotoneFilter","getDuotoneStylesheet","getDuotoneUnsetStylesheet","getBlockCSSSelector","scopeSelector","useBlockSettings","useStyleOverride","default","StylesFiltersPanel","useBlockEditingMode","__unstableUseBlockElement","useBlockElement","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","EMPTY_ARRAY","isSafari","window","navigator","userAgent","includes","useMultiOriginPresets","presetSetting","defaultSetting","enableDefault","userPresets","themePresets","defaultPresets","getColorsFromDuotonePreset","duotone","duotonePalette","preset","find","slug","colors","undefined","getDuotonePresetFromColors","Array","isArray","duotonePreset","every","val","index","DuotonePanelPure","style","setAttributes","name","duotoneStyle","color","settings","blockEditingMode","colorPalette","enableCustomColors","enableCustomDuotone","disableCustomColors","disableCustomDuotone","length","duotonePresetOrColors","children","group","value","filter","onChange","newDuotone","newStyle","__experimentalShareWithChildBlocks","maybePreset","shareWithChildBlocks","edit","useBlockProps","attributeKeys","hasSupport","addDuotoneAttributes","attributes","Object","assign","type","useDuotoneStyles","clientId","id","filterId","selector","duotoneSelector","attribute","duotoneAttr","isCustom","isPreset","isCSS","selectors","split","selectorsScoped","map","selectorPart","trim","join","isValidFilter","css","__unstableType","assets","blockElement","display","offsetHeight","blockType","duotoneSupport","experimentalDuotone","rootSelector","fallback","filterClass","shouldRender","className"],"sources":["@wordpress/block-editor/src/hooks/duotone.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n} from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useMemo, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockControls,\n\tInspectorControls,\n\t__experimentalDuotoneControl as DuotoneControl,\n\tuseSettings,\n} from '../components';\nimport {\n\tgetDuotoneFilter,\n\tgetDuotoneStylesheet,\n\tgetDuotoneUnsetStylesheet,\n} from '../components/duotone/utils';\nimport { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';\nimport { scopeSelector } from '../components/global-styles/utils';\nimport { useBlockSettings, useStyleOverride } from './utils';\nimport { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nconst EMPTY_ARRAY = [];\n\n// Safari does not always update the duotone filter when the duotone colors\n// are changed. This browser check is later used to force a re-render of the block\n// element to ensure the duotone filter is updated. The check is included at the\n// root of this file as it only needs to be run once per page load.\nconst isSafari =\n\twindow?.navigator.userAgent &&\n\twindow.navigator.userAgent.includes( 'Safari' ) &&\n\t! window.navigator.userAgent.includes( 'Chrome' ) &&\n\t! window.navigator.userAgent.includes( 'Chromium' );\n\nextend( [ namesPlugin ] );\n\nfunction useMultiOriginPresets( { presetSetting, defaultSetting } ) {\n\tconst [ enableDefault, userPresets, themePresets, defaultPresets ] =\n\t\tuseSettings(\n\t\t\tdefaultSetting,\n\t\t\t`${ presetSetting }.custom`,\n\t\t\t`${ presetSetting }.theme`,\n\t\t\t`${ presetSetting }.default`\n\t\t);\n\treturn useMemo(\n\t\t() => [\n\t\t\t...( userPresets || EMPTY_ARRAY ),\n\t\t\t...( themePresets || EMPTY_ARRAY ),\n\t\t\t...( ( enableDefault && defaultPresets ) || EMPTY_ARRAY ),\n\t\t],\n\t\t[ enableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nexport function getColorsFromDuotonePreset( duotone, duotonePalette ) {\n\tif ( ! duotone ) {\n\t\treturn;\n\t}\n\tconst preset = duotonePalette?.find( ( { slug } ) => {\n\t\treturn duotone === `var:preset|duotone|${ slug }`;\n\t} );\n\n\treturn preset ? preset.colors : undefined;\n}\n\nexport function getDuotonePresetFromColors( colors, duotonePalette ) {\n\tif ( ! colors || ! Array.isArray( colors ) ) {\n\t\treturn;\n\t}\n\n\tconst preset = duotonePalette?.find( ( duotonePreset ) => {\n\t\treturn duotonePreset?.colors?.every(\n\t\t\t( val, index ) => val === colors[ index ]\n\t\t);\n\t} );\n\n\treturn preset ? `var:preset|duotone|${ preset.slug }` : undefined;\n}\n\nfunction DuotonePanelPure( { style, setAttributes, name } ) {\n\tconst duotoneStyle = style?.color?.duotone;\n\tconst settings = useBlockSettings( name );\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.palette',\n\t\tdefaultSetting: 'color.defaultPalette',\n\t} );\n\tconst [ enableCustomColors, enableCustomDuotone ] = useSettings(\n\t\t'color.custom',\n\t\t'color.customDuotone'\n\t);\n\tconst disableCustomColors = ! enableCustomColors;\n\tconst disableCustomDuotone =\n\t\t! enableCustomDuotone ||\n\t\t( colorPalette?.length === 0 && disableCustomColors );\n\n\tif ( duotonePalette?.length === 0 && disableCustomDuotone ) {\n\t\treturn null;\n\t}\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst duotonePresetOrColors = ! Array.isArray( duotoneStyle )\n\t\t? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )\n\t\t: duotoneStyle;\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"filter\">\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tvalue={ { filter: { duotone: duotonePresetOrColors } } }\n\t\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t...newDuotone?.filter,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t\t} }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t<DuotoneControl\n\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tvalue={ duotonePresetOrColors }\n\t\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\t\tconst maybePreset = getDuotonePresetFromColors(\n\t\t\t\t\t\t\tnewDuotone,\n\t\t\t\t\t\t\tduotonePalette\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t...style?.color,\n\t\t\t\t\t\t\t\tduotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t\t} }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t</>\n\t);\n}\n\nexport default {\n\tshareWithChildBlocks: true,\n\tedit: DuotonePanelPure,\n\tuseBlockProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'filter.duotone' );\n\t},\n};\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `duotone` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addDuotoneAttributes( settings ) {\n\t// Previous `color.__experimentalDuotone` support flag is migrated via\n\t// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.\n\tif ( ! hasBlockSupport( settings, 'filter.duotone' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default\n\t// values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\nfunction useDuotoneStyles( {\n\tclientId,\n\tid: filterId,\n\tselector: duotoneSelector,\n\tattribute: duotoneAttr,\n} ) {\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\n\t// Possible values for duotone attribute:\n\t// 1. Array of colors - e.g. ['#000000', '#ffffff'].\n\t// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''\n\t// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.\n\tconst isCustom = Array.isArray( duotoneAttr );\n\tconst duotonePreset = isCustom\n\t\t? undefined\n\t\t: getColorsFromDuotonePreset( duotoneAttr, duotonePalette );\n\tconst isPreset = typeof duotoneAttr === 'string' && duotonePreset;\n\tconst isCSS = typeof duotoneAttr === 'string' && ! isPreset;\n\n\t// Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.\n\tlet colors = null;\n\tif ( isPreset ) {\n\t\t// Array of colors.\n\t\tcolors = duotonePreset;\n\t} else if ( isCSS ) {\n\t\t// CSS filter property string (e.g. 'unset').\n\t\tcolors = duotoneAttr;\n\t} else if ( isCustom ) {\n\t\t// Array of colors.\n\t\tcolors = duotoneAttr;\n\t}\n\n\t// Build the CSS selectors to which the filter will be applied.\n\tconst selectors = duotoneSelector.split( ',' );\n\n\tconst selectorsScoped = selectors.map( ( selectorPart ) => {\n\t\t// Extra .editor-styles-wrapper specificity is needed in the editor\n\t\t// since we're not using inline styles to apply the filter. We need to\n\t\t// override duotone applied by global styles and theme.json.\n\n\t\t// Assuming the selector part is a subclass selector (not a tag name)\n\t\t// so we can prepend the filter id class. If we want to support elements\n\t\t// such as `img` or namespaces, we'll need to add a case for that here.\n\t\treturn `.${ filterId }${ selectorPart.trim() }`;\n\t} );\n\n\tconst selector = selectorsScoped.join( ', ' );\n\n\tconst isValidFilter = Array.isArray( colors ) || colors === 'unset';\n\n\tuseStyleOverride(\n\t\tisValidFilter\n\t\t\t? {\n\t\t\t\t\tcss:\n\t\t\t\t\t\tcolors !== 'unset'\n\t\t\t\t\t\t\t? getDuotoneStylesheet( selector, filterId )\n\t\t\t\t\t\t\t: getDuotoneUnsetStylesheet( selector ),\n\t\t\t\t\t__unstableType: 'presets',\n\t\t\t  }\n\t\t\t: undefined\n\t);\n\tuseStyleOverride(\n\t\tisValidFilter\n\t\t\t? {\n\t\t\t\t\tassets:\n\t\t\t\t\t\tcolors !== 'unset'\n\t\t\t\t\t\t\t? getDuotoneFilter( filterId, colors )\n\t\t\t\t\t\t\t: '',\n\t\t\t\t\t__unstableType: 'svgs',\n\t\t\t  }\n\t\t\t: undefined\n\t);\n\n\tconst blockElement = useBlockElement( clientId );\n\n\tuseEffect( () => {\n\t\tif ( ! isValidFilter ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Safari does not always update the duotone filter when the duotone colors\n\t\t// are changed. When using Safari, force the block element to be repainted by\n\t\t// the browser to ensure any changes are reflected visually. This logic matches\n\t\t// that used on the site frontend in `block-supports/duotone.php`.\n\t\tif ( blockElement && isSafari ) {\n\t\t\tconst display = blockElement.style.display;\n\t\t\t// Switch to `inline-block` to force a repaint. In the editor, `inline-block`\n\t\t\t// is used instead of `none` to ensure that scroll position is not affected,\n\t\t\t// as `none` results in the editor scrolling to the top of the block.\n\t\t\tblockElement.style.display = 'inline-block';\n\t\t\t// Simply accessing el.offsetHeight flushes layout and style\n\t\t\t// changes in WebKit without having to wait for setTimeout.\n\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\tblockElement.offsetHeight;\n\t\t\tblockElement.style.display = display;\n\t\t}\n\t}, [ isValidFilter, blockElement ] );\n}\n\nfunction useBlockProps( { name, style } ) {\n\tconst id = useInstanceId( useBlockProps );\n\tconst selector = useMemo( () => {\n\t\tconst blockType = getBlockType( name );\n\n\t\tif ( blockType ) {\n\t\t\t// Backwards compatibility for `supports.color.__experimentalDuotone`\n\t\t\t// is provided via the `block_type_metadata_settings` filter. If\n\t\t\t// `supports.filter.duotone` has not been set and the\n\t\t\t// experimental property has been, the experimental property\n\t\t\t// value is copied into `supports.filter.duotone`.\n\t\t\tconst duotoneSupport = getBlockSupport(\n\t\t\t\tblockType,\n\t\t\t\t'filter.duotone',\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tif ( ! duotoneSupport ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\t// If the experimental duotone support was set, that value is\n\t\t\t// to be treated as a selector and requires scoping.\n\t\t\tconst experimentalDuotone = getBlockSupport(\n\t\t\t\tblockType,\n\t\t\t\t'color.__experimentalDuotone',\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tif ( experimentalDuotone ) {\n\t\t\t\tconst rootSelector = getBlockCSSSelector( blockType );\n\t\t\t\treturn typeof experimentalDuotone === 'string'\n\t\t\t\t\t? scopeSelector( rootSelector, experimentalDuotone )\n\t\t\t\t\t: rootSelector;\n\t\t\t}\n\n\t\t\t// Regular filter.duotone support uses filter.duotone selectors with fallbacks.\n\t\t\treturn getBlockCSSSelector( blockType, 'filter.duotone', {\n\t\t\t\tfallback: true,\n\t\t\t} );\n\t\t}\n\t}, [ name ] );\n\n\tconst attribute = style?.color?.duotone;\n\n\tconst filterClass = `wp-duotone-${ id }`;\n\n\tconst shouldRender = selector && attribute;\n\n\tuseDuotoneStyles( {\n\t\tclientId: id,\n\t\tid: filterClass,\n\t\tselector,\n\t\tattribute,\n\t} );\n\n\treturn {\n\t\tclassName: shouldRender ? filterClass : '',\n\t};\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/duotone/add-attributes',\n\taddDuotoneAttributes\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["extend","namesPlugin","getBlockSupport","getBlockType","hasBlockSupport","useInstanceId","addFilter","useMemo","useEffect","BlockControls","InspectorControls","__experimentalDuotoneControl","DuotoneControl","useSettings","getDuotoneFilter","getDuotoneStylesheet","getDuotoneUnsetStylesheet","getBlockCSSSelector","scopeSelector","useBlockSettings","useStyleOverride","default","StylesFiltersPanel","useBlockEditingMode","__unstableUseBlockElement","useBlockElement","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","EMPTY_ARRAY","isSafari","window","navigator","userAgent","includes","useMultiOriginPresets","presetSetting","defaultSetting","enableDefault","userPresets","themePresets","defaultPresets","getColorsFromDuotonePreset","duotone","duotonePalette","preset","find","slug","colors","undefined","getDuotonePresetFromColors","Array","isArray","duotonePreset","every","val","index","DuotonePanelPure","style","setAttributes","name","duotoneStyle","color","settings","blockEditingMode","colorPalette","enableCustomColors","enableCustomDuotone","disableCustomColors","disableCustomDuotone","length","duotonePresetOrColors","children","group","value","filter","onChange","newDuotone","newStyle","__experimentalShareWithChildBlocks","maybePreset","shareWithChildBlocks","edit","useBlockProps","attributeKeys","hasSupport","addDuotoneAttributes","attributes","Object","assign","type","useDuotoneStyles","clientId","id","filterId","selector","duotoneSelector","attribute","duotoneAttr","isCustom","isPreset","isCSS","selectors","split","selectorsScoped","map","selectorPart","trim","join","isValidFilter","css","__unstableType","assets","blockElement","display","offsetHeight","blockType","duotoneSupport","experimentalDuotone","rootSelector","fallback","filterClass","shouldRender","className"],"sources":["@wordpress/block-editor/src/hooks/duotone.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n} from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useMemo, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBlockControls,\n\tInspectorControls,\n\t__experimentalDuotoneControl as DuotoneControl,\n\tuseSettings,\n} from '../components';\nimport {\n\tgetDuotoneFilter,\n\tgetDuotoneStylesheet,\n\tgetDuotoneUnsetStylesheet,\n} from '../components/duotone/utils';\nimport { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';\nimport { scopeSelector } from '../components/global-styles/utils';\nimport { useBlockSettings, useStyleOverride } from './utils';\nimport { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\nimport { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';\n\nconst EMPTY_ARRAY = [];\n\n// Safari does not always update the duotone filter when the duotone colors\n// are changed. This browser check is later used to force a re-render of the block\n// element to ensure the duotone filter is updated. The check is included at the\n// root of this file as it only needs to be run once per page load.\nconst isSafari =\n\twindow?.navigator.userAgent &&\n\twindow.navigator.userAgent.includes( 'Safari' ) &&\n\t! window.navigator.userAgent.includes( 'Chrome' ) &&\n\t! window.navigator.userAgent.includes( 'Chromium' );\n\nextend( [ namesPlugin ] );\n\nfunction useMultiOriginPresets( { presetSetting, defaultSetting } ) {\n\tconst [ enableDefault, userPresets, themePresets, defaultPresets ] =\n\t\tuseSettings(\n\t\t\tdefaultSetting,\n\t\t\t`${ presetSetting }.custom`,\n\t\t\t`${ presetSetting }.theme`,\n\t\t\t`${ presetSetting }.default`\n\t\t);\n\treturn useMemo(\n\t\t() => [\n\t\t\t...( userPresets || EMPTY_ARRAY ),\n\t\t\t...( themePresets || EMPTY_ARRAY ),\n\t\t\t...( ( enableDefault && defaultPresets ) || EMPTY_ARRAY ),\n\t\t],\n\t\t[ enableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nexport function getColorsFromDuotonePreset( duotone, duotonePalette ) {\n\tif ( ! duotone ) {\n\t\treturn;\n\t}\n\tconst preset = duotonePalette?.find( ( { slug } ) => {\n\t\treturn duotone === `var:preset|duotone|${ slug }`;\n\t} );\n\n\treturn preset ? preset.colors : undefined;\n}\n\nexport function getDuotonePresetFromColors( colors, duotonePalette ) {\n\tif ( ! colors || ! Array.isArray( colors ) ) {\n\t\treturn;\n\t}\n\n\tconst preset = duotonePalette?.find( ( duotonePreset ) => {\n\t\treturn duotonePreset?.colors?.every(\n\t\t\t( val, index ) => val === colors[ index ]\n\t\t);\n\t} );\n\n\treturn preset ? `var:preset|duotone|${ preset.slug }` : undefined;\n}\n\nfunction DuotonePanelPure( { style, setAttributes, name } ) {\n\tconst duotoneStyle = style?.color?.duotone;\n\tconst settings = useBlockSettings( name );\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.palette',\n\t\tdefaultSetting: 'color.defaultPalette',\n\t} );\n\tconst [ enableCustomColors, enableCustomDuotone ] = useSettings(\n\t\t'color.custom',\n\t\t'color.customDuotone'\n\t);\n\tconst disableCustomColors = ! enableCustomColors;\n\tconst disableCustomDuotone =\n\t\t! enableCustomDuotone ||\n\t\t( colorPalette?.length === 0 && disableCustomColors );\n\n\tif ( duotonePalette?.length === 0 && disableCustomDuotone ) {\n\t\treturn null;\n\t}\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst duotonePresetOrColors = ! Array.isArray( duotoneStyle )\n\t\t? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )\n\t\t: duotoneStyle;\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"filter\">\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tvalue={ { filter: { duotone: duotonePresetOrColors } } }\n\t\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t...newDuotone?.filter,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t\t} }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t<DuotoneControl\n\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tvalue={ duotonePresetOrColors }\n\t\t\t\t\tonChange={ ( newDuotone ) => {\n\t\t\t\t\t\tconst maybePreset = getDuotonePresetFromColors(\n\t\t\t\t\t\t\tnewDuotone,\n\t\t\t\t\t\t\tduotonePalette\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst newStyle = {\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t...style?.color,\n\t\t\t\t\t\t\t\tduotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t\tsetAttributes( { style: newStyle } );\n\t\t\t\t\t} }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t</>\n\t);\n}\n\nexport default {\n\tshareWithChildBlocks: true,\n\tedit: DuotonePanelPure,\n\tuseBlockProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'filter.duotone' );\n\t},\n};\n\n/**\n * Filters registered block settings, extending attributes to include\n * the `duotone` attribute.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addDuotoneAttributes( settings ) {\n\t// Previous `color.__experimentalDuotone` support flag is migrated via\n\t// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.\n\tif ( ! hasBlockSupport( settings, 'filter.duotone' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify their own attribute definition with default\n\t// values if needed.\n\tif ( ! settings.attributes.style ) {\n\t\tObject.assign( settings.attributes, {\n\t\t\tstyle: {\n\t\t\t\ttype: 'object',\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn settings;\n}\n\nfunction useDuotoneStyles( {\n\tclientId,\n\tid: filterId,\n\tselector: duotoneSelector,\n\tattribute: duotoneAttr,\n} ) {\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\n\t// Possible values for duotone attribute:\n\t// 1. Array of colors - e.g. ['#000000', '#ffffff'].\n\t// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''\n\t// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.\n\tconst isCustom = Array.isArray( duotoneAttr );\n\tconst duotonePreset = isCustom\n\t\t? undefined\n\t\t: getColorsFromDuotonePreset( duotoneAttr, duotonePalette );\n\tconst isPreset = typeof duotoneAttr === 'string' && duotonePreset;\n\tconst isCSS = typeof duotoneAttr === 'string' && ! isPreset;\n\n\t// Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.\n\tlet colors = null;\n\tif ( isPreset ) {\n\t\t// Array of colors.\n\t\tcolors = duotonePreset;\n\t} else if ( isCSS ) {\n\t\t// CSS filter property string (e.g. 'unset').\n\t\tcolors = duotoneAttr;\n\t} else if ( isCustom ) {\n\t\t// Array of colors.\n\t\tcolors = duotoneAttr;\n\t}\n\n\t// Build the CSS selectors to which the filter will be applied.\n\tconst selectors = duotoneSelector.split( ',' );\n\n\tconst selectorsScoped = selectors.map( ( selectorPart ) => {\n\t\t// Extra .editor-styles-wrapper specificity is needed in the editor\n\t\t// since we're not using inline styles to apply the filter. We need to\n\t\t// override duotone applied by global styles and theme.json.\n\n\t\t// Assuming the selector part is a subclass selector (not a tag name)\n\t\t// so we can prepend the filter id class. If we want to support elements\n\t\t// such as `img` or namespaces, we'll need to add a case for that here.\n\t\treturn `.${ filterId }${ selectorPart.trim() }`;\n\t} );\n\n\tconst selector = selectorsScoped.join( ', ' );\n\n\tconst isValidFilter = Array.isArray( colors ) || colors === 'unset';\n\n\tuseStyleOverride(\n\t\tisValidFilter\n\t\t\t? {\n\t\t\t\t\tcss:\n\t\t\t\t\t\tcolors !== 'unset'\n\t\t\t\t\t\t\t? getDuotoneStylesheet( selector, filterId )\n\t\t\t\t\t\t\t: getDuotoneUnsetStylesheet( selector ),\n\t\t\t\t\t__unstableType: 'presets',\n\t\t\t  }\n\t\t\t: undefined\n\t);\n\tuseStyleOverride(\n\t\tisValidFilter\n\t\t\t? {\n\t\t\t\t\tassets:\n\t\t\t\t\t\tcolors !== 'unset'\n\t\t\t\t\t\t\t? getDuotoneFilter( filterId, colors )\n\t\t\t\t\t\t\t: '',\n\t\t\t\t\t__unstableType: 'svgs',\n\t\t\t  }\n\t\t\t: undefined\n\t);\n\n\tconst blockElement = useBlockElement( clientId );\n\n\tuseEffect( () => {\n\t\tif ( ! isValidFilter ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Safari does not always update the duotone filter when the duotone\n\t\t// colors are changed. When using Safari, force the block element to be\n\t\t// repainted by the browser to ensure any changes are reflected\n\t\t// visually. This logic matches that used on the site frontend in\n\t\t// `block-supports/duotone.php`.\n\t\tif ( blockElement && isSafari ) {\n\t\t\tconst display = blockElement.style.display;\n\t\t\t// Switch to `inline-block` to force a repaint. In the editor,\n\t\t\t// `inline-block` is used instead of `none` to ensure that scroll\n\t\t\t// position is not affected, as `none` results in the editor\n\t\t\t// scrolling to the top of the block.\n\t\t\tblockElement.style.display = 'inline-block';\n\t\t\t// Simply accessing el.offsetHeight flushes layout and style changes\n\t\t\t// in WebKit without having to wait for setTimeout.\n\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\tblockElement.offsetHeight;\n\t\t\tblockElement.style.display = display;\n\t\t}\n\t\t// `colors` must be a dependency so this effect runs when the colors\n\t\t// change in Safari.\n\t}, [ isValidFilter, blockElement, colors ] );\n}\n\nfunction useBlockProps( { clientId, name, style } ) {\n\tconst id = useInstanceId( useBlockProps );\n\tconst selector = useMemo( () => {\n\t\tconst blockType = getBlockType( name );\n\n\t\tif ( blockType ) {\n\t\t\t// Backwards compatibility for `supports.color.__experimentalDuotone`\n\t\t\t// is provided via the `block_type_metadata_settings` filter. If\n\t\t\t// `supports.filter.duotone` has not been set and the\n\t\t\t// experimental property has been, the experimental property\n\t\t\t// value is copied into `supports.filter.duotone`.\n\t\t\tconst duotoneSupport = getBlockSupport(\n\t\t\t\tblockType,\n\t\t\t\t'filter.duotone',\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tif ( ! duotoneSupport ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\t// If the experimental duotone support was set, that value is\n\t\t\t// to be treated as a selector and requires scoping.\n\t\t\tconst experimentalDuotone = getBlockSupport(\n\t\t\t\tblockType,\n\t\t\t\t'color.__experimentalDuotone',\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tif ( experimentalDuotone ) {\n\t\t\t\tconst rootSelector = getBlockCSSSelector( blockType );\n\t\t\t\treturn typeof experimentalDuotone === 'string'\n\t\t\t\t\t? scopeSelector( rootSelector, experimentalDuotone )\n\t\t\t\t\t: rootSelector;\n\t\t\t}\n\n\t\t\t// Regular filter.duotone support uses filter.duotone selectors with fallbacks.\n\t\t\treturn getBlockCSSSelector( blockType, 'filter.duotone', {\n\t\t\t\tfallback: true,\n\t\t\t} );\n\t\t}\n\t}, [ name ] );\n\n\tconst attribute = style?.color?.duotone;\n\n\tconst filterClass = `wp-duotone-${ id }`;\n\n\tconst shouldRender = selector && attribute;\n\n\tuseDuotoneStyles( {\n\t\tclientId,\n\t\tid: filterClass,\n\t\tselector,\n\t\tattribute,\n\t} );\n\n\treturn {\n\t\tclassName: shouldRender ? filterClass : '',\n\t};\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/duotone/add-attributes',\n\taddDuotoneAttributes\n);\n"],"mappings":"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","ignoreList":[]}

package/build-module/hooks/grid-visualizer.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { GridVisualizer, useGridLayoutSync } from '../components/grid';
+import { store as blockEditorStore } from '../store';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridLayoutSync(props) {
+  useGridLayoutSync(props);
+}
+function GridTools({
+  clientId,
+  layout
+}) {
+  const {
+    isSelected,
+    isDragging
+  } = useSelect(select => {
+    const {
+      isBlockSelected,
+      isDraggingBlocks
+    } = select(blockEditorStore);
+    return {
+      isSelected: isBlockSelected(clientId),
+      isDragging: isDraggingBlocks()
+    };
+  });
+  if (!isSelected && !isDragging) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(GridVisualizer, {
+      clientId: clientId,
+      parentLayout: layout
+    }), /*#__PURE__*/_jsx(GridLayoutSync, {
+      clientId: clientId
+    })]
+  });
+}
+const addGridVisualizerToBlockEdit = createHigherOrderComponent(BlockEdit => props => {
+  if (props.attributes.layout?.type !== 'grid') {
+    return /*#__PURE__*/_jsx(BlockEdit, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(GridTools, {
+      clientId: props.clientId,
+      layout: props.attributes.layout
+    }), /*#__PURE__*/_jsx(BlockEdit, {
+      ...props
+    })]
+  });
+}, 'addGridVisualizerToBlockEdit');
+addFilter('editor.BlockEdit', 'core/editor/grid-visualizer', addGridVisualizerToBlockEdit);
+//# sourceMappingURL=grid-visualizer.js.map

package/build-module/hooks/grid-visualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createHigherOrderComponent","addFilter","useSelect","GridVisualizer","useGridLayoutSync","store","blockEditorStore","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","GridLayoutSync","props","GridTools","clientId","layout","isSelected","isDragging","select","isBlockSelected","isDraggingBlocks","children","parentLayout","addGridVisualizerToBlockEdit","BlockEdit","attributes","type"],"sources":["@wordpress/block-editor/src/hooks/grid-visualizer.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { GridVisualizer, useGridLayoutSync } from '../components/grid';\nimport { store as blockEditorStore } from '../store';\n\nfunction GridLayoutSync( props ) {\n\tuseGridLayoutSync( props );\n}\n\nfunction GridTools( { clientId, layout } ) {\n\tconst { isSelected, isDragging } = useSelect( ( select ) => {\n\t\tconst { isBlockSelected, isDraggingBlocks } =\n\t\t\tselect( blockEditorStore );\n\n\t\treturn {\n\t\t\tisSelected: isBlockSelected( clientId ),\n\t\t\tisDragging: isDraggingBlocks(),\n\t\t};\n\t} );\n\n\tif ( ! isSelected && ! isDragging ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<GridVisualizer clientId={ clientId } parentLayout={ layout } />\n\t\t\t<GridLayoutSync clientId={ clientId } />\n\t\t</>\n\t);\n}\n\nconst addGridVisualizerToBlockEdit = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tif ( props.attributes.layout?.type !== 'grid' ) {\n\t\t\treturn <BlockEdit { ...props } />;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<GridTools\n\t\t\t\t\tclientId={ props.clientId }\n\t\t\t\t\tlayout={ props.attributes.layout }\n\t\t\t\t/>\n\t\t\t\t<BlockEdit { ...props } />\n\t\t\t</>\n\t\t);\n\t},\n\t'addGridVisualizerToBlockEdit'\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/grid-visualizer',\n\taddGridVisualizerToBlockEdit\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,0BAA0B,QAAQ,oBAAoB;AAC/D,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,cAAc,EAAEC,iBAAiB,QAAQ,oBAAoB;AACtE,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAErD,SAASC,cAAcA,CAAEC,KAAK,EAAG;EAChCV,iBAAiB,CAAEU,KAAM,CAAC;AAC3B;AAEA,SAASC,SAASA,CAAE;EAAEC,QAAQ;EAAEC;AAAO,CAAC,EAAG;EAC1C,MAAM;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAGjB,SAAS,CAAIkB,MAAM,IAAM;IAC3D,MAAM;MAAEC,eAAe;MAAEC;IAAiB,CAAC,GAC1CF,MAAM,CAAEd,gBAAiB,CAAC;IAE3B,OAAO;MACNY,UAAU,EAAEG,eAAe,CAAEL,QAAS,CAAC;MACvCG,UAAU,EAAEG,gBAAgB,CAAC;IAC9B,CAAC;EACF,CAAE,CAAC;EAEH,IAAK,CAAEJ,UAAU,IAAI,CAAEC,UAAU,EAAG;IACnC,OAAO,IAAI;EACZ;EAEA,oBACCP,KAAA,CAAAF,SAAA;IAAAa,QAAA,gBACCf,IAAA,CAACL,cAAc;MAACa,QAAQ,EAAGA,QAAU;MAACQ,YAAY,EAAGP;IAAQ,CAAE,CAAC,eAChET,IAAA,CAACK,cAAc;MAACG,QAAQ,EAAGA;IAAU,CAAE,CAAC;EAAA,CACvC,CAAC;AAEL;AAEA,MAAMS,4BAA4B,GAAGzB,0BAA0B,CAC5D0B,SAAS,IAAQZ,KAAK,IAAM;EAC7B,IAAKA,KAAK,CAACa,UAAU,CAACV,MAAM,EAAEW,IAAI,KAAK,MAAM,EAAG;IAC/C,oBAAOpB,IAAA,CAACkB,SAAS;MAAA,GAAMZ;IAAK,CAAI,CAAC;EAClC;EAEA,oBACCF,KAAA,CAAAF,SAAA;IAAAa,QAAA,gBACCf,IAAA,CAACO,SAAS;MACTC,QAAQ,EAAGF,KAAK,CAACE,QAAU;MAC3BC,MAAM,EAAGH,KAAK,CAACa,UAAU,CAACV;IAAQ,CAClC,CAAC,eACFT,IAAA,CAACkB,SAAS;MAAA,GAAMZ;IAAK,CAAI,CAAC;EAAA,CACzB,CAAC;AAEL,CAAC,EACD,8BACD,CAAC;AAEDb,SAAS,CACR,kBAAkB,EAClB,6BAA6B,EAC7BwB,4BACD,CAAC","ignoreList":[]}

package/build-module/hooks/index.js

@@ -29,6 +29,7 @@ import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
 import './block-renaming';
 import './use-bindings-attributes';
+import './grid-visualizer';
 createBlockEditFilter([blockBindingsPanel, align, textAlign, anchor, customClassName, style, duotone, position, layout, contentLockUI, blockHooks, childLayout].filter(Boolean));
 createBlockListBlockFilter([align, textAlign, background, style, color, dimensions, duotone, fontFamily, fontSize, border, position, blockStyleVariation, childLayout]);
 createBlockSaveFilter([align, textAlign, anchor, ariaLabel, customClassName, border, color, style, fontFamily, fontSize]);
@@ -41,5 +42,7 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { setBackgroundStyleDefaults } from './background';
 export { useZoomOut } from './use-zoom-out';
+export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
 //# sourceMappingURL=index.js.map

package/build-module/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createBlockEditFilter","createBlockListBlockFilter","createBlockSaveFilter","align","background","anchor","ariaLabel","customClassName","style","color","dimensions","duotone","fontFamily","fontSize","textAlign","border","position","blockStyleVariation","layout","childLayout","contentLockUI","blockHooks","blockBindingsPanel","filter","Boolean","useCustomSides","useLayoutClasses","useLayoutStyles","getBorderClassesAndStyles","useBorderProps","getShadowClassesAndStyles","getColorClassesAndStyles","useColorProps","getSpacingClassesAndStyles","getTypographyClassesAndStyles","getGapCSSValue","useCachedTruthy","useZoomOut"],"sources":["@wordpress/block-editor/src/hooks/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tcreateBlockEditFilter,\n\tcreateBlockListBlockFilter,\n\tcreateBlockSaveFilter,\n} from './utils';\nimport './compat';\nimport align from './align';\nimport background from './background';\nimport './lock';\nimport anchor from './anchor';\nimport ariaLabel from './aria-label';\nimport customClassName from './custom-class-name';\nimport './generated-class-name';\nimport style from './style';\nimport './settings';\nimport color from './color';\nimport dimensions from './dimensions';\nimport duotone from './duotone';\nimport fontFamily from './font-family';\nimport fontSize from './font-size';\nimport textAlign from './text-align';\nimport border from './border';\nimport position from './position';\nimport blockStyleVariation from './block-style-variation';\nimport layout from './layout';\nimport childLayout from './layout-child';\nimport contentLockUI from './content-lock-ui';\nimport './metadata';\nimport blockHooks from './block-hooks';\nimport blockBindingsPanel from './block-bindings';\nimport './block-renaming';\nimport './use-bindings-attributes';\n\ncreateBlockEditFilter(\n\t[\n\t\tblockBindingsPanel,\n\t\talign,\n\t\ttextAlign,\n\t\tanchor,\n\t\tcustomClassName,\n\t\tstyle,\n\t\tduotone,\n\t\tposition,\n\t\tlayout,\n\t\tcontentLockUI,\n\t\tblockHooks,\n\t\tchildLayout,\n\t].filter( Boolean )\n);\ncreateBlockListBlockFilter( [\n\talign,\n\ttextAlign,\n\tbackground,\n\tstyle,\n\tcolor,\n\tdimensions,\n\tduotone,\n\tfontFamily,\n\tfontSize,\n\tborder,\n\tposition,\n\tblockStyleVariation,\n\tchildLayout,\n] );\ncreateBlockSaveFilter( [\n\talign,\n\ttextAlign,\n\tanchor,\n\tariaLabel,\n\tcustomClassName,\n\tborder,\n\tcolor,\n\tstyle,\n\tfontFamily,\n\tfontSize,\n] );\n\nexport { useCustomSides } from './dimensions';\nexport { useLayoutClasses, useLayoutStyles } from './layout';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getShadowClassesAndStyles } from './use-shadow-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { getTypographyClassesAndStyles } from './use-typography-props';\nexport { getGapCSSValue } from './gap';\nexport { useCachedTruthy } from './use-cached-truthy';\nexport { useZoomOut } from './use-zoom-out';\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,qBAAqB,EACrBC,0BAA0B,EAC1BC,qBAAqB,QACf,SAAS;AAChB,OAAO,UAAU;AACjB,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAO,QAAQ;AACf,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,eAAe,MAAM,qBAAqB;AACjD,OAAO,wBAAwB;AAC/B,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAO,YAAY;AACnB,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,mBAAmB,MAAM,yBAAyB;AACzD,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAO,YAAY;AACnB,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,kBAAkB,MAAM,kBAAkB;AACjD,OAAO,kBAAkB;AACzB,OAAO,2BAA2B;AAElCtB,qBAAqB,CACpB,CACCsB,kBAAkB,EAClBnB,KAAK,EACLW,SAAS,EACTT,MAAM,EACNE,eAAe,EACfC,KAAK,EACLG,OAAO,EACPK,QAAQ,EACRE,MAAM,EACNE,aAAa,EACbC,UAAU,EACVF,WAAW,CACX,CAACI,MAAM,CAAEC,OAAQ,CACnB,CAAC;AACDvB,0BAA0B,CAAE,CAC3BE,KAAK,EACLW,SAAS,EACTV,UAAU,EACVI,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRE,MAAM,EACNC,QAAQ,EACRC,mBAAmB,EACnBE,WAAW,CACV,CAAC;AACHjB,qBAAqB,CAAE,CACtBC,KAAK,EACLW,SAAS,EACTT,MAAM,EACNC,SAAS,EACTC,eAAe,EACfQ,MAAM,EACNN,KAAK,EACLD,KAAK,EACLI,UAAU,EACVC,QAAQ,CACP,CAAC;AAEH,SAASY,cAAc,QAAQ,cAAc;AAC7C,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,UAAU;AAC5D,SAASC,yBAAyB,EAAEC,cAAc,QAAQ,oBAAoB;AAC9E,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,wBAAwB,EAAEC,aAAa,QAAQ,mBAAmB;AAC3E,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,cAAc,QAAQ,OAAO;AACtC,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,UAAU,QAAQ,gBAAgB","ignoreList":[]}
+{"version":3,"names":["createBlockEditFilter","createBlockListBlockFilter","createBlockSaveFilter","align","background","anchor","ariaLabel","customClassName","style","color","dimensions","duotone","fontFamily","fontSize","textAlign","border","position","blockStyleVariation","layout","childLayout","contentLockUI","blockHooks","blockBindingsPanel","filter","Boolean","useCustomSides","useLayoutClasses","useLayoutStyles","getBorderClassesAndStyles","useBorderProps","getShadowClassesAndStyles","getColorClassesAndStyles","useColorProps","getSpacingClassesAndStyles","getTypographyClassesAndStyles","getGapCSSValue","useCachedTruthy","setBackgroundStyleDefaults","useZoomOut","__unstableBlockStyleVariationOverridesWithConfig"],"sources":["@wordpress/block-editor/src/hooks/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tcreateBlockEditFilter,\n\tcreateBlockListBlockFilter,\n\tcreateBlockSaveFilter,\n} from './utils';\nimport './compat';\nimport align from './align';\nimport background from './background';\nimport './lock';\nimport anchor from './anchor';\nimport ariaLabel from './aria-label';\nimport customClassName from './custom-class-name';\nimport './generated-class-name';\nimport style from './style';\nimport './settings';\nimport color from './color';\nimport dimensions from './dimensions';\nimport duotone from './duotone';\nimport fontFamily from './font-family';\nimport fontSize from './font-size';\nimport textAlign from './text-align';\nimport border from './border';\nimport position from './position';\nimport blockStyleVariation from './block-style-variation';\nimport layout from './layout';\nimport childLayout from './layout-child';\nimport contentLockUI from './content-lock-ui';\nimport './metadata';\nimport blockHooks from './block-hooks';\nimport blockBindingsPanel from './block-bindings';\nimport './block-renaming';\nimport './use-bindings-attributes';\nimport './grid-visualizer';\n\ncreateBlockEditFilter(\n\t[\n\t\tblockBindingsPanel,\n\t\talign,\n\t\ttextAlign,\n\t\tanchor,\n\t\tcustomClassName,\n\t\tstyle,\n\t\tduotone,\n\t\tposition,\n\t\tlayout,\n\t\tcontentLockUI,\n\t\tblockHooks,\n\t\tchildLayout,\n\t].filter( Boolean )\n);\ncreateBlockListBlockFilter( [\n\talign,\n\ttextAlign,\n\tbackground,\n\tstyle,\n\tcolor,\n\tdimensions,\n\tduotone,\n\tfontFamily,\n\tfontSize,\n\tborder,\n\tposition,\n\tblockStyleVariation,\n\tchildLayout,\n] );\ncreateBlockSaveFilter( [\n\talign,\n\ttextAlign,\n\tanchor,\n\tariaLabel,\n\tcustomClassName,\n\tborder,\n\tcolor,\n\tstyle,\n\tfontFamily,\n\tfontSize,\n] );\n\nexport { useCustomSides } from './dimensions';\nexport { useLayoutClasses, useLayoutStyles } from './layout';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getShadowClassesAndStyles } from './use-shadow-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { getTypographyClassesAndStyles } from './use-typography-props';\nexport { getGapCSSValue } from './gap';\nexport { useCachedTruthy } from './use-cached-truthy';\nexport { setBackgroundStyleDefaults } from './background';\nexport { useZoomOut } from './use-zoom-out';\nexport { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,qBAAqB,EACrBC,0BAA0B,EAC1BC,qBAAqB,QACf,SAAS;AAChB,OAAO,UAAU;AACjB,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAO,QAAQ;AACf,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,eAAe,MAAM,qBAAqB;AACjD,OAAO,wBAAwB;AAC/B,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAO,YAAY;AACnB,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,mBAAmB,MAAM,yBAAyB;AACzD,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAO,YAAY;AACnB,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,kBAAkB,MAAM,kBAAkB;AACjD,OAAO,kBAAkB;AACzB,OAAO,2BAA2B;AAClC,OAAO,mBAAmB;AAE1BtB,qBAAqB,CACpB,CACCsB,kBAAkB,EAClBnB,KAAK,EACLW,SAAS,EACTT,MAAM,EACNE,eAAe,EACfC,KAAK,EACLG,OAAO,EACPK,QAAQ,EACRE,MAAM,EACNE,aAAa,EACbC,UAAU,EACVF,WAAW,CACX,CAACI,MAAM,CAAEC,OAAQ,CACnB,CAAC;AACDvB,0BAA0B,CAAE,CAC3BE,KAAK,EACLW,SAAS,EACTV,UAAU,EACVI,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRE,MAAM,EACNC,QAAQ,EACRC,mBAAmB,EACnBE,WAAW,CACV,CAAC;AACHjB,qBAAqB,CAAE,CACtBC,KAAK,EACLW,SAAS,EACTT,MAAM,EACNC,SAAS,EACTC,eAAe,EACfQ,MAAM,EACNN,KAAK,EACLD,KAAK,EACLI,UAAU,EACVC,QAAQ,CACP,CAAC;AAEH,SAASY,cAAc,QAAQ,cAAc;AAC7C,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,UAAU;AAC5D,SAASC,yBAAyB,EAAEC,cAAc,QAAQ,oBAAoB;AAC9E,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,wBAAwB,EAAEC,aAAa,QAAQ,mBAAmB;AAC3E,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,cAAc,QAAQ,OAAO;AACtC,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,0BAA0B,QAAQ,cAAc;AACzD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,gDAAgD,QAAQ,yBAAyB","ignoreList":[]}

package/build-module/hooks/layout-child.js

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
-import { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';
+import { GridVisualizer, GridItemResizer, GridItemMovers } from '../components/grid';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,6 +38,23 @@ function useBlockPropsChildLayoutStyles({
   } = parentLayout;
   const id = useInstanceId(useBlockPropsChildLayoutStyles);
   const selector = `.wp-container-content-${id}`;
+
+  // Check that the grid layout attributes are of the correct type, so that we don't accidentally
+  // write code that stores a string attribute instead of a number.
+  if (process.env.NODE_ENV === 'development') {
+    if (columnStart && typeof columnStart !== 'number') {
+      throw new Error('columnStart must be a number');
+    }
+    if (rowStart && typeof rowStart !== 'number') {
+      throw new Error('rowStart must be a number');
+    }
+    if (columnSpan && typeof columnSpan !== 'number') {
+      throw new Error('columnSpan must be a number');
+    }
+    if (rowSpan && typeof rowSpan !== 'number') {
+      throw new Error('rowSpan must be a number');
+    }
+  }
   let css = '';
   if (shouldRenderChildLayoutStyles) {
     if (selfStretch === 'fixed' && flexSize) {
@@ -62,16 +79,25 @@ function useBlockPropsChildLayoutStyles({
 				grid-column: span ${columnSpan};
 			}`;
     }
+    if (rowStart && rowSpan) {
+      css += `${selector} {
+				grid-row: ${rowStart} / span ${rowSpan};
+			}`;
+    } else if (rowStart) {
+      css += `${selector} {
+				grid-row: ${rowStart};
+			}`;
+    } else if (rowSpan) {
+      css += `${selector} {
+				grid-row: span ${rowSpan};
+			}`;
+    }
     /**
      * If minimumColumnWidth is set on the parent, or if no
      * columnCount is set, the grid is responsive so a
      * container query is needed for the span to resize.
      */
     if ((columnSpan || columnStart) && (minimumColumnWidth || !columnCount)) {
-      // Check if columnSpan and columnStart are numbers so Math.max doesn't break.
-      const columnSpanNumber = columnSpan ? parseInt(columnSpan) : null;
-      const columnStartNumber = columnStart ? parseInt(columnStart) : null;
-      const highestNumber = Math.max(columnSpanNumber, columnStartNumber);
       let parentColumnValue = parseFloat(minimumColumnWidth);
       /**
        * 12rem is the default minimumColumnWidth value.
@@ -88,29 +114,21 @@ function useBlockPropsChildLayoutStyles({
       if (!['px', 'rem', 'em'].includes(parentColumnUnit)) {
         parentColumnUnit = 'rem';
       }
+      const highestNumber = Math.max(columnSpan, columnStart);
       const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
       const containerQueryValue = highestNumber * parentColumnValue + (highestNumber - 1) * defaultGapValue;
+      // For blocks that only span one column, we want to remove any rowStart values as
+      // the container reduces in size, so that blocks are still arranged in markup order.
+      const minimumContainerQueryValue = parentColumnValue * 2 + defaultGapValue - 1;
       // If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
-      const gridColumnValue = columnSpan ? '1/-1' : 'auto';
-      css += `@container (max-width: ${containerQueryValue}${parentColumnUnit}) {
+      const gridColumnValue = columnSpan && columnSpan > 1 ? '1/-1' : 'auto';
+      css += `@container (max-width: ${Math.max(containerQueryValue, minimumContainerQueryValue)}${parentColumnUnit}) {
 				${selector} {
 					grid-column: ${gridColumnValue};
+					grid-row: auto;
 				}
 			}`;
     }
-    if (rowStart && rowSpan) {
-      css += `${selector} {
-				grid-row: ${rowStart} / span ${rowSpan};
-			}`;
-    } else if (rowStart) {
-      css += `${selector} {
-				grid-row: ${rowStart};
-			}`;
-    } else if (rowSpan) {
-      css += `${selector} {
-				grid-row: span ${rowSpan};
-			}`;
-    }
   }
   useStyleOverride({
     css
@@ -131,10 +149,12 @@ function ChildLayoutControlsPure({
   style,
   setAttributes
 }) {
+  const parentLayout = useLayout() || {};
   const {
     type: parentLayoutType = 'default',
-    allowSizingOnChildren = false
-  } = useLayout() || {};
+    allowSizingOnChildren = false,
+    isManualPlacement
+  } = parentLayout;
   const rootClientId = useSelect(select => {
     return select(blockEditorStore).getBlockRootClientId(clientId);
   }, [clientId]);
@@ -144,30 +164,35 @@ function ChildLayoutControlsPure({
   if (parentLayoutType !== 'grid') {
     return null;
   }
+  function updateLayout(layout) {
+    setAttributes({
+      style: {
+        ...style,
+        layout: {
+          ...style?.layout,
+          ...layout
+        }
+      }
+    });
+  }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(GridVisualizer, {
       clientId: rootClientId,
-      contentRef: setResizerBounds
+      contentRef: setResizerBounds,
+      parentLayout: parentLayout
     }), allowSizingOnChildren && /*#__PURE__*/_jsx(GridItemResizer, {
       clientId: clientId
       // Don't allow resizing beyond the grid visualizer.
       ,
       bounds: resizerBounds,
-      onChange: ({
-        columnSpan,
-        rowSpan
-      }) => {
-        setAttributes({
-          style: {
-            ...style,
-            layout: {
-              ...style?.layout,
-              columnSpan,
-              rowSpan
-            }
-          }
-        });
-      }
+      onChange: updateLayout,
+      parentLayout: parentLayout
+    }), isManualPlacement && window.__experimentalEnableGridInteractivity && /*#__PURE__*/_jsx(GridItemMovers, {
+      layout: style?.layout,
+      parentLayout: parentLayout,
+      onChange: updateLayout,
+      gridClientId: rootClientId,
+      blockClientId: clientId
     })]
   });
 }

package/build-module/hooks/layout-child.js.map

@@ -1 +1 @@
-{"version":3,"names":["useInstanceId","useSelect","useState","store","blockEditorStore","useStyleOverride","useLayout","GridVisualizer","GridItemResizer","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useBlockPropsChildLayoutStyles","style","_style$layout","shouldRenderChildLayoutStyles","select","getSettings","disableLayoutStyles","layout","selfStretch","flexSize","columnStart","rowStart","columnSpan","rowSpan","parentLayout","columnCount","minimumColumnWidth","id","selector","css","columnSpanNumber","parseInt","columnStartNumber","highestNumber","Math","max","parentColumnValue","parseFloat","isNaN","parentColumnUnit","replace","includes","defaultGapValue","containerQueryValue","gridColumnValue","className","ChildLayoutControlsPure","clientId","setAttributes","type","parentLayoutType","allowSizingOnChildren","rootClientId","getBlockRootClientId","resizerBounds","setResizerBounds","children","contentRef","bounds","onChange","useBlockProps","edit","attributeKeys","hasSupport"],"sources":["@wordpress/block-editor/src/hooks/layout-child.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { useStyleOverride } from './utils';\nimport { useLayout } from '../components/block-list/layout';\nimport { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';\n\nfunction useBlockPropsChildLayoutStyles( { style } ) {\n\tconst shouldRenderChildLayoutStyles = useSelect( ( select ) => {\n\t\treturn ! select( blockEditorStore ).getSettings().disableLayoutStyles;\n\t} );\n\tconst layout = style?.layout ?? {};\n\tconst {\n\t\tselfStretch,\n\t\tflexSize,\n\t\tcolumnStart,\n\t\trowStart,\n\t\tcolumnSpan,\n\t\trowSpan,\n\t} = layout;\n\tconst parentLayout = useLayout() || {};\n\tconst { columnCount, minimumColumnWidth } = parentLayout;\n\tconst id = useInstanceId( useBlockPropsChildLayoutStyles );\n\tconst selector = `.wp-container-content-${ id }`;\n\n\tlet css = '';\n\tif ( shouldRenderChildLayoutStyles ) {\n\t\tif ( selfStretch === 'fixed' && flexSize ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tflex-basis: ${ flexSize };\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}`;\n\t\t} else if ( selfStretch === 'fill' ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tflex-grow: 1;\n\t\t\t}`;\n\t\t} else if ( columnStart && columnSpan ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tgrid-column: ${ columnStart } / span ${ columnSpan };\n\t\t\t}`;\n\t\t} else if ( columnStart ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tgrid-column: ${ columnStart };\n\t\t\t}`;\n\t\t} else if ( columnSpan ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tgrid-column: span ${ columnSpan };\n\t\t\t}`;\n\t\t}\n\t\t/**\n\t\t * If minimumColumnWidth is set on the parent, or if no\n\t\t * columnCount is set, the grid is responsive so a\n\t\t * container query is needed for the span to resize.\n\t\t */\n\t\tif (\n\t\t\t( columnSpan || columnStart ) &&\n\t\t\t( minimumColumnWidth || ! columnCount )\n\t\t) {\n\t\t\t// Check if columnSpan and columnStart are numbers so Math.max doesn't break.\n\t\t\tconst columnSpanNumber = columnSpan ? parseInt( columnSpan ) : null;\n\t\t\tconst columnStartNumber = columnStart\n\t\t\t\t? parseInt( columnStart )\n\t\t\t\t: null;\n\t\t\tconst highestNumber = Math.max(\n\t\t\t\tcolumnSpanNumber,\n\t\t\t\tcolumnStartNumber\n\t\t\t);\n\n\t\t\tlet parentColumnValue = parseFloat( minimumColumnWidth );\n\t\t\t/**\n\t\t\t * 12rem is the default minimumColumnWidth value.\n\t\t\t * If parentColumnValue is not a number, default to 12.\n\t\t\t */\n\t\t\tif ( isNaN( parentColumnValue ) ) {\n\t\t\t\tparentColumnValue = 12;\n\t\t\t}\n\n\t\t\tlet parentColumnUnit = minimumColumnWidth?.replace(\n\t\t\t\tparentColumnValue,\n\t\t\t\t''\n\t\t\t);\n\t\t\t/**\n\t\t\t * Check that parent column unit is either 'px', 'rem' or 'em'.\n\t\t\t * If not, default to 'rem'.\n\t\t\t */\n\t\t\tif ( ! [ 'px', 'rem', 'em' ].includes( parentColumnUnit ) ) {\n\t\t\t\tparentColumnUnit = 'rem';\n\t\t\t}\n\n\t\t\tconst defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;\n\t\t\tconst containerQueryValue =\n\t\t\t\thighestNumber * parentColumnValue +\n\t\t\t\t( highestNumber - 1 ) * defaultGapValue;\n\t\t\t// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.\n\t\t\tconst gridColumnValue = columnSpan ? '1/-1' : 'auto';\n\n\t\t\tcss += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {\n\t\t\t\t${ selector } {\n\t\t\t\t\tgrid-column: ${ gridColumnValue };\n\t\t\t\t}\n\t\t\t}`;\n\t\t}\n\t\tif ( rowStart && rowSpan ) {\n\t\t\tcss += `${ selector } {\n\t\t\t\tgrid-row: ${ rowStart } / span ${ rowSpan };\n\t\t\t}`;\n\t\t} else if ( rowStart ) {\n\t\t\tcss += `${ selector } {\n\t\t\t\tgrid-row: ${ rowStart };\n\t\t\t}`;\n\t\t} else if ( rowSpan ) {\n\t\t\tcss += `${ selector } {\n\t\t\t\tgrid-row: span ${ rowSpan };\n\t\t\t}`;\n\t\t}\n\t}\n\n\tuseStyleOverride( { css } );\n\n\t// Only attach a container class if there is generated CSS to be attached.\n\tif ( ! css ) {\n\t\treturn;\n\t}\n\n\t// Attach a `wp-container-content` id-based classname.\n\treturn { className: `wp-container-content-${ id }` };\n}\n\nfunction ChildLayoutControlsPure( { clientId, style, setAttributes } ) {\n\tconst {\n\t\ttype: parentLayoutType = 'default',\n\t\tallowSizingOnChildren = false,\n\t} = useLayout() || {};\n\n\tconst rootClientId = useSelect(\n\t\t( select ) => {\n\t\t\treturn select( blockEditorStore ).getBlockRootClientId( clientId );\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.\n\tconst [ resizerBounds, setResizerBounds ] = useState();\n\n\tif ( parentLayoutType !== 'grid' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<GridVisualizer\n\t\t\t\tclientId={ rootClientId }\n\t\t\t\tcontentRef={ setResizerBounds }\n\t\t\t/>\n\t\t\t{ allowSizingOnChildren && (\n\t\t\t\t<GridItemResizer\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t// Don't allow resizing beyond the grid visualizer.\n\t\t\t\t\tbounds={ resizerBounds }\n\t\t\t\t\tonChange={ ( { columnSpan, rowSpan } ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\t\t...style?.layout,\n\t\t\t\t\t\t\t\t\tcolumnSpan,\n\t\t\t\t\t\t\t\t\trowSpan,\n\t\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\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default {\n\tuseBlockProps: useBlockPropsChildLayoutStyles,\n\tedit: ChildLayoutControlsPure,\n\tattributeKeys: [ 'style' ],\n\thasSupport() {\n\t\treturn true;\n\t},\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useInstanceId","useSelect","useState","store","blockEditorStore","useStyleOverride","useLayout","GridVisualizer","GridItemResizer","GridItemMovers","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useBlockPropsChildLayoutStyles","style","_style$layout","shouldRenderChildLayoutStyles","select","getSettings","disableLayoutStyles","layout","selfStretch","flexSize","columnStart","rowStart","columnSpan","rowSpan","parentLayout","columnCount","minimumColumnWidth","id","selector","process","env","NODE_ENV","Error","css","parentColumnValue","parseFloat","isNaN","parentColumnUnit","replace","includes","highestNumber","Math","max","defaultGapValue","containerQueryValue","minimumContainerQueryValue","gridColumnValue","className","ChildLayoutControlsPure","clientId","setAttributes","type","parentLayoutType","allowSizingOnChildren","isManualPlacement","rootClientId","getBlockRootClientId","resizerBounds","setResizerBounds","updateLayout","children","contentRef","bounds","onChange","window","__experimentalEnableGridInteractivity","gridClientId","blockClientId","useBlockProps","edit","attributeKeys","hasSupport"],"sources":["@wordpress/block-editor/src/hooks/layout-child.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { useStyleOverride } from './utils';\nimport { useLayout } from '../components/block-list/layout';\nimport {\n\tGridVisualizer,\n\tGridItemResizer,\n\tGridItemMovers,\n} from '../components/grid';\n\nfunction useBlockPropsChildLayoutStyles( { style } ) {\n\tconst shouldRenderChildLayoutStyles = useSelect( ( select ) => {\n\t\treturn ! select( blockEditorStore ).getSettings().disableLayoutStyles;\n\t} );\n\tconst layout = style?.layout ?? {};\n\tconst {\n\t\tselfStretch,\n\t\tflexSize,\n\t\tcolumnStart,\n\t\trowStart,\n\t\tcolumnSpan,\n\t\trowSpan,\n\t} = layout;\n\tconst parentLayout = useLayout() || {};\n\tconst { columnCount, minimumColumnWidth } = parentLayout;\n\tconst id = useInstanceId( useBlockPropsChildLayoutStyles );\n\tconst selector = `.wp-container-content-${ id }`;\n\n\t// Check that the grid layout attributes are of the correct type, so that we don't accidentally\n\t// write code that stores a string attribute instead of a number.\n\tif ( process.env.NODE_ENV === 'development' ) {\n\t\tif ( columnStart && typeof columnStart !== 'number' ) {\n\t\t\tthrow new Error( 'columnStart must be a number' );\n\t\t}\n\t\tif ( rowStart && typeof rowStart !== 'number' ) {\n\t\t\tthrow new Error( 'rowStart must be a number' );\n\t\t}\n\t\tif ( columnSpan && typeof columnSpan !== 'number' ) {\n\t\t\tthrow new Error( 'columnSpan must be a number' );\n\t\t}\n\t\tif ( rowSpan && typeof rowSpan !== 'number' ) {\n\t\t\tthrow new Error( 'rowSpan must be a number' );\n\t\t}\n\t}\n\n\tlet css = '';\n\tif ( shouldRenderChildLayoutStyles ) {\n\t\tif ( selfStretch === 'fixed' && flexSize ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tflex-basis: ${ flexSize };\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}`;\n\t\t} else if ( selfStretch === 'fill' ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tflex-grow: 1;\n\t\t\t}`;\n\t\t} else if ( columnStart && columnSpan ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tgrid-column: ${ columnStart } / span ${ columnSpan };\n\t\t\t}`;\n\t\t} else if ( columnStart ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tgrid-column: ${ columnStart };\n\t\t\t}`;\n\t\t} else if ( columnSpan ) {\n\t\t\tcss = `${ selector } {\n\t\t\t\tgrid-column: span ${ columnSpan };\n\t\t\t}`;\n\t\t}\n\t\tif ( rowStart && rowSpan ) {\n\t\t\tcss += `${ selector } {\n\t\t\t\tgrid-row: ${ rowStart } / span ${ rowSpan };\n\t\t\t}`;\n\t\t} else if ( rowStart ) {\n\t\t\tcss += `${ selector } {\n\t\t\t\tgrid-row: ${ rowStart };\n\t\t\t}`;\n\t\t} else if ( rowSpan ) {\n\t\t\tcss += `${ selector } {\n\t\t\t\tgrid-row: span ${ rowSpan };\n\t\t\t}`;\n\t\t}\n\t\t/**\n\t\t * If minimumColumnWidth is set on the parent, or if no\n\t\t * columnCount is set, the grid is responsive so a\n\t\t * container query is needed for the span to resize.\n\t\t */\n\t\tif (\n\t\t\t( columnSpan || columnStart ) &&\n\t\t\t( minimumColumnWidth || ! columnCount )\n\t\t) {\n\t\t\tlet parentColumnValue = parseFloat( minimumColumnWidth );\n\t\t\t/**\n\t\t\t * 12rem is the default minimumColumnWidth value.\n\t\t\t * If parentColumnValue is not a number, default to 12.\n\t\t\t */\n\t\t\tif ( isNaN( parentColumnValue ) ) {\n\t\t\t\tparentColumnValue = 12;\n\t\t\t}\n\n\t\t\tlet parentColumnUnit = minimumColumnWidth?.replace(\n\t\t\t\tparentColumnValue,\n\t\t\t\t''\n\t\t\t);\n\t\t\t/**\n\t\t\t * Check that parent column unit is either 'px', 'rem' or 'em'.\n\t\t\t * If not, default to 'rem'.\n\t\t\t */\n\t\t\tif ( ! [ 'px', 'rem', 'em' ].includes( parentColumnUnit ) ) {\n\t\t\t\tparentColumnUnit = 'rem';\n\t\t\t}\n\n\t\t\tconst highestNumber = Math.max( columnSpan, columnStart );\n\t\t\tconst defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;\n\t\t\tconst containerQueryValue =\n\t\t\t\thighestNumber * parentColumnValue +\n\t\t\t\t( highestNumber - 1 ) * defaultGapValue;\n\t\t\t// For blocks that only span one column, we want to remove any rowStart values as\n\t\t\t// the container reduces in size, so that blocks are still arranged in markup order.\n\t\t\tconst minimumContainerQueryValue =\n\t\t\t\tparentColumnValue * 2 + defaultGapValue - 1;\n\t\t\t// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.\n\t\t\tconst gridColumnValue =\n\t\t\t\tcolumnSpan && columnSpan > 1 ? '1/-1' : 'auto';\n\n\t\t\tcss += `@container (max-width: ${ Math.max(\n\t\t\t\tcontainerQueryValue,\n\t\t\t\tminimumContainerQueryValue\n\t\t\t) }${ parentColumnUnit }) {\n\t\t\t\t${ selector } {\n\t\t\t\t\tgrid-column: ${ gridColumnValue };\n\t\t\t\t\tgrid-row: auto;\n\t\t\t\t}\n\t\t\t}`;\n\t\t}\n\t}\n\n\tuseStyleOverride( { css } );\n\n\t// Only attach a container class if there is generated CSS to be attached.\n\tif ( ! css ) {\n\t\treturn;\n\t}\n\n\t// Attach a `wp-container-content` id-based classname.\n\treturn { className: `wp-container-content-${ id }` };\n}\n\nfunction ChildLayoutControlsPure( { clientId, style, setAttributes } ) {\n\tconst parentLayout = useLayout() || {};\n\tconst {\n\t\ttype: parentLayoutType = 'default',\n\t\tallowSizingOnChildren = false,\n\t\tisManualPlacement,\n\t} = parentLayout;\n\n\tconst rootClientId = useSelect(\n\t\t( select ) => {\n\t\t\treturn select( blockEditorStore ).getBlockRootClientId( clientId );\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.\n\tconst [ resizerBounds, setResizerBounds ] = useState();\n\n\tif ( parentLayoutType !== 'grid' ) {\n\t\treturn null;\n\t}\n\n\tfunction updateLayout( layout ) {\n\t\tsetAttributes( {\n\t\t\tstyle: {\n\t\t\t\t...style,\n\t\t\t\tlayout: {\n\t\t\t\t\t...style?.layout,\n\t\t\t\t\t...layout,\n\t\t\t\t},\n\t\t\t},\n\t\t} );\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<GridVisualizer\n\t\t\t\tclientId={ rootClientId }\n\t\t\t\tcontentRef={ setResizerBounds }\n\t\t\t\tparentLayout={ parentLayout }\n\t\t\t/>\n\t\t\t{ allowSizingOnChildren && (\n\t\t\t\t<GridItemResizer\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t// Don't allow resizing beyond the grid visualizer.\n\t\t\t\t\tbounds={ resizerBounds }\n\t\t\t\t\tonChange={ updateLayout }\n\t\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ isManualPlacement &&\n\t\t\t\twindow.__experimentalEnableGridInteractivity && (\n\t\t\t\t\t<GridItemMovers\n\t\t\t\t\t\tlayout={ style?.layout }\n\t\t\t\t\t\tparentLayout={ parentLayout }\n\t\t\t\t\t\tonChange={ updateLayout }\n\t\t\t\t\t\tgridClientId={ rootClientId }\n\t\t\t\t\t\tblockClientId={ clientId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default {\n\tuseBlockProps: useBlockPropsChildLayoutStyles,\n\tedit: ChildLayoutControlsPure,\n\tattributeKeys: [ 'style' ],\n\thasSupport() {\n\t\treturn true;\n\t},\n};\n"],"mappings":"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","ignoreList":[]}