@wordpress/block-editor 8.3.0 → 8.5.0

package/build-module/layouts/flex.js

@@ -11,8 +11,10 @@ import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
  */
 
 import { appendSelectors } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
 import useSetting from '../components/use-setting';
-import { BlockControls, JustifyContentControl } from '../components'; // Used with the default, horizontal flex orientation.
+import { BlockControls, JustifyContentControl, BlockVerticalAlignmentControl } from '../components';
+import { shouldSkipSerialization } from '../hooks/utils'; // Used with the default, horizontal flex orientation.
 
 const justifyContentMap = {
   left: 'flex-start',
@@ -26,6 +28,11 @@ const alignItemsMap = {
   right: 'flex-end',
   center: 'center'
 };
+const verticalAlignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
 const flexWrapOptions = ['wrap', 'nowrap'];
 export default {
   name: 'flex',
@@ -33,11 +40,12 @@ export default {
   inspectorControls: function FlexLayoutInspectorControls(_ref) {
     let {
       layout = {},
-      onChange
+      onChange,
+      layoutBlockSupport = {}
     } = _ref;
     const {
       allowOrientation = true
-    } = layout;
+    } = layoutBlockSupport;
     return createElement(Fragment, null, createElement(Flex, null, createElement(FlexItem, null, createElement(FlexLayoutJustifyContentControl, {
       layout: layout,
       onChange: onChange
@@ -60,6 +68,9 @@ export default {
       return null;
     }
 
+    const {
+      allowVerticalAlignment = true
+    } = layoutBlockSupport;
     return createElement(BlockControls, {
       group: "block",
       __experimentalShareWithChildBlocks: true
@@ -67,27 +78,35 @@ export default {
       layout: layout,
       onChange: onChange,
       isToolbar: true
+    }), allowVerticalAlignment && (layout === null || layout === void 0 ? void 0 : layout.orientation) !== 'vertical' && createElement(FlexLayoutVerticalAlignmentControl, {
+      layout: layout,
+      onChange: onChange,
+      isToolbar: true
     }));
   },
   save: function FlexLayoutStyle(_ref3) {
-    var _style$spacing$blockG, _style$spacing;
+    var _style$spacing, _style$spacing2;
 
     let {
       selector,
       layout,
-      style
+      style,
+      blockName
     } = _ref3;
     const {
       orientation = 'horizontal'
     } = layout;
     const blockGapSupport = useSetting('spacing.blockGap');
-    const hasBlockGapStylesSupport = blockGapSupport !== null;
-    const blockGapValue = (_style$spacing$blockG = style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap) !== null && _style$spacing$blockG !== void 0 ? _style$spacing$blockG : 'var( --wp--style--block-gap, 0.5em )';
+    const hasBlockGapStylesSupport = blockGapSupport !== null; // 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 = style !== null && style !== void 0 && (_style$spacing = style.spacing) !== null && _style$spacing !== void 0 && _style$spacing.blockGap && !shouldSkipSerialization(blockName, 'spacing', 'blockGap') ? getGapCSSValue(style === null || style === void 0 ? void 0 : (_style$spacing2 = style.spacing) === null || _style$spacing2 === void 0 ? void 0 : _style$spacing2.blockGap, '0.5em') : 'var( --wp--style--block-gap, 0.5em )';
     const justifyContent = justifyContentMap[layout.justifyContent] || justifyContentMap.left;
     const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
+    const verticalAlignment = verticalAlignmentMap[layout.verticalAlignment] || verticalAlignmentMap.center;
     const rowOrientation = `
 		flex-direction: row;
-		align-items: center;
+		align-items: ${verticalAlignment};
 		justify-content: ${justifyContent};
 		`;
     const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
@@ -98,8 +117,8 @@ export default {
     return createElement("style", null, `
 				${appendSelectors(selector)} {
 					display: flex;
-					gap: ${hasBlockGapStylesSupport ? blockGapValue : '0.5em'};
 					flex-wrap: ${flexWrap};
+					gap: ${hasBlockGapStylesSupport ? blockGapValue : '0.5em'};
 					${orientation === 'horizontal' ? rowOrientation : columnOrientation}
 				}
 
@@ -122,12 +141,58 @@ export default {
 
 };
 
-function FlexLayoutJustifyContentControl(_ref4) {
+function FlexLayoutVerticalAlignmentControl(_ref4) {
   let {
     layout,
     onChange,
     isToolbar = false
   } = _ref4;
+  const {
+    verticalAlignment = verticalAlignmentMap.center
+  } = layout;
+
+  const onVerticalAlignmentChange = value => {
+    onChange({ ...layout,
+      verticalAlignment: value
+    });
+  };
+
+  if (isToolbar) {
+    return createElement(BlockVerticalAlignmentControl, {
+      onChange: onVerticalAlignmentChange,
+      value: verticalAlignment
+    });
+  }
+
+  const verticalAlignmentOptions = [{
+    value: 'flex-start',
+    label: __('Align items top')
+  }, {
+    value: 'center',
+    label: __('Align items center')
+  }, {
+    value: 'flex-end',
+    label: __('Align items bottom')
+  }];
+  return createElement("fieldset", {
+    className: "block-editor-hooks__flex-layout-vertical-alignment-control"
+  }, createElement("legend", null, __('Vertical alignment')), createElement("div", null, verticalAlignmentOptions.map((value, icon, label) => {
+    return createElement(Button, {
+      key: value,
+      label: label,
+      icon: icon,
+      isPressed: verticalAlignment === value,
+      onClick: () => onVerticalAlignmentChange(value)
+    });
+  })));
+}
+
+function FlexLayoutJustifyContentControl(_ref5) {
+  let {
+    layout,
+    onChange,
+    isToolbar = false
+  } = _ref5;
   const {
     justifyContent = 'left',
     orientation = 'horizontal'
@@ -181,12 +246,12 @@ function FlexLayoutJustifyContentControl(_ref4) {
 
   return createElement("fieldset", {
     className: "block-editor-hooks__flex-layout-justification-controls"
-  }, createElement("legend", null, __('Justification')), createElement("div", null, justificationOptions.map(_ref5 => {
+  }, createElement("legend", null, __('Justification')), createElement("div", null, justificationOptions.map(_ref6 => {
     let {
       value,
       icon,
       label
-    } = _ref5;
+    } = _ref6;
     return createElement(Button, {
       key: value,
       label: label,
@@ -197,11 +262,11 @@ function FlexLayoutJustifyContentControl(_ref4) {
   })));
 }
 
-function FlexWrapControl(_ref6) {
+function FlexWrapControl(_ref7) {
   let {
     layout,
     onChange
-  } = _ref6;
+  } = _ref7;
   const {
     flexWrap = 'wrap'
   } = layout;
@@ -216,11 +281,11 @@ function FlexWrapControl(_ref6) {
   });
 }
 
-function OrientationControl(_ref7) {
+function OrientationControl(_ref8) {
   let {
     layout,
     onChange
-  } = _ref7;
+  } = _ref8;
   const {
     orientation = 'horizontal'
   } = layout;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/flex.js"],"names":["__","justifyLeft","justifyCenter","justifyRight","justifySpaceBetween","arrowRight","arrowDown","Button","ToggleControl","Flex","FlexItem","appendSelectors","useSetting","BlockControls","JustifyContentControl","justifyContentMap","left","right","center","alignItemsMap","flexWrapOptions","name","label","inspectorControls","FlexLayoutInspectorControls","layout","onChange","allowOrientation","toolBarControls","FlexLayoutToolbarControls","layoutBlockSupport","allowSwitching","save","FlexLayoutStyle","selector","style","orientation","blockGapSupport","hasBlockGapStylesSupport","blockGapValue","spacing","blockGap","justifyContent","flexWrap","includes","rowOrientation","alignItems","columnOrientation","getOrientation","getAlignments","FlexLayoutJustifyContentControl","isToolbar","onJustificationChange","value","allowedControls","push","position","isAlternate","justificationOptions","icon","map","FlexWrapControl","OrientationControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n\tjustifySpaceBetween,\n\tarrowRight,\n\tarrowDown,\n} from '@wordpress/icons';\nimport { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors } from './utils';\nimport useSetting from '../components/use-setting';\nimport { BlockControls, JustifyContentControl } from '../components';\n\n// Used with the default, horizontal flex orientation.\nconst justifyContentMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\t'space-between': 'space-between',\n};\n\n// Used with the vertical (column) flex orientation.\nconst alignItemsMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n};\n\nconst flexWrapOptions = [ 'wrap', 'nowrap' ];\n\nexport default {\n\tname: 'flex',\n\tlabel: __( 'Flex' ),\n\tinspectorControls: function FlexLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t} ) {\n\t\tconst { allowOrientation = true } = layout;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t{ allowOrientation && (\n\t\t\t\t\t\t\t<OrientationControl\n\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t\t<FlexWrapControl layout={ layout } onChange={ onChange } />\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function FlexLayoutToolbarControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport,\n\t} ) {\n\t\tif ( layoutBlockSupport?.allowSwitching ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\tlayout={ layout }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisToolbar\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t);\n\t},\n\tsave: function FlexLayoutStyle( { selector, layout, style } ) {\n\t\tconst { orientation = 'horizontal' } = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';\n\t\tconst justifyContent =\n\t\t\tjustifyContentMap[ layout.justifyContent ] ||\n\t\t\tjustifyContentMap.left;\n\t\tconst flexWrap = flexWrapOptions.includes( layout.flexWrap )\n\t\t\t? layout.flexWrap\n\t\t\t: 'wrap';\n\t\tconst rowOrientation = `\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: ${ justifyContent };\n\t\t`;\n\t\tconst alignItems =\n\t\t\talignItemsMap[ layout.justifyContent ] || alignItemsMap.left;\n\t\tconst columnOrientation = `\n\t\tflex-direction: column;\n\t\talign-items: ${ alignItems };\n\t\t`;\n\n\t\treturn (\n\t\t\t<style>{ `\n\t\t\t\t${ appendSelectors( selector ) } {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tgap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };\n\t\t\t\t\tflex-wrap: ${ flexWrap };\n\t\t\t\t\t${ orientation === 'horizontal' ? rowOrientation : columnOrientation }\n\t\t\t\t}\n\n\t\t\t\t${ appendSelectors( selector, '> *' ) } {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t` }</style>\n\t\t);\n\t},\n\tgetOrientation( layout ) {\n\t\tconst { orientation = 'horizontal' } = layout;\n\t\treturn orientation;\n\t},\n\tgetAlignments() {\n\t\treturn [];\n\t},\n};\n\nfunction FlexLayoutJustifyContentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { justifyContent = 'left', orientation = 'horizontal' } = layout;\n\tconst onJustificationChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tjustifyContent: value,\n\t\t} );\n\t};\n\tconst allowedControls = [ 'left', 'center', 'right' ];\n\tif ( orientation === 'horizontal' ) {\n\t\tallowedControls.push( 'space-between' );\n\t}\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<JustifyContentControl\n\t\t\t\tallowedControls={ allowedControls }\n\t\t\t\tvalue={ justifyContent }\n\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tposition: 'bottom right',\n\t\t\t\t\tisAlternate: true,\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst justificationOptions = [\n\t\t{\n\t\t\tvalue: 'left',\n\t\t\ticon: justifyLeft,\n\t\t\tlabel: __( 'Justify items left' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'center',\n\t\t\ticon: justifyCenter,\n\t\t\tlabel: __( 'Justify items center' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'right',\n\t\t\ticon: justifyRight,\n\t\t\tlabel: __( 'Justify items right' ),\n\t\t},\n\t];\n\tif ( orientation === 'horizontal' ) {\n\t\tjustificationOptions.push( {\n\t\t\tvalue: 'space-between',\n\t\t\ticon: justifySpaceBetween,\n\t\t\tlabel: __( 'Space between items' ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__flex-layout-justification-controls\">\n\t\t\t<legend>{ __( 'Justification' ) }</legend>\n\t\t\t<div>\n\t\t\t\t{ justificationOptions.map( ( { value, icon, label } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tisPressed={ justifyContent === value }\n\t\t\t\t\t\t\tonClick={ () => onJustificationChange( value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n\nfunction FlexWrapControl( { layout, onChange } ) {\n\tconst { flexWrap = 'wrap' } = layout;\n\treturn (\n\t\t<ToggleControl\n\t\t\tlabel={ __( 'Allow to wrap to multiple lines' ) }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tflexWrap: value ? 'wrap' : 'nowrap',\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tchecked={ flexWrap === 'wrap' }\n\t\t/>\n\t);\n}\n\nfunction OrientationControl( { layout, onChange } ) {\n\tconst { orientation = 'horizontal' } = layout;\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__flex-layout-orientation-controls\">\n\t\t\t<legend>{ __( 'Orientation' ) }</legend>\n\t\t\t<Button\n\t\t\t\tlabel={ 'horizontal' }\n\t\t\t\ticon={ arrowRight }\n\t\t\t\tisPressed={ orientation === 'horizontal' }\n\t\t\t\tonClick={ () =>\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...layout,\n\t\t\t\t\t\torientation: 'horizontal',\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tlabel={ 'vertical' }\n\t\t\t\ticon={ arrowDown }\n\t\t\t\tisPressed={ orientation === 'vertical' }\n\t\t\t\tonClick={ () =>\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...layout,\n\t\t\t\t\t\torientation: 'vertical',\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/layouts/flex.js"],"names":["__","justifyLeft","justifyCenter","justifyRight","justifySpaceBetween","arrowRight","arrowDown","Button","ToggleControl","Flex","FlexItem","appendSelectors","getGapCSSValue","useSetting","BlockControls","JustifyContentControl","BlockVerticalAlignmentControl","shouldSkipSerialization","justifyContentMap","left","right","center","alignItemsMap","verticalAlignmentMap","top","bottom","flexWrapOptions","name","label","inspectorControls","FlexLayoutInspectorControls","layout","onChange","layoutBlockSupport","allowOrientation","toolBarControls","FlexLayoutToolbarControls","allowSwitching","allowVerticalAlignment","orientation","save","FlexLayoutStyle","selector","style","blockName","blockGapSupport","hasBlockGapStylesSupport","blockGapValue","spacing","blockGap","justifyContent","flexWrap","includes","verticalAlignment","rowOrientation","alignItems","columnOrientation","getOrientation","getAlignments","FlexLayoutVerticalAlignmentControl","isToolbar","onVerticalAlignmentChange","value","verticalAlignmentOptions","map","icon","FlexLayoutJustifyContentControl","onJustificationChange","allowedControls","push","position","isAlternate","justificationOptions","FlexWrapControl","OrientationControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n\tjustifySpaceBetween,\n\tarrowRight,\n\tarrowDown,\n} from '@wordpress/icons';\nimport { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport useSetting from '../components/use-setting';\nimport {\n\tBlockControls,\n\tJustifyContentControl,\n\tBlockVerticalAlignmentControl,\n} from '../components';\nimport { shouldSkipSerialization } from '../hooks/utils';\n\n// Used with the default, horizontal flex orientation.\nconst justifyContentMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\t'space-between': 'space-between',\n};\n\n// Used with the vertical (column) flex orientation.\nconst alignItemsMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n};\n\nconst verticalAlignmentMap = {\n\ttop: 'flex-start',\n\tcenter: 'center',\n\tbottom: 'flex-end',\n};\n\nconst flexWrapOptions = [ 'wrap', 'nowrap' ];\n\nexport default {\n\tname: 'flex',\n\tlabel: __( 'Flex' ),\n\tinspectorControls: function FlexLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport = {},\n\t} ) {\n\t\tconst { allowOrientation = true } = layoutBlockSupport;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Flex>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t{ allowOrientation && (\n\t\t\t\t\t\t\t<OrientationControl\n\t\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t\t<FlexWrapControl layout={ layout } onChange={ onChange } />\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function FlexLayoutToolbarControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t\tlayoutBlockSupport,\n\t} ) {\n\t\tif ( layoutBlockSupport?.allowSwitching ) {\n\t\t\treturn null;\n\t\t}\n\t\tconst { allowVerticalAlignment = true } = layoutBlockSupport;\n\t\treturn (\n\t\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\t\tlayout={ layout }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisToolbar\n\t\t\t\t/>\n\t\t\t\t{ allowVerticalAlignment &&\n\t\t\t\t\tlayout?.orientation !== 'vertical' && (\n\t\t\t\t\t\t<FlexLayoutVerticalAlignmentControl\n\t\t\t\t\t\t\tlayout={ layout }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tisToolbar\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t</BlockControls>\n\t\t);\n\t},\n\tsave: function FlexLayoutStyle( { selector, layout, style, blockName } ) {\n\t\tconst { orientation = 'horizontal' } = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\n\t\t// If a block's block.json skips serialization for spacing or spacing.blockGap,\n\t\t// don't apply the user-defined value to the styles.\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap &&\n\t\t\t! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )\n\t\t\t\t? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )\n\t\t\t\t: 'var( --wp--style--block-gap, 0.5em )';\n\t\tconst justifyContent =\n\t\t\tjustifyContentMap[ layout.justifyContent ] ||\n\t\t\tjustifyContentMap.left;\n\t\tconst flexWrap = flexWrapOptions.includes( layout.flexWrap )\n\t\t\t? layout.flexWrap\n\t\t\t: 'wrap';\n\t\tconst verticalAlignment =\n\t\t\tverticalAlignmentMap[ layout.verticalAlignment ] ||\n\t\t\tverticalAlignmentMap.center;\n\t\tconst rowOrientation = `\n\t\tflex-direction: row;\n\t\talign-items: ${ verticalAlignment };\n\t\tjustify-content: ${ justifyContent };\n\t\t`;\n\t\tconst alignItems =\n\t\t\talignItemsMap[ layout.justifyContent ] || alignItemsMap.left;\n\t\tconst columnOrientation = `\n\t\tflex-direction: column;\n\t\talign-items: ${ alignItems };\n\t\t`;\n\n\t\treturn (\n\t\t\t<style>{ `\n\t\t\t\t${ appendSelectors( selector ) } {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-wrap: ${ flexWrap };\n\t\t\t\t\tgap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };\n\t\t\t\t\t${ orientation === 'horizontal' ? rowOrientation : columnOrientation }\n\t\t\t\t}\n\n\t\t\t\t${ appendSelectors( selector, '> *' ) } {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t` }</style>\n\t\t);\n\t},\n\tgetOrientation( layout ) {\n\t\tconst { orientation = 'horizontal' } = layout;\n\t\treturn orientation;\n\t},\n\tgetAlignments() {\n\t\treturn [];\n\t},\n};\n\nfunction FlexLayoutVerticalAlignmentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { verticalAlignment = verticalAlignmentMap.center } = layout;\n\n\tconst onVerticalAlignmentChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tverticalAlignment: value,\n\t\t} );\n\t};\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<BlockVerticalAlignmentControl\n\t\t\t\tonChange={ onVerticalAlignmentChange }\n\t\t\t\tvalue={ verticalAlignment }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst verticalAlignmentOptions = [\n\t\t{\n\t\t\tvalue: 'flex-start',\n\t\t\tlabel: __( 'Align items top' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'center',\n\t\t\tlabel: __( 'Align items center' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'flex-end',\n\t\t\tlabel: __( 'Align items bottom' ),\n\t\t},\n\t];\n\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__flex-layout-vertical-alignment-control\">\n\t\t\t<legend>{ __( 'Vertical alignment' ) }</legend>\n\t\t\t<div>\n\t\t\t\t{ verticalAlignmentOptions.map( ( value, icon, label ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tisPressed={ verticalAlignment === value }\n\t\t\t\t\t\t\tonClick={ () => onVerticalAlignmentChange( value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n\nfunction FlexLayoutJustifyContentControl( {\n\tlayout,\n\tonChange,\n\tisToolbar = false,\n} ) {\n\tconst { justifyContent = 'left', orientation = 'horizontal' } = layout;\n\tconst onJustificationChange = ( value ) => {\n\t\tonChange( {\n\t\t\t...layout,\n\t\t\tjustifyContent: value,\n\t\t} );\n\t};\n\tconst allowedControls = [ 'left', 'center', 'right' ];\n\tif ( orientation === 'horizontal' ) {\n\t\tallowedControls.push( 'space-between' );\n\t}\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<JustifyContentControl\n\t\t\t\tallowedControls={ allowedControls }\n\t\t\t\tvalue={ justifyContent }\n\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tposition: 'bottom right',\n\t\t\t\t\tisAlternate: true,\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst justificationOptions = [\n\t\t{\n\t\t\tvalue: 'left',\n\t\t\ticon: justifyLeft,\n\t\t\tlabel: __( 'Justify items left' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'center',\n\t\t\ticon: justifyCenter,\n\t\t\tlabel: __( 'Justify items center' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'right',\n\t\t\ticon: justifyRight,\n\t\t\tlabel: __( 'Justify items right' ),\n\t\t},\n\t];\n\tif ( orientation === 'horizontal' ) {\n\t\tjustificationOptions.push( {\n\t\t\tvalue: 'space-between',\n\t\t\ticon: justifySpaceBetween,\n\t\t\tlabel: __( 'Space between items' ),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__flex-layout-justification-controls\">\n\t\t\t<legend>{ __( 'Justification' ) }</legend>\n\t\t\t<div>\n\t\t\t\t{ justificationOptions.map( ( { value, icon, label } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tisPressed={ justifyContent === value }\n\t\t\t\t\t\t\tonClick={ () => onJustificationChange( value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n\nfunction FlexWrapControl( { layout, onChange } ) {\n\tconst { flexWrap = 'wrap' } = layout;\n\treturn (\n\t\t<ToggleControl\n\t\t\tlabel={ __( 'Allow to wrap to multiple lines' ) }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tflexWrap: value ? 'wrap' : 'nowrap',\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tchecked={ flexWrap === 'wrap' }\n\t\t/>\n\t);\n}\n\nfunction OrientationControl( { layout, onChange } ) {\n\tconst { orientation = 'horizontal' } = layout;\n\treturn (\n\t\t<fieldset className=\"block-editor-hooks__flex-layout-orientation-controls\">\n\t\t\t<legend>{ __( 'Orientation' ) }</legend>\n\t\t\t<Button\n\t\t\t\tlabel={ 'horizontal' }\n\t\t\t\ticon={ arrowRight }\n\t\t\t\tisPressed={ orientation === 'horizontal' }\n\t\t\t\tonClick={ () =>\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...layout,\n\t\t\t\t\t\torientation: 'horizontal',\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tlabel={ 'vertical' }\n\t\t\t\ticon={ arrowDown }\n\t\t\t\tisPressed={ orientation === 'vertical' }\n\t\t\t\tonClick={ () =>\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...layout,\n\t\t\t\t\t\torientation: 'vertical',\n\t\t\t\t\t} )\n\t\t\t\t}\n\t\t\t/>\n\t\t</fieldset>\n\t);\n}\n"]}

package/build-module/layouts/flow.js

@@ -12,6 +12,8 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 import useSetting from '../components/use-setting';
 import { appendSelectors } from './utils';
+import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
 export default {
   name: 'default',
   label: __('Flow'),
@@ -80,12 +82,13 @@ export default {
     return null;
   },
   save: function DefaultLayoutStyle(_ref2) {
-    var _style$spacing$blockG, _style$spacing;
+    var _style$spacing;
 
     let {
       selector,
       layout = {},
-      style
+      style,
+      blockName
     } = _ref2;
     const {
       contentSize,
@@ -93,18 +96,19 @@ export default {
     } = layout;
     const blockGapSupport = useSetting('spacing.blockGap');
     const hasBlockGapStylesSupport = blockGapSupport !== null;
-    const blockGapValue = (_style$spacing$blockG = style === null || style === void 0 ? void 0 : (_style$spacing = style.spacing) === null || _style$spacing === void 0 ? void 0 : _style$spacing.blockGap) !== null && _style$spacing$blockG !== void 0 ? _style$spacing$blockG : 'var( --wp--style--block-gap )';
+    const blockGapStyleValue = 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 && !shouldSkipSerialization(blockName, 'spacing', 'blockGap') ? blockGapStyleValue === null || blockGapStyleValue === void 0 ? void 0 : blockGapStyleValue.top : 'var( --wp--style--block-gap )';
     let output = !!contentSize || !!wideSize ? `
 					${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright))')} {
 						max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
-
 					${appendSelectors(selector, '> .alignwide')}  {
 						max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
 					}
-
 					${appendSelectors(selector, '> .alignfull')} {
 						max-width: none;
 					}
@@ -112,26 +116,29 @@ export default {
     output += `
 			${appendSelectors(selector, '> .alignleft')} {
 				float: left;
-				margin-right: 2em;
-				margin-left: 0;
+				margin-inline-start: 0;
+				margin-inline-end: 2em;
 			}
-
 			${appendSelectors(selector, '> .alignright')} {
 				float: right;
-				margin-left: 2em;
-				margin-right: 0;
+				margin-inline-start: 2em;
+				margin-inline-end: 0;
 			}
 
+			${appendSelectors(selector, '> .aligncenter')} {
+				margin-left: auto !important;
+				margin-right: auto !important;
+			}
 		`;
 
     if (hasBlockGapStylesSupport) {
       output += `
 				${appendSelectors(selector, '> *')} {
-					margin-top: 0;
-					margin-bottom: 0;
+					margin-block-start: 0;
+					margin-block-end: 0;
 				}
 				${appendSelectors(selector, '> * + *')} {
-					margin-top: ${blockGapValue};
+					margin-block-start: ${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","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","undefined","inherit","toolBarControls","DefaultLayoutToolbarControls","save","DefaultLayoutStyle","selector","style","blockGapSupport","hasBlockGapStylesSupport","blockGapValue","spacing","blockGap","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';\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( { selector, layout = {}, style } ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\n\t\tconst blockGapValue =\n\t\t\tstyle?.spacing?.blockGap ?? '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\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\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-right: 2em;\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\n\t\t\t${ appendSelectors( selector, '> .alignright' ) } {\n\t\t\t\tfloat: right;\n\t\t\t\tmargin-left: 2em;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\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-top: 0;\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t}\n\t\t\t\t${ appendSelectors( selector, '> * + *' ) } {\n\t\t\t\t\tmargin-top: ${ 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":["Button","__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__","sprintf","Icon","positionCenter","stretchWide","useSetting","appendSelectors","getGapBoxControlValueFromStyle","shouldSkipSerialization","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","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"]}