@wordpress/block-library 9.24.0 → 9.25.0

package/build/form-input/edit.js

@@ -10,6 +10,7 @@ var _i18n = require("@wordpress/i18n");
 var _blockEditor = require("@wordpress/block-editor");
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
+var _hooks = require("../utils/hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -19,6 +20,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  * WordPress dependencies
  */
 
+/**
+ * Internal dependencies
+ */
+
 function InputFieldBlock({
   attributes,
   setAttributes,
@@ -34,6 +39,7 @@ function InputFieldBlock({
     value
   } = attributes;
   const blockProps = (0, _blockEditor.useBlockProps)();
+  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
   const ref = (0, _element.useRef)();
   const TagName = type === 'textarea' ? 'textarea' : 'input';
   const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes);
@@ -46,26 +52,49 @@ function InputFieldBlock({
   const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
   const controls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: ['hidden' !== type && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
-        title: (0, _i18n.__)('Settings'),
-        children: ['checkbox' !== type && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-          __nextHasNoMarginBottom: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
+        label: (0, _i18n.__)('Settings'),
+        resetAll: () => {
+          setAttributes({
+            inlineLabel: false,
+            required: false
+          });
+        },
+        dropdownMenuProps: dropdownMenuProps,
+        children: ['checkbox' !== type && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
           label: (0, _i18n.__)('Inline label'),
-          checked: inlineLabel,
-          onChange: newVal => {
-            setAttributes({
-              inlineLabel: newVal
-            });
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
-          __nextHasNoMarginBottom: true,
+          hasValue: () => !!inlineLabel,
+          onDeselect: () => setAttributes({
+            inlineLabel: false
+          }),
+          isShownByDefault: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+            __nextHasNoMarginBottom: true,
+            label: (0, _i18n.__)('Inline label'),
+            checked: inlineLabel,
+            onChange: newVal => {
+              setAttributes({
+                inlineLabel: newVal
+              });
+            }
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
           label: (0, _i18n.__)('Required'),
-          checked: required,
-          onChange: newVal => {
-            setAttributes({
-              required: newVal
-            });
-          }
+          hasValue: () => !!required,
+          onDeselect: () => setAttributes({
+            required: false
+          }),
+          isShownByDefault: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
+            __nextHasNoMarginBottom: true,
+            label: (0, _i18n.__)('Required'),
+            checked: required,
+            onChange: newVal => {
+              setAttributes({
+                required: newVal
+              });
+            }
+          })
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {

package/build/form-input/edit.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_blockEditor","_components","_element","_jsxRuntime","InputFieldBlock","attributes","setAttributes","className","type","name","label","inlineLabel","required","placeholder","value","blockProps","useBlockProps","ref","useRef","TagName","borderProps","useBorderProps","colorProps","useColorProps","current","focus","isCheckboxOrRadio","controls","jsxs","Fragment","children","jsx","InspectorControls","PanelBody","title","__","CheckboxControl","__nextHasNoMarginBottom","checked","onChange","newVal","group","TextControl","__next40pxDefaultSize","autoComplete","help","content","RichText","tagName","newLabel","clsx","event","target","undefined","style","_default","exports","default"],"sources":["@wordpress/block-library/src/form-input/edit.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInspectorControls,\n\tRichText,\n\tuseBlockProps,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n} from '@wordpress/block-editor';\nimport { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';\n\nimport { useRef } from '@wordpress/element';\n\nfunction InputFieldBlock( { attributes, setAttributes, className } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\tconst blockProps = useBlockProps();\n\tconst ref = useRef();\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tconst borderProps = useBorderProps( attributes );\n\tconst colorProps = useColorProps( attributes );\n\tif ( ref.current ) {\n\t\tref.current.focus();\n\t}\n\n\t// Note: radio inputs aren't implemented yet.\n\tconst isCheckboxOrRadio = type === 'checkbox' || type === 'radio';\n\n\tconst controls = (\n\t\t<>\n\t\t\t{ 'hidden' !== type && (\n\t\t\t\t<InspectorControls>\n\t\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t\t{ 'checkbox' !== type && (\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tlabel={ __( 'Inline label' ) }\n\t\t\t\t\t\t\t\tchecked={ inlineLabel }\n\t\t\t\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tinlineLabel: newVal,\n\t\t\t\t\t\t\t\t\t} );\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\t<CheckboxControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ __( 'Required' ) }\n\t\t\t\t\t\t\tchecked={ required }\n\t\t\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\trequired: newVal,\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</PanelBody>\n\t\t\t\t</InspectorControls>\n\t\t\t) }\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tname: newVal,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'Affects the \"name\" attribute of the input element, and is used as a name for the form submission results.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst content = (\n\t\t<RichText\n\t\t\ttagName=\"span\"\n\t\t\tclassName=\"wp-block-form-input__label-content\"\n\t\t\tvalue={ label }\n\t\t\tonChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }\n\t\t\taria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }\n\t\t\tdata-empty={ ! label }\n\t\t\tplaceholder={ __( 'Type the label for this input' ) }\n\t\t/>\n\t);\n\n\tif ( 'hidden' === type ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ controls }\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'wp-block-form-input__input',\n\t\t\t\t\t\tcolorProps.className,\n\t\t\t\t\t\tborderProps.className\n\t\t\t\t\t) }\n\t\t\t\t\taria-label={ __( 'Value' ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\t\tsetAttributes( { value: event.target.value } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\t\t\t<span\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel || 'checkbox' === type,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! isCheckboxOrRadio && content }\n\t\t\t\t<TagName\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'wp-block-form-input__input',\n\t\t\t\t\t\tcolorProps.className,\n\t\t\t\t\t\tborderProps.className\n\t\t\t\t\t) }\n\t\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t\t// which is confusing.\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ placeholder }\n\t\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t\t}\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t...borderProps.style,\n\t\t\t\t\t\t...colorProps.style,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ isCheckboxOrRadio && content }\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport default InputFieldBlock;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_blockEditor","_components","_element","_hooks","_jsxRuntime","InputFieldBlock","attributes","setAttributes","className","type","name","label","inlineLabel","required","placeholder","value","blockProps","useBlockProps","dropdownMenuProps","useToolsPanelDropdownMenuProps","ref","useRef","TagName","borderProps","useBorderProps","colorProps","useColorProps","current","focus","isCheckboxOrRadio","controls","jsxs","Fragment","children","jsx","InspectorControls","__experimentalToolsPanel","__","resetAll","__experimentalToolsPanelItem","hasValue","onDeselect","isShownByDefault","CheckboxControl","__nextHasNoMarginBottom","checked","onChange","newVal","group","TextControl","__next40pxDefaultSize","autoComplete","help","content","RichText","tagName","newLabel","clsx","event","target","undefined","style","_default","exports","default"],"sources":["@wordpress/block-library/src/form-input/edit.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInspectorControls,\n\tRichText,\n\tuseBlockProps,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n} from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\tCheckboxControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nfunction InputFieldBlock( { attributes, setAttributes, className } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\tconst blockProps = useBlockProps();\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst ref = useRef();\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tconst borderProps = useBorderProps( attributes );\n\tconst colorProps = useColorProps( attributes );\n\tif ( ref.current ) {\n\t\tref.current.focus();\n\t}\n\n\t// Note: radio inputs aren't implemented yet.\n\tconst isCheckboxOrRadio = type === 'checkbox' || type === 'radio';\n\n\tconst controls = (\n\t\t<>\n\t\t\t{ 'hidden' !== type && (\n\t\t\t\t<InspectorControls>\n\t\t\t\t\t<ToolsPanel\n\t\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tinlineLabel: false,\n\t\t\t\t\t\t\t\trequired: false,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ 'checkbox' !== type && (\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Inline label' ) }\n\t\t\t\t\t\t\t\thasValue={ () => !! inlineLabel }\n\t\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { inlineLabel: false } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Inline label' ) }\n\t\t\t\t\t\t\t\t\tchecked={ inlineLabel }\n\t\t\t\t\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tinlineLabel: newVal,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tlabel={ __( 'Required' ) }\n\t\t\t\t\t\t\thasValue={ () => !! required }\n\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { required: false } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\tlabel={ __( 'Required' ) }\n\t\t\t\t\t\t\t\tchecked={ required }\n\t\t\t\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\trequired: newVal,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t</ToolsPanel>\n\t\t\t\t</InspectorControls>\n\t\t\t) }\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tname: newVal,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'Affects the \"name\" attribute of the input element, and is used as a name for the form submission results.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tconst content = (\n\t\t<RichText\n\t\t\ttagName=\"span\"\n\t\t\tclassName=\"wp-block-form-input__label-content\"\n\t\t\tvalue={ label }\n\t\t\tonChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }\n\t\t\taria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }\n\t\t\tdata-empty={ ! label }\n\t\t\tplaceholder={ __( 'Type the label for this input' ) }\n\t\t/>\n\t);\n\n\tif ( 'hidden' === type ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ controls }\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'wp-block-form-input__input',\n\t\t\t\t\t\tcolorProps.className,\n\t\t\t\t\t\tborderProps.className\n\t\t\t\t\t) }\n\t\t\t\t\taria-label={ __( 'Value' ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\t\tsetAttributes( { value: event.target.value } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\t\t\t<span\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel || 'checkbox' === type,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! isCheckboxOrRadio && content }\n\t\t\t\t<TagName\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'wp-block-form-input__input',\n\t\t\t\t\t\tcolorProps.className,\n\t\t\t\t\t\tborderProps.className\n\t\t\t\t\t) }\n\t\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t\t// which is confusing.\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ placeholder }\n\t\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t\t}\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t...borderProps.style,\n\t\t\t\t\t\t...colorProps.style,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ isCheckboxOrRadio && content }\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport default InputFieldBlock;\n"],"mappings":"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","ignoreList":[]}

package/build/latest-posts/edit.js

@@ -253,102 +253,174 @@ function Controls({
           })
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
-      title: (0, _i18n.__)('Featured image'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-        __nextHasNoMarginBottom: true,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
+      label: (0, _i18n.__)('Featured image'),
+      resetAll: () => setAttributes({
+        displayFeaturedImage: false,
+        featuredImageAlign: undefined,
+        featuredImageSizeSlug: 'thumbnail',
+        featuredImageSizeWidth: null,
+        featuredImageSizeHeight: null,
+        addLinkToFeaturedImage: false
+      }),
+      dropdownMenuProps: dropdownMenuProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+        hasValue: () => !!displayFeaturedImage,
         label: (0, _i18n.__)('Display featured image'),
-        checked: displayFeaturedImage,
-        onChange: value => setAttributes({
-          displayFeaturedImage: value
+        onDeselect: () => setAttributes({
+          displayFeaturedImage: false
+        }),
+        isShownByDefault: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+          __nextHasNoMarginBottom: true,
+          label: (0, _i18n.__)('Display featured image'),
+          checked: displayFeaturedImage,
+          onChange: value => setAttributes({
+            displayFeaturedImage: value
+          })
         })
       }), displayFeaturedImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalImageSizeControl, {
-          onChange: value => {
-            const newAttrs = {};
-            if (value.hasOwnProperty('width')) {
-              newAttrs.featuredImageSizeWidth = value.width;
-            }
-            if (value.hasOwnProperty('height')) {
-              newAttrs.featuredImageSizeHeight = value.height;
-            }
-            setAttributes(newAttrs);
-          },
-          slug: featuredImageSizeSlug,
-          width: featuredImageSizeWidth,
-          height: featuredImageSizeHeight,
-          imageWidth: defaultImageWidth,
-          imageHeight: defaultImageHeight,
-          imageSizeOptions: imageSizeOptions,
-          imageSizeHelp: (0, _i18n.__)('Select the size of the source image.'),
-          onChangeImage: value => setAttributes({
-            featuredImageSizeSlug: value,
-            featuredImageSizeWidth: undefined,
-            featuredImageSizeHeight: undefined
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+          hasValue: () => featuredImageSizeSlug !== 'thumbnail' || featuredImageSizeWidth !== null || featuredImageSizeHeight !== null,
+          label: (0, _i18n.__)('Image size'),
+          onDeselect: () => setAttributes({
+            featuredImageSizeSlug: 'thumbnail',
+            featuredImageSizeWidth: null,
+            featuredImageSizeHeight: null
+          }),
+          isShownByDefault: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalImageSizeControl, {
+            onChange: value => {
+              const newAttrs = {};
+              if (value.hasOwnProperty('width')) {
+                newAttrs.featuredImageSizeWidth = value.width;
+              }
+              if (value.hasOwnProperty('height')) {
+                newAttrs.featuredImageSizeHeight = value.height;
+              }
+              setAttributes(newAttrs);
+            },
+            slug: featuredImageSizeSlug,
+            width: featuredImageSizeWidth,
+            height: featuredImageSizeHeight,
+            imageWidth: defaultImageWidth,
+            imageHeight: defaultImageHeight,
+            imageSizeOptions: imageSizeOptions,
+            imageSizeHelp: (0, _i18n.__)('Select the size of the source image.'),
+            onChangeImage: value => setAttributes({
+              featuredImageSizeSlug: value,
+              featuredImageSizeWidth: undefined,
+              featuredImageSizeHeight: undefined
+            })
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
-          className: "editor-latest-posts-image-alignment-control",
-          __nextHasNoMarginBottom: true,
-          __next40pxDefaultSize: true,
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+          hasValue: () => !!featuredImageAlign,
           label: (0, _i18n.__)('Image alignment'),
-          value: featuredImageAlign || 'none',
-          onChange: value => setAttributes({
-            featuredImageAlign: value !== 'none' ? value : undefined
+          onDeselect: () => setAttributes({
+            featuredImageAlign: undefined
           }),
-          children: imageAlignmentOptions.map(({
-            value,
-            icon,
-            label
-          }) => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
-              value: value,
-              icon: icon,
-              label: label
-            }, value);
+          isShownByDefault: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
+            className: "editor-latest-posts-image-alignment-control",
+            __nextHasNoMarginBottom: true,
+            __next40pxDefaultSize: true,
+            label: (0, _i18n.__)('Image alignment'),
+            value: featuredImageAlign || 'none',
+            onChange: value => setAttributes({
+              featuredImageAlign: value !== 'none' ? value : undefined
+            }),
+            children: imageAlignmentOptions.map(({
+              value,
+              icon,
+              label
+            }) => {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
+                value: value,
+                icon: icon,
+                label: label
+              }, value);
+            })
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-          __nextHasNoMarginBottom: true,
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+          hasValue: () => !!addLinkToFeaturedImage,
           label: (0, _i18n.__)('Add link to featured image'),
-          checked: addLinkToFeaturedImage,
-          onChange: value => setAttributes({
-            addLinkToFeaturedImage: value
+          onDeselect: () => setAttributes({
+            addLinkToFeaturedImage: false
+          }),
+          isShownByDefault: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+            __nextHasNoMarginBottom: true,
+            label: (0, _i18n.__)('Add link to featured image'),
+            checked: addLinkToFeaturedImage,
+            onChange: value => setAttributes({
+              addLinkToFeaturedImage: value
+            })
           })
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
-      title: (0, _i18n.__)('Sorting and filtering'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.QueryControls, {
-        order,
-        orderBy,
-        numberOfItems: postsToShow,
-        onOrderChange: value => setAttributes({
-          order: value
-        }),
-        onOrderByChange: value => setAttributes({
-          orderBy: value
-        }),
-        onNumberOfItemsChange: value => setAttributes({
-          postsToShow: value
-        }),
-        categorySuggestions: categorySuggestions,
-        onCategoryChange: selectCategories,
-        selectedCategories: categories,
-        onAuthorChange: value => setAttributes({
-          selectedAuthor: '' !== value ? Number(value) : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
+      label: (0, _i18n.__)('Sorting and filtering'),
+      resetAll: () => setAttributes({
+        order: 'desc',
+        orderBy: 'date',
+        postsToShow: 5,
+        categories: undefined,
+        selectedAuthor: undefined,
+        columns: 3
+      }),
+      dropdownMenuProps: dropdownMenuProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+        hasValue: () => order !== 'desc' || orderBy !== 'date' || postsToShow !== 5 || categories?.length > 0 || !!selectedAuthor,
+        label: (0, _i18n.__)('Sort and filter'),
+        onDeselect: () => setAttributes({
+          order: 'desc',
+          orderBy: 'date',
+          postsToShow: 5,
+          categories: undefined,
+          selectedAuthor: undefined
         }),
-        authorList: authorList !== null && authorList !== void 0 ? authorList : [],
-        selectedAuthorId: selectedAuthor
-      }), postLayout === 'grid' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
-        __nextHasNoMarginBottom: true,
-        __next40pxDefaultSize: true,
+        isShownByDefault: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.QueryControls, {
+          order,
+          orderBy,
+          numberOfItems: postsToShow,
+          onOrderChange: value => setAttributes({
+            order: value
+          }),
+          onOrderByChange: value => setAttributes({
+            orderBy: value
+          }),
+          onNumberOfItemsChange: value => setAttributes({
+            postsToShow: value
+          }),
+          categorySuggestions: categorySuggestions,
+          onCategoryChange: selectCategories,
+          selectedCategories: categories,
+          onAuthorChange: value => setAttributes({
+            selectedAuthor: '' !== value ? Number(value) : undefined
+          }),
+          authorList: authorList !== null && authorList !== void 0 ? authorList : [],
+          selectedAuthorId: selectedAuthor
+        })
+      }), postLayout === 'grid' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
+        hasValue: () => columns !== 3,
         label: (0, _i18n.__)('Columns'),
-        value: columns,
-        onChange: value => setAttributes({
-          columns: value
+        onDeselect: () => setAttributes({
+          columns: 3
         }),
-        min: 2,
-        max: !postCount ? _constants.MAX_POSTS_COLUMNS : Math.min(_constants.MAX_POSTS_COLUMNS, postCount),
-        required: true
+        isShownByDefault: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true,
+          label: (0, _i18n.__)('Columns'),
+          value: columns,
+          onChange: value => setAttributes({
+            columns: value
+          }),
+          min: 2,
+          max: !postCount ? _constants.MAX_POSTS_COLUMNS : Math.min(_constants.MAX_POSTS_COLUMNS, postCount),
+          required: true
+        })
       })]
     })]
   });