@wordpress/block-editor 9.3.0 → 9.6.0

package/build/layouts/flow.js

@@ -15,6 +15,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _icons = require("@wordpress/icons");
 
+var _styleEngine = require("@wordpress/style-engine");
+
 var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 
 var _utils = require("./utils");
@@ -97,27 +99,27 @@ var _default = {
   toolBarControls: function DefaultLayoutToolbarControls() {
     return null;
   },
-  save: function DefaultLayoutStyle(_ref2) {
-    var _style$spacing;
+  getLayoutStyle: function getLayoutStyle(_ref2) {
+    var _style$spacing, _style$spacing2;
 
     let {
       selector,
       layout = {},
       style,
-      blockName
+      blockName,
+      hasBlockGapSupport,
+      layoutDefinitions
     } = _ref2;
     const {
       contentSize,
       wideSize
     } = layout;
-    const blockGapSupport = (0, _useSetting.default)('spacing.blockGap');
-    const hasBlockGapStylesSupport = blockGapSupport !== null;
     const blockGapStyleValue = (0, _gap.getGapBoxControlValueFromStyle)(style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap); // If a block's block.json skips serialization for spacing or
     // spacing.blockGap, don't apply the user-defined value to the styles.
 
-    const blockGapValue = blockGapStyleValue !== null && blockGapStyleValue !== void 0 && blockGapStyleValue.top && !(0, _utils2.shouldSkipSerialization)(blockName, 'spacing', 'blockGap') ? blockGapStyleValue === null || blockGapStyleValue === void 0 ? void 0 : blockGapStyleValue.top : 'var( --wp--style--block-gap )';
+    const blockGapValue = blockGapStyleValue !== null && blockGapStyleValue !== void 0 && blockGapStyleValue.top && !(0, _utils2.shouldSkipSerialization)(blockName, 'spacing', 'blockGap') ? blockGapStyleValue === null || blockGapStyleValue === void 0 ? void 0 : blockGapStyleValue.top : '';
     let output = !!contentSize || !!wideSize ? `
-					${(0, _utils.appendSelectors)(selector, '> :where(:not(.alignleft):not(.alignright))')} {
+					${(0, _utils.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;
@@ -128,38 +130,34 @@ var _default = {
 					${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
 						max-width: none;
 					}
-				` : '';
-    output += `
-			${(0, _utils.appendSelectors)(selector, '> .alignleft')} {
-				float: left;
-				margin-inline-start: 0;
-				margin-inline-end: 2em;
-			}
-			${(0, _utils.appendSelectors)(selector, '> .alignright')} {
-				float: right;
-				margin-inline-start: 2em;
-				margin-inline-end: 0;
-			}
-
-			${(0, _utils.appendSelectors)(selector, '> .aligncenter')} {
-				margin-left: auto !important;
-				margin-right: auto !important;
-			}
-		`;
-
-    if (hasBlockGapStylesSupport) {
-      output += `
-				${(0, _utils.appendSelectors)(selector, '> *')} {
-					margin-block-start: 0;
-					margin-block-end: 0;
-				}
-				${(0, _utils.appendSelectors)(selector, '> * + *')} {
-					margin-block-start: ${blockGapValue};
-				}
-			`;
+				` : ''; // 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 = (0, _styleEngine.getCSSRules)(style);
+      paddingValues.forEach(rule => {
+        if (rule.key === 'paddingRight') {
+          output += `
+					${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
+						margin-right: calc(${rule.value} * -1);
+					}
+					`;
+        } else if (rule.key === 'paddingLeft') {
+          output += `
+					${(0, _utils.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 += (0, _utils.getBlockGapCSS)(selector, layoutDefinitions, 'default', blockGapValue);
     }
 
-    return (0, _element.createElement)("style", null, output);
+    return output;
   },
 
   getOrientation() {

package/build/layouts/flow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/flow.js"],"names":["name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","positionCenter","stretchWide","undefined","inherit","toolBarControls","DefaultLayoutToolbarControls","save","DefaultLayoutStyle","selector","style","blockName","blockGapSupport","hasBlockGapStylesSupport","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 } 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\tsave: function DefaultLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tstyle,\n\t\tblockName,\n\t} ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\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: 'var( --wp--style--block-gap )';\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\toutput += `\n\t\t\t${ appendSelectors( selector, '> .alignleft' ) } {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-inline-start: 0;\n\t\t\t\tmargin-inline-end: 2em;\n\t\t\t}\n\t\t\t${ appendSelectors( selector, '> .alignright' ) } {\n\t\t\t\tfloat: right;\n\t\t\t\tmargin-inline-start: 2em;\n\t\t\t\tmargin-inline-end: 0;\n\t\t\t}\n\n\t\t\t${ appendSelectors( selector, '> .aligncenter' ) } {\n\t\t\t\tmargin-left: auto !important;\n\t\t\t\tmargin-right: auto !important;\n\t\t\t}\n\t\t`;\n\n\t\tif ( hasBlockGapStylesSupport ) {\n\t\t\toutput += `\n\t\t\t\t${ appendSelectors( selector, '> *' ) } {\n\t\t\t\t\tmargin-block-start: 0;\n\t\t\t\t\tmargin-block-end: 0;\n\t\t\t\t}\n\t\t\t\t${ appendSelectors( selector, '> * + *' ) } {\n\t\t\t\t\tmargin-block-start: ${ blockGapValue };\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\treturn <style>{ output }</style>;\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":["name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","positionCenter","stretchWide","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/layouts/utils.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.appendSelectors = appendSelectors;
+exports.getBlockGapCSS = getBlockGapCSS;
 
 /**
  * Utility to generate the proper CSS selector for layout styles.
  *
- * @param {string|string[]} selectors - CSS selectors
- * @param {boolean}         append    - string to append.
+ * @param {string} selectors CSS selector, also supports multiple comma-separated selectors.
+ * @param {string} append    The string to append.
  *
  * @return {string} - CSS selector.
  */
@@ -20,6 +21,37 @@ function appendSelectors(selectors) {
   // it's used to reset the default margin added by wp-admin to paragraphs
   // so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
   // When the post editor is fully iframed, this extra classname could be removed.
-  return selectors.split(',').map(subselector => `.editor-styles-wrapper ${subselector} ${append}`).join(',');
+  return selectors.split(',').map(subselector => `.editor-styles-wrapper ${subselector}${append ? ` ${append}` : ''}`).join(',');
+}
+/**
+ * Get generated blockGap CSS rules based on layout definitions provided in theme.json
+ * Falsy values in the layout definition's spacingStyles rules will be swapped out
+ * with the provided `blockGapValue`.
+ *
+ * @param {string} selector          The CSS selector to target for the generated rules.
+ * @param {Object} layoutDefinitions Layout definitions object from theme.json.
+ * @param {string} layoutType        The layout type (e.g. `default` or `flex`).
+ * @param {string} blockGapValue     The current blockGap value to be applied.
+ * @return {string} The generated CSS rules.
+ */
+
+
+function getBlockGapCSS(selector, layoutDefinitions, layoutType, blockGapValue) {
+  var _layoutDefinitions$la, _layoutDefinitions$la2;
+
+  let output = '';
+
+  if (layoutDefinitions !== null && layoutDefinitions !== void 0 && (_layoutDefinitions$la = layoutDefinitions[layoutType]) !== null && _layoutDefinitions$la !== void 0 && (_layoutDefinitions$la2 = _layoutDefinitions$la.spacingStyles) !== null && _layoutDefinitions$la2 !== void 0 && _layoutDefinitions$la2.length && blockGapValue) {
+    layoutDefinitions[layoutType].spacingStyles.forEach(gapStyle => {
+      output += `${appendSelectors(selector, gapStyle.selector.trim())} { `;
+      output += Object.entries(gapStyle.rules).map(_ref => {
+        let [cssProperty, value] = _ref;
+        return `${cssProperty}: ${value ? value : blockGapValue}`;
+      }).join('; ');
+      output += '; }';
+    });
+  }
+
+  return output;
 }
 //# sourceMappingURL=utils.js.map

package/build/layouts/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/utils.js"],"names":["appendSelectors","selectors","append","split","map","subselector","join"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,CAA0BC,SAA1B,EAAmD;AAAA,MAAdC,MAAc,uEAAL,EAAK;AACzD;AACA;AACA;AACA;AACA;AAEA,SAAOD,SAAS,CACdE,KADK,CACE,GADF,EAELC,GAFK,CAGHC,WAAF,IACE,0BAA0BA,WAAa,IAAIH,MAAQ,EAJhD,EAMLI,IANK,CAMC,GAND,CAAP;AAOA","sourcesContent":["/**\n * Utility to generate the proper CSS selector for layout styles.\n *\n * @param {string|string[]} selectors - CSS selectors\n * @param {boolean}         append    - string to append.\n *\n * @return {string} - CSS selector.\n */\nexport function appendSelectors( selectors, append = '' ) {\n\t// Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here\n\t// The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style\n\t// it's used to reset the default margin added by wp-admin to paragraphs\n\t// so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers\n\t// When the post editor is fully iframed, this extra classname could be removed.\n\n\treturn selectors\n\t\t.split( ',' )\n\t\t.map(\n\t\t\t( subselector ) =>\n\t\t\t\t`.editor-styles-wrapper ${ subselector } ${ append }`\n\t\t)\n\t\t.join( ',' );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/layouts/utils.js"],"names":["appendSelectors","selectors","append","split","map","subselector","join","getBlockGapCSS","selector","layoutDefinitions","layoutType","blockGapValue","output","spacingStyles","length","forEach","gapStyle","trim","Object","entries","rules","cssProperty","value"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,CAA0BC,SAA1B,EAAmD;AAAA,MAAdC,MAAc,uEAAL,EAAK;AACzD;AACA;AACA;AACA;AACA;AAEA,SAAOD,SAAS,CACdE,KADK,CACE,GADF,EAELC,GAFK,CAGHC,WAAF,IACE,0BAA0BA,WAAa,GACvCH,MAAM,GAAI,IAAIA,MAAQ,EAAhB,GAAoB,EAC1B,EANG,EAQLI,IARK,CAQC,GARD,CAAP;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,cAAT,CACNC,QADM,EAENC,iBAFM,EAGNC,UAHM,EAINC,aAJM,EAKL;AAAA;;AACD,MAAIC,MAAM,GAAG,EAAb;;AACA,MACCH,iBAAiB,SAAjB,IAAAA,iBAAiB,WAAjB,6BAAAA,iBAAiB,CAAIC,UAAJ,CAAjB,kGAAmCG,aAAnC,0EAAkDC,MAAlD,IACAH,aAFD,EAGE;AACDF,IAAAA,iBAAiB,CAAEC,UAAF,CAAjB,CAAgCG,aAAhC,CAA8CE,OAA9C,CAAyDC,QAAF,IAAgB;AACtEJ,MAAAA,MAAM,IAAK,GAAGZ,eAAe,CAC5BQ,QAD4B,EAE5BQ,QAAQ,CAACR,QAAT,CAAkBS,IAAlB,EAF4B,CAG1B,KAHH;AAIAL,MAAAA,MAAM,IAAIM,MAAM,CAACC,OAAP,CAAgBH,QAAQ,CAACI,KAAzB,EACRhB,GADQ,CAER;AAAA,YAAE,CAAEiB,WAAF,EAAeC,KAAf,CAAF;AAAA,eACE,GAAGD,WAAa,KAAKC,KAAK,GAAGA,KAAH,GAAWX,aAAe,EADtD;AAAA,OAFQ,EAKRL,IALQ,CAKF,IALE,CAAV;AAMAM,MAAAA,MAAM,IAAI,KAAV;AACA,KAZD;AAaA;;AACD,SAAOA,MAAP;AACA","sourcesContent":["/**\n * Utility to generate the proper CSS selector for layout styles.\n *\n * @param {string} selectors CSS selector, also supports multiple comma-separated selectors.\n * @param {string} append    The string to append.\n *\n * @return {string} - CSS selector.\n */\nexport function appendSelectors( selectors, append = '' ) {\n\t// Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here\n\t// The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style\n\t// it's used to reset the default margin added by wp-admin to paragraphs\n\t// so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers\n\t// When the post editor is fully iframed, this extra classname could be removed.\n\n\treturn selectors\n\t\t.split( ',' )\n\t\t.map(\n\t\t\t( subselector ) =>\n\t\t\t\t`.editor-styles-wrapper ${ subselector }${\n\t\t\t\t\tappend ? ` ${ append }` : ''\n\t\t\t\t}`\n\t\t)\n\t\t.join( ',' );\n}\n\n/**\n * Get generated blockGap CSS rules based on layout definitions provided in theme.json\n * Falsy values in the layout definition's spacingStyles rules will be swapped out\n * with the provided `blockGapValue`.\n *\n * @param {string} selector          The CSS selector to target for the generated rules.\n * @param {Object} layoutDefinitions Layout definitions object from theme.json.\n * @param {string} layoutType        The layout type (e.g. `default` or `flex`).\n * @param {string} blockGapValue     The current blockGap value to be applied.\n * @return {string} The generated CSS rules.\n */\nexport function getBlockGapCSS(\n\tselector,\n\tlayoutDefinitions,\n\tlayoutType,\n\tblockGapValue\n) {\n\tlet output = '';\n\tif (\n\t\tlayoutDefinitions?.[ layoutType ]?.spacingStyles?.length &&\n\t\tblockGapValue\n\t) {\n\t\tlayoutDefinitions[ layoutType ].spacingStyles.forEach( ( gapStyle ) => {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\tgapStyle.selector.trim()\n\t\t\t) } { `;\n\t\t\toutput += Object.entries( gapStyle.rules )\n\t\t\t\t.map(\n\t\t\t\t\t( [ cssProperty, value ] ) =>\n\t\t\t\t\t\t`${ cssProperty }: ${ value ? value : blockGapValue }`\n\t\t\t\t)\n\t\t\t\t.join( '; ' );\n\t\t\toutput += '; }';\n\t\t} );\n\t}\n\treturn output;\n}\n"]}

package/build/store/actions.js

@@ -54,8 +54,6 @@ exports.updateBlockListSettings = updateBlockListSettings;
 exports.updateSettings = updateSettings;
 exports.validateBlocksToTemplate = void 0;
 
-var _lodash = require("lodash");
-
 var _blocks = require("@wordpress/blocks");
 
 var _a11y = require("@wordpress/a11y");
@@ -68,9 +66,7 @@ var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 
 var _utils = require("./utils");
 
-/**
- * External dependencies
- */
+var _selection = require("../utils/selection");
 
 /**
  * WordPress dependencies
@@ -79,13 +75,15 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-
+const castArray = maybeArray => Array.isArray(maybeArray) ? maybeArray : [maybeArray];
 /**
  * Action which will insert a default block insert action if there
  * are no other blocks at the root of the editor. This action should be used
  * in actions which may result in no blocks remaining in the editor (removal,
  * replacement, etc).
  */
+
+
 const ensureDefaultBlock = () => _ref => {
   let {
     select,
@@ -243,7 +241,7 @@ function updateBlockAttributes(clientIds, attributes) {
   let uniqueByBlock = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return {
     type: 'UPDATE_BLOCK_ATTRIBUTES',
-    clientIds: (0, _lodash.castArray)(clientIds),
+    clientIds: castArray(clientIds),
     attributes,
     uniqueByBlock
   };
@@ -484,9 +482,9 @@ const replaceBlocks = function (clientIds, blocks, indexToSelect) {
     } = _ref7;
 
     /* eslint-enable jsdoc/valid-types */
-    clientIds = (0, _lodash.castArray)(clientIds);
-    blocks = getBlocksWithDefaultStylesApplied((0, _lodash.castArray)(blocks), select.getSettings());
-    const rootClientId = select.getBlockRootClientId((0, _lodash.first)(clientIds)); // Replace is valid if the new blocks can be inserted in the root block.
+    clientIds = castArray(clientIds);
+    blocks = getBlocksWithDefaultStylesApplied(castArray(blocks), select.getSettings());
+    const rootClientId = select.getBlockRootClientId(clientIds[0]); // Replace is valid if the new blocks can be inserted in the root block.
 
     for (let index = 0; index < blocks.length; index++) {
       const block = blocks[index];
@@ -548,7 +546,7 @@ const createOnMove = type => (clientIds, rootClientId) => _ref8 => {
 
   dispatch({
     type,
-    clientIds: (0, _lodash.castArray)(clientIds),
+    clientIds: castArray(clientIds),
     rootClientId
   });
 };
@@ -667,7 +665,7 @@ const insertBlocks = function (blocks, index, rootClientId) {
     } = _ref10;
 
     /* eslint-enable jsdoc/valid-types */
-    if ((0, _lodash.isObject)(initialPosition)) {
+    if (initialPosition !== null && typeof initialPosition === 'object') {
       meta = initialPosition;
       initialPosition = 0;
       (0, _deprecated.default)("meta argument in wp.data.dispatch('core/block-editor')", {
@@ -676,7 +674,7 @@ const insertBlocks = function (blocks, index, rootClientId) {
       });
     }
 
-    blocks = getBlocksWithDefaultStylesApplied((0, _lodash.castArray)(blocks), select.getSettings());
+    blocks = getBlocksWithDefaultStylesApplied(castArray(blocks), select.getSettings());
     const allowedBlocks = [];
 
     for (const block of blocks) {
@@ -842,12 +840,9 @@ const __unstableDeleteSelection = isForward => _ref12 => {
   let valueB = (0, _richText.create)({
     html: htmlB,
     ...(0, _utils.mapRichTextSettings)(attributeDefinitionB)
-  }); // A robust way to retain selection position through various transforms
-  // is to insert a special character at the position and then recover it.
-
-  const START_OF_SELECTED_AREA = '\u0086';
+  });
   valueA = (0, _richText.remove)(valueA, selectionA.offset, valueA.text.length);
-  valueB = (0, _richText.insert)(valueB, START_OF_SELECTED_AREA, 0, selectionB.offset); // Clone the blocks so we don't manipulate the original.
+  valueB = (0, _richText.insert)(valueB, _selection.START_OF_SELECTED_AREA, 0, selectionB.offset); // Clone the blocks so we don't manipulate the original.
 
   const cloneA = (0, _blocks.cloneBlock)(blockA, {
     [selectionA.attributeKey]: (0, _richText.toHTMLString)({
@@ -880,13 +875,13 @@ const __unstableDeleteSelection = isForward => _ref12 => {
     updatedAttributes = targetBlockType.merge(cloneA.attributes, blockToMerge.attributes);
   }
 
-  const newAttributeKey = (0, _lodash.findKey)(updatedAttributes, v => typeof v === 'string' && v.indexOf(START_OF_SELECTED_AREA) !== -1);
+  const newAttributeKey = (0, _selection.retrieveSelectedAttribute)(updatedAttributes);
   const convertedHtml = updatedAttributes[newAttributeKey];
   const convertedValue = (0, _richText.create)({
     html: convertedHtml,
     ...(0, _utils.mapRichTextSettings)(targetBlockType.attributes[newAttributeKey])
   });
-  const newOffset = convertedValue.text.indexOf(START_OF_SELECTED_AREA);
+  const newOffset = convertedValue.text.indexOf(_selection.START_OF_SELECTED_AREA);
   const newValue = (0, _richText.remove)(convertedValue, newOffset, newOffset + 1);
   const newHtml = (0, _richText.toHTMLString)({
     value: newValue,
@@ -1057,11 +1052,8 @@ const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref15 => {
     } else {
       window.console.error('The RichText identifier prop does not match any attributes defined by the block.');
     }
-  } // A robust way to retain selection position through various transforms
-  // is to insert a special character at the position and then recover it.
-
+  } // Clone the blocks so we don't insert the character in a "live" block.
 
-  const START_OF_SELECTED_AREA = '\u0086'; // Clone the blocks so we don't insert the character in a "live" block.
 
   const cloneA = (0, _blocks.cloneBlock)(blockA);
   const cloneB = (0, _blocks.cloneBlock)(blockB);
@@ -1072,7 +1064,7 @@ const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref15 => {
     const value = (0, _richText.insert)((0, _richText.create)({
       html,
       ...(0, _utils.mapRichTextSettings)(attributeDefinition)
-    }), START_OF_SELECTED_AREA, offset, offset);
+    }), _selection.START_OF_SELECTED_AREA, offset, offset);
     selectedBlock.attributes[attributeKey] = (0, _richText.toHTMLString)({
       value,
       ...(0, _utils.mapRichTextSettings)(attributeDefinition)
@@ -1091,13 +1083,13 @@ const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref15 => {
   const updatedAttributes = blockAType.merge(cloneA.attributes, blocksWithTheSameType[0].attributes);
 
   if (canRestoreTextSelection) {
-    const newAttributeKey = (0, _lodash.findKey)(updatedAttributes, v => typeof v === 'string' && v.indexOf(START_OF_SELECTED_AREA) !== -1);
+    const newAttributeKey = (0, _selection.retrieveSelectedAttribute)(updatedAttributes);
     const convertedHtml = updatedAttributes[newAttributeKey];
     const convertedValue = (0, _richText.create)({
       html: convertedHtml,
       ...(0, _utils.mapRichTextSettings)(blockAType.attributes[newAttributeKey])
     });
-    const newOffset = convertedValue.text.indexOf(START_OF_SELECTED_AREA);
+    const newOffset = convertedValue.text.indexOf(_selection.START_OF_SELECTED_AREA);
     const newValue = (0, _richText.remove)(convertedValue, newOffset, newOffset + 1);
     const newHtml = (0, _richText.toHTMLString)({
       value: newValue,
@@ -1138,7 +1130,7 @@ const removeBlocks = function (clientIds) {
       return;
     }
 
-    clientIds = (0, _lodash.castArray)(clientIds);
+    clientIds = castArray(clientIds);
     const rootClientId = select.getBlockRootClientId(clientIds[0]);
     const canRemoveBlocks = select.canRemoveBlocks(clientIds, rootClientId);
 
@@ -1539,7 +1531,7 @@ const duplicateBlocks = function (clientIds) {
 
     const blocks = select.getBlocksByClientId(clientIds);
 
-    if ((0, _lodash.some)(blocks, block => !block)) {
+    if (blocks.some(block => !block)) {
       return;
     } // Return early if blocks don't support multiple usage.
 
@@ -1551,12 +1543,13 @@ const duplicateBlocks = function (clientIds) {
     }
 
     const rootClientId = select.getBlockRootClientId(clientIds[0]);
-    const lastSelectedIndex = select.getBlockIndex((0, _lodash.last)((0, _lodash.castArray)(clientIds)));
+    const clientIdsArray = castArray(clientIds);
+    const lastSelectedIndex = select.getBlockIndex(clientIdsArray[clientIdsArray.length - 1]);
     const clonedBlocks = blocks.map(block => (0, _blocks.__experimentalCloneSanitizedBlock)(block));
     dispatch.insertBlocks(clonedBlocks, lastSelectedIndex + 1, rootClientId, updateSelection);
 
     if (clonedBlocks.length > 1 && updateSelection) {
-      dispatch.multiSelect((0, _lodash.first)(clonedBlocks).clientId, (0, _lodash.last)(clonedBlocks).clientId);
+      dispatch.multiSelect(clonedBlocks[0].clientId, clonedBlocks[clonedBlocks.length - 1].clientId);
     }
 
     return clonedBlocks.map(block => block.clientId);