@wordpress/block-editor 9.5.0 → 9.6.0

package/build-module/layouts/flow.js

@@ -6,6 +6,7 @@ import { createElement, Fragment } from "@wordpress/element";
 import { Button, __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
@@ -82,7 +83,7 @@ export default {
     return null;
   },
   getLayoutStyle: function getLayoutStyle(_ref2) {
-    var _style$spacing;
+    var _style$spacing, _style$spacing2;
 
     let {
       selector,
@@ -101,7 +102,7 @@ export default {
 
     const blockGapValue = blockGapStyleValue !== null && blockGapStyleValue !== void 0 && blockGapStyleValue.top && !shouldSkipSerialization(blockName, 'spacing', 'blockGap') ? blockGapStyleValue === null || blockGapStyleValue === void 0 ? void 0 : blockGapStyleValue.top : '';
     let output = !!contentSize || !!wideSize ? `
-					${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright))')} {
+					${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')} {
 						max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
 						margin-left: auto !important;
 						margin-right: auto !important;
@@ -112,7 +113,28 @@ export default {
 					${appendSelectors(selector, '> .alignfull')} {
 						max-width: none;
 					}
-				` : ''; // Output blockGap styles based on rules contained in layout definitions in theme.json.
+				` : ''; // If there is custom padding, add negative margins for alignfull blocks.
+
+    if (style !== null && style !== void 0 && (_style$spacing2 = style.spacing) !== null && _style$spacing2 !== void 0 && _style$spacing2.padding) {
+      // The style object might be storing a preset so we need to make sure we get a usable value.
+      const paddingValues = getCSSRules(style);
+      paddingValues.forEach(rule => {
+        if (rule.key === 'paddingRight') {
+          output += `
+					${appendSelectors(selector, '> .alignfull')} {
+						margin-right: calc(${rule.value} * -1);
+					}
+					`;
+        } else if (rule.key === 'paddingLeft') {
+          output += `
+					${appendSelectors(selector, '> .alignfull')} {
+						margin-left: calc(${rule.value} * -1);
+					}
+					`;
+        }
+      });
+    } // Output blockGap styles based on rules contained in layout definitions in theme.json.
+
 
     if (hasBlockGapSupport && blockGapValue) {
       output += getBlockGapCSS(selector, layoutDefinitions, 'default', blockGapValue);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/flow.js"],"names":["Button","__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__","sprintf","Icon","positionCenter","stretchWide","useSetting","appendSelectors","getBlockGapCSS","getGapBoxControlValueFromStyle","shouldSkipSerialization","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","undefined","inherit","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","output","getOrientation","getAlignments","alignmentInfo","getAlignmentsInfo","alignments","includes","unshift","map","alignment","info","wide","none","sizeRegex","test"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Icon, positionCenter, stretchWide } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport { appendSelectors, getBlockGapCSS } from './utils';\nimport { getGapBoxControlValueFromStyle } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\n\nexport default {\n\tname: 'default',\n\tlabel: __( 'Flow' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t} ) {\n\t\tconst { wideSize, contentSize } = layout;\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t\t'%',\n\t\t\t\t'px',\n\t\t\t\t'em',\n\t\t\t\t'rem',\n\t\t\t\t'vw',\n\t\t\t],\n\t\t} );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className=\"block-editor-hooks__layout-controls\">\n\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Content' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\tcontentSize: nextWidth,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Icon icon={ positionCenter } />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Wide' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\twideSize: nextWidth,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"block-editor-hooks__layout-controls-reset\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tdisabled={ ! contentSize && ! wideSize }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcontentSize: undefined,\n\t\t\t\t\t\t\t\twideSize: undefined,\n\t\t\t\t\t\t\t\tinherit: false,\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t</p>\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,\n\t} ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapStyleValue = getGapBoxControlValueFromStyle(\n\t\t\tstyle?.spacing?.blockGap\n\t\t);\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\tconst blockGapValue =\n\t\t\tblockGapStyleValue?.top &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? blockGapStyleValue?.top\n\t\t\t\t: '';\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))'\n\t\t\t\t\t) } {\n\t\t\t\t\t\tmax-width: ${ contentSize ?? wideSize };\n\t\t\t\t\t\tmargin-left: auto !important;\n\t\t\t\t\t\tmargin-right: auto !important;\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\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'default',\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\n/**\n * Helper method to assign contextual info to clarify\n * alignment settings.\n *\n * Besides checking if `contentSize` and `wideSize` have a\n * value, we now show this information only if their values\n * are not a `css var`. This needs to change when parsing\n * css variables land.\n *\n * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752\n *\n * @param {Object} layout The layout object.\n * @return {Object} An object with contextual info per alignment.\n */\nfunction getAlignmentsInfo( layout ) {\n\tconst { contentSize, wideSize } = layout;\n\tconst alignmentInfo = {};\n\tconst sizeRegex = /^(?!0)\\d+(px|em|rem|vw|vh|%)?$/i;\n\tif ( sizeRegex.test( contentSize ) ) {\n\t\t// translators: %s: container size (i.e. 600px etc)\n\t\talignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );\n\t}\n\tif ( sizeRegex.test( wideSize ) ) {\n\t\t// translators: %s: container size (i.e. 600px etc)\n\t\talignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );\n\t}\n\treturn alignmentInfo;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/layouts/flow.js"],"names":["Button","__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__","sprintf","Icon","positionCenter","stretchWide","getCSSRules","useSetting","appendSelectors","getBlockGapCSS","getGapBoxControlValueFromStyle","shouldSkipSerialization","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","undefined","inherit","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","output","padding","paddingValues","forEach","rule","key","value","getOrientation","getAlignments","alignmentInfo","getAlignmentsInfo","alignments","includes","unshift","map","alignment","info","wide","none","sizeRegex","test"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Icon, positionCenter, stretchWide } from '@wordpress/icons';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport { appendSelectors, getBlockGapCSS } from './utils';\nimport { getGapBoxControlValueFromStyle } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\n\nexport default {\n\tname: 'default',\n\tlabel: __( 'Flow' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t} ) {\n\t\tconst { wideSize, contentSize } = layout;\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t\t'%',\n\t\t\t\t'px',\n\t\t\t\t'em',\n\t\t\t\t'rem',\n\t\t\t\t'vw',\n\t\t\t],\n\t\t} );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className=\"block-editor-hooks__layout-controls\">\n\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Content' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\tcontentSize: nextWidth,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Icon icon={ positionCenter } />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Wide' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\twideSize: nextWidth,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"block-editor-hooks__layout-controls-reset\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tdisabled={ ! contentSize && ! wideSize }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcontentSize: undefined,\n\t\t\t\t\t\t\t\twideSize: undefined,\n\t\t\t\t\t\t\t\tinherit: false,\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\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t{ __(\n\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) }\n\t\t\t\t</p>\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,\n\t} ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapStyleValue = getGapBoxControlValueFromStyle(\n\t\t\tstyle?.spacing?.blockGap\n\t\t);\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\tconst blockGapValue =\n\t\t\tblockGapStyleValue?.top &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? blockGapStyleValue?.top\n\t\t\t\t: '';\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: auto !important;\n\t\t\t\t\t\tmargin-right: auto !important;\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\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'default',\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\n/**\n * Helper method to assign contextual info to clarify\n * alignment settings.\n *\n * Besides checking if `contentSize` and `wideSize` have a\n * value, we now show this information only if their values\n * are not a `css var`. This needs to change when parsing\n * css variables land.\n *\n * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752\n *\n * @param {Object} layout The layout object.\n * @return {Object} An object with contextual info per alignment.\n */\nfunction getAlignmentsInfo( layout ) {\n\tconst { contentSize, wideSize } = layout;\n\tconst alignmentInfo = {};\n\tconst sizeRegex = /^(?!0)\\d+(px|em|rem|vw|vh|%)?$/i;\n\tif ( sizeRegex.test( contentSize ) ) {\n\t\t// translators: %s: container size (i.e. 600px etc)\n\t\talignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );\n\t}\n\tif ( sizeRegex.test( wideSize ) ) {\n\t\t// translators: %s: container size (i.e. 600px etc)\n\t\talignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );\n\t}\n\treturn alignmentInfo;\n}\n"]}

package/build-style/style-rtl.css

@@ -1680,8 +1680,8 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content {
+  width: 228px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {

package/build-style/style.css

@@ -1680,8 +1680,8 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content {
+  width: 228px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.5.0",
+	"version": "9.6.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.13.0",
-		"@wordpress/api-fetch": "^6.10.0",
-		"@wordpress/blob": "^3.13.0",
-		"@wordpress/blocks": "^11.12.0",
-		"@wordpress/components": "^19.15.0",
-		"@wordpress/compose": "^5.11.0",
-		"@wordpress/data": "^6.13.0",
-		"@wordpress/date": "^4.13.0",
-		"@wordpress/deprecated": "^3.13.0",
-		"@wordpress/dom": "^3.13.0",
-		"@wordpress/element": "^4.11.0",
-		"@wordpress/hooks": "^3.13.0",
-		"@wordpress/html-entities": "^3.13.0",
-		"@wordpress/i18n": "^4.13.0",
-		"@wordpress/icons": "^9.4.0",
-		"@wordpress/is-shallow-equal": "^4.13.0",
-		"@wordpress/keyboard-shortcuts": "^3.11.0",
-		"@wordpress/keycodes": "^3.13.0",
-		"@wordpress/notices": "^3.13.0",
-		"@wordpress/rich-text": "^5.11.0",
-		"@wordpress/shortcode": "^3.13.0",
-		"@wordpress/style-engine": "^0.12.0",
-		"@wordpress/token-list": "^2.13.0",
-		"@wordpress/url": "^3.14.0",
-		"@wordpress/warning": "^2.13.0",
-		"@wordpress/wordcount": "^3.13.0",
+		"@wordpress/a11y": "^3.14.0",
+		"@wordpress/api-fetch": "^6.11.0",
+		"@wordpress/blob": "^3.14.0",
+		"@wordpress/blocks": "^11.13.0",
+		"@wordpress/components": "^19.16.0",
+		"@wordpress/compose": "^5.12.0",
+		"@wordpress/data": "^6.14.0",
+		"@wordpress/date": "^4.14.0",
+		"@wordpress/deprecated": "^3.14.0",
+		"@wordpress/dom": "^3.14.0",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/hooks": "^3.14.0",
+		"@wordpress/html-entities": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
+		"@wordpress/icons": "^9.5.0",
+		"@wordpress/is-shallow-equal": "^4.14.0",
+		"@wordpress/keyboard-shortcuts": "^3.12.0",
+		"@wordpress/keycodes": "^3.14.0",
+		"@wordpress/notices": "^3.14.0",
+		"@wordpress/rich-text": "^5.12.0",
+		"@wordpress/shortcode": "^3.14.0",
+		"@wordpress/style-engine": "^0.13.0",
+		"@wordpress/token-list": "^2.14.0",
+		"@wordpress/url": "^3.15.0",
+		"@wordpress/warning": "^2.14.0",
+		"@wordpress/wordcount": "^3.14.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
 }

package/src/components/block-lock/modal.js

@@ -88,6 +88,11 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
+			<p>
+				{ __(
+					'Choose specific attributes to restrict or lock all available options.'
+				) }
+			</p>
 			<form
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -100,11 +105,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					onClose();
 				} }
 			>
-				<p>
-					{ __(
-						'Choose specific attributes to restrict or lock all available options.'
-					) }
-				</p>
 				<div
 					role="group"
 					aria-labelledby={ instanceId }

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Platform, findNodeHandle } from 'react-native';
-import { partial, first, castArray, last, compact, every } from 'lodash';
+import { partial, first, castArray, last, every } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -202,7 +202,7 @@ const BlockActionsMenu = ( {
 		},
 	};
 
-	const options = compact( [
+	const options = [
 		wrapBlockMover && allOptions.backwardButton,
 		wrapBlockMover && allOptions.forwardButton,
 		wrapBlockSettings && allOptions.settings,
@@ -215,7 +215,7 @@ const BlockActionsMenu = ( {
 		canDuplicate && allOptions.duplicateButton,
 		isReusableBlockType && allOptions.convertToRegularBlocks,
 		! isLocked && allOptions.delete,
-	] );
+	].filter( Boolean );
 
 	// End early if there are no options to show.
 	if ( ! options.length ) {

package/src/components/block-mover/mover-description.js

@@ -1,7 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+
+const getMovementDirection = ( moveDirection, orientation ) => {
+	if ( moveDirection === 'up' ) {
+		if ( orientation === 'horizontal' ) {
+			return isRTL() ? 'right' : 'left';
+		}
+		return 'up';
+	} else if ( moveDirection === 'down' ) {
+		if ( orientation === 'horizontal' ) {
+			return isRTL() ? 'left' : 'right';
+		}
+		return 'down';
+	}
+	return null;
+};
 
 /**
  * Return a label for the block movement controls depending on block position.
@@ -30,28 +45,14 @@ export function getBlockMoverDescription(
 ) {
 	const position = firstIndex + 1;
 
-	const getMovementDirection = ( moveDirection ) => {
-		if ( moveDirection === 'up' ) {
-			if ( orientation === 'horizontal' ) {
-				return isRTL() ? 'right' : 'left';
-			}
-			return 'up';
-		} else if ( moveDirection === 'down' ) {
-			if ( orientation === 'horizontal' ) {
-				return isRTL() ? 'left' : 'right';
-			}
-			return 'down';
-		}
-		return null;
-	};
-
 	if ( selectedCount > 1 ) {
 		return getMultiBlockMoverDescription(
 			selectedCount,
 			firstIndex,
 			isFirst,
 			isLast,
-			dir
+			dir,
+			orientation
 		);
 	}
 
@@ -65,7 +66,7 @@ export function getBlockMoverDescription(
 
 	if ( dir > 0 && ! isLast ) {
 		// Moving down.
-		const movementDirection = getMovementDirection( 'down' );
+		const movementDirection = getMovementDirection( 'down', orientation );
 
 		if ( movementDirection === 'down' ) {
 			return sprintf(
@@ -106,7 +107,7 @@ export function getBlockMoverDescription(
 
 	if ( dir > 0 && isLast ) {
 		// Moving down, and is the last item.
-		const movementDirection = getMovementDirection( 'down' );
+		const movementDirection = getMovementDirection( 'down', orientation );
 
 		if ( movementDirection === 'down' ) {
 			return sprintf(
@@ -141,7 +142,7 @@ export function getBlockMoverDescription(
 
 	if ( dir < 0 && ! isFirst ) {
 		// Moving up.
-		const movementDirection = getMovementDirection( 'up' );
+		const movementDirection = getMovementDirection( 'up', orientation );
 
 		if ( movementDirection === 'up' ) {
 			return sprintf(
@@ -180,7 +181,7 @@ export function getBlockMoverDescription(
 
 	if ( dir < 0 && isFirst ) {
 		// Moving up, and is the first item.
-		const movementDirection = getMovementDirection( 'up' );
+		const movementDirection = getMovementDirection( 'up', orientation );
 
 		if ( movementDirection === 'up' ) {
 			return sprintf(
@@ -223,6 +224,8 @@ export function getBlockMoverDescription(
  * @param {boolean} isLast        This is the last block.
  * @param {number}  dir           Direction of movement (> 0 is considered to be going
  *                                down, < 0 is up).
+ * @param {string}  orientation   The orientation of the block movers, vertical or
+ *                                horizontal.
  *
  * @return {string} Label for the block movement controls.
  */
@@ -231,43 +234,123 @@ export function getMultiBlockMoverDescription(
 	firstIndex,
 	isFirst,
 	isLast,
-	dir
+	dir,
+	orientation
 ) {
 	const position = firstIndex + 1;
 
-	if ( dir < 0 && isFirst ) {
-		return __( 'Blocks cannot be moved up as they are already at the top' );
+	if ( isFirst && isLast ) {
+		// All blocks are selected
+		return __( 'All blocks are selected, and cannot be moved' );
+	}
+
+	if ( dir > 0 && ! isLast ) {
+		// moving down
+		const movementDirection = getMovementDirection( 'down', orientation );
+
+		if ( movementDirection === 'down' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d down by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d left by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d right by one place' ),
+				selectedCount,
+				position
+			);
+		}
 	}
 
 	if ( dir > 0 && isLast ) {
-		return __(
-			'Blocks cannot be moved down as they are already at the bottom'
-		);
+		// moving down, and the selected blocks are the last item
+		const movementDirection = getMovementDirection( 'down', orientation );
+
+		if ( movementDirection === 'down' ) {
+			return __(
+				'Blocks cannot be moved down as they are already at the bottom'
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return __(
+				'Blocks cannot be moved left as they are already are at the leftmost position'
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return __(
+				'Blocks cannot be moved right as they are already are at the rightmost position'
+			);
+		}
 	}
 
 	if ( dir < 0 && ! isFirst ) {
-		return sprintf(
-			// translators: 1: Number of selected blocks, 2: Position of selected blocks
-			_n(
-				'Move %1$d block from position %2$d up by one place',
-				'Move %1$d blocks from position %2$d up by one place',
-				selectedCount
-			),
-			selectedCount,
-			position
-		);
+		// moving up
+		const movementDirection = getMovementDirection( 'up', orientation );
+
+		if ( movementDirection === 'up' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d up by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d left by one place' ),
+				selectedCount,
+				position
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return sprintf(
+				// translators: 1: Number of selected blocks, 2: Position of selected blocks
+				__( 'Move %1$d blocks from position %2$d right by one place' ),
+				selectedCount,
+				position
+			);
+		}
 	}
 
-	if ( dir > 0 && ! isLast ) {
-		return sprintf(
-			// translators: 1: Number of selected blocks, 2: Position of selected blocks
-			_n(
-				'Move %1$d block from position %2$d down by one place',
-				'Move %1$d blocks from position %2$d down by one place',
-				selectedCount
-			),
-			selectedCount,
-			position
-		);
+	if ( dir < 0 && isFirst ) {
+		// moving up, and the selected blocks are the first item
+		const movementDirection = getMovementDirection( 'up', orientation );
+
+		if ( movementDirection === 'up' ) {
+			return __(
+				'Blocks cannot be moved up as they are already at the top'
+			);
+		}
+
+		if ( movementDirection === 'left' ) {
+			return __(
+				'Blocks cannot be moved left as they are already are at the leftmost position'
+			);
+		}
+
+		if ( movementDirection === 'right' ) {
+			return __(
+				'Blocks cannot be moved right as they are already are at the rightmost position'
+			);
+		}
 	}
 }

package/src/components/block-mover/test/mover-description.js

@@ -183,9 +183,7 @@ describe( 'block mover', () => {
 					true,
 					negativeDirection
 				)
-			).toBe(
-				'Blocks cannot be moved up as they are already at the top'
-			);
+			).toBe( 'All blocks are selected, and cannot be moved' );
 		} );
 
 		it( 'generates a title for a selection of blocks at the bottom', () => {
@@ -201,5 +199,59 @@ describe( 'block mover', () => {
 				'Blocks cannot be moved down as they are already at the bottom'
 			);
 		} );
+
+		it( 'indicates that blocks can be moved left when the orientation is horizontal and the direction is negative', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					1,
+					false,
+					true,
+					negativeDirection,
+					'horizontal'
+				)
+			).toBe( 'Move 4 blocks from position 2 left by one place' );
+		} );
+
+		it( 'indicates that blocks can be moved right when the orientation is horizontal and the direction is positive', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					0,
+					true,
+					false,
+					positiveDirection,
+					'horizontal'
+				)
+			).toBe( 'Move 4 blocks from position 1 right by one place' );
+		} );
+
+		it( 'indicates that blocks cannot be moved left when the orientation is horizontal and a selection of blocks at the left', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					1,
+					true,
+					true,
+					negativeDirection,
+					'horizontal'
+				)
+			).toBe( 'All blocks are selected, and cannot be moved' );
+		} );
+
+		it( 'indicates that blocks cannot be moved right when the orientation is horizontal and the block is the last block', () => {
+			expect(
+				getMultiBlockMoverDescription(
+					4,
+					2,
+					false,
+					true,
+					positiveDirection,
+					'horizontal'
+				)
+			).toBe(
+				'Blocks cannot be moved right as they are already are at the rightmost position'
+			);
+		} );
 	} );
 } );

package/src/components/block-settings-menu-controls/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { compact, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: map(
-					compact( getBlocksByClientId( ids ) ),
+					getBlocksByClientId( ids ).filter( Boolean ),
 					( block ) => block.name
 				),
 				selectedClientIds: ids,

package/src/components/block-styles/preview.native.js

@@ -8,8 +8,8 @@ import {
 	Dimensions,
 	Animated,
 	Easing,
+	Image,
 } from 'react-native';
-import FastImage from 'react-native-fast-image';
 
 /**
  * WordPress dependencies
@@ -91,7 +91,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 				<View style={ styles.imageWrapper }>
 					{ isActive &&
 						getOutline( [ styles.outline, innerOutlineStyle ] ) }
-					<FastImage
+					<Image
 						style={ [ styles.image, styles[ name ] ] }
 						source={ { uri: url } }
 					/>

package/src/components/block-tools/block-selection-button.js

@@ -102,7 +102,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
-		isNavigationMode,
 	} = useSelect( blockEditorStore );
 	const {
 		selectBlock,
@@ -160,10 +159,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				selectedBlockClientId;
 		}
 		const startingBlockClientId = hasBlockMovingClientId();
-		if ( isEscape && isNavigationMode() ) {
-			clearSelectedBlock();
-			event.preventDefault();
-		}
 		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
 			setBlockMovingClientId( null );
 			event.preventDefault();