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

package/build/layouts/constrained.js

@@ -42,8 +42,29 @@ var _default = {
     } = _ref;
     const {
       wideSize,
-      contentSize
+      contentSize,
+      justifyContent = 'center'
     } = layout;
+
+    const onJustificationChange = value => {
+      onChange({ ...layout,
+        justifyContent: value
+      });
+    };
+
+    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')
+    }];
     const units = (0, _components.__experimentalUseCustomUnits)({
       availableUnits: (0, _useSetting.default)('spacing.units') || ['%', 'px', 'em', 'rem', 'vw']
     });
@@ -81,25 +102,31 @@ var _default = {
       units: units
     }), (0, _element.createElement)(_icons.Icon, {
       icon: _icons.stretchWide
-    }))), (0, _element.createElement)("div", {
-      className: "block-editor-hooks__layout-controls-reset"
-    }, (0, _element.createElement)(_components.Button, {
-      variant: "secondary",
-      isSmall: true,
-      disabled: !contentSize && !wideSize,
-      onClick: () => onChange({
-        contentSize: undefined,
-        wideSize: undefined,
-        inherit: false
-      })
-    }, (0, _i18n.__)('Reset'))), (0, _element.createElement)("p", {
+    }))), (0, _element.createElement)("p", {
       className: "block-editor-hooks__layout-controls-helptext"
-    }, (0, _i18n.__)('Customize the width for all elements that are assigned to the center or wide columns.')));
+    }, (0, _i18n.__)('Customize the width for all elements that are assigned to the center or wide columns.')), (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+      __experimentalIsBorderless: true,
+      label: (0, _i18n.__)('Justification'),
+      value: justifyContent,
+      onChange: onJustificationChange
+    }, justificationOptions.map(_ref2 => {
+      let {
+        value,
+        icon,
+        label
+      } = _ref2;
+      return (0, _element.createElement)(_components.__experimentalToggleGroupControlOptionIcon, {
+        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 {
@@ -109,10 +136,11 @@ var _default = {
       blockName,
       hasBlockGapSupport,
       layoutDefinitions
-    } = _ref2;
+    } = _ref3;
     const {
       contentSize,
-      wideSize
+      wideSize,
+      justifyContent
     } = layout;
     const blockGapStyleValue = (0, _gap.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.
@@ -128,11 +156,13 @@ var _default = {
       }
     }
 
+    const marginLeft = justifyContent === 'left' ? '0 !important' : 'auto !important';
+    const marginRight = justifyContent === 'right' ? '0 !important' : 'auto !important';
     let output = !!contentSize || !!wideSize ? `
 					${(0, _utils.appendSelectors)(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')} {
 						max-width: ${contentSize !== null && contentSize !== void 0 ? contentSize : wideSize};
-						margin-left: auto !important;
-						margin-right: auto !important;
+						margin-left: ${marginLeft};
+						margin-right: ${marginRight}t;
 					}
 					${(0, _utils.appendSelectors)(selector, '> .alignwide')}  {
 						max-width: ${wideSize !== null && wideSize !== void 0 ? wideSize : contentSize};
@@ -140,7 +170,16 @@ var _default = {
 					${(0, _utils.appendSelectors)(selector, '> .alignfull')} {
 						max-width: none;
 					}
-				` : ''; // If there is custom padding, add negative margins for alignfull blocks.
+				` : '';
+
+    if (justifyContent === 'left') {
+      output += `${(0, _utils.appendSelectors)(selector, '> :where(:not(.alignleft):not(.alignright):not(.alignfull))')}
+			{ margin-left: ${marginLeft}; }`;
+    } else if (justifyContent === 'right') {
+      output += `${(0, _utils.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/layouts/constrained.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/layouts/constrained.js"],"names":["name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","units","availableUnits","nextWidth","parseFloat","positionCenter","stretchWide","undefined","inherit","toolBarControls","DefaultLayoutToolbarControls","getLayoutStyle","selector","style","blockName","hasBlockGapSupport","layoutDefinitions","blockGapStyleValue","spacing","blockGap","blockGapValue","top","output","padding","paddingValues","forEach","rule","key","value","getOrientation","getAlignments","alignmentInfo","alignments","includes","unshift","map","alignment","info","wide","none"],"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';\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":["name","label","inspectorControls","DefaultLayoutInspectorControls","layout","onChange","wideSize","contentSize","justifyContent","onJustificationChange","value","justificationOptions","icon","justifyLeft","justifyCenter","justifyRight","units","availableUnits","nextWidth","parseFloat","positionCenter","stretchWide","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":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AAQA;;AAKA;;AACA;;AACA;;AACA;;AA1BA;AACA;AACA;;AAkBA;AACA;AACA;eAMe;AACdA,EAAAA,IAAI,EAAE,aADQ;AAEdC,EAAAA,KAAK,EAAE,cAAI,aAAJ,CAFO;AAGdC,EAAAA,iBAAiB,EAAE,SAASC,8BAAT,OAGf;AAAA,QAHwD;AAC3DC,MAAAA,MAD2D;AAE3DC,MAAAA;AAF2D,KAGxD;AACH,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,WAAZ;AAAyBC,MAAAA,cAAc,GAAG;AAA1C,QAAuDJ,MAA7D;;AACA,UAAMK,qBAAqB,GAAKC,KAAF,IAAa;AAC1CL,MAAAA,QAAQ,CAAE,EACT,GAAGD,MADM;AAETI,QAAAA,cAAc,EAAEE;AAFP,OAAF,CAAR;AAIA,KALD;;AAMA,UAAMC,oBAAoB,GAAG,CAC5B;AACCD,MAAAA,KAAK,EAAE,MADR;AAECE,MAAAA,IAAI,EAAEC,kBAFP;AAGCZ,MAAAA,KAAK,EAAE,cAAI,oBAAJ;AAHR,KAD4B,EAM5B;AACCS,MAAAA,KAAK,EAAE,QADR;AAECE,MAAAA,IAAI,EAAEE,oBAFP;AAGCb,MAAAA,KAAK,EAAE,cAAI,sBAAJ;AAHR,KAN4B,EAW5B;AACCS,MAAAA,KAAK,EAAE,OADR;AAECE,MAAAA,IAAI,EAAEG,mBAFP;AAGCd,MAAAA,KAAK,EAAE,cAAI,qBAAJ;AAHR,KAX4B,CAA7B;AAiBA,UAAMe,KAAK,GAAG,8CAAgB;AAC7BC,MAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAChD,GADgD,EAEhD,IAFgD,EAGhD,IAHgD,EAIhD,KAJgD,EAKhD,IALgD;AADpB,KAAhB,CAAd;AASA,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,EAAGV,WAAW,IAAID,QAAf,IAA2B,EAJpC;AAKC,MAAA,QAAQ,EAAKY,SAAF,IAAiB;AAC3BA,QAAAA,SAAS,GACR,IAAIC,UAAU,CAAED,SAAF,CAAd,GACG,GADH,GAEGA,SAHJ;AAIAb,QAAAA,QAAQ,CAAE,EACT,GAAGD,MADM;AAETG,UAAAA,WAAW,EAAEW;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,EAAGd,QAAQ,IAAIC,WAAZ,IAA2B,EAJpC;AAKC,MAAA,QAAQ,EAAKW,SAAF,IAAiB;AAC3BA,QAAAA,SAAS,GACR,IAAIC,UAAU,CAAED,SAAF,CAAd,GACG,GADH,GAEGA,SAHJ;AAIAb,QAAAA,QAAQ,CAAE,EACT,GAAGD,MADM;AAETE,UAAAA,QAAQ,EAAEY;AAFD,SAAF,CAAR;AAIA,OAdF;AAeC,MAAA,KAAK,EAAGF;AAfT,MADD,EAkBC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAGK;AAAb,MAlBD,CArBD,CADD,EA2CC;AAAG,MAAA,SAAS,EAAC;AAAb,OACG,cACD,uFADC,CADH,CA3CD,EAgDC,4BAAC,4CAAD;AACC,MAAA,0BAA0B,MAD3B;AAEC,MAAA,KAAK,EAAG,cAAI,eAAJ,CAFT;AAGC,MAAA,KAAK,EAAGb,cAHT;AAIC,MAAA,QAAQ,EAAGC;AAJZ,OAMGE,oBAAoB,CAACW,GAArB,CAA0B,SAA8B;AAAA,UAA5B;AAAEZ,QAAAA,KAAF;AAASE,QAAAA,IAAT;AAAeX,QAAAA;AAAf,OAA4B;AACzD,aACC,4BAAC,sDAAD;AACC,QAAA,GAAG,EAAGS,KADP;AAEC,QAAA,KAAK,EAAGA,KAFT;AAGC,QAAA,IAAI,EAAGE,IAHR;AAIC,QAAA,KAAK,EAAGX;AAJT,QADD;AAQA,KATC,CANH,CAhDD,CADD;AAoEA,GA5Ga;AA6GdsB,EAAAA,eAAe,EAAE,SAASC,4BAAT,GAAwC;AACxD,WAAO,IAAP;AACA,GA/Ga;AAgHdC,EAAAA,cAAc,EAAE,SAASA,cAAT,QAOZ;AAAA;;AAAA,QAPqC;AACxCC,MAAAA,QADwC;AAExCtB,MAAAA,MAAM,GAAG,EAF+B;AAGxCuB,MAAAA,KAHwC;AAIxCC,MAAAA,SAJwC;AAKxCC,MAAAA,kBALwC;AAMxCC,MAAAA;AANwC,KAOrC;AACH,UAAM;AAAEvB,MAAAA,WAAF;AAAeD,MAAAA,QAAf;AAAyBE,MAAAA;AAAzB,QAA4CJ,MAAlD;AACA,UAAM2B,kBAAkB,GAAG,yBAAgBJ,KAAhB,aAAgBA,KAAhB,yCAAgBA,KAAK,CAAEK,OAAvB,mDAAgB,eAAgBC,QAAhC,CAA3B,CAFG,CAIH;AACA;;AACA,QAAIC,aAAa,GAAG,EAApB;;AACA,QAAK,CAAE,qCAAyBN,SAAzB,EAAoC,SAApC,EAA+C,UAA/C,CAAP,EAAqE;AACpE;AACA,UAAKG,kBAAL,aAAKA,kBAAL,eAAKA,kBAAkB,CAAEI,GAAzB,EAA+B;AAC9BD,QAAAA,aAAa,GAAG,yBAAgBH,kBAAhB,aAAgBA,kBAAhB,uBAAgBA,kBAAkB,CAAEI,GAApC,CAAhB;AACA,OAFD,MAEO,IAAK,OAAOJ,kBAAP,KAA8B,QAAnC,EAA8C;AACpDG,QAAAA,aAAa,GAAG,yBAAgBH,kBAAhB,CAAhB;AACA;AACD;;AAED,UAAMK,UAAU,GACf5B,cAAc,KAAK,MAAnB,GAA4B,cAA5B,GAA6C,iBAD9C;AAEA,UAAM6B,WAAW,GAChB7B,cAAc,KAAK,OAAnB,GAA6B,cAA7B,GAA8C,iBAD/C;AAGA,QAAI8B,MAAM,GACT,CAAC,CAAE/B,WAAH,IAAkB,CAAC,CAAED,QAArB,GACI;AACP,OAAQ,4BACFoB,QADE,EAEF,6DAFE,CAGA;AACR,mBAAoBnB,WALd,aAKcA,WALd,cAKcA,WALd,GAK6BD,QAAU;AAC7C,qBAAsB8B,UAAY;AAClC,sBAAuBC,WAAa;AACpC;AACA,OAAQ,4BAAiBX,QAAjB,EAA2B,cAA3B,CAA6C;AACrD,mBAAoBpB,QAVd,aAUcA,QAVd,cAUcA,QAVd,GAU0BC,WAAa;AAC7C;AACA,OAAQ,4BAAiBmB,QAAjB,EAA2B,cAA3B,CAA6C;AACrD;AACA;AACA,KAhBG,GAiBG,EAlBJ;;AAoBA,QAAKlB,cAAc,KAAK,MAAxB,EAAiC;AAChC8B,MAAAA,MAAM,IAAK,GAAG,4BACbZ,QADa,EAEb,6DAFa,CAGX;AACN,oBAAqBU,UAAY,KAJ9B;AAKA,KAND,MAMO,IAAK5B,cAAc,KAAK,OAAxB,EAAkC;AACxC8B,MAAAA,MAAM,IAAK,GAAG,4BACbZ,QADa,EAEb,6DAFa,CAGX;AACN,qBAAsBW,WAAa,KAJhC;AAKA,KArDE,CAuDH;;;AACA,QAAKV,KAAL,aAAKA,KAAL,kCAAKA,KAAK,CAAEK,OAAZ,4CAAK,gBAAgBO,OAArB,EAA+B;AAC9B;AACA,YAAMC,aAAa,GAAG,8BAAab,KAAb,CAAtB;AACAa,MAAAA,aAAa,CAACC,OAAd,CAAyBC,IAAF,IAAY;AAClC,YAAKA,IAAI,CAACC,GAAL,KAAa,cAAlB,EAAmC;AAClCL,UAAAA,MAAM,IAAK;AAChB,OAAQ,4BAAiBZ,QAAjB,EAA2B,cAA3B,CAA6C;AACrD,2BAA4BgB,IAAI,CAAChC,KAAO;AACxC;AACA,MAJK;AAKA,SAND,MAMO,IAAKgC,IAAI,CAACC,GAAL,KAAa,aAAlB,EAAkC;AACxCL,UAAAA,MAAM,IAAK;AAChB,OAAQ,4BAAiBZ,QAAjB,EAA2B,cAA3B,CAA6C;AACrD,0BAA2BgB,IAAI,CAAChC,KAAO;AACvC;AACA,MAJK;AAKA;AACD,OAdD;AAeA,KA1EE,CA4EH;;;AACA,QAAKmB,kBAAkB,IAAIK,aAA3B,EAA2C;AAC1CI,MAAAA,MAAM,IAAI,2BACTZ,QADS,EAETI,iBAFS,EAGT,aAHS,EAITI,aAJS,CAAV;AAMA;;AACD,WAAOI,MAAP;AACA,GA7Ma;;AA8MdM,EAAAA,cAAc,GAAG;AAChB,WAAO,UAAP;AACA,GAhNa;;AAiNdC,EAAAA,aAAa,CAAEzC,MAAF,EAAW;AACvB,UAAM0C,aAAa,GAAG,8BAAmB1C,MAAnB,CAAtB;;AACA,QAAKA,MAAM,CAAC2C,UAAP,KAAsBC,SAA3B,EAAuC;AACtC,UAAK,CAAE5C,MAAM,CAAC2C,UAAP,CAAkBE,QAAlB,CAA4B,MAA5B,CAAP,EAA8C;AAC7C7C,QAAAA,MAAM,CAAC2C,UAAP,CAAkBG,OAAlB,CAA2B,MAA3B;AACA;;AACD,aAAO9C,MAAM,CAAC2C,UAAP,CAAkBzB,GAAlB,CAAyB6B,SAAF,KAAmB;AAChDnD,QAAAA,IAAI,EAAEmD,SAD0C;AAEhDC,QAAAA,IAAI,EAAEN,aAAa,CAAEK,SAAF;AAF6B,OAAnB,CAAvB,CAAP;AAIA;;AACD,UAAM;AAAE5C,MAAAA,WAAF;AAAeD,MAAAA;AAAf,QAA4BF,MAAlC;AAEA,UAAM2C,UAAU,GAAG,CAClB;AAAE/C,MAAAA,IAAI,EAAE;AAAR,KADkB,EAElB;AAAEA,MAAAA,IAAI,EAAE;AAAR,KAFkB,EAGlB;AAAEA,MAAAA,IAAI,EAAE;AAAR,KAHkB,CAAnB;;AAMA,QAAKO,WAAL,EAAmB;AAClBwC,MAAAA,UAAU,CAACG,OAAX,CAAoB;AAAElD,QAAAA,IAAI,EAAE;AAAR,OAApB;AACA;;AAED,QAAKM,QAAL,EAAgB;AACfyC,MAAAA,UAAU,CAACG,OAAX,CAAoB;AAAElD,QAAAA,IAAI,EAAE,MAAR;AAAgBoD,QAAAA,IAAI,EAAEN,aAAa,CAACO;AAApC,OAApB;AACA;;AAEDN,IAAAA,UAAU,CAACG,OAAX,CAAoB;AAAElD,MAAAA,IAAI,EAAE,MAAR;AAAgBoD,MAAAA,IAAI,EAAEN,aAAa,CAACQ;AAApC,KAApB;AAEA,WAAOP,UAAP;AACA;;AA/Oa,C","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 }t;\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/store/actions.js

@@ -9,6 +9,8 @@ exports.__unstableMarkAutomaticChange = exports.__unstableExpandSelection = expo
 exports.__unstableMarkLastChangeAsPersistent = __unstableMarkLastChangeAsPersistent;
 exports.__unstableMarkNextChangeAsNotPersistent = __unstableMarkNextChangeAsNotPersistent;
 exports.__unstableSaveReusableBlock = __unstableSaveReusableBlock;
+exports.__unstableSetEditorMode = void 0;
+exports.__unstableSetTemporarilyEditingAsBlocks = __unstableSetTemporarilyEditingAsBlocks;
 exports.__unstableSplitSelection = void 0;
 exports.clearSelectedBlock = clearSelectedBlock;
 exports.duplicateBlocks = void 0;
@@ -1479,7 +1481,7 @@ 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.
  */
 
 
@@ -1491,18 +1493,47 @@ const setNavigationMode = function () {
     let {
       dispatch
     } = _ref19;
-    dispatch({
-      type: 'SET_NAVIGATION_MODE',
-      isNavigationMode
-    });
 
-    if (isNavigationMode) {
-      (0, _a11y.speak)((0, _i18n.__)('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 {
-      (0, _a11y.speak)((0, _i18n.__)('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
+ */
+
+
+exports.setNavigationMode = setNavigationMode;
+
+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') {
+    (0, _a11y.speak)((0, _i18n.__)('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') {
+    (0, _a11y.speak)((0, _i18n.__)('You are currently in edit mode. To return to the navigation mode, press Escape.'));
+  } else if (mode === 'zoom-out') {
+    (0, _a11y.speak)((0, _i18n.__)('You are currently in zoom-out mode.'));
+  }
+};
 /**
  * Action that enables or disables the block moving mode.
  *
@@ -1510,14 +1541,14 @@ const setNavigationMode = function () {
  */
 
 
-exports.setNavigationMode = setNavigationMode;
+exports.__unstableSetEditorMode = __unstableSetEditorMode;
 
 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
@@ -1540,11 +1571,11 @@ exports.setBlockMovingClientId = setBlockMovingClientId;
 
 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;
@@ -1586,11 +1617,11 @@ const duplicateBlocks = function (clientIds) {
 
 exports.duplicateBlocks = duplicateBlocks;
 
-const insertBeforeBlock = clientId => _ref22 => {
+const insertBeforeBlock = clientId => _ref23 => {
   let {
     select,
     dispatch
-  } = _ref22;
+  } = _ref23;
 
   if (!clientId) {
     return;
@@ -1615,11 +1646,11 @@ const insertBeforeBlock = clientId => _ref22 => {
 
 exports.insertBeforeBlock = insertBeforeBlock;
 
-const insertAfterBlock = clientId => _ref23 => {
+const insertAfterBlock = clientId => _ref24 => {
   let {
     select,
     dispatch
-  } = _ref23;
+  } = _ref24;
 
   if (!clientId) {
     return;
@@ -1659,10 +1690,10 @@ function toggleBlockHighlight(clientId, isHighlighted) {
  */
 
 
-const flashBlock = clientId => async _ref24 => {
+const flashBlock = clientId => async _ref25 => {
   let {
     dispatch
-  } = _ref24;
+  } = _ref25;
   dispatch(toggleBlockHighlight(clientId, true));
   await new Promise(resolve => setTimeout(resolve, 150));
   dispatch(toggleBlockHighlight(clientId, false));
@@ -1697,4 +1728,17 @@ 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.
+ */
+
+
+function __unstableSetTemporarilyEditingAsBlocks(temporarilyEditingAsBlocks) {
+  return {
+    type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
+    temporarilyEditingAsBlocks
+  };
+}
 //# sourceMappingURL=actions.js.map