@wordpress/block-editor 7.0.1 → 8.0.0

package/build/hooks/use-cached-truthy.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCachedTruthy = useCachedTruthy;
+
+var _element = require("@wordpress/element");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Keeps an up-to-date copy of the passed value and returns it. If value becomes falsy, it will return the last truthy copy.
+ *
+ * @param {any} value
+ * @return {any} value
+ */
+function useCachedTruthy(value) {
+  const [cachedValue, setCachedValue] = (0, _element.useState)(value);
+  (0, _element.useEffect)(() => {
+    if (value) {
+      setCachedValue(value);
+    }
+  }, [value]);
+  return cachedValue;
+}
+//# sourceMappingURL=use-cached-truthy.js.map

package/build/hooks/use-cached-truthy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-cached-truthy.js"],"names":["useCachedTruthy","value","cachedValue","setCachedValue"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,eAAT,CAA0BC,KAA1B,EAAkC;AACxC,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAUF,KAAV,CAAxC;AACA,0BAAW,MAAM;AAChB,QAAKA,KAAL,EAAa;AACZE,MAAAA,cAAc,CAAEF,KAAF,CAAd;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,CAJH;AAKA,SAAOC,WAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Keeps an up-to-date copy of the passed value and returns it. If value becomes falsy, it will return the last truthy copy.\n *\n * @param {any} value\n * @return {any} value\n */\nexport function useCachedTruthy( value ) {\n\tconst [ cachedValue, setCachedValue ] = useState( value );\n\tuseEffect( () => {\n\t\tif ( value ) {\n\t\t\tsetCachedValue( value );\n\t\t}\n\t}, [ value ] );\n\treturn cachedValue;\n}\n"]}

package/build/index.js

@@ -10,6 +10,7 @@ var _exportNames = {
   __experimentalUseColorProps: true,
   __experimentalUseCustomSides: true,
   __experimentalGetSpacingClassesAndStyles: true,
+  useCachedTruthy: true,
   storeConfig: true,
   store: true,
   SETTINGS_DEFAULTS: true
@@ -50,6 +51,12 @@ Object.defineProperty(exports, "__experimentalGetSpacingClassesAndStyles", {
     return _hooks.getSpacingClassesAndStyles;
   }
 });
+Object.defineProperty(exports, "useCachedTruthy", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useCachedTruthy;
+  }
+});
 Object.defineProperty(exports, "storeConfig", {
   enumerable: true,
   get: function () {

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;AASA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport './hooks';\nexport {\n\tgetBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,\n\tuseBorderProps as __experimentalUseBorderProps,\n\tgetColorClassesAndStyles as __experimentalGetColorClassesAndStyles,\n\tuseColorProps as __experimentalUseColorProps,\n\tuseCustomSides as __experimentalUseCustomSides,\n\tgetSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,\n} from './hooks';\nexport * from './components';\nexport * from './utils';\nexport { storeConfig, store } from './store';\nexport { SETTINGS_DEFAULTS } from './store/defaults';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;AAUA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport './hooks';\nexport {\n\tgetBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,\n\tuseBorderProps as __experimentalUseBorderProps,\n\tgetColorClassesAndStyles as __experimentalGetColorClassesAndStyles,\n\tuseColorProps as __experimentalUseColorProps,\n\tuseCustomSides as __experimentalUseCustomSides,\n\tgetSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,\n\tuseCachedTruthy,\n} from './hooks';\nexport * from './components';\nexport * from './utils';\nexport { storeConfig, store } from './store';\nexport { SETTINGS_DEFAULTS } from './store/defaults';\n"]}

package/build/layouts/flex.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +11,16 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
+var _icons = require("@wordpress/icons");
+
+var _components = require("@wordpress/components");
+
 var _utils = require("./utils");
 
+var _useSetting = _interopRequireDefault(require("../components/use-setting"));
+
+var _components2 = require("../components");
+
 /**
  * WordPress dependencies
  */
@@ -18,26 +28,103 @@ var _utils = require("./utils");
 /**
  * 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'),
-
-  edit() {
-    return null;
+  inspectorControls: function FlexLayoutInspectorControls({
+    layout = {},
+    onChange
+  }) {
+    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 = {},
+    onChange,
+    layoutBlockSupport
+  }) {
+    if (layoutBlockSupport !== null && layoutBlockSupport !== void 0 && layoutBlockSupport.allowSwitching) {
+      return null;
+    }
 
+    return (0, _element.createElement)(_components2.BlockControls, {
+      group: "block",
+      __experimentalShareWithChildBlocks: true
+    }, (0, _element.createElement)(FlexLayoutJustifyContentControl, {
+      layout: layout,
+      onChange: onChange,
+      isToolbar: true
+    }));
+  },
   save: function FlexLayoutStyle({
-    selector
+    selector,
+    layout
   }) {
-    return (0, _element.createElement)("style", null, `${(0, _utils.appendSelectors)(selector)} {
-            display: flex;
-            column-gap: 0.5em;
-            align-items: center;
-        }`);
+    const {
+      orientation = 'horizontal'
+    } = layout;
+    const blockGapSupport = (0, _useSetting.default)('spacing.blockGap');
+    const hasBlockGapStylesSupport = blockGapSupport !== null;
+    const justifyContent = justifyContentMap[layout.justifyContent] || justifyContentMap.left;
+    const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap'; // --justification-setting allows children to inherit the value
+    // regardless or row or column direction.
+
+    const rowOrientation = `
+		flex-direction: row;
+		align-items: center;
+		justify-content: ${justifyContent};
+		--justification-setting: ${justifyContent};
+		`;
+    const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
+    const columnOrientation = `
+		flex-direction: column;
+		align-items: ${alignItems};
+		--justification-setting: ${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: ${flexWrap};
+					${orientation === 'horizontal' ? rowOrientation : columnOrientation}
+				}
+
+				${(0, _utils.appendSelectors)(selector, '> *')} {
+					margin: 0;
+				}
+			`);
   },
 
-  getOrientation() {
-    return 'horizontal';
+  getOrientation(layout) {
+    const {
+      orientation = 'horizontal'
+    } = layout;
+    return orientation;
   },
 
   getAlignments() {
@@ -46,4 +133,121 @@ var _default = {
 
 };
 exports.default = _default;
+
+function FlexLayoutJustifyContentControl({
+  layout,
+  onChange,
+  isToolbar = false
+}) {
+  const {
+    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: allowedControls,
+      value: justifyContent,
+      onChange: onJustificationChange,
+      popoverProps: {
+        position: 'bottom right',
+        isAlternate: true
+      }
+    });
+  }
+
+  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,
+        flexWrap: value ? 'wrap' : 'nowrap'
+      });
+    },
+    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":["name","label","edit","save","FlexLayoutStyle","selector","getOrientation","getAlignments"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;eAGe;AACdA,EAAAA,IAAI,EAAE,MADQ;AAGdC,EAAAA,KAAK,EAAE,cAAI,MAAJ,CAHO;;AAKdC,EAAAA,IAAI,GAAG;AACN,WAAO,IAAP;AACA,GAPa;;AASdC,EAAAA,IAAI,EAAE,SAASC,eAAT,CAA0B;AAAEC,IAAAA;AAAF,GAA1B,EAAyC;AAC9C,WACC,2CAAU,GAAG,4BAAiBA,QAAjB,CAA6B;AAC7C;AACA;AACA;AACA,UAJG,CADD;AAOA,GAjBa;;AAmBdC,EAAAA,cAAc,GAAG;AAChB,WAAO,YAAP;AACA,GArBa;;AAuBdC,EAAAA,aAAa,GAAG;AACf,WAAO,EAAP;AACA;;AAzBa,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { appendSelectors } from './utils';\n\nexport default {\n\tname: 'flex',\n\n\tlabel: __( 'Flex' ),\n\n\tedit() {\n\t\treturn null;\n\t},\n\n\tsave: function FlexLayoutStyle( { selector } ) {\n\t\treturn (\n\t\t\t<style>{ `${ appendSelectors( selector ) } {\n            display: flex;\n            column-gap: 0.5em;\n            align-items: center;\n        }` }</style>\n\t\t);\n\t},\n\n\tgetOrientation() {\n\t\treturn 'horizontal';\n\t},\n\n\tgetAlignments() {\n\t\treturn [];\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","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 { orientation = 'horizontal' } = 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\t// --justification-setting allows children to inherit the value\n\t\t// regardless or row or column direction.\n\t\tconst rowOrientation = `\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: ${ justifyContent };\n\t\t--justification-setting: ${ 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--justification-setting: ${ alignItems };\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

@@ -29,7 +29,7 @@ var _utils = require("./utils");
 var _default = {
   name: 'default',
   label: (0, _i18n.__)('Flow'),
-  edit: function LayoutDefaultEdit({
+  inspectorControls: function DefaultLayoutInspectorControls({
     layout,
     onChange
   }) {
@@ -89,6 +89,9 @@ var _default = {
       className: "block-editor-hooks__layout-controls-helptext"
     }, (0, _i18n.__)('Customize the width for all elements that are assigned to the center or wide columns.')));
   },
+  toolBarControls: function DefaultLayoutToolbarControls() {
+    return null;
+  },
   save: function DefaultLayoutStyle({
     selector,
     layout = {}
@@ -97,17 +100,19 @@ var _default = {
       contentSize,
       wideSize
     } = layout;
+    const blockGapSupport = (0, _useSetting.default)('spacing.blockGap');
+    const hasBlockGapStylesSupport = blockGapSupport !== null;
     let style = !!contentSize || !!wideSize ? `
 					${(0, _utils.appendSelectors)(selector, '> *')} {
 						max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
-	
+
 					${(0, _utils.appendSelectors)(selector, '> [data-align="wide"]')}  {
 						max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
 					}
-	
+
 					${(0, _utils.appendSelectors)(selector, '> [data-align="full"]')} {
 						max-width: none;
 					}
@@ -117,12 +122,26 @@ var _default = {
 				float: left;
 				margin-right: 2em;
 			}
-	
+
 			${(0, _utils.appendSelectors)(selector, '> [data-align="right"]')} {
 				float: right;
 				margin-left: 2em;
 			}
+
 		`;
+
+    if (hasBlockGapStylesSupport) {
+      style += `
+				${(0, _utils.appendSelectors)(selector, '> *')} {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
+				${(0, _utils.appendSelectors)(selector, '> * + *')} {
+					margin-top: var( --wp--style--block-gap );
+				}
+			`;
+    }
+
     return (0, _element.createElement)("style", null, style);
   },
 
@@ -131,13 +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]
+      }));
     }
 
-    return layout.contentSize || layout.wideSize ? ['wide', 'full', 'left', 'center', 'right'] : ['left', 'center', 'right'];
+    const {
+      contentSize,
+      wideSize
+    } = layout;
+    const alignments = [{
+      name: 'left'
+    }, {
+      name: 'center'
+    }, {
+      name: 'right'
+    }];
+
+    if (contentSize) {
+      alignments.unshift({
+        name: 'full'
+      });
+    }
+
+    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","edit","LayoutDefaultEdit","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","positionCenter","stretchWide","undefined","inherit","save","DefaultLayoutStyle","selector","style","getOrientation","getAlignments","alignments"],"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\n\tlabel: __( 'Flow' ),\n\n\tedit: function LayoutDefaultEdit( { layout, onChange } ) {\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\n\tsave: function DefaultLayoutStyle( { selector, layout = {} } ) {\n\t\tconst { contentSize, wideSize } = layout;\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\t\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\t\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\t\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\t\t`;\n\n\t\treturn <style>{ style }</style>;\n\t},\n\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\n\tgetAlignments( layout ) {\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\treturn layout.alignments;\n\t\t}\n\n\t\treturn layout.contentSize || layout.wideSize\n\t\t\t? [ 'wide', 'full', 'left', 'center', 'right' ]\n\t\t\t: [ 'left', 'center', 'right' ];\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":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AAfA;AACA;AACA;;AASA;AACA;AACA;eAIe;AACdA,EAAAA,IAAI,EAAE,SADQ;AAEdC,EAAAA,KAAK,EAAE,cAAI,MAAJ,CAFO;AAGdC,EAAAA,iBAAiB,EAAE,SAASC,8BAAT,CAAyC;AAC3DC,IAAAA,MAD2D;AAE3DC,IAAAA;AAF2D,GAAzC,EAGf;AACH,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA;AAAZ,QAA4BH,MAAlC;AACA,UAAMI,KAAK,GAAG,8CAAgB;AAC7BC,MAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAChD,GADgD,EAEhD,IAFgD,EAGhD,IAHgD,EAIhD,KAJgD,EAKhD,IALgD;AADpB,KAAhB,CAAd;AAUA,WACC,qDACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,qCAAD;AACC,MAAA,KAAK,EAAG,cAAI,SAAJ,CADT;AAEC,MAAA,aAAa,EAAC,KAFf;AAGC,MAAA,oBAAoB,EAAC,MAHtB;AAIC,MAAA,KAAK,EAAGF,WAAW,IAAID,QAAf,IAA2B,EAJpC;AAKC,MAAA,QAAQ,EAAKI,SAAF,IAAiB;AAC3BA,QAAAA,SAAS,GACR,IAAIC,UAAU,CAAED,SAAF,CAAd,GACG,GADH,GAEGA,SAHJ;AAIAL,QAAAA,QAAQ,CAAE,EACT,GAAGD,MADM;AAETG,UAAAA,WAAW,EAAEG;AAFJ,SAAF,CAAR;AAIA,OAdF;AAeC,MAAA,KAAK,EAAGF;AAfT,MADD,EAkBC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGI;AAAb,MAlBD,CADD,EAqBC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,qCAAD;AACC,MAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,MAAA,aAAa,EAAC,KAFf;AAGC,MAAA,oBAAoB,EAAC,MAHtB;AAIC,MAAA,KAAK,EAAGN,QAAQ,IAAIC,WAAZ,IAA2B,EAJpC;AAKC,MAAA,QAAQ,EAAKG,SAAF,IAAiB;AAC3BA,QAAAA,SAAS,GACR,IAAIC,UAAU,CAAED,SAAF,CAAd,GACG,GADH,GAEGA,SAHJ;AAIAL,QAAAA,QAAQ,CAAE,EACT,GAAGD,MADM;AAETE,UAAAA,QAAQ,EAAEI;AAFD,SAAF,CAAR;AAIA,OAdF;AAeC,MAAA,KAAK,EAAGF;AAfT,MADD,EAkBC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGK;AAAb,MAlBD,CArBD,CADD,EA2CC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,4BAAC,kBAAD;AACC,MAAA,OAAO,EAAC,WADT;AAEC,MAAA,OAAO,MAFR;AAGC,MAAA,QAAQ,EAAG,CAAEN,WAAF,IAAiB,CAAED,QAH/B;AAIC,MAAA,OAAO,EAAG,MACTD,QAAQ,CAAE;AACTE,QAAAA,WAAW,EAAEO,SADJ;AAETR,QAAAA,QAAQ,EAAEQ,SAFD;AAGTC,QAAAA,OAAO,EAAE;AAHA,OAAF;AALV,OAYG,cAAI,OAAJ,CAZH,CADD,CA3CD,EA4DC;AAAG,MAAA,SAAS,EAAC;AAAb,OACG,cACD,uFADC,CADH,CA5DD,CADD;AAoEA,GAtFa;AAuFdC,EAAAA,eAAe,EAAE,SAASC,4BAAT,GAAwC;AACxD,WAAO,IAAP;AACA,GAzFa;AA0FdC,EAAAA,IAAI,EAAE,SAASC,kBAAT,CAA6B;AAAEC,IAAAA,QAAF;AAAYhB,IAAAA,MAAM,GAAG;AAArB,GAA7B,EAAyD;AAC9D,UAAM;AAAEG,MAAAA,WAAF;AAAeD,MAAAA;AAAf,QAA4BF,MAAlC;AACA,UAAMiB,eAAe,GAAG,yBAAY,kBAAZ,CAAxB;AACA,UAAMC,wBAAwB,GAAGD,eAAe,KAAK,IAArD;AAEA,QAAIE,KAAK,GACR,CAAC,CAAEhB,WAAH,IAAkB,CAAC,CAAED,QAArB,GACI;AACP,OAAQ,4BAAiBc,QAAjB,EAA2B,KAA3B,CAAoC;AAC5C,mBAAoBb,WAFd,aAEcA,WAFd,cAEcA,WAFd,GAE6BD,QAAU;AAC7C;AACA;AACA;AACA;AACA,OAAQ,4BAAiBc,QAAjB,EAA2B,uBAA3B,CAAsD;AAC9D,mBAAoBd,QARd,aAQcA,QARd,cAQcA,QARd,GAQ0BC,WAAa;AAC7C;AACA;AACA,OAAQ,4BAAiBa,QAAjB,EAA2B,uBAA3B,CAAsD;AAC9D;AACA;AACA,KAfG,GAgBG,EAjBJ;AAmBAG,IAAAA,KAAK,IAAK;AACZ,KAAM,4BAAiBH,QAAjB,EAA2B,uBAA3B,CAAsD;AAC5D;AACA;AACA;AACA;AACA,KAAM,4BAAiBA,QAAjB,EAA2B,wBAA3B,CAAuD;AAC7D;AACA;AACA;AACA;AACA,GAXE;;AAaA,QAAKE,wBAAL,EAAgC;AAC/BC,MAAAA,KAAK,IAAK;AACb,MAAO,4BAAiBH,QAAjB,EAA2B,KAA3B,CAAoC;AAC3C;AACA;AACA;AACA,MAAO,4BAAiBA,QAAjB,EAA2B,SAA3B,CAAwC;AAC/C;AACA;AACA,IARG;AASA;;AAED,WAAO,2CAASG,KAAT,CAAP;AACA,GA5Ia;;AA6IdC,EAAAA,cAAc,GAAG;AAChB,WAAO,UAAP;AACA,GA/Ia;;AAgJdC,EAAAA,aAAa,CAAErB,MAAF,EAAW;AACvB,UAAMsB,aAAa,GAAGC,iBAAiB,CAAEvB,MAAF,CAAvC;;AACA,QAAKA,MAAM,CAACwB,UAAP,KAAsBd,SAA3B,EAAuC;AACtC,UAAK,CAAEV,MAAM,CAACwB,UAAP,CAAkBC,QAAlB,CAA4B,MAA5B,CAAP,EAA8C;AAC7CzB,QAAAA,MAAM,CAACwB,UAAP,CAAkBE,OAAlB,CAA2B,MAA3B;AACA;;AACD,aAAO1B,MAAM,CAACwB,UAAP,CAAkBG,GAAlB,CAAyBC,SAAF,KAAmB;AAChDhC,QAAAA,IAAI,EAAEgC,SAD0C;AAEhDC,QAAAA,IAAI,EAAEP,aAAa,CAAEM,SAAF;AAF6B,OAAnB,CAAvB,CAAP;AAIA;;AACD,UAAM;AAAEzB,MAAAA,WAAF;AAAeD,MAAAA;AAAf,QAA4BF,MAAlC;AAEA,UAAMwB,UAAU,GAAG,CAClB;AAAE5B,MAAAA,IAAI,EAAE;AAAR,KADkB,EAElB;AAAEA,MAAAA,IAAI,EAAE;AAAR,KAFkB,EAGlB;AAAEA,MAAAA,IAAI,EAAE;AAAR,KAHkB,CAAnB;;AAMA,QAAKO,WAAL,EAAmB;AAClBqB,MAAAA,UAAU,CAACE,OAAX,CAAoB;AAAE9B,QAAAA,IAAI,EAAE;AAAR,OAApB;AACA;;AAED,QAAKM,QAAL,EAAgB;AACfsB,MAAAA,UAAU,CAACE,OAAX,CAAoB;AAAE9B,QAAAA,IAAI,EAAE,MAAR;AAAgBiC,QAAAA,IAAI,EAAEP,aAAa,CAACQ;AAApC,OAApB;AACA;;AAEDN,IAAAA,UAAU,CAACE,OAAX,CAAoB;AAAE9B,MAAAA,IAAI,EAAE,MAAR;AAAgBiC,MAAAA,IAAI,EAAEP,aAAa,CAACS;AAApC,KAApB;AAEA,WAAOP,UAAP;AACA;;AA9Ka,C;AAiLf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,SAASD,iBAAT,CAA4BvB,MAA5B,EAAqC;AACpC,QAAM;AAAEG,IAAAA,WAAF;AAAeD,IAAAA;AAAf,MAA4BF,MAAlC;AACA,QAAMsB,aAAa,GAAG,EAAtB;AACA,QAAMU,SAAS,GAAG,iCAAlB;;AACA,MAAKA,SAAS,CAACC,IAAV,CAAgB9B,WAAhB,CAAL,EAAqC;AACpC;AACAmB,IAAAA,aAAa,CAACS,IAAd,GAAqB,mBAAS,cAAI,aAAJ,CAAT,EAA8B5B,WAA9B,CAArB;AACA;;AACD,MAAK6B,SAAS,CAACC,IAAV,CAAgB/B,QAAhB,CAAL,EAAkC;AACjC;AACAoB,IAAAA,aAAa,CAACQ,IAAd,GAAqB,mBAAS,cAAI,aAAJ,CAAT,EAA8B5B,QAA9B,CAArB;AACA;;AACD,SAAOoB,aAAP;AACA","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"]}