@wordpress/block-library 9.7.0 → 9.7.1-next.1f6eadc42.0

package/build-module/form-input/deprecated.js

@@ -7,7 +7,7 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import { RichText, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles } from '@wordpress/block-editor';
+import { RichText, useBlockProps, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles } from '@wordpress/block-editor';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,6 +20,118 @@ const getNameFromLabelV1 = content => {
   // Remove any remaining leading or trailing hyphens.
   .replace(/(^-+)|(-+$)/g, '');
 };
+const v2 = {
+  attributes: {
+    type: {
+      type: 'string',
+      default: 'text'
+    },
+    name: {
+      type: 'string'
+    },
+    label: {
+      type: 'string',
+      default: 'Label',
+      selector: '.wp-block-form-input__label-content',
+      source: 'html',
+      __experimentalRole: 'content'
+    },
+    inlineLabel: {
+      type: 'boolean',
+      default: false
+    },
+    required: {
+      type: 'boolean',
+      default: false,
+      selector: '.wp-block-form-input__input',
+      source: 'attribute',
+      attribute: 'required'
+    },
+    placeholder: {
+      type: 'string',
+      selector: '.wp-block-form-input__input',
+      source: 'attribute',
+      attribute: 'placeholder',
+      __experimentalRole: 'content'
+    },
+    value: {
+      type: 'string',
+      default: '',
+      selector: 'input',
+      source: 'attribute',
+      attribute: 'value'
+    },
+    visibilityPermissions: {
+      type: 'string',
+      default: 'all'
+    }
+  },
+  supports: {
+    anchor: true,
+    reusable: false,
+    spacing: {
+      margin: ['top', 'bottom']
+    },
+    __experimentalBorder: {
+      radius: true,
+      __experimentalSkipSerialization: true,
+      __experimentalDefaultControls: {
+        radius: true
+      }
+    }
+  },
+  save({
+    attributes
+  }) {
+    const {
+      type,
+      name,
+      label,
+      inlineLabel,
+      required,
+      placeholder,
+      value
+    } = attributes;
+    const borderProps = getBorderClassesAndStyles(attributes);
+    const colorProps = getColorClassesAndStyles(attributes);
+    const inputStyle = {
+      ...borderProps.style,
+      ...colorProps.style
+    };
+    const inputClasses = clsx('wp-block-form-input__input', colorProps.className, borderProps.className);
+    const TagName = type === 'textarea' ? 'textarea' : 'input';
+    const blockProps = useBlockProps.save();
+    if ('hidden' === type) {
+      return /*#__PURE__*/_jsx("input", {
+        type: type,
+        name: name,
+        value: value
+      });
+    }
+    return /*#__PURE__*/_jsx("div", {
+      ...blockProps,
+      children: /*#__PURE__*/_jsxs("label", {
+        className: clsx('wp-block-form-input__label', {
+          'is-label-inline': inlineLabel
+        }),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "wp-block-form-input__label-content",
+          children: /*#__PURE__*/_jsx(RichText.Content, {
+            value: label
+          })
+        }), /*#__PURE__*/_jsx(TagName, {
+          className: inputClasses,
+          type: 'textarea' === type ? undefined : type,
+          name: name || getNameFromLabelV1(label),
+          required: required,
+          "aria-required": required,
+          placeholder: placeholder || undefined,
+          style: inputStyle
+        })]
+      })
+    });
+  }
+};
 
 // Version without wrapper div in saved markup
 // See: https://github.com/WordPress/gutenberg/pull/56507
@@ -135,6 +247,6 @@ const v1 = {
     /* eslint-enable jsx-a11y/label-has-associated-control */
   }
 };
-const deprecated = [v1];
+const deprecated = [v2, v1];
 export default deprecated;
 //# sourceMappingURL=deprecated.js.map

package/build-module/form-input/deprecated.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","removeAccents","RichText","__experimentalGetBorderClassesAndStyles","getBorderClassesAndStyles","__experimentalGetColorClassesAndStyles","getColorClassesAndStyles","__unstableStripHTML","stripHTML","jsx","_jsx","jsxs","_jsxs","getNameFromLabelV1","content","replace","toLowerCase","v1","attributes","type","default","name","label","selector","source","__experimentalRole","inlineLabel","required","attribute","placeholder","value","visibilityPermissions","supports","className","anchor","reusable","spacing","margin","__experimentalBorder","radius","__experimentalSkipSerialization","__experimentalDefaultControls","save","borderProps","colorProps","inputStyle","style","inputClasses","TagName","children","Content","undefined","deprecated"],"sources":["@wordpress/block-library/src/form-input/deprecated.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tRichText,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\nconst getNameFromLabelV1 = ( content ) => {\n\treturn (\n\t\tremoveAccents( stripHTML( content ) )\n\t\t\t// Convert anything that's not a letter or number to a hyphen.\n\t\t\t.replace( /[^\\p{L}\\p{N}]+/gu, '-' )\n\t\t\t// Convert to lowercase\n\t\t\t.toLowerCase()\n\t\t\t// Remove any remaining leading or trailing hyphens.\n\t\t\t.replace( /(^-+)|(-+$)/g, '' )\n\t);\n};\n\n// Version without wrapper div in saved markup\n// See: https://github.com/WordPress/gutenberg/pull/56507\nconst v1 = {\n\tattributes: {\n\t\ttype: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'text',\n\t\t},\n\t\tname: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tlabel: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'Label',\n\t\t\tselector: '.wp-block-form-input__label-content',\n\t\t\tsource: 'html',\n\t\t\t__experimentalRole: 'content',\n\t\t},\n\t\tinlineLabel: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\trequired: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t\tselector: '.wp-block-form-input__input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'required',\n\t\t},\n\t\tplaceholder: {\n\t\t\ttype: 'string',\n\t\t\tselector: '.wp-block-form-input__input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'placeholder',\n\t\t\t__experimentalRole: 'content',\n\t\t},\n\t\tvalue: {\n\t\t\ttype: 'string',\n\t\t\tdefault: '',\n\t\t\tselector: 'input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'value',\n\t\t},\n\t\tvisibilityPermissions: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'all',\n\t\t},\n\t},\n\tsupports: {\n\t\tclassName: false,\n\t\tanchor: true,\n\t\treusable: false,\n\t\tspacing: {\n\t\t\tmargin: [ 'top', 'bottom' ],\n\t\t},\n\t\t__experimentalBorder: {\n\t\t\tradius: true,\n\t\t\t__experimentalSkipSerialization: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tradius: true,\n\t\t\t},\n\t\t},\n\t},\n\tsave( { attributes } ) {\n\t\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\t\tattributes;\n\n\t\tconst borderProps = getBorderClassesAndStyles( attributes );\n\t\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\t\tconst inputStyle = {\n\t\t\t...borderProps.style,\n\t\t\t...colorProps.style,\n\t\t};\n\n\t\tconst inputClasses = clsx(\n\t\t\t'wp-block-form-input__input',\n\t\t\tcolorProps.className,\n\t\t\tborderProps.className\n\t\t);\n\t\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\t\tif ( 'hidden' === type ) {\n\t\t\treturn <input type={ type } name={ name } value={ value } />;\n\t\t}\n\n\t\t/* eslint-disable jsx-a11y/label-has-associated-control */\n\t\treturn (\n\t\t\t<label\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t</span>\n\t\t\t\t<TagName\n\t\t\t\t\tclassName={ inputClasses }\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tname={ name || getNameFromLabelV1( label ) }\n\t\t\t\t\trequired={ required }\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\t\tstyle={ inputStyle }\n\t\t\t\t/>\n\t\t\t</label>\n\t\t);\n\t\t/* eslint-enable jsx-a11y/label-has-associated-control */\n\t},\n};\n\nconst deprecated = [ v1 ];\n\nexport default deprecated;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","removeAccents","RichText","useBlockProps","__experimentalGetBorderClassesAndStyles","getBorderClassesAndStyles","__experimentalGetColorClassesAndStyles","getColorClassesAndStyles","__unstableStripHTML","stripHTML","jsx","_jsx","jsxs","_jsxs","getNameFromLabelV1","content","replace","toLowerCase","v2","attributes","type","default","name","label","selector","source","__experimentalRole","inlineLabel","required","attribute","placeholder","value","visibilityPermissions","supports","anchor","reusable","spacing","margin","__experimentalBorder","radius","__experimentalSkipSerialization","__experimentalDefaultControls","save","borderProps","colorProps","inputStyle","style","inputClasses","className","TagName","blockProps","children","Content","undefined","v1","deprecated"],"sources":["@wordpress/block-library/src/form-input/deprecated.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tRichText,\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\nconst getNameFromLabelV1 = ( content ) => {\n\treturn (\n\t\tremoveAccents( stripHTML( content ) )\n\t\t\t// Convert anything that's not a letter or number to a hyphen.\n\t\t\t.replace( /[^\\p{L}\\p{N}]+/gu, '-' )\n\t\t\t// Convert to lowercase\n\t\t\t.toLowerCase()\n\t\t\t// Remove any remaining leading or trailing hyphens.\n\t\t\t.replace( /(^-+)|(-+$)/g, '' )\n\t);\n};\n\nconst v2 = {\n\tattributes: {\n\t\ttype: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'text',\n\t\t},\n\t\tname: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tlabel: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'Label',\n\t\t\tselector: '.wp-block-form-input__label-content',\n\t\t\tsource: 'html',\n\t\t\t__experimentalRole: 'content',\n\t\t},\n\t\tinlineLabel: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\trequired: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t\tselector: '.wp-block-form-input__input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'required',\n\t\t},\n\t\tplaceholder: {\n\t\t\ttype: 'string',\n\t\t\tselector: '.wp-block-form-input__input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'placeholder',\n\t\t\t__experimentalRole: 'content',\n\t\t},\n\t\tvalue: {\n\t\t\ttype: 'string',\n\t\t\tdefault: '',\n\t\t\tselector: 'input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'value',\n\t\t},\n\t\tvisibilityPermissions: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'all',\n\t\t},\n\t},\n\tsupports: {\n\t\tanchor: true,\n\t\treusable: false,\n\t\tspacing: {\n\t\t\tmargin: [ 'top', 'bottom' ],\n\t\t},\n\t\t__experimentalBorder: {\n\t\t\tradius: true,\n\t\t\t__experimentalSkipSerialization: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tradius: true,\n\t\t\t},\n\t\t},\n\t},\n\tsave( { attributes } ) {\n\t\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\t\tattributes;\n\n\t\tconst borderProps = getBorderClassesAndStyles( attributes );\n\t\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\t\tconst inputStyle = {\n\t\t\t...borderProps.style,\n\t\t\t...colorProps.style,\n\t\t};\n\n\t\tconst inputClasses = clsx(\n\t\t\t'wp-block-form-input__input',\n\t\t\tcolorProps.className,\n\t\t\tborderProps.className\n\t\t);\n\t\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\t\tconst blockProps = useBlockProps.save();\n\n\t\tif ( 'hidden' === type ) {\n\t\t\treturn <input type={ type } name={ name } value={ value } />;\n\t\t}\n\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ /* eslint-disable jsx-a11y/label-has-associated-control */ }\n\t\t\t\t<label\n\t\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t\t</span>\n\t\t\t\t\t<TagName\n\t\t\t\t\t\tclassName={ inputClasses }\n\t\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\t\tname={ name || getNameFromLabelV1( label ) }\n\t\t\t\t\t\trequired={ required }\n\t\t\t\t\t\taria-required={ required }\n\t\t\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\t\t\tstyle={ inputStyle }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t\t{ /* eslint-enable jsx-a11y/label-has-associated-control */ }\n\t\t\t</div>\n\t\t);\n\t},\n};\n\n// Version without wrapper div in saved markup\n// See: https://github.com/WordPress/gutenberg/pull/56507\nconst v1 = {\n\tattributes: {\n\t\ttype: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'text',\n\t\t},\n\t\tname: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tlabel: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'Label',\n\t\t\tselector: '.wp-block-form-input__label-content',\n\t\t\tsource: 'html',\n\t\t\t__experimentalRole: 'content',\n\t\t},\n\t\tinlineLabel: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\trequired: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t\tselector: '.wp-block-form-input__input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'required',\n\t\t},\n\t\tplaceholder: {\n\t\t\ttype: 'string',\n\t\t\tselector: '.wp-block-form-input__input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'placeholder',\n\t\t\t__experimentalRole: 'content',\n\t\t},\n\t\tvalue: {\n\t\t\ttype: 'string',\n\t\t\tdefault: '',\n\t\t\tselector: 'input',\n\t\t\tsource: 'attribute',\n\t\t\tattribute: 'value',\n\t\t},\n\t\tvisibilityPermissions: {\n\t\t\ttype: 'string',\n\t\t\tdefault: 'all',\n\t\t},\n\t},\n\tsupports: {\n\t\tclassName: false,\n\t\tanchor: true,\n\t\treusable: false,\n\t\tspacing: {\n\t\t\tmargin: [ 'top', 'bottom' ],\n\t\t},\n\t\t__experimentalBorder: {\n\t\t\tradius: true,\n\t\t\t__experimentalSkipSerialization: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tradius: true,\n\t\t\t},\n\t\t},\n\t},\n\tsave( { attributes } ) {\n\t\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\t\tattributes;\n\n\t\tconst borderProps = getBorderClassesAndStyles( attributes );\n\t\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\t\tconst inputStyle = {\n\t\t\t...borderProps.style,\n\t\t\t...colorProps.style,\n\t\t};\n\n\t\tconst inputClasses = clsx(\n\t\t\t'wp-block-form-input__input',\n\t\t\tcolorProps.className,\n\t\t\tborderProps.className\n\t\t);\n\t\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\t\tif ( 'hidden' === type ) {\n\t\t\treturn <input type={ type } name={ name } value={ value } />;\n\t\t}\n\n\t\t/* eslint-disable jsx-a11y/label-has-associated-control */\n\t\treturn (\n\t\t\t<label\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t</span>\n\t\t\t\t<TagName\n\t\t\t\t\tclassName={ inputClasses }\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tname={ name || getNameFromLabelV1( label ) }\n\t\t\t\t\trequired={ required }\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\t\tstyle={ inputStyle }\n\t\t\t\t/>\n\t\t\t</label>\n\t\t);\n\t\t/* eslint-enable jsx-a11y/label-has-associated-control */\n\t},\n};\n\nconst deprecated = [ v2, v1 ];\n\nexport default deprecated;\n"],"mappings":"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","ignoreList":[]}

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

@@ -35,6 +35,9 @@ function InputFieldBlock({
   if (ref.current) {
     ref.current.focus();
   }
+
+  // Note: radio inputs aren't implemented yet.
+  const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
   const controls = /*#__PURE__*/_jsxs(_Fragment, {
     children: ['hidden' !== type && /*#__PURE__*/_jsx(InspectorControls, {
       children: /*#__PURE__*/_jsxs(PanelBody, {
@@ -76,6 +79,17 @@ function InputFieldBlock({
       })
     })]
   });
+  const content = /*#__PURE__*/_jsx(RichText, {
+    tagName: "span",
+    className: "wp-block-form-input__label-content",
+    value: label,
+    onChange: newLabel => setAttributes({
+      label: newLabel
+    }),
+    "aria-label": label ? __('Label') : __('Empty label'),
+    "data-empty": !label,
+    placeholder: __('Type the label for this input')
+  });
   if ('hidden' === type) {
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [controls, /*#__PURE__*/_jsx("input", {
@@ -95,17 +109,7 @@ function InputFieldBlock({
       className: clsx('wp-block-form-input__label', {
         'is-label-inline': inlineLabel || 'checkbox' === type
       }),
-      children: [/*#__PURE__*/_jsx(RichText, {
-        tagName: "span",
-        className: "wp-block-form-input__label-content",
-        value: label,
-        onChange: newLabel => setAttributes({
-          label: newLabel
-        }),
-        "aria-label": label ? __('Label') : __('Empty label'),
-        "data-empty": label ? false : true,
-        placeholder: __('Type the label for this input')
-      }), /*#__PURE__*/_jsx(TagName, {
+      children: [!isCheckboxOrRadio && content, /*#__PURE__*/_jsx(TagName, {
         type: 'textarea' === type ? undefined : type,
         className: clsx(className, 'wp-block-form-input__input', colorProps.className, borderProps.className),
         "aria-label": __('Optional placeholder text')
@@ -123,7 +127,7 @@ function InputFieldBlock({
           ...borderProps.style,
           ...colorProps.style
         }
-      })]
+      }), isCheckboxOrRadio && content]
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","__","InspectorControls","RichText","useBlockProps","__experimentalUseBorderProps","useBorderProps","__experimentalUseColorProps","useColorProps","PanelBody","TextControl","CheckboxControl","useRef","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","InputFieldBlock","attributes","setAttributes","className","type","name","label","inlineLabel","required","placeholder","value","blockProps","ref","TagName","borderProps","colorProps","current","focus","controls","children","title","__nextHasNoMarginBottom","checked","onChange","newVal","group","__next40pxDefaultSize","autoComplete","help","event","target","tagName","newLabel","undefined","style"],"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\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\" atribute 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\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<RichText\n\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\tclassName=\"wp-block-form-input__label-content\"\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( newLabel ) =>\n\t\t\t\t\t\tsetAttributes( { label: newLabel } )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }\n\t\t\t\t\tdata-empty={ label ? false : true }\n\t\t\t\t\tplaceholder={ __( 'Type the label for this input' ) }\n\t\t\t\t/>\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</span>\n\t\t</div>\n\t);\n}\n\nexport default InputFieldBlock;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","__","InspectorControls","RichText","useBlockProps","__experimentalUseBorderProps","useBorderProps","__experimentalUseColorProps","useColorProps","PanelBody","TextControl","CheckboxControl","useRef","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","InputFieldBlock","attributes","setAttributes","className","type","name","label","inlineLabel","required","placeholder","value","blockProps","ref","TagName","borderProps","colorProps","current","focus","isCheckboxOrRadio","controls","children","title","__nextHasNoMarginBottom","checked","onChange","newVal","group","__next40pxDefaultSize","autoComplete","help","content","tagName","newLabel","event","target","undefined","style"],"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\" atribute 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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SACCC,iBAAiB,EACjBC,QAAQ,EACRC,aAAa,EACbC,4BAA4B,IAAIC,cAAc,EAC9CC,2BAA2B,IAAIC,aAAa,QACtC,yBAAyB;AAChC,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ,uBAAuB;AAE/E,SAASC,MAAM,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAE5C,SAASC,eAAeA,CAAE;EAAEC,UAAU;EAAEC,aAAa;EAAEC;AAAU,CAAC,EAAG;EACpE,MAAM;IAAEC,IAAI;IAAEC,IAAI;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAM,CAAC,GACrET,UAAU;EACX,MAAMU,UAAU,GAAG1B,aAAa,CAAC,CAAC;EAClC,MAAM2B,GAAG,GAAGnB,MAAM,CAAC,CAAC;EACpB,MAAMoB,OAAO,GAAGT,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,OAAO;EAE1D,MAAMU,WAAW,GAAG3B,cAAc,CAAEc,UAAW,CAAC;EAChD,MAAMc,UAAU,GAAG1B,aAAa,CAAEY,UAAW,CAAC;EAC9C,IAAKW,GAAG,CAACI,OAAO,EAAG;IAClBJ,GAAG,CAACI,OAAO,CAACC,KAAK,CAAC,CAAC;EACpB;;EAEA;EACA,MAAMC,iBAAiB,GAAGd,IAAI,KAAK,UAAU,IAAIA,IAAI,KAAK,OAAO;EAEjE,MAAMe,QAAQ,gBACbtB,KAAA,CAAAE,SAAA;IAAAqB,QAAA,GACG,QAAQ,KAAKhB,IAAI,iBAClBT,IAAA,CAACZ,iBAAiB;MAAAqC,QAAA,eACjBvB,KAAA,CAACP,SAAS;QAAC+B,KAAK,EAAGvC,EAAE,CAAE,UAAW,CAAG;QAAAsC,QAAA,GAClC,UAAU,KAAKhB,IAAI,iBACpBT,IAAA,CAACH,eAAe;UACf8B,uBAAuB;UACvBhB,KAAK,EAAGxB,EAAE,CAAE,cAAe,CAAG;UAC9ByC,OAAO,EAAGhB,WAAa;UACvBiB,QAAQ,EAAKC,MAAM,IAAM;YACxBvB,aAAa,CAAE;cACdK,WAAW,EAAEkB;YACd,CAAE,CAAC;UACJ;QAAG,CACH,CACD,eACD9B,IAAA,CAACH,eAAe;UACf8B,uBAAuB;UACvBhB,KAAK,EAAGxB,EAAE,CAAE,UAAW,CAAG;UAC1ByC,OAAO,EAAGf,QAAU;UACpBgB,QAAQ,EAAKC,MAAM,IAAM;YACxBvB,aAAa,CAAE;cACdM,QAAQ,EAAEiB;YACX,CAAE,CAAC;UACJ;QAAG,CACH,CAAC;MAAA,CACQ;IAAC,CACM,CACnB,eACD9B,IAAA,CAACZ,iBAAiB;MAAC2C,KAAK,EAAC,UAAU;MAAAN,QAAA,eAClCzB,IAAA,CAACJ,WAAW;QACXoC,qBAAqB;QACrBL,uBAAuB;QACvBM,YAAY,EAAC,KAAK;QAClBtB,KAAK,EAAGxB,EAAE,CAAE,MAAO,CAAG;QACtB4B,KAAK,EAAGL,IAAM;QACdmB,QAAQ,EAAKC,MAAM,IAAM;UACxBvB,aAAa,CAAE;YACdG,IAAI,EAAEoB;UACP,CAAE,CAAC;QACJ,CAAG;QACHI,IAAI,EAAG/C,EAAE,CACR,0GACD;MAAG,CACH;IAAC,CACgB,CAAC;EAAA,CACnB,CACF;EAED,MAAMgD,OAAO,gBACZnC,IAAA,CAACX,QAAQ;IACR+C,OAAO,EAAC,MAAM;IACd5B,SAAS,EAAC,oCAAoC;IAC9CO,KAAK,EAAGJ,KAAO;IACfkB,QAAQ,EAAKQ,QAAQ,IAAM9B,aAAa,CAAE;MAAEI,KAAK,EAAE0B;IAAS,CAAE,CAAG;IACjE,cAAa1B,KAAK,GAAGxB,EAAE,CAAE,OAAQ,CAAC,GAAGA,EAAE,CAAE,aAAc,CAAG;IAC1D,cAAa,CAAEwB,KAAO;IACtBG,WAAW,EAAG3B,EAAE,CAAE,+BAAgC;EAAG,CACrD,CACD;EAED,IAAK,QAAQ,KAAKsB,IAAI,EAAG;IACxB,oBACCP,KAAA,CAAAE,SAAA;MAAAqB,QAAA,GACGD,QAAQ,eACVxB,IAAA;QACCS,IAAI,EAAC,QAAQ;QACbD,SAAS,EAAGtB,IAAI,CACfsB,SAAS,EACT,4BAA4B,EAC5BY,UAAU,CAACZ,SAAS,EACpBW,WAAW,CAACX,SACb,CAAG;QACH,cAAarB,EAAE,CAAE,OAAQ,CAAG;QAC5B4B,KAAK,EAAGA,KAAO;QACfc,QAAQ,EAAKS,KAAK,IACjB/B,aAAa,CAAE;UAAEQ,KAAK,EAAEuB,KAAK,CAACC,MAAM,CAACxB;QAAM,CAAE;MAC7C,CACD,CAAC;IAAA,CACD,CAAC;EAEL;EAEA,oBACCb,KAAA;IAAA,GAAUc,UAAU;IAAAS,QAAA,GACjBD,QAAQ,eACVtB,KAAA;MACCM,SAAS,EAAGtB,IAAI,CAAE,4BAA4B,EAAE;QAC/C,iBAAiB,EAAE0B,WAAW,IAAI,UAAU,KAAKH;MAClD,CAAE,CAAG;MAAAgB,QAAA,GAEH,CAAEF,iBAAiB,IAAIY,OAAO,eAChCnC,IAAA,CAACkB,OAAO;QACPT,IAAI,EAAG,UAAU,KAAKA,IAAI,GAAG+B,SAAS,GAAG/B,IAAM;QAC/CD,SAAS,EAAGtB,IAAI,CACfsB,SAAS,EACT,4BAA4B,EAC5BY,UAAU,CAACZ,SAAS,EACpBW,WAAW,CAACX,SACb,CAAG;QACH,cAAarB,EAAE,CAAE,2BAA4B;QAC7C;QACA;QACA;QAAA;QACA2B,WAAW,EACVA,WAAW,GAAG0B,SAAS,GAAGrD,EAAE,CAAE,uBAAwB,CACtD;QACD4B,KAAK,EAAGD,WAAa;QACrBe,QAAQ,EAAKS,KAAK,IACjB/B,aAAa,CAAE;UAAEO,WAAW,EAAEwB,KAAK,CAACC,MAAM,CAACxB;QAAM,CAAE,CACnD;QACD,iBAAgBF,QAAU;QAC1B4B,KAAK,EAAG;UACP,GAAGtB,WAAW,CAACsB,KAAK;UACpB,GAAGrB,UAAU,CAACqB;QACf;MAAG,CACH,CAAC,EACAlB,iBAAiB,IAAIY,OAAO;IAAA,CACzB,CAAC;EAAA,CACH,CAAC;AAER;AAEA,eAAe9B,eAAe","ignoreList":[]}

package/build-module/form-input/save.js

@@ -49,6 +49,9 @@ export default function save({
   const inputClasses = clsx('wp-block-form-input__input', colorProps.className, borderProps.className);
   const TagName = type === 'textarea' ? 'textarea' : 'input';
   const blockProps = useBlockProps.save();
+
+  // Note: radio inputs aren't implemented yet.
+  const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
   if ('hidden' === type) {
     return /*#__PURE__*/_jsx("input", {
       type: type,
@@ -62,7 +65,7 @@ export default function save({
       className: clsx('wp-block-form-input__label', {
         'is-label-inline': inlineLabel
       }),
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [!isCheckboxOrRadio && /*#__PURE__*/_jsx("span", {
         className: "wp-block-form-input__label-content",
         children: /*#__PURE__*/_jsx(RichText.Content, {
           value: label
@@ -75,6 +78,11 @@ export default function save({
         "aria-required": required,
         placeholder: placeholder || undefined,
         style: inputStyle
+      }), isCheckboxOrRadio && /*#__PURE__*/_jsx("span", {
+        className: "wp-block-form-input__label-content",
+        children: /*#__PURE__*/_jsx(RichText.Content, {
+          value: label
+        })
       })]
     })
   });

package/build-module/form-input/save.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","removeAccents","RichText","useBlockProps","__experimentalGetBorderClassesAndStyles","getBorderClassesAndStyles","__experimentalGetColorClassesAndStyles","getColorClassesAndStyles","__unstableStripHTML","stripHTML","jsx","_jsx","jsxs","_jsxs","getNameFromLabel","content","replace","toLowerCase","save","attributes","type","name","label","inlineLabel","required","placeholder","value","borderProps","colorProps","inputStyle","style","inputClasses","className","TagName","blockProps","children","Content","undefined"],"sources":["@wordpress/block-library/src/form-input/save.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tRichText,\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Get the name attribute from a content string.\n *\n * @param {string} content The block content.\n *\n * @return {string} Returns the slug.\n */\nconst getNameFromLabel = ( content ) => {\n\treturn (\n\t\tremoveAccents( stripHTML( content ) )\n\t\t\t// Convert anything that's not a letter or number to a hyphen.\n\t\t\t.replace( /[^\\p{L}\\p{N}]+/gu, '-' )\n\t\t\t// Convert to lowercase\n\t\t\t.toLowerCase()\n\t\t\t// Remove any remaining leading or trailing hyphens.\n\t\t\t.replace( /(^-+)|(-+$)/g, '' )\n\t);\n};\n\nexport default function save( { attributes } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\tconst inputStyle = {\n\t\t...borderProps.style,\n\t\t...colorProps.style,\n\t};\n\n\tconst inputClasses = clsx(\n\t\t'wp-block-form-input__input',\n\t\tcolorProps.className,\n\t\tborderProps.className\n\t);\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tconst blockProps = useBlockProps.save();\n\n\tif ( 'hidden' === type ) {\n\t\treturn <input type={ type } name={ name } value={ value } />;\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ /* eslint-disable jsx-a11y/label-has-associated-control */ }\n\t\t\t<label\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t</span>\n\t\t\t\t<TagName\n\t\t\t\t\tclassName={ inputClasses }\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tname={ name || getNameFromLabel( label ) }\n\t\t\t\t\trequired={ required }\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\t\tstyle={ inputStyle }\n\t\t\t\t/>\n\t\t\t</label>\n\t\t\t{ /* eslint-enable jsx-a11y/label-has-associated-control */ }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,aAAa,MAAM,gBAAgB;;AAE1C;AACA;AACA;AACA,SACCC,QAAQ,EACRC,aAAa,EACbC,uCAAuC,IAAIC,yBAAyB,EACpEC,sCAAsC,IAAIC,wBAAwB,QAC5D,yBAAyB;AAChC,SAASC,mBAAmB,IAAIC,SAAS,QAAQ,gBAAgB;;AAEjE;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAOA,MAAMC,gBAAgB,GAAKC,OAAO,IAAM;EACvC,OACCd,aAAa,CAAEQ,SAAS,CAAEM,OAAQ,CAAE;EACnC;EAAA,CACCC,OAAO,CAAE,kBAAkB,EAAE,GAAI;EAClC;EAAA,CACCC,WAAW,CAAC;EACb;EAAA,CACCD,OAAO,CAAE,cAAc,EAAE,EAAG,CAAC;AAEjC,CAAC;AAED,eAAe,SAASE,IAAIA,CAAE;EAAEC;AAAW,CAAC,EAAG;EAC9C,MAAM;IAAEC,IAAI;IAAEC,IAAI;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAM,CAAC,GACrEP,UAAU;EAEX,MAAMQ,WAAW,GAAGtB,yBAAyB,CAAEc,UAAW,CAAC;EAC3D,MAAMS,UAAU,GAAGrB,wBAAwB,CAAEY,UAAW,CAAC;EAEzD,MAAMU,UAAU,GAAG;IAClB,GAAGF,WAAW,CAACG,KAAK;IACpB,GAAGF,UAAU,CAACE;EACf,CAAC;EAED,MAAMC,YAAY,GAAG/B,IAAI,CACxB,4BAA4B,EAC5B4B,UAAU,CAACI,SAAS,EACpBL,WAAW,CAACK,SACb,CAAC;EACD,MAAMC,OAAO,GAAGb,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,OAAO;EAE1D,MAAMc,UAAU,GAAG/B,aAAa,CAACe,IAAI,CAAC,CAAC;EAEvC,IAAK,QAAQ,KAAKE,IAAI,EAAG;IACxB,oBAAOT,IAAA;MAAOS,IAAI,EAAGA,IAAM;MAACC,IAAI,EAAGA,IAAM;MAACK,KAAK,EAAGA;IAAO,CAAE,CAAC;EAC7D;EAEA,oBACCf,IAAA;IAAA,GAAUuB,UAAU;IAAAC,QAAA,eAEnBtB,KAAA;MACCmB,SAAS,EAAGhC,IAAI,CAAE,4BAA4B,EAAE;QAC/C,iBAAiB,EAAEuB;MACpB,CAAE,CAAG;MAAAY,QAAA,gBAELxB,IAAA;QAAMqB,SAAS,EAAC,oCAAoC;QAAAG,QAAA,eACnDxB,IAAA,CAACT,QAAQ,CAACkC,OAAO;UAACV,KAAK,EAAGJ;QAAO,CAAE;MAAC,CAC/B,CAAC,eACPX,IAAA,CAACsB,OAAO;QACPD,SAAS,EAAGD,YAAc;QAC1BX,IAAI,EAAG,UAAU,KAAKA,IAAI,GAAGiB,SAAS,GAAGjB,IAAM;QAC/CC,IAAI,EAAGA,IAAI,IAAIP,gBAAgB,CAAEQ,KAAM,CAAG;QAC1CE,QAAQ,EAAGA,QAAU;QACrB,iBAAgBA,QAAU;QAC1BC,WAAW,EAAGA,WAAW,IAAIY,SAAW;QACxCP,KAAK,EAAGD;MAAY,CACpB,CAAC;IAAA,CACI;EAAC,CAEJ,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["clsx","removeAccents","RichText","useBlockProps","__experimentalGetBorderClassesAndStyles","getBorderClassesAndStyles","__experimentalGetColorClassesAndStyles","getColorClassesAndStyles","__unstableStripHTML","stripHTML","jsx","_jsx","jsxs","_jsxs","getNameFromLabel","content","replace","toLowerCase","save","attributes","type","name","label","inlineLabel","required","placeholder","value","borderProps","colorProps","inputStyle","style","inputClasses","className","TagName","blockProps","isCheckboxOrRadio","children","Content","undefined"],"sources":["@wordpress/block-library/src/form-input/save.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tRichText,\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Get the name attribute from a content string.\n *\n * @param {string} content The block content.\n *\n * @return {string} Returns the slug.\n */\nconst getNameFromLabel = ( content ) => {\n\treturn (\n\t\tremoveAccents( stripHTML( content ) )\n\t\t\t// Convert anything that's not a letter or number to a hyphen.\n\t\t\t.replace( /[^\\p{L}\\p{N}]+/gu, '-' )\n\t\t\t// Convert to lowercase\n\t\t\t.toLowerCase()\n\t\t\t// Remove any remaining leading or trailing hyphens.\n\t\t\t.replace( /(^-+)|(-+$)/g, '' )\n\t);\n};\n\nexport default function save( { attributes } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\tconst inputStyle = {\n\t\t...borderProps.style,\n\t\t...colorProps.style,\n\t};\n\n\tconst inputClasses = clsx(\n\t\t'wp-block-form-input__input',\n\t\tcolorProps.className,\n\t\tborderProps.className\n\t);\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tconst blockProps = useBlockProps.save();\n\n\t// Note: radio inputs aren't implemented yet.\n\tconst isCheckboxOrRadio = type === 'checkbox' || type === 'radio';\n\n\tif ( 'hidden' === type ) {\n\t\treturn <input type={ type } name={ name } value={ value } />;\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ /* eslint-disable jsx-a11y/label-has-associated-control */ }\n\t\t\t<label\n\t\t\t\tclassName={ clsx( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! isCheckboxOrRadio && (\n\t\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t\t<TagName\n\t\t\t\t\tclassName={ inputClasses }\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tname={ name || getNameFromLabel( label ) }\n\t\t\t\t\trequired={ required }\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\t\tstyle={ inputStyle }\n\t\t\t\t/>\n\t\t\t\t{ isCheckboxOrRadio && (\n\t\t\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t\t\t<RichText.Content value={ label } />\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</label>\n\t\t\t{ /* eslint-enable jsx-a11y/label-has-associated-control */ }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,aAAa,MAAM,gBAAgB;;AAE1C;AACA;AACA;AACA,SACCC,QAAQ,EACRC,aAAa,EACbC,uCAAuC,IAAIC,yBAAyB,EACpEC,sCAAsC,IAAIC,wBAAwB,QAC5D,yBAAyB;AAChC,SAASC,mBAAmB,IAAIC,SAAS,QAAQ,gBAAgB;;AAEjE;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAOA,MAAMC,gBAAgB,GAAKC,OAAO,IAAM;EACvC,OACCd,aAAa,CAAEQ,SAAS,CAAEM,OAAQ,CAAE;EACnC;EAAA,CACCC,OAAO,CAAE,kBAAkB,EAAE,GAAI;EAClC;EAAA,CACCC,WAAW,CAAC;EACb;EAAA,CACCD,OAAO,CAAE,cAAc,EAAE,EAAG,CAAC;AAEjC,CAAC;AAED,eAAe,SAASE,IAAIA,CAAE;EAAEC;AAAW,CAAC,EAAG;EAC9C,MAAM;IAAEC,IAAI;IAAEC,IAAI;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAM,CAAC,GACrEP,UAAU;EAEX,MAAMQ,WAAW,GAAGtB,yBAAyB,CAAEc,UAAW,CAAC;EAC3D,MAAMS,UAAU,GAAGrB,wBAAwB,CAAEY,UAAW,CAAC;EAEzD,MAAMU,UAAU,GAAG;IAClB,GAAGF,WAAW,CAACG,KAAK;IACpB,GAAGF,UAAU,CAACE;EACf,CAAC;EAED,MAAMC,YAAY,GAAG/B,IAAI,CACxB,4BAA4B,EAC5B4B,UAAU,CAACI,SAAS,EACpBL,WAAW,CAACK,SACb,CAAC;EACD,MAAMC,OAAO,GAAGb,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,OAAO;EAE1D,MAAMc,UAAU,GAAG/B,aAAa,CAACe,IAAI,CAAC,CAAC;;EAEvC;EACA,MAAMiB,iBAAiB,GAAGf,IAAI,KAAK,UAAU,IAAIA,IAAI,KAAK,OAAO;EAEjE,IAAK,QAAQ,KAAKA,IAAI,EAAG;IACxB,oBAAOT,IAAA;MAAOS,IAAI,EAAGA,IAAM;MAACC,IAAI,EAAGA,IAAM;MAACK,KAAK,EAAGA;IAAO,CAAE,CAAC;EAC7D;EAEA,oBACCf,IAAA;IAAA,GAAUuB,UAAU;IAAAE,QAAA,eAEnBvB,KAAA;MACCmB,SAAS,EAAGhC,IAAI,CAAE,4BAA4B,EAAE;QAC/C,iBAAiB,EAAEuB;MACpB,CAAE,CAAG;MAAAa,QAAA,GAEH,CAAED,iBAAiB,iBACpBxB,IAAA;QAAMqB,SAAS,EAAC,oCAAoC;QAAAI,QAAA,eACnDzB,IAAA,CAACT,QAAQ,CAACmC,OAAO;UAACX,KAAK,EAAGJ;QAAO,CAAE;MAAC,CAC/B,CACN,eACDX,IAAA,CAACsB,OAAO;QACPD,SAAS,EAAGD,YAAc;QAC1BX,IAAI,EAAG,UAAU,KAAKA,IAAI,GAAGkB,SAAS,GAAGlB,IAAM;QAC/CC,IAAI,EAAGA,IAAI,IAAIP,gBAAgB,CAAEQ,KAAM,CAAG;QAC1CE,QAAQ,EAAGA,QAAU;QACrB,iBAAgBA,QAAU;QAC1BC,WAAW,EAAGA,WAAW,IAAIa,SAAW;QACxCR,KAAK,EAAGD;MAAY,CACpB,CAAC,EACAM,iBAAiB,iBAClBxB,IAAA;QAAMqB,SAAS,EAAC,oCAAoC;QAAAI,QAAA,eACnDzB,IAAA,CAACT,QAAQ,CAACmC,OAAO;UAACX,KAAK,EAAGJ;QAAO,CAAE;MAAC,CAC/B,CACN;IAAA,CACK;EAAC,CAEJ,CAAC;AAER","ignoreList":[]}

package/build-module/freeform/modal.js

@@ -20,10 +20,8 @@ function ModalAuxiliaryActions({
   if (isMobileViewport) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Button
-  // TODO: Switch to `true` (40px size) if possible
-  , {
-    __next40pxDefaultSize: false,
+  return /*#__PURE__*/_jsx(Button, {
+    size: "small",
     onClick: onClick,
     icon: fullscreen,
     isPressed: isModalFullScreen,
@@ -109,19 +107,15 @@ export default function ModalEdit(props) {
         justify: "flex-end",
         expanded: false,
         children: [/*#__PURE__*/_jsx(FlexItem, {
-          children: /*#__PURE__*/_jsx(Button
-          // TODO: Switch to `true` (40px size) if possible
-          , {
-            __next40pxDefaultSize: false,
+          children: /*#__PURE__*/_jsx(Button, {
+            __next40pxDefaultSize: true,
             variant: "tertiary",
             onClick: onClose,
             children: __('Cancel')
           })
         }), /*#__PURE__*/_jsx(FlexItem, {
-          children: /*#__PURE__*/_jsx(Button
-          // TODO: Switch to `true` (40px size) if possible
-          , {
-            __next40pxDefaultSize: false,
+          children: /*#__PURE__*/_jsx(Button, {
+            __next40pxDefaultSize: true,
             variant: "primary",
             onClick: () => {
               setAttributes({

package/build-module/freeform/modal.js.map

@@ -1 +1 @@
-{"version":3,"names":["BlockControls","store","ToolbarGroup","ToolbarButton","Modal","Button","Flex","FlexItem","useEffect","useState","RawHTML","__","useSelect","fullscreen","useViewportMatch","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ModalAuxiliaryActions","onClick","isModalFullScreen","isMobileViewport","__next40pxDefaultSize","icon","isPressed","label","ClassicEdit","props","styles","select","getSettings","baseURL","suffix","settings","window","wpEditorL10n","tinymce","EditorManager","overrideDefaults","base_url","wp","oldEditor","initialize","id","setup","editor","on","doc","getDoc","forEach","css","styleEl","createElement","innerHTML","head","appendChild","remove","ModalEdit","clientId","attributes","content","setAttributes","onReplace","isOpen","setOpen","setIsModalFullScreen","onClose","children","title","onRequestClose","shouldCloseOnClickOutside","overlayClassName","isFullScreen","className","headerActions","defaultValue","justify","expanded","variant","getContent"],"sources":["@wordpress/block-library/src/freeform/modal.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BlockControls, store } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tModal,\n\tButton,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { useEffect, useState, RawHTML } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { fullscreen } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\nfunction ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {\n\t// 'small' to match the rules in editor.scss.\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tif ( isMobileViewport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\t// TODO: Switch to `true` (40px size) if possible\n\t\t\t__next40pxDefaultSize={ false }\n\t\t\tonClick={ onClick }\n\t\t\ticon={ fullscreen }\n\t\t\tisPressed={ isModalFullScreen }\n\t\t\tlabel={\n\t\t\t\tisModalFullScreen\n\t\t\t\t\t? __( 'Exit fullscreen' )\n\t\t\t\t\t: __( 'Enter fullscreen' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction ClassicEdit( props ) {\n\tconst styles = useSelect(\n\t\t( select ) => select( store ).getSettings().styles\n\t);\n\tuseEffect( () => {\n\t\tconst { baseURL, suffix, settings } = window.wpEditorL10n.tinymce;\n\n\t\twindow.tinymce.EditorManager.overrideDefaults( {\n\t\t\tbase_url: baseURL,\n\t\t\tsuffix,\n\t\t} );\n\n\t\twindow.wp.oldEditor.initialize( props.id, {\n\t\t\ttinymce: {\n\t\t\t\t...settings,\n\t\t\t\tsetup( editor ) {\n\t\t\t\t\teditor.on( 'init', () => {\n\t\t\t\t\t\tconst doc = editor.getDoc();\n\t\t\t\t\t\tstyles.forEach( ( { css } ) => {\n\t\t\t\t\t\t\tconst styleEl = doc.createElement( 'style' );\n\t\t\t\t\t\t\tstyleEl.innerHTML = css;\n\t\t\t\t\t\t\tdoc.head.appendChild( styleEl );\n\t\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\treturn () => {\n\t\t\twindow.wp.oldEditor.remove( props.id );\n\t\t};\n\t}, [] );\n\n\treturn <textarea { ...props } />;\n}\n\nexport default function ModalEdit( props ) {\n\tconst {\n\t\tclientId,\n\t\tattributes: { content },\n\t\tsetAttributes,\n\t\tonReplace,\n\t} = props;\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst [ isModalFullScreen, setIsModalFullScreen ] = useState( false );\n\tconst id = `editor-${ clientId }`;\n\n\tconst onClose = () => ( content ? setOpen( false ) : onReplace( [] ) );\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton onClick={ () => setOpen( true ) }>\n\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t{ content && <RawHTML>{ content }</RawHTML> }\n\t\t\t{ ( isOpen || ! content ) && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Classic Editor' ) }\n\t\t\t\t\tonRequestClose={ onClose }\n\t\t\t\t\tshouldCloseOnClickOutside={ false }\n\t\t\t\t\toverlayClassName=\"block-editor-freeform-modal\"\n\t\t\t\t\tisFullScreen={ isModalFullScreen }\n\t\t\t\t\tclassName=\"block-editor-freeform-modal__content\"\n\t\t\t\t\theaderActions={\n\t\t\t\t\t\t<ModalAuxiliaryActions\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetIsModalFullScreen( ! isModalFullScreen )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisModalFullScreen={ isModalFullScreen }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ClassicEdit id={ id } defaultValue={ content } />\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"block-editor-freeform-modal__actions\"\n\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t// TODO: Switch to `true` (40px size) if possible\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ false }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tcontent:\n\t\t\t\t\t\t\t\t\t\t\twindow.wp.oldEditor.getContent(\n\t\t\t\t\t\t\t\t\t\t\t\tid\n\t\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\tsetOpen( false );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["BlockControls","store","ToolbarGroup","ToolbarButton","Modal","Button","Flex","FlexItem","useEffect","useState","RawHTML","__","useSelect","fullscreen","useViewportMatch","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ModalAuxiliaryActions","onClick","isModalFullScreen","isMobileViewport","size","icon","isPressed","label","ClassicEdit","props","styles","select","getSettings","baseURL","suffix","settings","window","wpEditorL10n","tinymce","EditorManager","overrideDefaults","base_url","wp","oldEditor","initialize","id","setup","editor","on","doc","getDoc","forEach","css","styleEl","createElement","innerHTML","head","appendChild","remove","ModalEdit","clientId","attributes","content","setAttributes","onReplace","isOpen","setOpen","setIsModalFullScreen","onClose","children","title","onRequestClose","shouldCloseOnClickOutside","overlayClassName","isFullScreen","className","headerActions","defaultValue","justify","expanded","__next40pxDefaultSize","variant","getContent"],"sources":["@wordpress/block-library/src/freeform/modal.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { BlockControls, store } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tModal,\n\tButton,\n\tFlex,\n\tFlexItem,\n} from '@wordpress/components';\nimport { useEffect, useState, RawHTML } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { fullscreen } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\nfunction ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {\n\t// 'small' to match the rules in editor.scss.\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tif ( isMobileViewport ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tsize=\"small\"\n\t\t\tonClick={ onClick }\n\t\t\ticon={ fullscreen }\n\t\t\tisPressed={ isModalFullScreen }\n\t\t\tlabel={\n\t\t\t\tisModalFullScreen\n\t\t\t\t\t? __( 'Exit fullscreen' )\n\t\t\t\t\t: __( 'Enter fullscreen' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction ClassicEdit( props ) {\n\tconst styles = useSelect(\n\t\t( select ) => select( store ).getSettings().styles\n\t);\n\tuseEffect( () => {\n\t\tconst { baseURL, suffix, settings } = window.wpEditorL10n.tinymce;\n\n\t\twindow.tinymce.EditorManager.overrideDefaults( {\n\t\t\tbase_url: baseURL,\n\t\t\tsuffix,\n\t\t} );\n\n\t\twindow.wp.oldEditor.initialize( props.id, {\n\t\t\ttinymce: {\n\t\t\t\t...settings,\n\t\t\t\tsetup( editor ) {\n\t\t\t\t\teditor.on( 'init', () => {\n\t\t\t\t\t\tconst doc = editor.getDoc();\n\t\t\t\t\t\tstyles.forEach( ( { css } ) => {\n\t\t\t\t\t\t\tconst styleEl = doc.createElement( 'style' );\n\t\t\t\t\t\t\tstyleEl.innerHTML = css;\n\t\t\t\t\t\t\tdoc.head.appendChild( styleEl );\n\t\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\treturn () => {\n\t\t\twindow.wp.oldEditor.remove( props.id );\n\t\t};\n\t}, [] );\n\n\treturn <textarea { ...props } />;\n}\n\nexport default function ModalEdit( props ) {\n\tconst {\n\t\tclientId,\n\t\tattributes: { content },\n\t\tsetAttributes,\n\t\tonReplace,\n\t} = props;\n\tconst [ isOpen, setOpen ] = useState( false );\n\tconst [ isModalFullScreen, setIsModalFullScreen ] = useState( false );\n\tconst id = `editor-${ clientId }`;\n\n\tconst onClose = () => ( content ? setOpen( false ) : onReplace( [] ) );\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton onClick={ () => setOpen( true ) }>\n\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t{ content && <RawHTML>{ content }</RawHTML> }\n\t\t\t{ ( isOpen || ! content ) && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Classic Editor' ) }\n\t\t\t\t\tonRequestClose={ onClose }\n\t\t\t\t\tshouldCloseOnClickOutside={ false }\n\t\t\t\t\toverlayClassName=\"block-editor-freeform-modal\"\n\t\t\t\t\tisFullScreen={ isModalFullScreen }\n\t\t\t\t\tclassName=\"block-editor-freeform-modal__content\"\n\t\t\t\t\theaderActions={\n\t\t\t\t\t\t<ModalAuxiliaryActions\n\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\tsetIsModalFullScreen( ! isModalFullScreen )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisModalFullScreen={ isModalFullScreen }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ClassicEdit id={ id } defaultValue={ content } />\n\t\t\t\t\t<Flex\n\t\t\t\t\t\tclassName=\"block-editor-freeform-modal__actions\"\n\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tcontent:\n\t\t\t\t\t\t\t\t\t\t\twindow.wp.oldEditor.getContent(\n\t\t\t\t\t\t\t\t\t\t\t\tid\n\t\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\tsetOpen( false );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/image/edit.js

@@ -6,11 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { isBlobURL } from '@wordpress/blob';
-import { store as blocksStore } from '@wordpress/blocks';
+import { isBlobURL, createBlobURL } from '@wordpress/blob';
+import { store as blocksStore, createBlock } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { BlockIcon, MediaPlaceholder, useBlockProps, store as blockEditorStore, __experimentalUseBorderProps as useBorderProps, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, useBlockEditingMode } from '@wordpress/block-editor';
+import { BlockIcon, useBlockProps, MediaPlaceholder, store as blockEditorStore, __experimentalUseBorderProps as useBorderProps, __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, useBlockEditingMode } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
@@ -23,6 +23,8 @@ import { useResizeObserver } from '@wordpress/compose';
 import { unlock } from '../lock-unlock';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
+import { isValidFileType } from './utils';
+import { useMaxWidthObserver } from './use-max-width-observer';
 
 /**
  * Module constants
@@ -86,9 +88,16 @@ export function ImageEdit({
     metadata
   } = attributes;
   const [temporaryURL, setTemporaryURL] = useState(attributes.blob);
-  const [contentResizeListener, {
-    width: containerWidth
+  const containerRef = useRef();
+  // Only observe the max width from the parent container when the parent layout is not flex nor grid.
+  // This won't work for them because the container width changes with the image.
+  // TODO: Find a way to observe the container width for flex and grid layouts.
+  const isMaxWidthContainerWidth = !parentLayout || parentLayout.type !== 'flex' && parentLayout.type !== 'grid';
+  const [maxWidthObserver, maxContentWidth] = useMaxWidthObserver();
+  const [placeholderResizeListener, {
+    width: placeholderWidth
   }] = useResizeObserver();
+  const isSmallContainer = placeholderWidth && placeholderWidth < 160;
   const altRef = useRef();
   useEffect(() => {
     altRef.current = alt;
@@ -98,7 +107,8 @@ export function ImageEdit({
     captionRef.current = caption;
   }, [caption]);
   const {
-    __unstableMarkNextChangeAsNotPersistent
+    __unstableMarkNextChangeAsNotPersistent,
+    replaceBlock
   } = useDispatch(blockEditorStore);
   useEffect(() => {
     if (['wide', 'full'].includes(align)) {
@@ -112,7 +122,10 @@ export function ImageEdit({
     }
   }, [__unstableMarkNextChangeAsNotPersistent, align, setAttributes]);
   const {
-    getSettings
+    getSettings,
+    getBlockRootClientId,
+    getBlockName,
+    canInsertBlockType
   } = useSelect(blockEditorStore);
   const blockEditingMode = useBlockEditingMode();
   const {
@@ -129,7 +142,35 @@ export function ImageEdit({
       blob: undefined
     });
   }
+  function onSelectImagesList(images) {
+    const win = containerRef.current?.ownerDocument.defaultView;
+    if (images.every(file => file instanceof win.File)) {
+      /** @type {File[]} */
+      const files = images;
+      const rootClientId = getBlockRootClientId(clientId);
+      if (files.some(file => !isValidFileType(file))) {
+        // Copied from the same notice in the gallery block.
+        createErrorNotice(__('If uploading to a gallery all files need to be image formats'), {
+          id: 'gallery-upload-invalid-file',
+          type: 'snackbar'
+        });
+      }
+      const imageBlocks = files.filter(file => isValidFileType(file)).map(file => createBlock('core/image', {
+        blob: createBlobURL(file)
+      }));
+      if (getBlockName(rootClientId) === 'core/gallery') {
+        replaceBlock(clientId, imageBlocks);
+      } else if (canInsertBlockType('core/gallery', rootClientId)) {
+        const galleryBlock = createBlock('core/gallery', {}, imageBlocks);
+        replaceBlock(clientId, galleryBlock);
+      }
+    }
+  }
   function onSelectImage(media) {
+    if (Array.isArray(media)) {
+      onSelectImagesList(media);
+      return;
+    }
     if (!media || !media.url) {
       setAttributes({
         url: undefined,
@@ -260,6 +301,7 @@ export function ImageEdit({
     'has-custom-border': !!borderProps.className || borderProps.style && Object.keys(borderProps.style).length > 0
   });
   const blockProps = useBlockProps({
+    ref: containerRef,
     className: classes
   });
 
@@ -283,14 +325,14 @@ export function ImageEdit({
     };
   }, [context, isSingleSelected, metadata?.bindings?.url]);
   const placeholder = content => {
-    return /*#__PURE__*/_jsx(Placeholder, {
+    return /*#__PURE__*/_jsxs(Placeholder, {
       className: clsx('block-editor-media-placeholder', {
         [borderProps.className]: !!borderProps.className && !isSingleSelected
       }),
-      withIllustration: true,
-      icon: lockUrlControls ? pluginsIcon : icon,
-      label: __('Image'),
-      instructions: !lockUrlControls && __('Upload an image file, pick one from your media library, or add one with a URL.'),
+      icon: !isSmallContainer && (lockUrlControls ? pluginsIcon : icon),
+      withIllustration: !isSingleSelected || isSmallContainer,
+      label: !isSmallContainer && __('Image'),
+      instructions: !lockUrlControls && !isSmallContainer && __('Upload or drag an image file here, or pick one from your library.'),
       style: {
         aspectRatio: !(width && height) && aspectRatio ? aspectRatio : undefined,
         width: height && aspectRatio ? '100%' : width,
@@ -299,10 +341,7 @@ export function ImageEdit({
         ...borderProps.style,
         ...shadowProps.style
       },
-      children: lockUrlControls ? /*#__PURE__*/_jsx("span", {
-        className: "block-bindings-media-placeholder-message",
-        children: lockUrlControlsMessage
-      }) : content
+      children: [lockUrlControls && !isSmallContainer && lockUrlControlsMessage, !lockUrlControls && !isSmallContainer && content, placeholderResizeListener]
     });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -322,7 +361,7 @@ export function ImageEdit({
         clientId: clientId,
         blockEditingMode: blockEditingMode,
         parentLayoutType: parentLayout?.type,
-        containerWidth: containerWidth
+        maxContentWidth: maxContentWidth
       }), /*#__PURE__*/_jsx(MediaPlaceholder, {
         icon: /*#__PURE__*/_jsx(BlockIcon, {
           icon: icon
@@ -333,6 +372,7 @@ export function ImageEdit({
         placeholder: placeholder,
         accept: "image/*",
         allowedTypes: ALLOWED_MEDIA_TYPES,
+        handleUpload: files => files.length === 1,
         value: {
           id,
           src
@@ -343,7 +383,7 @@ export function ImageEdit({
     }),
     // The listener cannot be placed as the first element as it will break the in-between inserter.
     // See https://github.com/WordPress/gutenberg/blob/71134165868298fc15e22896d0c28b41b3755ff7/packages/block-editor/src/components/block-list/use-in-between-inserter.js#L120
-    contentResizeListener]
+    isSingleSelected && isMaxWidthContainerWidth && maxWidthObserver]
   });
 }
 export default ImageEdit;