@wordpress/block-editor 7.0.2 → 8.0.1

package/build/layouts/flex.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
+var _icons = require("@wordpress/icons");
+
 var _components = require("@wordpress/components");
 
 var _utils = require("./utils");
@@ -26,12 +28,20 @@ var _components2 = require("../components");
 /**
  * Internal dependencies
  */
+// Used with the default, horizontal flex orientation.
 const justifyContentMap = {
   left: 'flex-start',
   right: 'flex-end',
   center: 'center',
   'space-between': 'space-between'
+}; // Used with the vertical (column) flex orientation.
+
+const alignItemsMap = {
+  left: 'flex-start',
+  right: 'flex-end',
+  center: 'center'
 };
+const flexWrapOptions = ['wrap', 'nowrap'];
 var _default = {
   name: 'flex',
   label: (0, _i18n.__)('Flex'),
@@ -39,10 +49,19 @@ var _default = {
     layout = {},
     onChange
   }) {
-    return (0, _element.createElement)(FlexLayoutJustifyContentControl, {
+    const {
+      allowOrientation = true
+    } = layout;
+    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
       layout: layout,
       onChange: onChange
-    });
+    })), (0, _element.createElement)(_components.FlexItem, null, allowOrientation && (0, _element.createElement)(OrientationControl, {
+      layout: layout,
+      onChange: onChange
+    }))), (0, _element.createElement)(FlexWrapControl, {
+      layout: layout,
+      onChange: onChange
+    }));
   },
   toolBarControls: function FlexLayoutToolbarControls({
     layout = {},
@@ -55,7 +74,7 @@ var _default = {
 
     return (0, _element.createElement)(_components2.BlockControls, {
       group: "block",
-      __experimentalExposeToChildren: true
+      __experimentalShareWithChildBlocks: true
     }, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
       layout: layout,
       onChange: onChange,
@@ -66,17 +85,53 @@ var _default = {
     selector,
     layout
   }) {
+    const {
+      orientation = 'horizontal',
+      setCascadingProperties = false
+    } = layout;
     const blockGapSupport = (0, _useSetting.default)('spacing.blockGap');
     const hasBlockGapStylesSupport = blockGapSupport !== null;
-    const justifyContent = justifyContentMap[layout.justifyContent] || 'flex-start';
+    const justifyContent = justifyContentMap[layout.justifyContent] || justifyContentMap.left;
+    const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
+    let rowOrientation = `
+		flex-direction: row;
+		align-items: center;
+		justify-content: ${justifyContent};
+		`;
+
+    if (setCascadingProperties) {
+      // --layout-justification-setting allows children to inherit the value
+      // regardless or row or column direction.
+      rowOrientation += `
+			--layout-justification-setting: ${justifyContent};
+			--layout-direction: row;
+			--layout-wrap: ${flexWrap};
+			--layout-justify: ${justifyContent};
+			--layout-align: center;
+			`;
+    }
+
+    const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
+    let columnOrientation = `
+		flex-direction: column;
+		align-items: ${alignItems};
+		`;
+
+    if (setCascadingProperties) {
+      columnOrientation += `
+			--layout-justification-setting: ${alignItems};
+			--layout-direction: column;
+			--layout-justify: initial;
+			--layout-align: ${alignItems};
+			`;
+    }
+
     return (0, _element.createElement)("style", null, `
 				${(0, _utils.appendSelectors)(selector)} {
 					display: flex;
 					gap: ${hasBlockGapStylesSupport ? 'var( --wp--style--block-gap, 0.5em )' : '0.5em'};
-					flex-wrap: wrap;
-					align-items: center;
-					flex-direction: row;
-					justify-content: ${justifyContent};
+					flex-wrap: ${flexWrap};
+					${orientation === 'horizontal' ? rowOrientation : columnOrientation}
 				}
 
 				${(0, _utils.appendSelectors)(selector, '> *')} {
@@ -85,8 +140,11 @@ var _default = {
 			`);
   },
 
-  getOrientation() {
-    return 'horizontal';
+  getOrientation(layout) {
+    const {
+      orientation = 'horizontal'
+    } = layout;
+    return orientation;
   },
 
   getAlignments() {
@@ -102,18 +160,27 @@ function FlexLayoutJustifyContentControl({
   isToolbar = false
 }) {
   const {
-    justifyContent = 'left'
+    justifyContent = 'left',
+    orientation = 'horizontal'
   } = layout;
 
+  const onJustificationChange = value => {
+    onChange({ ...layout,
+      justifyContent: value
+    });
+  };
+
+  const allowedControls = ['left', 'center', 'right'];
+
+  if (orientation === 'horizontal') {
+    allowedControls.push('space-between');
+  }
+
   if (isToolbar) {
     return (0, _element.createElement)(_components2.JustifyContentControl, {
-      allowedControls: ['left', 'center', 'right', 'space-between'],
+      allowedControls: allowedControls,
       value: justifyContent,
-      onChange: value => {
-        onChange({ ...layout,
-          justifyContent: value
-        });
-      },
+      onChange: onJustificationChange,
       popoverProps: {
         position: 'bottom right',
         isAlternate: true
@@ -121,27 +188,86 @@ function FlexLayoutJustifyContentControl({
     });
   }
 
-  return (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
-    label: (0, _i18n.__)('Justify content'),
-    value: justifyContent,
+  const justificationOptions = [{
+    value: 'left',
+    icon: _icons.justifyLeft,
+    label: (0, _i18n.__)('Justify items left')
+  }, {
+    value: 'center',
+    icon: _icons.justifyCenter,
+    label: (0, _i18n.__)('Justify items center')
+  }, {
+    value: 'right',
+    icon: _icons.justifyRight,
+    label: (0, _i18n.__)('Justify items right')
+  }];
+
+  if (orientation === 'horizontal') {
+    justificationOptions.push({
+      value: 'space-between',
+      icon: _icons.justifySpaceBetween,
+      label: (0, _i18n.__)('Space between items')
+    });
+  }
+
+  return (0, _element.createElement)("fieldset", {
+    className: "block-editor-hooks__flex-layout-justification-controls"
+  }, (0, _element.createElement)("legend", null, (0, _i18n.__)('Justification')), (0, _element.createElement)("div", null, justificationOptions.map(({
+    value,
+    icon,
+    label
+  }) => {
+    return (0, _element.createElement)(_components.Button, {
+      key: value,
+      label: label,
+      icon: icon,
+      isPressed: justifyContent === value,
+      onClick: () => onJustificationChange(value)
+    });
+  })));
+}
+
+function FlexWrapControl({
+  layout,
+  onChange
+}) {
+  const {
+    flexWrap = 'wrap'
+  } = layout;
+  return (0, _element.createElement)(_components.ToggleControl, {
+    label: (0, _i18n.__)('Allow to wrap to multiple lines'),
     onChange: value => {
       onChange({ ...layout,
-        justifyContent: value
+        flexWrap: value ? 'wrap' : 'nowrap'
       });
     },
-    isBlock: true
-  }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "left",
-    label: (0, _i18n._x)('Left', 'Justify content option')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "center",
-    label: (0, _i18n._x)('Center', 'Justify content option')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "right",
-    label: (0, _i18n._x)('Right', 'Justify content option')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "space-between",
-    label: (0, _i18n._x)('Space between', 'Justify content option')
+    checked: flexWrap === 'wrap'
+  });
+}
+
+function OrientationControl({
+  layout,
+  onChange
+}) {
+  const {
+    orientation = 'horizontal'
+  } = layout;
+  return (0, _element.createElement)("fieldset", {
+    className: "block-editor-hooks__flex-layout-orientation-controls"
+  }, (0, _element.createElement)("legend", null, (0, _i18n.__)('Orientation')), (0, _element.createElement)(_components.Button, {
+    label: 'horizontal',
+    icon: _icons.arrowRight,
+    isPressed: orientation === 'horizontal',
+    onClick: () => onChange({ ...layout,
+      orientation: 'horizontal'
+    })
+  }), (0, _element.createElement)(_components.Button, {
+    label: 'vertical',
+    icon: _icons.arrowDown,
+    isPressed: orientation === 'vertical',
+    onClick: () => onChange({ ...layout,
+      orientation: 'vertical'
+    })
   }));
 }
 //# sourceMappingURL=flex.js.map

package/build/layouts/flex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/flex.js"],"names":["justifyContentMap","left","right","center","name","label","inspectorControls","FlexLayoutInspectorControls","layout","onChange","toolBarControls","FlexLayoutToolbarControls","layoutBlockSupport","allowSwitching","save","FlexLayoutStyle","selector","blockGapSupport","hasBlockGapStylesSupport","justifyContent","getOrientation","getAlignments","FlexLayoutJustifyContentControl","isToolbar","value","position","isAlternate"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} 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\nconst justifyContentMap = {\n\tleft: 'flex-start',\n\tright: 'flex-end',\n\tcenter: 'center',\n\t'space-between': 'space-between',\n};\n\nexport default {\n\tname: 'flex',\n\tlabel: __( 'Flex' ),\n\tinspectorControls: function FlexLayoutInspectorControls( {\n\t\tlayout = {},\n\t\tonChange,\n\t} ) {\n\t\treturn (\n\t\t\t<FlexLayoutJustifyContentControl\n\t\t\t\tlayout={ layout }\n\t\t\t\tonChange={ 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\" __experimentalExposeToChildren>\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 } ) {\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\n\t\tconst justifyContent =\n\t\t\tjustifyContentMap[ layout.justifyContent ] || 'flex-start';\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: ${\n\t\t\t\t\t\thasBlockGapStylesSupport\n\t\t\t\t\t\t\t? 'var( --wp--style--block-gap, 0.5em )'\n\t\t\t\t\t\t\t: '0.5em'\n\t\t\t\t\t};\n\t\t\t\t\tflex-wrap: wrap;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tjustify-content: ${ justifyContent };\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() {\n\t\treturn 'horizontal';\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' } = layout;\n\tif ( isToolbar ) {\n\t\treturn (\n\t\t\t<JustifyContentControl\n\t\t\t\tallowedControls={ [\n\t\t\t\t\t'left',\n\t\t\t\t\t'center',\n\t\t\t\t\t'right',\n\t\t\t\t\t'space-between',\n\t\t\t\t] }\n\t\t\t\tvalue={ justifyContent }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\t...layout,\n\t\t\t\t\t\tjustifyContent: value,\n\t\t\t\t\t} );\n\t\t\t\t} }\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\treturn (\n\t\t<ToggleGroupControl\n\t\t\tlabel={ __( 'Justify content' ) }\n\t\t\tvalue={ justifyContent }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tonChange( {\n\t\t\t\t\t...layout,\n\t\t\t\t\tjustifyContent: value,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisBlock\n\t\t>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tvalue=\"left\"\n\t\t\t\tlabel={ _x( 'Left', 'Justify content option' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tvalue=\"center\"\n\t\t\t\tlabel={ _x( 'Center', 'Justify content option' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tvalue=\"right\"\n\t\t\t\tlabel={ _x( 'Right', 'Justify content option' ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControlOption\n\t\t\t\tvalue=\"space-between\"\n\t\t\t\tlabel={ _x( 'Space between', 'Justify content option' ) }\n\t\t\t/>\n\t\t</ToggleGroupControl>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/layouts/flex.js"],"names":["justifyContentMap","left","right","center","alignItemsMap","flexWrapOptions","name","label","inspectorControls","FlexLayoutInspectorControls","layout","onChange","allowOrientation","toolBarControls","FlexLayoutToolbarControls","layoutBlockSupport","allowSwitching","save","FlexLayoutStyle","selector","orientation","setCascadingProperties","blockGapSupport","hasBlockGapStylesSupport","justifyContent","flexWrap","includes","rowOrientation","alignItems","columnOrientation","getOrientation","getAlignments","FlexLayoutJustifyContentControl","isToolbar","onJustificationChange","value","allowedControls","push","position","isAlternate","justificationOptions","icon","justifyLeft","justifyCenter","justifyRight","justifySpaceBetween","map","FlexWrapControl","OrientationControl","arrowRight","arrowDown"],"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 } ) {\n\t\tconst {\n\t\t\torientation = 'horizontal',\n\t\t\tsetCascadingProperties = false,\n\t\t} = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\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\tlet rowOrientation = `\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: ${ justifyContent };\n\t\t`;\n\t\tif ( setCascadingProperties ) {\n\t\t\t// --layout-justification-setting allows children to inherit the value\n\t\t\t// regardless or row or column direction.\n\t\t\trowOrientation += `\n\t\t\t--layout-justification-setting: ${ justifyContent };\n\t\t\t--layout-direction: row;\n\t\t\t--layout-wrap: ${ flexWrap };\n\t\t\t--layout-justify: ${ justifyContent };\n\t\t\t--layout-align: center;\n\t\t\t`;\n\t\t}\n\t\tconst alignItems =\n\t\t\talignItemsMap[ layout.justifyContent ] || alignItemsMap.left;\n\t\tlet columnOrientation = `\n\t\tflex-direction: column;\n\t\talign-items: ${ alignItems };\n\t\t`;\n\t\tif ( setCascadingProperties ) {\n\t\t\tcolumnOrientation += `\n\t\t\t--layout-justification-setting: ${ alignItems };\n\t\t\t--layout-direction: column;\n\t\t\t--layout-justify: initial;\n\t\t\t--layout-align: ${ alignItems };\n\t\t\t`;\n\t\t}\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: ${\n\t\t\t\t\t\thasBlockGapStylesSupport\n\t\t\t\t\t\t\t? 'var( --wp--style--block-gap, 0.5em )'\n\t\t\t\t\t\t\t: '0.5em'\n\t\t\t\t\t};\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"]}

package/build/layouts/flow.js

@@ -132,9 +132,12 @@ var _default = {
 
     if (hasBlockGapStylesSupport) {
       style += `
+				${(0, _utils.appendSelectors)(selector, '> *')} {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
 				${(0, _utils.appendSelectors)(selector, '> * + *')} {
 					margin-top: var( --wp--style--block-gap );
-					margin-bottom: 0;
 				}
 			`;
     }
@@ -147,23 +150,87 @@ var _default = {
   },
 
   getAlignments(layout) {
+    const alignmentInfo = getAlignmentsInfo(layout);
+
     if (layout.alignments !== undefined) {
-      return layout.alignments;
+      if (!layout.alignments.includes('none')) {
+        layout.alignments.unshift('none');
+      }
+
+      return layout.alignments.map(alignment => ({
+        name: alignment,
+        info: alignmentInfo[alignment]
+      }));
     }
 
-    const alignments = ['left', 'center', 'right'];
-
-    if (layout.contentSize) {
-      alignments.unshift('full');
+    const {
+      contentSize,
+      wideSize
+    } = layout;
+    const alignments = [{
+      name: 'left'
+    }, {
+      name: 'center'
+    }, {
+      name: 'right'
+    }];
+
+    if (contentSize) {
+      alignments.unshift({
+        name: 'full'
+      });
     }
 
-    if (layout.wideSize) {
-      alignments.unshift('wide');
+    if (wideSize) {
+      alignments.unshift({
+        name: 'wide',
+        info: alignmentInfo.wide
+      });
     }
 
+    alignments.unshift({
+      name: 'none',
+      info: alignmentInfo.none
+    });
     return alignments;
   }
 
 };
+/**
+ * Helper method to assign contextual info to clarify
+ * alignment settings.
+ *
+ * Besides checking if `contentSize` and `wideSize` have a
+ * value, we now show this information only if their values
+ * are not a `css var`. This needs to change when parsing
+ * css variables land.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34710#issuecomment-918000752
+ *
+ * @param {Object} layout The layout object.
+ * @return {Object} An object with contextual info per alignment.
+ */
+
 exports.default = _default;
+
+function getAlignmentsInfo(layout) {
+  const {
+    contentSize,
+    wideSize
+  } = layout;
+  const alignmentInfo = {};
+  const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+
+  if (sizeRegex.test(contentSize)) {
+    // translators: %s: container size (i.e. 600px etc)
+    alignmentInfo.none = (0, _i18n.sprintf)((0, _i18n.__)('Max %s wide'), contentSize);
+  }
+
+  if (sizeRegex.test(wideSize)) {
+    // translators: %s: container size (i.e. 600px etc)
+    alignmentInfo.wide = (0, _i18n.sprintf)((0, _i18n.__)('Max %s wide'), wideSize);
+  }
+
+  return alignmentInfo;
+}
 //# sourceMappingURL=flow.js.map

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","blockGapSupport","hasBlockGapStylesSupport","style","getOrientation","getAlignments","alignments","unshift"],"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 { __ } 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 = {} } ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\n\n\t\tlet style =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors( selector, '> *' ) } {\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, '> [data-align=\"wide\"]' ) }  {\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, '> [data-align=\"full\"]' ) } {\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\tstyle += `\n\t\t\t${ appendSelectors( selector, '> [data-align=\"left\"]' ) } {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-right: 2em;\n\t\t\t}\n\n\t\t\t${ appendSelectors( selector, '> [data-align=\"right\"]' ) } {\n\t\t\t\tfloat: right;\n\t\t\t\tmargin-left: 2em;\n\t\t\t}\n\n\t\t`;\n\n\t\tif ( hasBlockGapStylesSupport ) {\n\t\t\tstyle += `\n\t\t\t\t${ appendSelectors( selector, '> * + *' ) } {\n\t\t\t\t\tmargin-top: var( --wp--style--block-gap );\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\treturn <style>{ style }</style>;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\treturn layout.alignments;\n\t\t}\n\n\t\tconst alignments = [ 'left', 'center', 'right' ];\n\n\t\tif ( layout.contentSize ) {\n\t\t\talignments.unshift( 'full' );\n\t\t}\n\n\t\tif ( layout.wideSize ) {\n\t\t\talignments.unshift( 'wide' );\n\t\t}\n\n\t\treturn alignments;\n\t},\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","save","DefaultLayoutStyle","selector","blockGapSupport","hasBlockGapStylesSupport","style","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 = {} } ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapSupport = useSetting( 'spacing.blockGap' );\n\t\tconst hasBlockGapStylesSupport = blockGapSupport !== null;\n\n\t\tlet style =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors( selector, '> *' ) } {\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, '> [data-align=\"wide\"]' ) }  {\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, '> [data-align=\"full\"]' ) } {\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\tstyle += `\n\t\t\t${ appendSelectors( selector, '> [data-align=\"left\"]' ) } {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-right: 2em;\n\t\t\t}\n\n\t\t\t${ appendSelectors( selector, '> [data-align=\"right\"]' ) } {\n\t\t\t\tfloat: right;\n\t\t\t\tmargin-left: 2em;\n\t\t\t}\n\n\t\t`;\n\n\t\tif ( hasBlockGapStylesSupport ) {\n\t\t\tstyle += `\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: var( --wp--style--block-gap );\n\t\t\t\t}\n\t\t\t`;\n\t\t}\n\n\t\treturn <style>{ style }</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"]}