@wordpress/block-editor 13.0.4 → 13.0.6

package/build-module/layouts/constrained.js

@@ -181,15 +181,19 @@ export default {
       const paddingValues = getCSSRules(style);
       paddingValues.forEach(rule => {
         if (rule.key === 'paddingRight') {
+          // Add unit if 0, to avoid calc(0 * -1) which is invalid.
+          const paddingRightValue = rule.value === '0' ? '0px' : rule.value;
           output += `
 					${appendSelectors(selector, '> .alignfull')} {
-						margin-right: calc(${rule.value} * -1);
+						margin-right: calc(${paddingRightValue} * -1);
 					}
 					`;
         } else if (rule.key === 'paddingLeft') {
+          // Add unit if 0, to avoid calc(0 * -1) which is invalid.
+          const paddingLeftValue = rule.value === '0' ? '0px' : rule.value;
           output += `
 					${appendSelectors(selector, '> .alignfull')} {
-						margin-left: calc(${rule.value} * -1);
+						margin-left: calc(${paddingLeftValue} * -1);
 					}
 					`;
         }

package/build-module/layouts/constrained.js.map

@@ -1 +1 @@
-{"version":3,"names":["__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOptionIcon","ToggleGroupControlOptionIcon","__","Icon","positionCenter","stretchWide","justifyLeft","justifyCenter","justifyRight","getCSSRules","useSettings","appendSelectors","getBlockGapCSS","getAlignmentsInfo","getGapCSSValue","shouldSkipSerialization","LAYOUT_DEFINITIONS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","layoutBlockSupport","wideSize","contentSize","justifyContent","allowJustification","allowCustomContentAndWideSize","onJustificationChange","value","justificationOptions","icon","availableUnits","units","children","className","labelPosition","__unstableInputWidth","nextWidth","parseFloat","__nextHasNoMarginBottom","map","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","marginLeft","marginRight","output","padding","paddingValues","forEach","rule","key","getOrientation","getAlignments","alignmentInfo","alignments","undefined","includes","unshift","alignment","info","wide","none"],"sources":["@wordpress/block-editor/src/layouts/constrained.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tIcon,\n\tpositionCenter,\n\tstretchWide,\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n} from '@wordpress/icons';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../components/use-settings';\nimport { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\nexport default {\n\tname: 'constrained',\n\tlabel: __( 'Constrained' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t} ) {\n\t\tconst { wideSize, contentSize, justifyContent = 'center' } = layout;\n\t\tconst {\n\t\t\tallowJustification = true,\n\t\t\tallowCustomContentAndWideSize = true,\n\t\t} = layoutBlockSupport;\n\t\tconst onJustificationChange = ( value ) => {\n\t\t\tonChange( {\n\t\t\t\t...layout,\n\t\t\t\tjustifyContent: value,\n\t\t\t} );\n\t\t};\n\t\tconst justificationOptions = [\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\ticon: justifyLeft,\n\t\t\t\tlabel: __( 'Justify items left' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'center',\n\t\t\t\ticon: justifyCenter,\n\t\t\t\tlabel: __( 'Justify items center' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\ticon: justifyRight,\n\t\t\t\tlabel: __( 'Justify items right' ),\n\t\t\t},\n\t\t];\n\t\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],\n\t\t} );\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ allowCustomContentAndWideSize && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls\">\n\t\t\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-hooks__layout-controls-unit-input\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Content' ) }\n\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\t\tcontentSize: nextWidth,\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\tunits={ units }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Icon icon={ positionCenter } />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-hooks__layout-controls-unit-input\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Wide' ) }\n\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\t\twideSize: nextWidth,\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\tunits={ units }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Customize the width for all elements that are assigned to the center or wide columns.'\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) }\n\t\t\t\t{ allowJustification && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\tvalue={ justifyContent }\n\t\t\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ justificationOptions.map(\n\t\t\t\t\t\t\t( { value, icon, label } ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\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</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function DefaultLayoutToolbarControls() {\n\t\treturn null;\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions = LAYOUT_DEFINITIONS,\n\t} ) {\n\t\tconst { contentSize, wideSize, justifyContent } = layout;\n\t\tconst blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );\n\n\t\t// If a block's block.json skips serialization for spacing or\n\t\t// spacing.blockGap, don't apply the user-defined value to the styles.\n\t\tlet blockGapValue = '';\n\t\tif ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {\n\t\t\t// If an object is provided only use the 'top' value for this kind of gap.\n\t\t\tif ( blockGapStyleValue?.top ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue?.top );\n\t\t\t} else if ( typeof blockGapStyleValue === 'string' ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue );\n\t\t\t}\n\t\t}\n\n\t\tconst marginLeft =\n\t\t\tjustifyContent === 'left' ? '0 !important' : 'auto !important';\n\t\tconst marginRight =\n\t\t\tjustifyContent === 'right' ? '0 !important' : 'auto !important';\n\n\t\tlet output =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors(\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t\t) } {\n\t\t\t\t\t\tmax-width: ${ contentSize ?? wideSize };\n\t\t\t\t\t\tmargin-left: ${ marginLeft };\n\t\t\t\t\t\tmargin-right: ${ marginRight };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignwide' ) }  {\n\t\t\t\t\t\tmax-width: ${ wideSize ?? contentSize };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmax-width: none;\n\t\t\t\t\t}\n\t\t\t\t`\n\t\t\t\t: '';\n\n\t\tif ( justifyContent === 'left' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-left: ${ marginLeft }; }`;\n\t\t} else if ( justifyContent === 'right' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-right: ${ marginRight }; }`;\n\t\t}\n\n\t\t// If there is custom padding, add negative margins for alignfull blocks.\n\t\tif ( style?.spacing?.padding ) {\n\t\t\t// The style object might be storing a preset so we need to make sure we get a usable value.\n\t\t\tconst paddingValues = getCSSRules( style );\n\t\t\tpaddingValues.forEach( ( rule ) => {\n\t\t\t\tif ( rule.key === 'paddingRight' ) {\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-right: calc(${ rule.value } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t} else if ( rule.key === 'paddingLeft' ) {\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-left: calc(${ rule.value } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'constrained',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tconst alignmentInfo = getAlignmentsInfo( layout );\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\tif ( ! layout.alignments.includes( 'none' ) ) {\n\t\t\t\tlayout.alignments.unshift( 'none' );\n\t\t\t}\n\t\t\treturn layout.alignments.map( ( alignment ) => ( {\n\t\t\t\tname: alignment,\n\t\t\t\tinfo: alignmentInfo[ alignment ],\n\t\t\t} ) );\n\t\t}\n\t\tconst { contentSize, wideSize } = layout;\n\n\t\tconst alignments = [\n\t\t\t{ name: 'left' },\n\t\t\t{ name: 'center' },\n\t\t\t{ name: 'right' },\n\t\t];\n\n\t\tif ( contentSize ) {\n\t\t\talignments.unshift( { name: 'full' } );\n\t\t}\n\n\t\tif ( wideSize ) {\n\t\t\talignments.unshift( { name: 'wide', info: alignmentInfo.wide } );\n\t\t}\n\n\t\talignments.unshift( { name: 'none', info: alignmentInfo.none } );\n\n\t\treturn alignments;\n\t},\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOptionIcon","ToggleGroupControlOptionIcon","__","Icon","positionCenter","stretchWide","justifyLeft","justifyCenter","justifyRight","getCSSRules","useSettings","appendSelectors","getBlockGapCSS","getAlignmentsInfo","getGapCSSValue","shouldSkipSerialization","LAYOUT_DEFINITIONS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","layoutBlockSupport","wideSize","contentSize","justifyContent","allowJustification","allowCustomContentAndWideSize","onJustificationChange","value","justificationOptions","icon","availableUnits","units","children","className","labelPosition","__unstableInputWidth","nextWidth","parseFloat","__nextHasNoMarginBottom","map","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","marginLeft","marginRight","output","padding","paddingValues","forEach","rule","key","paddingRightValue","paddingLeftValue","getOrientation","getAlignments","alignmentInfo","alignments","undefined","includes","unshift","alignment","info","wide","none"],"sources":["@wordpress/block-editor/src/layouts/constrained.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tIcon,\n\tpositionCenter,\n\tstretchWide,\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n} from '@wordpress/icons';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../components/use-settings';\nimport { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\nimport { LAYOUT_DEFINITIONS } from './definitions';\n\nexport default {\n\tname: 'constrained',\n\tlabel: __( 'Constrained' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t} ) {\n\t\tconst { wideSize, contentSize, justifyContent = 'center' } = layout;\n\t\tconst {\n\t\t\tallowJustification = true,\n\t\t\tallowCustomContentAndWideSize = true,\n\t\t} = layoutBlockSupport;\n\t\tconst onJustificationChange = ( value ) => {\n\t\t\tonChange( {\n\t\t\t\t...layout,\n\t\t\t\tjustifyContent: value,\n\t\t\t} );\n\t\t};\n\t\tconst justificationOptions = [\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\ticon: justifyLeft,\n\t\t\t\tlabel: __( 'Justify items left' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'center',\n\t\t\t\ticon: justifyCenter,\n\t\t\t\tlabel: __( 'Justify items center' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\ticon: justifyRight,\n\t\t\t\tlabel: __( 'Justify items right' ),\n\t\t\t},\n\t\t];\n\t\tconst [ availableUnits ] = useSettings( 'spacing.units' );\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],\n\t\t} );\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ allowCustomContentAndWideSize && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls\">\n\t\t\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-hooks__layout-controls-unit-input\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Content' ) }\n\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\t\tcontentSize: nextWidth,\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\tunits={ units }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Icon icon={ positionCenter } />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-hooks__layout-controls-unit-input\"\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Wide' ) }\n\t\t\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\t\t\twideSize: nextWidth,\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\tunits={ units }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Customize the width for all elements that are assigned to the center or wide columns.'\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) }\n\t\t\t\t{ allowJustification && (\n\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\t\tvalue={ justifyContent }\n\t\t\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ justificationOptions.map(\n\t\t\t\t\t\t\t( { value, icon, label } ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\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</ToggleGroupControl>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function DefaultLayoutToolbarControls() {\n\t\treturn null;\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions = LAYOUT_DEFINITIONS,\n\t} ) {\n\t\tconst { contentSize, wideSize, justifyContent } = layout;\n\t\tconst blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );\n\n\t\t// If a block's block.json skips serialization for spacing or\n\t\t// spacing.blockGap, don't apply the user-defined value to the styles.\n\t\tlet blockGapValue = '';\n\t\tif ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {\n\t\t\t// If an object is provided only use the 'top' value for this kind of gap.\n\t\t\tif ( blockGapStyleValue?.top ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue?.top );\n\t\t\t} else if ( typeof blockGapStyleValue === 'string' ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue );\n\t\t\t}\n\t\t}\n\n\t\tconst marginLeft =\n\t\t\tjustifyContent === 'left' ? '0 !important' : 'auto !important';\n\t\tconst marginRight =\n\t\t\tjustifyContent === 'right' ? '0 !important' : 'auto !important';\n\n\t\tlet output =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors(\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t\t) } {\n\t\t\t\t\t\tmax-width: ${ contentSize ?? wideSize };\n\t\t\t\t\t\tmargin-left: ${ marginLeft };\n\t\t\t\t\t\tmargin-right: ${ marginRight };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignwide' ) }  {\n\t\t\t\t\t\tmax-width: ${ wideSize ?? contentSize };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmax-width: none;\n\t\t\t\t\t}\n\t\t\t\t`\n\t\t\t\t: '';\n\n\t\tif ( justifyContent === 'left' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-left: ${ marginLeft }; }`;\n\t\t} else if ( justifyContent === 'right' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-right: ${ marginRight }; }`;\n\t\t}\n\n\t\t// If there is custom padding, add negative margins for alignfull blocks.\n\t\tif ( style?.spacing?.padding ) {\n\t\t\t// The style object might be storing a preset so we need to make sure we get a usable value.\n\t\t\tconst paddingValues = getCSSRules( style );\n\t\t\tpaddingValues.forEach( ( rule ) => {\n\t\t\t\tif ( rule.key === 'paddingRight' ) {\n\t\t\t\t\t// Add unit if 0, to avoid calc(0 * -1) which is invalid.\n\t\t\t\t\tconst paddingRightValue =\n\t\t\t\t\t\trule.value === '0' ? '0px' : rule.value;\n\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-right: calc(${ paddingRightValue } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t} else if ( rule.key === 'paddingLeft' ) {\n\t\t\t\t\t// Add unit if 0, to avoid calc(0 * -1) which is invalid.\n\t\t\t\t\tconst paddingLeftValue =\n\t\t\t\t\t\trule.value === '0' ? '0px' : rule.value;\n\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-left: calc(${ paddingLeftValue } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'constrained',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tconst alignmentInfo = getAlignmentsInfo( layout );\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\tif ( ! layout.alignments.includes( 'none' ) ) {\n\t\t\t\tlayout.alignments.unshift( 'none' );\n\t\t\t}\n\t\t\treturn layout.alignments.map( ( alignment ) => ( {\n\t\t\t\tname: alignment,\n\t\t\t\tinfo: alignmentInfo[ alignment ],\n\t\t\t} ) );\n\t\t}\n\t\tconst { contentSize, wideSize } = layout;\n\n\t\tconst alignments = [\n\t\t\t{ name: 'left' },\n\t\t\t{ name: 'center' },\n\t\t\t{ name: 'right' },\n\t\t];\n\n\t\tif ( contentSize ) {\n\t\t\talignments.unshift( { name: 'full' } );\n\t\t}\n\n\t\tif ( wideSize ) {\n\t\t\talignments.unshift( { name: 'wide', info: alignmentInfo.wide } );\n\t\t}\n\n\t\talignments.unshift( { name: 'none', info: alignmentInfo.none } );\n\n\t\treturn alignments;\n\t},\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,4BAA4B,IAAIC,cAAc,EAC9CC,yBAAyB,IAAIC,WAAW,EACxCC,gCAAgC,IAAIC,kBAAkB,EACtDC,0CAA0C,IAAIC,4BAA4B,QACpE,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SACCC,IAAI,EACJC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,YAAY,QACN,kBAAkB;AACzB,SAASC,WAAW,QAAQ,yBAAyB;;AAErD;AACA;AACA;AACA,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,EAAEC,cAAc,EAAEC,iBAAiB,QAAQ,SAAS;AAC5E,SAASC,cAAc,QAAQ,cAAc;AAC7C,SAASC,uBAAuB,QAAQ,gBAAgB;AACxD,SAASC,kBAAkB,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEnD,eAAe;EACdC,IAAI,EAAE,aAAa;EACnBC,KAAK,EAAEtB,EAAE,CAAE,aAAc,CAAC;EAC1BuB,iBAAiB,EAAE,SAASC,8BAA8BA,CAAE;IAC3DC,MAAM;IACNC,QAAQ;IACRC,kBAAkB,GAAG,CAAC;EACvB,CAAC,EAAG;IACH,MAAM;MAAEC,QAAQ;MAAEC,WAAW;MAAEC,cAAc,GAAG;IAAS,CAAC,GAAGL,MAAM;IACnE,MAAM;MACLM,kBAAkB,GAAG,IAAI;MACzBC,6BAA6B,GAAG;IACjC,CAAC,GAAGL,kBAAkB;IACtB,MAAMM,qBAAqB,GAAKC,KAAK,IAAM;MAC1CR,QAAQ,CAAE;QACT,GAAGD,MAAM;QACTK,cAAc,EAAEI;MACjB,CAAE,CAAC;IACJ,CAAC;IACD,MAAMC,oBAAoB,GAAG,CAC5B;MACCD,KAAK,EAAE,MAAM;MACbE,IAAI,EAAEhC,WAAW;MACjBkB,KAAK,EAAEtB,EAAE,CAAE,oBAAqB;IACjC,CAAC,EACD;MACCkC,KAAK,EAAE,QAAQ;MACfE,IAAI,EAAE/B,aAAa;MACnBiB,KAAK,EAAEtB,EAAE,CAAE,sBAAuB;IACnC,CAAC,EACD;MACCkC,KAAK,EAAE,OAAO;MACdE,IAAI,EAAE9B,YAAY;MAClBgB,KAAK,EAAEtB,EAAE,CAAE,qBAAsB;IAClC,CAAC,CACD;IACD,MAAM,CAAEqC,cAAc,CAAE,GAAG7B,WAAW,CAAE,eAAgB,CAAC;IACzD,MAAM8B,KAAK,GAAG7C,cAAc,CAAE;MAC7B4C,cAAc,EAAEA,cAAc,IAAI,CAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI;IACjE,CAAE,CAAC;IACH,oBACCnB,KAAA,CAAAE,SAAA;MAAAmB,QAAA,GACGP,6BAA6B,iBAC9Bd,KAAA,CAAAE,SAAA;QAAAmB,QAAA,gBACCrB,KAAA;UAAKsB,SAAS,EAAC,qCAAqC;UAAAD,QAAA,gBACnDrB,KAAA;YAAKsB,SAAS,EAAC,0CAA0C;YAAAD,QAAA,gBACxDvB,IAAA,CAACrB,WAAW;cACX6C,SAAS,EAAC,gDAAgD;cAC1DlB,KAAK,EAAGtB,EAAE,CAAE,SAAU,CAAG;cACzByC,aAAa,EAAC,KAAK;cACnBC,oBAAoB,EAAC,MAAM;cAC3BR,KAAK,EAAGL,WAAW,IAAID,QAAQ,IAAI,EAAI;cACvCF,QAAQ,EAAKiB,SAAS,IAAM;gBAC3BA,SAAS,GACR,CAAC,GAAGC,UAAU,CAAED,SAAU,CAAC,GACxB,GAAG,GACHA,SAAS;gBACbjB,QAAQ,CAAE;kBACT,GAAGD,MAAM;kBACTI,WAAW,EAAEc;gBACd,CAAE,CAAC;cACJ,CAAG;cACHL,KAAK,EAAGA;YAAO,CACf,CAAC,eACFtB,IAAA,CAACf,IAAI;cAACmC,IAAI,EAAGlC;YAAgB,CAAE,CAAC;UAAA,CAC5B,CAAC,eACNgB,KAAA;YAAKsB,SAAS,EAAC,0CAA0C;YAAAD,QAAA,gBACxDvB,IAAA,CAACrB,WAAW;cACX6C,SAAS,EAAC,gDAAgD;cAC1DlB,KAAK,EAAGtB,EAAE,CAAE,MAAO,CAAG;cACtByC,aAAa,EAAC,KAAK;cACnBC,oBAAoB,EAAC,MAAM;cAC3BR,KAAK,EAAGN,QAAQ,IAAIC,WAAW,IAAI,EAAI;cACvCH,QAAQ,EAAKiB,SAAS,IAAM;gBAC3BA,SAAS,GACR,CAAC,GAAGC,UAAU,CAAED,SAAU,CAAC,GACxB,GAAG,GACHA,SAAS;gBACbjB,QAAQ,CAAE;kBACT,GAAGD,MAAM;kBACTG,QAAQ,EAAEe;gBACX,CAAE,CAAC;cACJ,CAAG;cACHL,KAAK,EAAGA;YAAO,CACf,CAAC,eACFtB,IAAA,CAACf,IAAI;cAACmC,IAAI,EAAGjC;YAAa,CAAE,CAAC;UAAA,CACzB,CAAC;QAAA,CACF,CAAC,eACNa,IAAA;UAAGwB,SAAS,EAAC,8CAA8C;UAAAD,QAAA,EACxDvC,EAAE,CACH,uFACD;QAAC,CACC,CAAC;MAAA,CACH,CACF,EACC+B,kBAAkB,iBACnBf,IAAA,CAACnB,kBAAkB;QAClBgD,uBAAuB;QACvBvB,KAAK,EAAGtB,EAAE,CAAE,eAAgB,CAAG;QAC/BkC,KAAK,EAAGJ,cAAgB;QACxBJ,QAAQ,EAAGO,qBAAuB;QAAAM,QAAA,EAEhCJ,oBAAoB,CAACW,GAAG,CACzB,CAAE;UAAEZ,KAAK;UAAEE,IAAI;UAAEd;QAAM,CAAC,KAAM;UAC7B,oBACCN,IAAA,CAACjB,4BAA4B;YAE5BmC,KAAK,EAAGA,KAAO;YACfE,IAAI,EAAGA,IAAM;YACbd,KAAK,EAAGA;UAAO,GAHTY,KAIN,CAAC;QAEJ,CACD;MAAC,CACkB,CACpB;IAAA,CACA,CAAC;EAEL,CAAC;EACDa,eAAe,EAAE,SAASC,4BAA4BA,CAAA,EAAG;IACxD,OAAO,IAAI;EACZ,CAAC;EACDC,cAAc,EAAE,SAASA,cAAcA,CAAE;IACxCC,QAAQ;IACRzB,MAAM,GAAG,CAAC,CAAC;IACX0B,KAAK;IACLC,SAAS;IACTC,kBAAkB;IAClBC,iBAAiB,GAAGxC;EACrB,CAAC,EAAG;IACH,MAAM;MAAEe,WAAW;MAAED,QAAQ;MAAEE;IAAe,CAAC,GAAGL,MAAM;IACxD,MAAM8B,kBAAkB,GAAG3C,cAAc,CAAEuC,KAAK,EAAEK,OAAO,EAAEC,QAAS,CAAC;;IAErE;IACA;IACA,IAAIC,aAAa,GAAG,EAAE;IACtB,IAAK,CAAE7C,uBAAuB,CAAEuC,SAAS,EAAE,SAAS,EAAE,UAAW,CAAC,EAAG;MACpE;MACA,IAAKG,kBAAkB,EAAEI,GAAG,EAAG;QAC9BD,aAAa,GAAG9C,cAAc,CAAE2C,kBAAkB,EAAEI,GAAI,CAAC;MAC1D,CAAC,MAAM,IAAK,OAAOJ,kBAAkB,KAAK,QAAQ,EAAG;QACpDG,aAAa,GAAG9C,cAAc,CAAE2C,kBAAmB,CAAC;MACrD;IACD;IAEA,MAAMK,UAAU,GACf9B,cAAc,KAAK,MAAM,GAAG,cAAc,GAAG,iBAAiB;IAC/D,MAAM+B,WAAW,GAChB/B,cAAc,KAAK,OAAO,GAAG,cAAc,GAAG,iBAAiB;IAEhE,IAAIgC,MAAM,GACT,CAAC,CAAEjC,WAAW,IAAI,CAAC,CAAED,QAAQ,GACzB;AACP,OAAQnB,eAAe,CACjByC,QAAQ,EACR,6DACD,CAAG;AACR,mBAAoBrB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAID,QAAU;AAC7C,qBAAsBgC,UAAY;AAClC,sBAAuBC,WAAa;AACpC;AACA,OAAQpD,eAAe,CAAEyC,QAAQ,EAAE,cAAe,CAAG;AACrD,mBAAoBtB,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,WAAa;AAC7C;AACA,OAAQpB,eAAe,CAAEyC,QAAQ,EAAE,cAAe,CAAG;AACrD;AACA;AACA,KAAK,GACC,EAAE;IAEN,IAAKpB,cAAc,KAAK,MAAM,EAAG;MAChCgC,MAAM,IAAK,GAAGrD,eAAe,CAC5ByC,QAAQ,EACR,6DACD,CAAG;AACN,oBAAqBU,UAAY,KAAI;IACnC,CAAC,MAAM,IAAK9B,cAAc,KAAK,OAAO,EAAG;MACxCgC,MAAM,IAAK,GAAGrD,eAAe,CAC5ByC,QAAQ,EACR,6DACD,CAAG;AACN,qBAAsBW,WAAa,KAAI;IACrC;;IAEA;IACA,IAAKV,KAAK,EAAEK,OAAO,EAAEO,OAAO,EAAG;MAC9B;MACA,MAAMC,aAAa,GAAGzD,WAAW,CAAE4C,KAAM,CAAC;MAC1Ca,aAAa,CAACC,OAAO,CAAIC,IAAI,IAAM;QAClC,IAAKA,IAAI,CAACC,GAAG,KAAK,cAAc,EAAG;UAClC;UACA,MAAMC,iBAAiB,GACtBF,IAAI,CAAChC,KAAK,KAAK,GAAG,GAAG,KAAK,GAAGgC,IAAI,CAAChC,KAAK;UAExC4B,MAAM,IAAK;AAChB,OAAQrD,eAAe,CAAEyC,QAAQ,EAAE,cAAe,CAAG;AACrD,2BAA4BkB,iBAAmB;AAC/C;AACA,MAAM;QACF,CAAC,MAAM,IAAKF,IAAI,CAACC,GAAG,KAAK,aAAa,EAAG;UACxC;UACA,MAAME,gBAAgB,GACrBH,IAAI,CAAChC,KAAK,KAAK,GAAG,GAAG,KAAK,GAAGgC,IAAI,CAAChC,KAAK;UAExC4B,MAAM,IAAK;AAChB,OAAQrD,eAAe,CAAEyC,QAAQ,EAAE,cAAe,CAAG;AACrD,0BAA2BmB,gBAAkB;AAC7C;AACA,MAAM;QACF;MACD,CAAE,CAAC;IACJ;;IAEA;IACA,IAAKhB,kBAAkB,IAAIK,aAAa,EAAG;MAC1CI,MAAM,IAAIpD,cAAc,CACvBwC,QAAQ,EACRI,iBAAiB,EACjB,aAAa,EACbI,aACD,CAAC;IACF;IACA,OAAOI,MAAM;EACd,CAAC;EACDQ,cAAcA,CAAA,EAAG;IAChB,OAAO,UAAU;EAClB,CAAC;EACDC,aAAaA,CAAE9C,MAAM,EAAG;IACvB,MAAM+C,aAAa,GAAG7D,iBAAiB,CAAEc,MAAO,CAAC;IACjD,IAAKA,MAAM,CAACgD,UAAU,KAAKC,SAAS,EAAG;MACtC,IAAK,CAAEjD,MAAM,CAACgD,UAAU,CAACE,QAAQ,CAAE,MAAO,CAAC,EAAG;QAC7ClD,MAAM,CAACgD,UAAU,CAACG,OAAO,CAAE,MAAO,CAAC;MACpC;MACA,OAAOnD,MAAM,CAACgD,UAAU,CAAC3B,GAAG,CAAI+B,SAAS,KAAQ;QAChDxD,IAAI,EAAEwD,SAAS;QACfC,IAAI,EAAEN,aAAa,CAAEK,SAAS;MAC/B,CAAC,CAAG,CAAC;IACN;IACA,MAAM;MAAEhD,WAAW;MAAED;IAAS,CAAC,GAAGH,MAAM;IAExC,MAAMgD,UAAU,GAAG,CAClB;MAAEpD,IAAI,EAAE;IAAO,CAAC,EAChB;MAAEA,IAAI,EAAE;IAAS,CAAC,EAClB;MAAEA,IAAI,EAAE;IAAQ,CAAC,CACjB;IAED,IAAKQ,WAAW,EAAG;MAClB4C,UAAU,CAACG,OAAO,CAAE;QAAEvD,IAAI,EAAE;MAAO,CAAE,CAAC;IACvC;IAEA,IAAKO,QAAQ,EAAG;MACf6C,UAAU,CAACG,OAAO,CAAE;QAAEvD,IAAI,EAAE,MAAM;QAAEyD,IAAI,EAAEN,aAAa,CAACO;MAAK,CAAE,CAAC;IACjE;IAEAN,UAAU,CAACG,OAAO,CAAE;MAAEvD,IAAI,EAAE,MAAM;MAAEyD,IAAI,EAAEN,aAAa,CAACQ;IAAK,CAAE,CAAC;IAEhE,OAAOP,UAAU;EAClB;AACD,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "13.0.4",
+	"version": "13.0.6",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "85486692a3e48b7d863226cf895a21d787434921"
+	"gitHead": "5c1d6bb774e6f78f0bbd4cdc85c4a7087da2f8a0"
 }

package/src/components/block-list/use-block-props/use-block-refs.js

@@ -1,8 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo, useRef } from '@wordpress/element';
-import { useRefEffect, useObservableValue } from '@wordpress/compose';
+import {
+	useContext,
+	useMemo,
+	useRef,
+	useState,
+	useLayoutEffect,
+} from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -67,7 +73,17 @@ function useBlockRef( clientId ) {
  */
 function useBlockElement( clientId ) {
 	const { refsMap } = useContext( BlockRefs );
-	return useObservableValue( refsMap, clientId ) ?? null;
+	const [ blockElement, setBlockElement ] = useState( null );
+	// Delay setting the resulting `blockElement` until an effect. If the block element
+	// changes (i.e., the block is unmounted and re-mounted), this allows enough time
+	// for the ref callbacks to clean up the old element and set the new one.
+	useLayoutEffect( () => {
+		setBlockElement( refsMap.get( clientId ) );
+		return refsMap.subscribe( clientId, () =>
+			setBlockElement( refsMap.get( clientId ) )
+		);
+	}, [ refsMap, clientId ] );
+	return blockElement;
 }
 
 export { useBlockRef as __unstableUseBlockRef };

package/src/components/block-toolbar/shuffle.js

@@ -66,7 +66,8 @@ export default function Shuffle( { clientId, as = Container } ) {
 			);
 		} );
 	}, [ categories, patterns ] );
-	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
 		return null;
 	}
 

package/src/components/global-styles/hooks.js

@@ -85,7 +85,11 @@ const VALID_SETTINGS = [
 ];
 
 export const useGlobalStylesReset = () => {
-	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+	const { user, setUserConfig } = useContext( GlobalStylesContext );
+	const config = {
+		settings: user.settings,
+		styles: user.styles,
+	};
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,

package/src/components/global-styles/test/use-global-styles-output.js

@@ -128,6 +128,7 @@ describe( 'global styles renderer', () => {
 						},
 					},
 					selector: ELEMENTS.link,
+					skipSelectorWrapper: true,
 				},
 				{
 					styles: {
@@ -480,7 +481,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(body){background-color: red;margin: 10px;padding: 10px;}:root :where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):focus{color: orange;}:root :where(h1){font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus{color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(body){background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}:root :where(a:where(:not(.wp-element-button)):hover){color: orange;}:root :where(a:where(:not(.wp-element-button)):focus){color: orange;}h1{font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}:root :where(h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover){color: red;}:root :where(h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus){color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
 

package/src/components/global-styles/use-global-styles-output.js

@@ -37,6 +37,12 @@ import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
 import { setThemeFileUris } from './theme-file-uri-utils';
 
+// Elements that rely on class names in their selectors.
+const ELEMENT_CLASS_NAMES = {
+	button: 'wp-element-button',
+	caption: 'wp-element-caption',
+};
+
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
@@ -636,6 +642,9 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			nodes.push( {
 				styles: tree.styles?.elements?.[ name ],
 				selector,
+				// Top level elements that don't use a class name should not receive the
+				// `:root :where()` wrapper to maintain backwards compatibility.
+				skipSelectorWrapper: ! ELEMENT_CLASS_NAMES[ name ],
 			} );
 		}
 	} );
@@ -656,7 +665,7 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 						}
 						const variationSelector =
 							blockSelectors[ blockName ]
-								.styleVariationSelectors?.[ variationName ];
+								?.styleVariationSelectors?.[ variationName ];
 
 						// Process the variation's inner element styles.
 						// This comes before the inner block styles so the
@@ -685,18 +694,18 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 								const variationBlockSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.selector
+										?.selector
 								);
 								const variationDuotoneSelector = scopeSelector(
 									variationSelector,
 									blockSelectors[ variationBlockName ]
-										.duotoneSelector
+										?.duotoneSelector
 								);
 								const variationFeatureSelectors =
 									scopeFeatureSelectors(
 										variationSelector,
 										blockSelectors[ variationBlockName ]
-											.featureSelectors
+											?.featureSelectors
 									);
 
 								const variationBlockStyleNodes =
@@ -713,10 +722,10 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 									featureSelectors: variationFeatureSelectors,
 									fallbackGapValue:
 										blockSelectors[ variationBlockName ]
-											.fallbackGapValue,
+											?.fallbackGapValue,
 									hasLayoutSupport:
 										blockSelectors[ variationBlockName ]
-											.hasLayoutSupport,
+											?.hasLayoutSupport,
 									styles: variationBlockStyleNodes,
 								} );
 
@@ -924,8 +933,8 @@ export const toStyles = (
 			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
 				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
-				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0;
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
 				`;
 		}
 
@@ -942,6 +951,7 @@ export const toStyles = (
 				hasLayoutSupport,
 				featureSelectors,
 				styleVariationSelectors,
+				skipSelectorWrapper,
 			} ) => {
 				// Process styles for block support features with custom feature level
 				// CSS selectors set.
@@ -1000,7 +1010,10 @@ export const toStyles = (
 					disableRootPadding
 				);
 				if ( styleDeclarations?.length ) {
-					ruleset += `:root :where(${ selector }){${ styleDeclarations.join(
+					const generalSelector = skipSelectorWrapper
+						? selector
+						: `:root :where(${ selector })`;
+					ruleset += `${ generalSelector }{${ styleDeclarations.join(
 						';'
 					) };}`;
 				}
@@ -1094,7 +1107,11 @@ export const toStyles = (
 								.map( ( sel ) => sel + pseudoKey )
 								.join( ',' );
 
-							const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
+							// As pseudo classes such as :hover, :focus etc. have class-level
+							// specificity, they must use the `:root :where()` wrapper. This.
+							// caps the specificity at `0-1-0` to allow proper nesting of variations
+							// and block type element styles.
+							const pseudoRule = `:root :where(${ _selector }){${ pseudoDeclarations.join(
 								';'
 							) };}`;
 

package/src/hooks/block-style-variation.js

@@ -14,6 +14,7 @@ import {
 	getBlockSelectors,
 } from '../components/global-styles';
 import { useStyleOverride } from './utils';
+import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 import { unlock } from '../lock-unlock';
@@ -180,6 +181,77 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 	);
 }
 
+/**
+ * Retrieves any variation styles data and resolves any referenced values.
+ *
+ * @param {Object}    globalStyles A complete global styles object, containing settings and styles.
+ * @param {string}    name         The name of the desired block type.
+ * @param {variation} variation    The of the block style variation to retrieve data for.
+ *
+ * @return {Object|undefined} The global styles data for the specified variation.
+ */
+export function getVariationStylesWithRefValues(
+	globalStyles,
+	name,
+	variation
+) {
+	if ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {
+		return;
+	}
+
+	// Helper to recursively look for `ref` values to resolve.
+	const replaceRefs = ( variationStyles ) => {
+		Object.keys( variationStyles ).forEach( ( key ) => {
+			const value = variationStyles[ key ];
+
+			// Only process objects.
+			if ( typeof value === 'object' && value !== null ) {
+				// Process `ref` value if present.
+				if ( value.ref !== undefined ) {
+					if (
+						typeof value.ref !== 'string' ||
+						value.ref.trim() === ''
+					) {
+						// Remove invalid ref.
+						delete variationStyles[ key ];
+					} else {
+						// Resolve `ref` value.
+						const refValue = getValueFromObjectPath(
+							globalStyles,
+							value.ref
+						);
+
+						if ( refValue ) {
+							variationStyles[ key ] = refValue;
+						} else {
+							delete variationStyles[ key ];
+						}
+					}
+				} else {
+					// Recursively resolve `ref` values in nested objects.
+					replaceRefs( value );
+
+					// After recursion, if value is empty due to explicitly
+					// `undefined` ref value, remove it.
+					if ( Object.keys( value ).length === 0 ) {
+						delete variationStyles[ key ];
+					}
+				}
+			}
+		} );
+	};
+
+	// Deep clone variation node to avoid mutating it within global styles and losing refs.
+	const styles = JSON.parse(
+		JSON.stringify(
+			globalStyles.styles.blocks[ name ].variations[ variation ]
+		)
+	);
+	replaceRefs( styles );
+
+	return styles;
+}
+
 function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
@@ -194,9 +266,14 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	}, [] );
 
 	return useMemo( () => {
-		const styles = mergedConfig?.styles ?? globalStyles;
-		const variationStyles =
-			styles?.blocks?.[ name ]?.variations?.[ variation ];
+		const variationStyles = getVariationStylesWithRefValues(
+			{
+				settings: mergedConfig?.settings ?? globalSettings,
+				styles: mergedConfig?.styles ?? globalStyles,
+			},
+			name,
+			variation
+		);
 
 		return {
 			settings: mergedConfig?.settings ?? globalSettings,

package/src/hooks/test/get-variation-styles-with-ref-values.js

@@ -0,0 +1,91 @@
+/**
+ * Internal dependencies
+ */
+import { getVariationStylesWithRefValues } from '../block-style-variation';
+
+describe( 'getVariationStylesWithRefValues', () => {
+	it( 'should resolve ref values correctly', () => {
+		const globalStyles = {
+			styles: {
+				color: { background: 'red' },
+				blocks: {
+					'core/heading': {
+						color: { text: 'blue' },
+					},
+					'core/group': {
+						variations: {
+							custom: {
+								color: {
+									text: { ref: 'styles.does-not-exist' },
+									background: {
+										ref: 'styles.color.background',
+									},
+								},
+								blocks: {
+									'core/heading': {
+										color: {
+											text: {
+												ref: 'styles.blocks.core/heading.color.text',
+											},
+											background: { ref: '' },
+										},
+									},
+								},
+								elements: {
+									link: {
+										color: {
+											text: {
+												ref: 'styles.elements.link.color.text',
+											},
+											background: { ref: undefined },
+										},
+										':hover': {
+											color: {
+												text: {
+													ref: 'styles.elements.link.:hover.color.text',
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+				elements: {
+					link: {
+						color: { text: 'green' },
+						':hover': {
+							color: { text: 'yellow' },
+						},
+					},
+				},
+			},
+		};
+
+		expect(
+			getVariationStylesWithRefValues(
+				globalStyles,
+				'core/group',
+				'custom'
+			)
+		).toEqual( {
+			color: { background: 'red' },
+			blocks: {
+				'core/heading': {
+					color: { text: 'blue' },
+				},
+			},
+			elements: {
+				link: {
+					color: {
+						text: 'green',
+					},
+					':hover': {
+						color: { text: 'yellow' },
+					},
+				},
+			},
+		} );
+	} );
+} );

package/src/layouts/constrained.js

@@ -217,15 +217,23 @@ export default {
 			const paddingValues = getCSSRules( style );
 			paddingValues.forEach( ( rule ) => {
 				if ( rule.key === 'paddingRight' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingRightValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
+						margin-right: calc(${ paddingRightValue } * -1);
 					}
 					`;
 				} else if ( rule.key === 'paddingLeft' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingLeftValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
+						margin-left: calc(${ paddingLeftValue } * -1);
 					}
 					`;
 				}