@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/build-module/layouts/constrained.js

@@ -3,9 +3,9 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { Button, __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import { __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { Icon, positionCenter, stretchWide, justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
 import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
@@ -25,8 +25,29 @@ export default {
     } = _ref;
     const {
       wideSize,
-      contentSize
+      contentSize,
+      justifyContent = 'center'
     } = layout;
+
+    const onJustificationChange = value => {
+      onChange({ ...layout,
+        justifyContent: value
+      });
+    };
+
+    const justificationOptions = [{
+      value: 'left',
+      icon: justifyLeft,
+      label: __('Justify items left')
+    }, {
+      value: 'center',
+      icon: justifyCenter,
+      label: __('Justify items center')
+    }, {
+      value: 'right',
+      icon: justifyRight,
+      label: __('Justify items right')
+    }];
     const units = useCustomUnits({
       availableUnits: useSetting('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
     });
@@ -64,25 +85,31 @@ export default {
       units: units
     }), createElement(Icon, {
       icon: stretchWide
-    }))), createElement("div", {
-      className: "block-editor-hooks__layout-controls-reset"
-    }, createElement(Button, {
-      variant: "secondary",
-      isSmall: true,
-      disabled: !contentSize && !wideSize,
-      onClick: () => onChange({
-        contentSize: undefined,
-        wideSize: undefined,
-        inherit: false
-      })
-    }, __('Reset'))), createElement("p", {
+    }))), createElement("p", {
       className: "block-editor-hooks__layout-controls-helptext"
-    }, __('Customize the width for all elements that are assigned to the center or wide columns.')));
+    }, __('Customize the width for all elements that are assigned to the center or wide columns.')), createElement(ToggleGroupControl, {
+      __experimentalIsBorderless: true,
+      label: __('Justification'),
+      value: justifyContent,
+      onChange: onJustificationChange
+    }, justificationOptions.map(_ref2 => {
+      let {
+        value,
+        icon,
+        label
+      } = _ref2;
+      return createElement(ToggleGroupControlOptionIcon, {
+        key: value,
+        value: value,
+        icon: icon,
+        label: label
+      });
+    })));
   },
   toolBarControls: function DefaultLayoutToolbarControls() {
     return null;
   },
-  getLayoutStyle: function getLayoutStyle(_ref2) {
+  getLayoutStyle: function getLayoutStyle(_ref3) {
     var _style$spacing, _style$spacing2;
 
     let {
@@ -92,10 +119,11 @@ export default {
       blockName,
       hasBlockGapSupport,
       layoutDefinitions
-    } = _ref2;
+    } = _ref3;
     const {
       contentSize,
-      wideSize
+      wideSize,
+      justifyContent
     } = layout;
     const blockGapStyleValue = getGapCSSValue(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.
@@ -111,11 +139,13 @@ export default {
       }
     }
 
+    const marginLeft = justifyContent === 'left' ? '0 !important' : 'auto !important';
+    const marginRight = justifyContent === 'right' ? '0 !important' : 'auto !important';
     let output = !!contentSize || !!wideSize ? `
 					${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')} {
 						max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
-						margin-left: auto !important;
-						margin-right: auto !important;
+						margin-left: ${marginLeft};
+						margin-right: ${marginRight};
 					}
 					${appendSelectors(selector, '> .alignwide')}  {
 						max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
@@ -123,7 +153,16 @@ export default {
 					${appendSelectors(selector, '> .alignfull')} {
 						max-width: none;
 					}
-				` : ''; // If there is custom padding, add negative margins for alignfull blocks.
+				` : '';
+
+    if (justifyContent === 'left') {
+      output += `${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
+			{ margin-left: ${marginLeft}; }`;
+    } else if (justifyContent === 'right') {
+      output += `${appendSelectors(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
+			{ margin-right: ${marginRight}; }`;
+    } // If there is custom padding, add negative margins for alignfull blocks.
+
 
     if (style !== null && style !== void 0 && (_style$spacing2 = style.spacing) !== null && _style$spacing2 !== void 0 && _style$spacing2.padding) {
       // The style object might be storing a preset so we need to make sure we get a usable value.

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/constrained.js"],"names":["Button","__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__","Icon","positionCenter","stretchWide","getCSSRules","useSetting","appendSelectors","getBlockGapCSS","getAlignmentsInfo","getGapCSSValue","shouldSkipSerialization","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","undefined","inherit","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","output","padding","paddingValues","forEach","rule","key","value","getOrientation","getAlignments","alignmentInfo","alignments","includes","unshift","map","alignment","info","wide","none"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,MADD,EAECC,4BAA4B,IAAIC,cAFjC,EAGCC,yBAAyB,IAAIC,WAH9B,QAIO,uBAJP;AAKA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,IAAT,EAAeC,cAAf,EAA+BC,WAA/B,QAAkD,kBAAlD;AACA,SAASC,WAAT,QAA4B,yBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,SAASC,eAAT,EAA0BC,cAA1B,EAA0CC,iBAA1C,QAAmE,SAAnE;AACA,SAASC,cAAT,QAA+B,cAA/B;AACA,SAASC,uBAAT,QAAwC,gBAAxC;AAEA,eAAe;AACdC,EAAAA,IAAI,EAAE,aADQ;AAEdC,EAAAA,KAAK,EAAEZ,EAAE,CAAE,aAAF,CAFK;AAGda,EAAAA,iBAAiB,EAAE,SAASC,8BAAT,OAGf;AAAA,QAHwD;AAC3DC,MAAAA,MAD2D;AAE3DC,MAAAA;AAF2D,KAGxD;AACH,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA;AAAZ,QAA4BH,MAAlC;AACA,UAAMI,KAAK,GAAGtB,cAAc,CAAE;AAC7BuB,MAAAA,cAAc,EAAEf,UAAU,CAAE,eAAF,CAAV,IAAiC,CAChD,GADgD,EAEhD,IAFgD,EAGhD,IAHgD,EAIhD,KAJgD,EAKhD,IALgD;AADpB,KAAF,CAA5B;AAUA,WACC,8BACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,WAAD;AACC,MAAA,KAAK,EAAGL,EAAE,CAAE,SAAF,CADX;AAEC,MAAA,aAAa,EAAC,KAFf;AAGC,MAAA,oBAAoB,EAAC,MAHtB;AAIC,MAAA,KAAK,EAAGkB,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,cAAC,IAAD;AAAM,MAAA,IAAI,EAAGjB;AAAb,MAlBD,CADD,EAqBC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,WAAD;AACC,MAAA,KAAK,EAAGF,EAAE,CAAE,MAAF,CADX;AAEC,MAAA,aAAa,EAAC,KAFf;AAGC,MAAA,oBAAoB,EAAC,MAHtB;AAIC,MAAA,KAAK,EAAGiB,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,cAAC,IAAD;AAAM,MAAA,IAAI,EAAGhB;AAAb,MAlBD,CArBD,CADD,EA2CC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,MAAD;AACC,MAAA,OAAO,EAAC,WADT;AAEC,MAAA,OAAO,MAFR;AAGC,MAAA,QAAQ,EAAG,CAAEe,WAAF,IAAiB,CAAED,QAH/B;AAIC,MAAA,OAAO,EAAG,MACTD,QAAQ,CAAE;AACTE,QAAAA,WAAW,EAAEK,SADJ;AAETN,QAAAA,QAAQ,EAAEM,SAFD;AAGTC,QAAAA,OAAO,EAAE;AAHA,OAAF;AALV,OAYGxB,EAAE,CAAE,OAAF,CAZL,CADD,CA3CD,EA4DC;AAAG,MAAA,SAAS,EAAC;AAAb,OACGA,EAAE,CACH,uFADG,CADL,CA5DD,CADD;AAoEA,GAtFa;AAuFdyB,EAAAA,eAAe,EAAE,SAASC,4BAAT,GAAwC;AACxD,WAAO,IAAP;AACA,GAzFa;AA0FdC,EAAAA,cAAc,EAAE,SAASA,cAAT,QAOZ;AAAA;;AAAA,QAPqC;AACxCC,MAAAA,QADwC;AAExCb,MAAAA,MAAM,GAAG,EAF+B;AAGxCc,MAAAA,KAHwC;AAIxCC,MAAAA,SAJwC;AAKxCC,MAAAA,kBALwC;AAMxCC,MAAAA;AANwC,KAOrC;AACH,UAAM;AAAEd,MAAAA,WAAF;AAAeD,MAAAA;AAAf,QAA4BF,MAAlC;AACA,UAAMkB,kBAAkB,GAAGxB,cAAc,CAAEoB,KAAF,aAAEA,KAAF,yCAAEA,KAAK,CAAEK,OAAT,mDAAE,eAAgBC,QAAlB,CAAzC,CAFG,CAIH;AACA;;AACA,QAAIC,aAAa,GAAG,EAApB;;AACA,QAAK,CAAE1B,uBAAuB,CAAEoB,SAAF,EAAa,SAAb,EAAwB,UAAxB,CAA9B,EAAqE;AACpE;AACA,UAAKG,kBAAL,aAAKA,kBAAL,eAAKA,kBAAkB,CAAEI,GAAzB,EAA+B;AAC9BD,QAAAA,aAAa,GAAG3B,cAAc,CAAEwB,kBAAF,aAAEA,kBAAF,uBAAEA,kBAAkB,CAAEI,GAAtB,CAA9B;AACA,OAFD,MAEO,IAAK,OAAOJ,kBAAP,KAA8B,QAAnC,EAA8C;AACpDG,QAAAA,aAAa,GAAG3B,cAAc,CAAEwB,kBAAF,CAA9B;AACA;AACD;;AAED,QAAIK,MAAM,GACT,CAAC,CAAEpB,WAAH,IAAkB,CAAC,CAAED,QAArB,GACI;AACP,OAAQX,eAAe,CACjBsB,QADiB,EAEjB,6DAFiB,CAGf;AACR,mBAAoBV,WALd,aAKcA,WALd,cAKcA,WALd,GAK6BD,QAAU;AAC7C;AACA;AACA;AACA,OAAQX,eAAe,CAAEsB,QAAF,EAAY,cAAZ,CAA8B;AACrD,mBAAoBX,QAVd,aAUcA,QAVd,cAUcA,QAVd,GAU0BC,WAAa;AAC7C;AACA,OAAQZ,eAAe,CAAEsB,QAAF,EAAY,cAAZ,CAA8B;AACrD;AACA;AACA,KAhBG,GAiBG,EAlBJ,CAhBG,CAoCH;;AACA,QAAKC,KAAL,aAAKA,KAAL,kCAAKA,KAAK,CAAEK,OAAZ,4CAAK,gBAAgBK,OAArB,EAA+B;AAC9B;AACA,YAAMC,aAAa,GAAGpC,WAAW,CAAEyB,KAAF,CAAjC;AACAW,MAAAA,aAAa,CAACC,OAAd,CAAyBC,IAAF,IAAY;AAClC,YAAKA,IAAI,CAACC,GAAL,KAAa,cAAlB,EAAmC;AAClCL,UAAAA,MAAM,IAAK;AAChB,OAAQhC,eAAe,CAAEsB,QAAF,EAAY,cAAZ,CAA8B;AACrD,2BAA4Bc,IAAI,CAACE,KAAO;AACxC;AACA,MAJK;AAKA,SAND,MAMO,IAAKF,IAAI,CAACC,GAAL,KAAa,aAAlB,EAAkC;AACxCL,UAAAA,MAAM,IAAK;AAChB,OAAQhC,eAAe,CAAEsB,QAAF,EAAY,cAAZ,CAA8B;AACrD,0BAA2Bc,IAAI,CAACE,KAAO;AACvC;AACA,MAJK;AAKA;AACD,OAdD;AAeA,KAvDE,CAyDH;;;AACA,QAAKb,kBAAkB,IAAIK,aAA3B,EAA2C;AAC1CE,MAAAA,MAAM,IAAI/B,cAAc,CACvBqB,QADuB,EAEvBI,iBAFuB,EAGvB,aAHuB,EAIvBI,aAJuB,CAAxB;AAMA;;AACD,WAAOE,MAAP;AACA,GApKa;;AAqKdO,EAAAA,cAAc,GAAG;AAChB,WAAO,UAAP;AACA,GAvKa;;AAwKdC,EAAAA,aAAa,CAAE/B,MAAF,EAAW;AACvB,UAAMgC,aAAa,GAAGvC,iBAAiB,CAAEO,MAAF,CAAvC;;AACA,QAAKA,MAAM,CAACiC,UAAP,KAAsBzB,SAA3B,EAAuC;AACtC,UAAK,CAAER,MAAM,CAACiC,UAAP,CAAkBC,QAAlB,CAA4B,MAA5B,CAAP,EAA8C;AAC7ClC,QAAAA,MAAM,CAACiC,UAAP,CAAkBE,OAAlB,CAA2B,MAA3B;AACA;;AACD,aAAOnC,MAAM,CAACiC,UAAP,CAAkBG,GAAlB,CAAyBC,SAAF,KAAmB;AAChDzC,QAAAA,IAAI,EAAEyC,SAD0C;AAEhDC,QAAAA,IAAI,EAAEN,aAAa,CAAEK,SAAF;AAF6B,OAAnB,CAAvB,CAAP;AAIA;;AACD,UAAM;AAAElC,MAAAA,WAAF;AAAeD,MAAAA;AAAf,QAA4BF,MAAlC;AAEA,UAAMiC,UAAU,GAAG,CAClB;AAAErC,MAAAA,IAAI,EAAE;AAAR,KADkB,EAElB;AAAEA,MAAAA,IAAI,EAAE;AAAR,KAFkB,EAGlB;AAAEA,MAAAA,IAAI,EAAE;AAAR,KAHkB,CAAnB;;AAMA,QAAKO,WAAL,EAAmB;AAClB8B,MAAAA,UAAU,CAACE,OAAX,CAAoB;AAAEvC,QAAAA,IAAI,EAAE;AAAR,OAApB;AACA;;AAED,QAAKM,QAAL,EAAgB;AACf+B,MAAAA,UAAU,CAACE,OAAX,CAAoB;AAAEvC,QAAAA,IAAI,EAAE,MAAR;AAAgB0C,QAAAA,IAAI,EAAEN,aAAa,CAACO;AAApC,OAApB;AACA;;AAEDN,IAAAA,UAAU,CAACE,OAAX,CAAoB;AAAEvC,MAAAA,IAAI,EAAE,MAAR;AAAgB0C,MAAAA,IAAI,EAAEN,aAAa,CAACQ;AAApC,KAApB;AAEA,WAAOP,UAAP;AACA;;AAtMa,CAAf","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';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\n\nexport default {\n\tname: 'constrained',\n\tlabel: __( 'Constrained' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t} ) {\n\t\tconst { wideSize, contentSize } = layout;\n\t\tconst units = useCustomUnits( {\n\t\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t\t'%',\n\t\t\t\t'px',\n\t\t\t\t'em',\n\t\t\t\t'rem',\n\t\t\t\t'vw',\n\t\t\t],\n\t\t} );\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div className=\"block-editor-hooks__layout-controls\">\n\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Content' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ contentSize || wideSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\tcontentSize: nextWidth,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Icon icon={ positionCenter } />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"block-editor-hooks__layout-controls-unit\">\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\tlabel={ __( 'Wide' ) }\n\t\t\t\t\t\t\tlabelPosition=\"top\"\n\t\t\t\t\t\t\t__unstableInputWidth=\"80px\"\n\t\t\t\t\t\t\tvalue={ wideSize || contentSize || '' }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) => {\n\t\t\t\t\t\t\t\tnextWidth =\n\t\t\t\t\t\t\t\t\t0 > parseFloat( nextWidth )\n\t\t\t\t\t\t\t\t\t\t? '0'\n\t\t\t\t\t\t\t\t\t\t: nextWidth;\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...layout,\n\t\t\t\t\t\t\t\t\twideSize: nextWidth,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Icon icon={ stretchWide } />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"block-editor-hooks__layout-controls-reset\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tdisabled={ ! contentSize && ! wideSize }\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\tcontentSize: undefined,\n\t\t\t\t\t\t\t\twideSize: undefined,\n\t\t\t\t\t\t\t\tinherit: false,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\n\t\t\t\t<p className=\"block-editor-hooks__layout-controls-helptext\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Customize the width for all elements that are assigned to the center or wide columns.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function DefaultLayoutToolbarControls() {\n\t\treturn null;\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions,\n\t} ) {\n\t\tconst { contentSize, wideSize } = layout;\n\t\tconst blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );\n\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\tlet blockGapValue = '';\n\t\tif ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {\n\t\t\t// If an object is provided only use the 'top' value for this kind of gap.\n\t\t\tif ( blockGapStyleValue?.top ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue?.top );\n\t\t\t} else if ( typeof blockGapStyleValue === 'string' ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue );\n\t\t\t}\n\t\t}\n\n\t\tlet output =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors(\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t\t) } {\n\t\t\t\t\t\tmax-width: ${ contentSize ?? wideSize };\n\t\t\t\t\t\tmargin-left: auto !important;\n\t\t\t\t\t\tmargin-right: auto !important;\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignwide' ) }  {\n\t\t\t\t\t\tmax-width: ${ wideSize ?? contentSize };\n\t\t\t\t\t}\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmax-width: none;\n\t\t\t\t\t}\n\t\t\t\t`\n\t\t\t\t: '';\n\n\t\t// If there is custom padding, add negative margins for alignfull blocks.\n\t\tif ( style?.spacing?.padding ) {\n\t\t\t// The style object might be storing a preset so we need to make sure we get a usable value.\n\t\t\tconst paddingValues = getCSSRules( style );\n\t\t\tpaddingValues.forEach( ( rule ) => {\n\t\t\t\tif ( rule.key === 'paddingRight' ) {\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-right: calc(${ rule.value } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t} else if ( rule.key === 'paddingLeft' ) {\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-left: calc(${ rule.value } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'constrained',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tconst alignmentInfo = getAlignmentsInfo( layout );\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\tif ( ! layout.alignments.includes( 'none' ) ) {\n\t\t\t\tlayout.alignments.unshift( 'none' );\n\t\t\t}\n\t\t\treturn layout.alignments.map( ( alignment ) => ( {\n\t\t\t\tname: alignment,\n\t\t\t\tinfo: alignmentInfo[ alignment ],\n\t\t\t} ) );\n\t\t}\n\t\tconst { contentSize, wideSize } = layout;\n\n\t\tconst alignments = [\n\t\t\t{ name: 'left' },\n\t\t\t{ name: 'center' },\n\t\t\t{ name: 'right' },\n\t\t];\n\n\t\tif ( contentSize ) {\n\t\t\talignments.unshift( { name: 'full' } );\n\t\t}\n\n\t\tif ( wideSize ) {\n\t\t\talignments.unshift( { name: 'wide', info: alignmentInfo.wide } );\n\t\t}\n\n\t\talignments.unshift( { name: 'none', info: alignmentInfo.none } );\n\n\t\treturn alignments;\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/layouts/constrained.js"],"names":["__experimentalUseCustomUnits","useCustomUnits","__experimentalUnitControl","UnitControl","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOptionIcon","ToggleGroupControlOptionIcon","__","Icon","positionCenter","stretchWide","justifyLeft","justifyCenter","justifyRight","getCSSRules","useSetting","appendSelectors","getBlockGapCSS","getAlignmentsInfo","getGapCSSValue","shouldSkipSerialization","name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","justifyContent","onJustificationChange","value","justificationOptions","icon","units","availableUnits","nextWidth","parseFloat","map","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","marginLeft","marginRight","output","padding","paddingValues","forEach","rule","key","getOrientation","getAlignments","alignmentInfo","alignments","undefined","includes","unshift","alignment","info","wide","none"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tIcon,\n\tpositionCenter,\n\tstretchWide,\n\tjustifyLeft,\n\tjustifyCenter,\n\tjustifyRight,\n} from '@wordpress/icons';\nimport { getCSSRules } from '@wordpress/style-engine';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\nimport { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';\nimport { getGapCSSValue } from '../hooks/gap';\nimport { shouldSkipSerialization } from '../hooks/utils';\n\nexport default {\n\tname: 'constrained',\n\tlabel: __( 'Constrained' ),\n\tinspectorControls: function DefaultLayoutInspectorControls( {\n\t\tlayout,\n\t\tonChange,\n\t} ) {\n\t\tconst { wideSize, contentSize, justifyContent = 'center' } = layout;\n\t\tconst onJustificationChange = ( value ) => {\n\t\t\tonChange( {\n\t\t\t\t...layout,\n\t\t\t\tjustifyContent: value,\n\t\t\t} );\n\t\t};\n\t\tconst justificationOptions = [\n\t\t\t{\n\t\t\t\tvalue: 'left',\n\t\t\t\ticon: justifyLeft,\n\t\t\t\tlabel: __( 'Justify items left' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'center',\n\t\t\t\ticon: justifyCenter,\n\t\t\t\tlabel: __( 'Justify items center' ),\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'right',\n\t\t\t\ticon: justifyRight,\n\t\t\t\tlabel: __( 'Justify items right' ),\n\t\t\t},\n\t\t];\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\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<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\t<ToggleGroupControl\n\t\t\t\t\t__experimentalIsBorderless\n\t\t\t\t\tlabel={ __( 'Justification' ) }\n\t\t\t\t\tvalue={ justifyContent }\n\t\t\t\t\tonChange={ onJustificationChange }\n\t\t\t\t>\n\t\t\t\t\t{ justificationOptions.map( ( { value, icon, label } ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ToggleGroupControlOptionIcon\n\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\tlabel={ label }\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</ToggleGroupControl>\n\t\t\t</>\n\t\t);\n\t},\n\ttoolBarControls: function DefaultLayoutToolbarControls() {\n\t\treturn null;\n\t},\n\tgetLayoutStyle: function getLayoutStyle( {\n\t\tselector,\n\t\tlayout = {},\n\t\tstyle,\n\t\tblockName,\n\t\thasBlockGapSupport,\n\t\tlayoutDefinitions,\n\t} ) {\n\t\tconst { contentSize, wideSize, justifyContent } = layout;\n\t\tconst blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );\n\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\tlet blockGapValue = '';\n\t\tif ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {\n\t\t\t// If an object is provided only use the 'top' value for this kind of gap.\n\t\t\tif ( blockGapStyleValue?.top ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue?.top );\n\t\t\t} else if ( typeof blockGapStyleValue === 'string' ) {\n\t\t\t\tblockGapValue = getGapCSSValue( blockGapStyleValue );\n\t\t\t}\n\t\t}\n\n\t\tconst marginLeft =\n\t\t\tjustifyContent === 'left' ? '0 !important' : 'auto !important';\n\t\tconst marginRight =\n\t\t\tjustifyContent === 'right' ? '0 !important' : 'auto !important';\n\n\t\tlet output =\n\t\t\t!! contentSize || !! wideSize\n\t\t\t\t? `\n\t\t\t\t\t${ appendSelectors(\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t\t\t) } {\n\t\t\t\t\t\tmax-width: ${ contentSize ?? wideSize };\n\t\t\t\t\t\tmargin-left: ${ marginLeft };\n\t\t\t\t\t\tmargin-right: ${ marginRight };\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\tif ( justifyContent === 'left' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-left: ${ marginLeft }; }`;\n\t\t} else if ( justifyContent === 'right' ) {\n\t\t\toutput += `${ appendSelectors(\n\t\t\t\tselector,\n\t\t\t\t'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'\n\t\t\t) }\n\t\t\t{ margin-right: ${ marginRight }; }`;\n\t\t}\n\n\t\t// If there is custom padding, add negative margins for alignfull blocks.\n\t\tif ( style?.spacing?.padding ) {\n\t\t\t// The style object might be storing a preset so we need to make sure we get a usable value.\n\t\t\tconst paddingValues = getCSSRules( style );\n\t\t\tpaddingValues.forEach( ( rule ) => {\n\t\t\t\tif ( rule.key === 'paddingRight' ) {\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-right: calc(${ rule.value } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t} else if ( rule.key === 'paddingLeft' ) {\n\t\t\t\t\toutput += `\n\t\t\t\t\t${ appendSelectors( selector, '> .alignfull' ) } {\n\t\t\t\t\t\tmargin-left: calc(${ rule.value } * -1);\n\t\t\t\t\t}\n\t\t\t\t\t`;\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Output blockGap styles based on rules contained in layout definitions in theme.json.\n\t\tif ( hasBlockGapSupport && blockGapValue ) {\n\t\t\toutput += getBlockGapCSS(\n\t\t\t\tselector,\n\t\t\t\tlayoutDefinitions,\n\t\t\t\t'constrained',\n\t\t\t\tblockGapValue\n\t\t\t);\n\t\t}\n\t\treturn output;\n\t},\n\tgetOrientation() {\n\t\treturn 'vertical';\n\t},\n\tgetAlignments( layout ) {\n\t\tconst alignmentInfo = getAlignmentsInfo( layout );\n\t\tif ( layout.alignments !== undefined ) {\n\t\t\tif ( ! layout.alignments.includes( 'none' ) ) {\n\t\t\t\tlayout.alignments.unshift( 'none' );\n\t\t\t}\n\t\t\treturn layout.alignments.map( ( alignment ) => ( {\n\t\t\t\tname: alignment,\n\t\t\t\tinfo: alignmentInfo[ alignment ],\n\t\t\t} ) );\n\t\t}\n\t\tconst { contentSize, wideSize } = layout;\n\n\t\tconst alignments = [\n\t\t\t{ name: 'left' },\n\t\t\t{ name: 'center' },\n\t\t\t{ name: 'right' },\n\t\t];\n\n\t\tif ( contentSize ) {\n\t\t\talignments.unshift( { name: 'full' } );\n\t\t}\n\n\t\tif ( wideSize ) {\n\t\t\talignments.unshift( { name: 'wide', info: alignmentInfo.wide } );\n\t\t}\n\n\t\talignments.unshift( { name: 'none', info: alignmentInfo.none } );\n\n\t\treturn alignments;\n\t},\n};\n"]}

package/build-module/store/actions.js

@@ -1340,7 +1340,7 @@ export const __unstableMarkAutomaticChange = () => _ref18 => {
 /**
  * Action that enables or disables the navigation mode.
  *
- * @param {string} isNavigationMode Enable/Disable navigation mode.
+ * @param {boolean} isNavigationMode Enable/Disable navigation mode.
  */
 
 export const setNavigationMode = function () {
@@ -1349,18 +1349,44 @@ export const setNavigationMode = function () {
     let {
       dispatch
     } = _ref19;
-    dispatch({
-      type: 'SET_NAVIGATION_MODE',
-      isNavigationMode
-    });
 
-    if (isNavigationMode) {
-      speak(__('You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'));
-    } else {
-      speak(__('You are currently in edit mode. To return to the navigation mode, press Escape.'));
-    }
+    dispatch.__unstableSetEditorMode(isNavigationMode ? 'navigation' : 'edit');
   };
 };
+/**
+ * Action that sets the editor mode
+ *
+ * @param {string} mode Editor mode
+ */
+
+export const __unstableSetEditorMode = mode => _ref20 => {
+  let {
+    dispatch,
+    select
+  } = _ref20;
+
+  // When switching to zoom-out mode, we need to select the root block
+  if (mode === 'zoom-out') {
+    const firstSelectedClientId = select.getBlockSelectionStart();
+
+    if (firstSelectedClientId) {
+      dispatch.selectBlock(select.getBlockHierarchyRootClientId(firstSelectedClientId));
+    }
+  }
+
+  dispatch({
+    type: 'SET_EDITOR_MODE',
+    mode
+  });
+
+  if (mode === 'navigation') {
+    speak(__('You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'));
+  } else if (mode === 'edit') {
+    speak(__('You are currently in edit mode. To return to the navigation mode, press Escape.'));
+  } else if (mode === 'zoom-out') {
+    speak(__('You are currently in zoom-out mode.'));
+  }
+};
 /**
  * Action that enables or disables the block moving mode.
  *
@@ -1369,10 +1395,10 @@ export const setNavigationMode = function () {
 
 export const setBlockMovingClientId = function () {
   let hasBlockMovingClientId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  return _ref20 => {
+  return _ref21 => {
     let {
       dispatch
-    } = _ref20;
+    } = _ref21;
     dispatch({
       type: 'SET_BLOCK_MOVING_MODE',
       hasBlockMovingClientId
@@ -1392,11 +1418,11 @@ export const setBlockMovingClientId = function () {
 
 export const duplicateBlocks = function (clientIds) {
   let updateSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return _ref21 => {
+  return _ref22 => {
     let {
       select,
       dispatch
-    } = _ref21;
+    } = _ref22;
 
     if (!clientIds || !clientIds.length) {
       return;
@@ -1435,11 +1461,11 @@ export const duplicateBlocks = function (clientIds) {
  * @param {string} clientId
  */
 
-export const insertBeforeBlock = clientId => _ref22 => {
+export const insertBeforeBlock = clientId => _ref23 => {
   let {
     select,
     dispatch
-  } = _ref22;
+  } = _ref23;
 
   if (!clientId) {
     return;
@@ -1461,11 +1487,11 @@ export const insertBeforeBlock = clientId => _ref22 => {
  * @param {string} clientId
  */
 
-export const insertAfterBlock = clientId => _ref23 => {
+export const insertAfterBlock = clientId => _ref24 => {
   let {
     select,
     dispatch
-  } = _ref23;
+  } = _ref24;
 
   if (!clientId) {
     return;
@@ -1501,10 +1527,10 @@ export function toggleBlockHighlight(clientId, isHighlighted) {
  * @param {string} clientId Target block client ID.
  */
 
-export const flashBlock = clientId => async _ref24 => {
+export const flashBlock = clientId => async _ref25 => {
   let {
     dispatch
-  } = _ref24;
+  } = _ref25;
   dispatch(toggleBlockHighlight(clientId, true));
   await new Promise(resolve => setTimeout(resolve, 150));
   dispatch(toggleBlockHighlight(clientId, false));
@@ -1535,4 +1561,16 @@ export function setBlockVisibility(updates) {
     updates
   };
 }
+/**
+ * Action that sets whether a block is being temporaritly edited as blocks.
+ *
+ * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
+ */
+
+export function __unstableSetTemporarilyEditingAsBlocks(temporarilyEditingAsBlocks) {
+  return {
+    type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
+    temporarilyEditingAsBlocks
+  };
+}
 //# sourceMappingURL=actions.js.map