@wordpress/block-library 9.24.0 → 9.25.0

package/build-module/list/ordered-list-settings.js

@@ -3,67 +3,146 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { TextControl, PanelBody, ToggleControl, SelectControl } from '@wordpress/components';
+import { TextControl, PanelBody, ToggleControl, SelectControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LIST_STYLE_OPTIONS = [{
+  label: __('Numbers'),
+  value: 'decimal'
+}, {
+  label: __('Uppercase letters'),
+  value: 'upper-alpha'
+}, {
+  label: __('Lowercase letters'),
+  value: 'lower-alpha'
+}, {
+  label: __('Uppercase Roman numerals'),
+  value: 'upper-roman'
+}, {
+  label: __('Lowercase Roman numerals'),
+  value: 'lower-roman'
+}];
 const OrderedListSettings = ({
   setAttributes,
   reversed,
   start,
   type
-}) => /*#__PURE__*/_jsx(InspectorControls, {
-  children: /*#__PURE__*/_jsxs(PanelBody, {
-    title: __('Settings'),
-    children: [/*#__PURE__*/_jsx(SelectControl, {
-      __next40pxDefaultSize: true,
-      __nextHasNoMarginBottom: true,
-      label: __('List style'),
-      options: [{
-        label: __('Numbers'),
-        value: 'decimal'
-      }, {
-        label: __('Uppercase letters'),
-        value: 'upper-alpha'
-      }, {
-        label: __('Lowercase letters'),
-        value: 'lower-alpha'
-      }, {
-        label: __('Uppercase Roman numerals'),
-        value: 'upper-roman'
-      }, {
-        label: __('Lowercase Roman numerals'),
-        value: 'lower-roman'
-      }],
-      value: type,
-      onChange: newValue => setAttributes({
-        type: newValue
-      })
-    }), /*#__PURE__*/_jsx(TextControl, {
-      __next40pxDefaultSize: true,
-      __nextHasNoMarginBottom: true,
-      label: __('Start value'),
-      type: "number",
-      onChange: value => {
-        const int = parseInt(value, 10);
+}) => {
+  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+  return /*#__PURE__*/_jsx(InspectorControls, {
+    children: Platform.isNative ? /*#__PURE__*/_jsxs(PanelBody, {
+      title: __('Settings'),
+      children: [/*#__PURE__*/_jsx(SelectControl, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        label: __('List style'),
+        options: LIST_STYLE_OPTIONS,
+        value: type,
+        onChange: newValue => setAttributes({
+          type: newValue
+        })
+      }), /*#__PURE__*/_jsx(TextControl, {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        label: __('Start value'),
+        type: "number",
+        onChange: value => {
+          const int = parseInt(value, 10);
+          setAttributes({
+            // It should be possible to unset the value,
+            // e.g. with an empty string.
+            start: isNaN(int) ? undefined : int
+          });
+        },
+        value: Number.isInteger(start) ? start.toString(10) : '',
+        step: "1"
+      }), /*#__PURE__*/_jsx(ToggleControl, {
+        __nextHasNoMarginBottom: true,
+        label: __('Reverse order'),
+        checked: reversed || false,
+        onChange: value => {
+          setAttributes({
+            // Unset the attribute if not reversed.
+            reversed: value || undefined
+          });
+        }
+      })]
+    }) : /*#__PURE__*/_jsxs(ToolsPanel, {
+      label: __('Settings'),
+      resetAll: () => {
         setAttributes({
-          // It should be possible to unset the value,
-          // e.g. with an empty string.
-          start: isNaN(int) ? undefined : int
+          type: undefined,
+          start: undefined,
+          reversed: undefined
         });
       },
-      value: Number.isInteger(start) ? start.toString(10) : '',
-      step: "1"
-    }), /*#__PURE__*/_jsx(ToggleControl, {
-      __nextHasNoMarginBottom: true,
-      label: __('Reverse order'),
-      checked: reversed || false,
-      onChange: value => {
-        setAttributes({
-          // Unset the attribute if not reversed.
-          reversed: value || undefined
-        });
-      }
-    })]
-  })
-});
+      dropdownMenuProps: dropdownMenuProps,
+      children: [/*#__PURE__*/_jsx(ToolsPanelItem, {
+        label: __('List style'),
+        isShownByDefault: true,
+        hasValue: () => !!type,
+        onDeselect: () => setAttributes({
+          type: undefined
+        }),
+        children: /*#__PURE__*/_jsx(SelectControl, {
+          __next40pxDefaultSize: true,
+          __nextHasNoMarginBottom: true,
+          label: __('List style'),
+          options: LIST_STYLE_OPTIONS,
+          value: type || 'decimal',
+          onChange: newValue => setAttributes({
+            type: newValue
+          })
+        })
+      }), /*#__PURE__*/_jsx(ToolsPanelItem, {
+        label: __('Start value'),
+        isShownByDefault: true,
+        hasValue: () => !!start,
+        onDeselect: () => setAttributes({
+          start: undefined
+        }),
+        children: /*#__PURE__*/_jsx(TextControl, {
+          __next40pxDefaultSize: true,
+          __nextHasNoMarginBottom: true,
+          label: __('Start value'),
+          type: "number",
+          onChange: value => {
+            const int = parseInt(value, 10);
+            setAttributes({
+              // It should be possible to unset the value,
+              // e.g. with an empty string.
+              start: isNaN(int) ? undefined : int
+            });
+          },
+          value: Number.isInteger(start) ? start.toString(10) : '',
+          step: "1"
+        })
+      }), /*#__PURE__*/_jsx(ToolsPanelItem, {
+        label: __('Reverse order'),
+        isShownByDefault: true,
+        hasValue: () => !!reversed,
+        onDeselect: () => setAttributes({
+          reversed: undefined
+        }),
+        children: /*#__PURE__*/_jsx(ToggleControl, {
+          __nextHasNoMarginBottom: true,
+          label: __('Reverse order'),
+          checked: reversed || false,
+          onChange: value => {
+            setAttributes({
+              // Unset the attribute if not reversed.
+              reversed: value || undefined
+            });
+          }
+        })
+      })]
+    })
+  });
+};
 export default OrderedListSettings;
 //# sourceMappingURL=ordered-list-settings.js.map

package/build-module/list/ordered-list-settings.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","InspectorControls","TextControl","PanelBody","ToggleControl","SelectControl","jsx","_jsx","jsxs","_jsxs","OrderedListSettings","setAttributes","reversed","start","type","children","title","__next40pxDefaultSize","__nextHasNoMarginBottom","label","options","value","onChange","newValue","int","parseInt","isNaN","undefined","Number","isInteger","toString","step","checked"],"sources":["@wordpress/block-library/src/list/ordered-list-settings.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { InspectorControls } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tPanelBody,\n\tToggleControl,\n\tSelectControl,\n} from '@wordpress/components';\n\nconst OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (\n\t<InspectorControls>\n\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'List style' ) }\n\t\t\t\toptions={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Numbers' ),\n\t\t\t\t\t\tvalue: 'decimal',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Uppercase letters' ),\n\t\t\t\t\t\tvalue: 'upper-alpha',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Lowercase letters' ),\n\t\t\t\t\t\tvalue: 'lower-alpha',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Uppercase Roman numerals' ),\n\t\t\t\t\t\tvalue: 'upper-roman',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: __( 'Lowercase Roman numerals' ),\n\t\t\t\t\t\tvalue: 'lower-roman',\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t\tvalue={ type }\n\t\t\t\tonChange={ ( newValue ) => setAttributes( { type: newValue } ) }\n\t\t\t/>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Start value' ) }\n\t\t\t\ttype=\"number\"\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst int = parseInt( value, 10 );\n\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t// It should be possible to unset the value,\n\t\t\t\t\t\t// e.g. with an empty string.\n\t\t\t\t\t\tstart: isNaN( int ) ? undefined : int,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tvalue={ Number.isInteger( start ) ? start.toString( 10 ) : '' }\n\t\t\t\tstep=\"1\"\n\t\t\t/>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Reverse order' ) }\n\t\t\t\tchecked={ reversed || false }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t// Unset the attribute if not reversed.\n\t\t\t\t\t\treversed: value || undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</PanelBody>\n\t</InspectorControls>\n);\n\nexport default OrderedListSettings;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SACCC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,aAAa,QACP,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/B,MAAMC,mBAAmB,GAAGA,CAAE;EAAEC,aAAa;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAK,CAAC,kBACrEP,IAAA,CAACN,iBAAiB;EAAAc,QAAA,eACjBN,KAAA,CAACN,SAAS;IAACa,KAAK,EAAGhB,EAAE,CAAE,UAAW,CAAG;IAAAe,QAAA,gBACpCR,IAAA,CAACF,aAAa;MACbY,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAGnB,EAAE,CAAE,YAAa,CAAG;MAC5BoB,OAAO,EAAG,CACT;QACCD,KAAK,EAAEnB,EAAE,CAAE,SAAU,CAAC;QACtBqB,KAAK,EAAE;MACR,CAAC,EACD;QACCF,KAAK,EAAEnB,EAAE,CAAE,mBAAoB,CAAC;QAChCqB,KAAK,EAAE;MACR,CAAC,EACD;QACCF,KAAK,EAAEnB,EAAE,CAAE,mBAAoB,CAAC;QAChCqB,KAAK,EAAE;MACR,CAAC,EACD;QACCF,KAAK,EAAEnB,EAAE,CAAE,0BAA2B,CAAC;QACvCqB,KAAK,EAAE;MACR,CAAC,EACD;QACCF,KAAK,EAAEnB,EAAE,CAAE,0BAA2B,CAAC;QACvCqB,KAAK,EAAE;MACR,CAAC,CACC;MACHA,KAAK,EAAGP,IAAM;MACdQ,QAAQ,EAAKC,QAAQ,IAAMZ,aAAa,CAAE;QAAEG,IAAI,EAAES;MAAS,CAAE;IAAG,CAChE,CAAC,eACFhB,IAAA,CAACL,WAAW;MACXe,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAGnB,EAAE,CAAE,aAAc,CAAG;MAC7Bc,IAAI,EAAC,QAAQ;MACbQ,QAAQ,EAAKD,KAAK,IAAM;QACvB,MAAMG,GAAG,GAAGC,QAAQ,CAAEJ,KAAK,EAAE,EAAG,CAAC;QAEjCV,aAAa,CAAE;UACd;UACA;UACAE,KAAK,EAAEa,KAAK,CAAEF,GAAI,CAAC,GAAGG,SAAS,GAAGH;QACnC,CAAE,CAAC;MACJ,CAAG;MACHH,KAAK,EAAGO,MAAM,CAACC,SAAS,CAAEhB,KAAM,CAAC,GAAGA,KAAK,CAACiB,QAAQ,CAAE,EAAG,CAAC,GAAG,EAAI;MAC/DC,IAAI,EAAC;IAAG,CACR,CAAC,eACFxB,IAAA,CAACH,aAAa;MACbc,uBAAuB;MACvBC,KAAK,EAAGnB,EAAE,CAAE,eAAgB,CAAG;MAC/BgC,OAAO,EAAGpB,QAAQ,IAAI,KAAO;MAC7BU,QAAQ,EAAKD,KAAK,IAAM;QACvBV,aAAa,CAAE;UACd;UACAC,QAAQ,EAAES,KAAK,IAAIM;QACpB,CAAE,CAAC;MACJ;IAAG,CACH,CAAC;EAAA,CACQ;AAAC,CACM,CACnB;AAED,eAAejB,mBAAmB","ignoreList":[]}
+{"version":3,"names":["__","InspectorControls","TextControl","PanelBody","ToggleControl","SelectControl","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","Platform","useToolsPanelDropdownMenuProps","jsx","_jsx","jsxs","_jsxs","LIST_STYLE_OPTIONS","label","value","OrderedListSettings","setAttributes","reversed","start","type","dropdownMenuProps","children","isNative","title","__next40pxDefaultSize","__nextHasNoMarginBottom","options","onChange","newValue","int","parseInt","isNaN","undefined","Number","isInteger","toString","step","checked","resetAll","isShownByDefault","hasValue","onDeselect"],"sources":["@wordpress/block-library/src/list/ordered-list-settings.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { InspectorControls } from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tPanelBody,\n\tToggleControl,\n\tSelectControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst LIST_STYLE_OPTIONS = [\n\t{\n\t\tlabel: __( 'Numbers' ),\n\t\tvalue: 'decimal',\n\t},\n\t{\n\t\tlabel: __( 'Uppercase letters' ),\n\t\tvalue: 'upper-alpha',\n\t},\n\t{\n\t\tlabel: __( 'Lowercase letters' ),\n\t\tvalue: 'lower-alpha',\n\t},\n\t{\n\t\tlabel: __( 'Uppercase Roman numerals' ),\n\t\tvalue: 'upper-roman',\n\t},\n\t{\n\t\tlabel: __( 'Lowercase Roman numerals' ),\n\t\tvalue: 'lower-roman',\n\t},\n];\n\nconst OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t{ Platform.isNative ? (\n\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'List style' ) }\n\t\t\t\t\t\toptions={ LIST_STYLE_OPTIONS }\n\t\t\t\t\t\tvalue={ type }\n\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\tsetAttributes( { type: newValue } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Start value' ) }\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tconst int = parseInt( value, 10 );\n\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t// It should be possible to unset the value,\n\t\t\t\t\t\t\t\t// e.g. with an empty string.\n\t\t\t\t\t\t\t\tstart: isNaN( int ) ? undefined : int,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tNumber.isInteger( start )\n\t\t\t\t\t\t\t\t? start.toString( 10 )\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Reverse order' ) }\n\t\t\t\t\t\tchecked={ reversed || false }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t// Unset the attribute if not reversed.\n\t\t\t\t\t\t\t\treversed: value || undefined,\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</PanelBody>\n\t\t\t) : (\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\ttype: undefined,\n\t\t\t\t\t\t\tstart: undefined,\n\t\t\t\t\t\t\treversed: undefined,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'List style' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! type }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\ttype: undefined,\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<SelectControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ __( 'List style' ) }\n\t\t\t\t\t\t\toptions={ LIST_STYLE_OPTIONS }\n\t\t\t\t\t\t\tvalue={ type || 'decimal' }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { type: newValue } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Start value' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! start }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tstart: undefined,\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<TextControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ __( 'Start value' ) }\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tconst int = parseInt( value, 10 );\n\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t// It should be possible to unset the value,\n\t\t\t\t\t\t\t\t\t// e.g. with an empty string.\n\t\t\t\t\t\t\t\t\tstart: isNaN( int ) ? undefined : int,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tNumber.isInteger( start )\n\t\t\t\t\t\t\t\t\t? start.toString( 10 )\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Reverse order' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! reversed }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\treversed: undefined,\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<ToggleControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ __( 'Reverse order' ) }\n\t\t\t\t\t\t\tchecked={ reversed || false }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t// Unset the attribute if not reversed.\n\t\t\t\t\t\t\t\t\treversed: value || undefined,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n};\n\nexport default OrderedListSettings;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SACCC,WAAW,EACXC,SAAS,EACTC,aAAa,EACbC,aAAa,EACbC,wBAAwB,IAAIC,UAAU,EACtCC,4BAA4B,IAAIC,cAAc,QACxC,uBAAuB;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;;AAE7C;AACA;AACA;AACA,SAASC,8BAA8B,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhE,MAAMC,kBAAkB,GAAG,CAC1B;EACCC,KAAK,EAAEjB,EAAE,CAAE,SAAU,CAAC;EACtBkB,KAAK,EAAE;AACR,CAAC,EACD;EACCD,KAAK,EAAEjB,EAAE,CAAE,mBAAoB,CAAC;EAChCkB,KAAK,EAAE;AACR,CAAC,EACD;EACCD,KAAK,EAAEjB,EAAE,CAAE,mBAAoB,CAAC;EAChCkB,KAAK,EAAE;AACR,CAAC,EACD;EACCD,KAAK,EAAEjB,EAAE,CAAE,0BAA2B,CAAC;EACvCkB,KAAK,EAAE;AACR,CAAC,EACD;EACCD,KAAK,EAAEjB,EAAE,CAAE,0BAA2B,CAAC;EACvCkB,KAAK,EAAE;AACR,CAAC,CACD;AAED,MAAMC,mBAAmB,GAAGA,CAAE;EAAEC,aAAa;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAK,CAAC,KAAM;EAC3E,MAAMC,iBAAiB,GAAGb,8BAA8B,CAAC,CAAC;EAE1D,oBACCE,IAAA,CAACZ,iBAAiB;IAAAwB,QAAA,EACff,QAAQ,CAACgB,QAAQ,gBAClBX,KAAA,CAACZ,SAAS;MAACwB,KAAK,EAAG3B,EAAE,CAAE,UAAW,CAAG;MAAAyB,QAAA,gBACpCZ,IAAA,CAACR,aAAa;QACbuB,qBAAqB;QACrBC,uBAAuB;QACvBZ,KAAK,EAAGjB,EAAE,CAAE,YAAa,CAAG;QAC5B8B,OAAO,EAAGd,kBAAoB;QAC9BE,KAAK,EAAGK,IAAM;QACdQ,QAAQ,EAAKC,QAAQ,IACpBZ,aAAa,CAAE;UAAEG,IAAI,EAAES;QAAS,CAAE;MAClC,CACD,CAAC,eACFnB,IAAA,CAACX,WAAW;QACX0B,qBAAqB;QACrBC,uBAAuB;QACvBZ,KAAK,EAAGjB,EAAE,CAAE,aAAc,CAAG;QAC7BuB,IAAI,EAAC,QAAQ;QACbQ,QAAQ,EAAKb,KAAK,IAAM;UACvB,MAAMe,GAAG,GAAGC,QAAQ,CAAEhB,KAAK,EAAE,EAAG,CAAC;UAEjCE,aAAa,CAAE;YACd;YACA;YACAE,KAAK,EAAEa,KAAK,CAAEF,GAAI,CAAC,GAAGG,SAAS,GAAGH;UACnC,CAAE,CAAC;QACJ,CAAG;QACHf,KAAK,EACJmB,MAAM,CAACC,SAAS,CAAEhB,KAAM,CAAC,GACtBA,KAAK,CAACiB,QAAQ,CAAE,EAAG,CAAC,GACpB,EACH;QACDC,IAAI,EAAC;MAAG,CACR,CAAC,eACF3B,IAAA,CAACT,aAAa;QACbyB,uBAAuB;QACvBZ,KAAK,EAAGjB,EAAE,CAAE,eAAgB,CAAG;QAC/ByC,OAAO,EAAGpB,QAAQ,IAAI,KAAO;QAC7BU,QAAQ,EAAKb,KAAK,IAAM;UACvBE,aAAa,CAAE;YACd;YACAC,QAAQ,EAAEH,KAAK,IAAIkB;UACpB,CAAE,CAAC;QACJ;MAAG,CACH,CAAC;IAAA,CACQ,CAAC,gBAEZrB,KAAA,CAACR,UAAU;MACVU,KAAK,EAAGjB,EAAE,CAAE,UAAW,CAAG;MAC1B0C,QAAQ,EAAGA,CAAA,KAAM;QAChBtB,aAAa,CAAE;UACdG,IAAI,EAAEa,SAAS;UACfd,KAAK,EAAEc,SAAS;UAChBf,QAAQ,EAAEe;QACX,CAAE,CAAC;MACJ,CAAG;MACHZ,iBAAiB,EAAGA,iBAAmB;MAAAC,QAAA,gBAEvCZ,IAAA,CAACJ,cAAc;QACdQ,KAAK,EAAGjB,EAAE,CAAE,YAAa,CAAG;QAC5B2C,gBAAgB;QAChBC,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAErB,IAAM;QAC1BsB,UAAU,EAAGA,CAAA,KACZzB,aAAa,CAAE;UACdG,IAAI,EAAEa;QACP,CAAE,CACF;QAAAX,QAAA,eAEDZ,IAAA,CAACR,aAAa;UACbuB,qBAAqB;UACrBC,uBAAuB;UACvBZ,KAAK,EAAGjB,EAAE,CAAE,YAAa,CAAG;UAC5B8B,OAAO,EAAGd,kBAAoB;UAC9BE,KAAK,EAAGK,IAAI,IAAI,SAAW;UAC3BQ,QAAQ,EAAKC,QAAQ,IACpBZ,aAAa,CAAE;YAAEG,IAAI,EAAES;UAAS,CAAE;QAClC,CACD;MAAC,CACa,CAAC,eACjBnB,IAAA,CAACJ,cAAc;QACdQ,KAAK,EAAGjB,EAAE,CAAE,aAAc,CAAG;QAC7B2C,gBAAgB;QAChBC,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAEtB,KAAO;QAC3BuB,UAAU,EAAGA,CAAA,KACZzB,aAAa,CAAE;UACdE,KAAK,EAAEc;QACR,CAAE,CACF;QAAAX,QAAA,eAEDZ,IAAA,CAACX,WAAW;UACX0B,qBAAqB;UACrBC,uBAAuB;UACvBZ,KAAK,EAAGjB,EAAE,CAAE,aAAc,CAAG;UAC7BuB,IAAI,EAAC,QAAQ;UACbQ,QAAQ,EAAKb,KAAK,IAAM;YACvB,MAAMe,GAAG,GAAGC,QAAQ,CAAEhB,KAAK,EAAE,EAAG,CAAC;YAEjCE,aAAa,CAAE;cACd;cACA;cACAE,KAAK,EAAEa,KAAK,CAAEF,GAAI,CAAC,GAAGG,SAAS,GAAGH;YACnC,CAAE,CAAC;UACJ,CAAG;UACHf,KAAK,EACJmB,MAAM,CAACC,SAAS,CAAEhB,KAAM,CAAC,GACtBA,KAAK,CAACiB,QAAQ,CAAE,EAAG,CAAC,GACpB,EACH;UACDC,IAAI,EAAC;QAAG,CACR;MAAC,CACa,CAAC,eACjB3B,IAAA,CAACJ,cAAc;QACdQ,KAAK,EAAGjB,EAAE,CAAE,eAAgB,CAAG;QAC/B2C,gBAAgB;QAChBC,QAAQ,EAAGA,CAAA,KAAM,CAAC,CAAEvB,QAAU;QAC9BwB,UAAU,EAAGA,CAAA,KACZzB,aAAa,CAAE;UACdC,QAAQ,EAAEe;QACX,CAAE,CACF;QAAAX,QAAA,eAEDZ,IAAA,CAACT,aAAa;UACbyB,uBAAuB;UACvBZ,KAAK,EAAGjB,EAAE,CAAE,eAAgB,CAAG;UAC/ByC,OAAO,EAAGpB,QAAQ,IAAI,KAAO;UAC7BU,QAAQ,EAAKb,KAAK,IAAM;YACvBE,aAAa,CAAE;cACd;cACAC,QAAQ,EAAEH,KAAK,IAAIkB;YACpB,CAAE,CAAC;UACJ;QAAG,CACH;MAAC,CACa,CAAC;IAAA,CACN;EACZ,CACiB,CAAC;AAEtB,CAAC;AAED,eAAejB,mBAAmB","ignoreList":[]}

package/build-module/navigation/edit/index.js

@@ -10,7 +10,7 @@ import { useCallback, useState, useEffect, useRef, Platform } from '@wordpress/e
 import { InspectorControls, useBlockProps, RecursionProvider, useHasRecursion, store as blockEditorStore, withColors, ContrastChecker, getColorClassName, Warning, __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, useBlockEditingMode } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { PanelBody, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, Button, Spinner, Notice } from '@wordpress/components';
+import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalVStack as VStack, ToggleControl, Button, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
@@ -40,6 +40,7 @@ import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function ColorTools({
   textColor,
@@ -377,10 +378,21 @@ function Navigation({
     isFirstRender.current = false;
   }, [submenuAccessibilityNotice]);
   const overlayMenuPreviewId = useInstanceId(OverlayMenuPreview, `overlay-menu-preview`);
+  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
   const stylingInspectorControls = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InspectorControls, {
-      children: hasSubmenuIndicatorSetting && /*#__PURE__*/_jsxs(PanelBody, {
-        title: __('Display'),
+      children: hasSubmenuIndicatorSetting && /*#__PURE__*/_jsxs(ToolsPanel, {
+        label: __('Display'),
+        resetAll: () => {
+          setAttributes({
+            showSubmenuIcon: true,
+            openSubmenusOnClick: false,
+            overlayMenu: 'mobile',
+            hasIcon: true,
+            icon: 'handle'
+          });
+        },
+        dropdownMenuProps: dropdownMenuProps,
         children: [isResponsive && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsxs(Button, {
             __next40pxDefaultSize: true,
@@ -404,68 +416,98 @@ function Navigation({
                 children: __('Close')
               })]
             })]
-          }), /*#__PURE__*/_jsx("div", {
+          }), overlayMenuPreview && /*#__PURE__*/_jsx(VStack, {
             id: overlayMenuPreviewId,
-            children: overlayMenuPreview && /*#__PURE__*/_jsx(OverlayMenuPreview, {
+            spacing: 4,
+            style: {
+              gridColumn: 'span 2'
+            },
+            children: /*#__PURE__*/_jsx(OverlayMenuPreview, {
               setAttributes: setAttributes,
               hasIcon: hasIcon,
               icon: icon,
               hidden: !overlayMenuPreview
             })
           })]
-        }), /*#__PURE__*/_jsxs(ToggleGroupControl, {
-          __next40pxDefaultSize: true,
-          __nextHasNoMarginBottom: true,
+        }), /*#__PURE__*/_jsx(ToolsPanelItem, {
+          hasValue: () => overlayMenu !== 'mobile',
           label: __('Overlay Menu'),
-          "aria-label": __('Configure overlay menu'),
-          value: overlayMenu,
-          help: __('Collapses the navigation options in a menu icon opening an overlay.'),
-          onChange: value => setAttributes({
-            overlayMenu: value
+          onDeselect: () => setAttributes({
+            overlayMenu: 'mobile'
           }),
-          isBlock: true,
-          children: [/*#__PURE__*/_jsx(ToggleGroupControlOption, {
-            value: "never",
-            label: __('Off')
-          }), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
-            value: "mobile",
-            label: __('Mobile')
-          }), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
-            value: "always",
-            label: __('Always')
-          })]
+          isShownByDefault: true,
+          children: /*#__PURE__*/_jsxs(ToggleGroupControl, {
+            __next40pxDefaultSize: true,
+            __nextHasNoMarginBottom: true,
+            label: __('Overlay Menu'),
+            "aria-label": __('Configure overlay menu'),
+            value: overlayMenu,
+            help: __('Collapses the navigation options in a menu icon opening an overlay.'),
+            onChange: value => setAttributes({
+              overlayMenu: value
+            }),
+            isBlock: true,
+            children: [/*#__PURE__*/_jsx(ToggleGroupControlOption, {
+              value: "never",
+              label: __('Off')
+            }), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+              value: "mobile",
+              label: __('Mobile')
+            }), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+              value: "always",
+              label: __('Always')
+            })]
+          })
         }), hasSubmenus && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("h3", {
+            className: "wp-block-navigation__submenu-header",
             children: __('Submenus')
-          }), /*#__PURE__*/_jsx(ToggleControl, {
-            __nextHasNoMarginBottom: true,
-            checked: openSubmenusOnClick,
-            onChange: value => {
-              setAttributes({
-                openSubmenusOnClick: value,
-                ...(value && {
-                  showSubmenuIcon: true
-                }) // Make sure arrows are shown when we toggle this on.
-              });
-            },
-            label: __('Open on click')
-          }), /*#__PURE__*/_jsx(ToggleControl, {
-            __nextHasNoMarginBottom: true,
-            checked: showSubmenuIcon,
-            onChange: value => {
-              setAttributes({
-                showSubmenuIcon: value
-              });
-            },
-            disabled: attributes.openSubmenusOnClick,
-            label: __('Show arrow')
-          }), submenuAccessibilityNotice && /*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(Notice, {
-              spokenMessage: null,
-              status: "warning",
-              isDismissible: false,
-              children: submenuAccessibilityNotice
+          }), /*#__PURE__*/_jsx(ToolsPanelItem, {
+            hasValue: () => openSubmenusOnClick,
+            label: __('Open on click'),
+            onDeselect: () => setAttributes({
+              openSubmenusOnClick: false,
+              showSubmenuIcon: true
+            }),
+            isShownByDefault: true,
+            children: /*#__PURE__*/_jsx(ToggleControl, {
+              __nextHasNoMarginBottom: true,
+              checked: openSubmenusOnClick,
+              onChange: value => {
+                setAttributes({
+                  openSubmenusOnClick: value,
+                  ...(value && {
+                    showSubmenuIcon: true
+                  }) // Make sure arrows are shown when we toggle this on.
+                });
+              },
+              label: __('Open on click')
+            })
+          }), /*#__PURE__*/_jsx(ToolsPanelItem, {
+            hasValue: () => !showSubmenuIcon,
+            label: __('Show arrow'),
+            onDeselect: () => setAttributes({
+              showSubmenuIcon: true
+            }),
+            isDisabled: attributes.openSubmenusOnClick,
+            isShownByDefault: true,
+            children: /*#__PURE__*/_jsx(ToggleControl, {
+              __nextHasNoMarginBottom: true,
+              checked: showSubmenuIcon,
+              onChange: value => {
+                setAttributes({
+                  showSubmenuIcon: value
+                });
+              },
+              disabled: attributes.openSubmenusOnClick,
+              label: __('Show arrow')
             })
+          }), submenuAccessibilityNotice && /*#__PURE__*/_jsx(Notice, {
+            spokenMessage: null,
+            status: "warning",
+            isDismissible: false,
+            className: "wp-block-navigation__submenu-accessibility-notice",
+            children: submenuAccessibilityNotice
           })]
         })]
       })