@wordpress/block-library 9.41.1-next.v.202603161435.0 → 9.43.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 9.43.0 (2026-04-01)
+
+## 9.42.0 (2026-03-18)
+
 ## 9.41.0 (2026-03-04)
 
 ## 9.40.0 (2026-02-18)

package/build/form-input/edit.cjs

@@ -110,23 +110,38 @@ function InputFieldBlock({ attributes, setAttributes, className }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "advanced", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.TextControl,
-      {
-        __next40pxDefaultSize: true,
-        autoComplete: "off",
-        label: (0, import_i18n.__)("Name"),
-        value: name,
-        onChange: (newVal) => {
-          setAttributes({
-            name: newVal
-          });
-        },
-        help: (0, import_i18n.__)(
-          'Affects the "name" attribute of the input element, and is used as a name for the form submission results.'
-        )
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { group: "advanced", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.TextControl,
+        {
+          __next40pxDefaultSize: true,
+          autoComplete: "off",
+          label: (0, import_i18n.__)("Name"),
+          value: name,
+          onChange: (newVal) => {
+            setAttributes({
+              name: newVal
+            });
+          },
+          help: (0, import_i18n.__)(
+            'Affects the "name" attribute of the input element, and is used as a name for the form submission results.'
+          )
+        }
+      ),
+      "hidden" === type && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.TextControl,
+        {
+          __next40pxDefaultSize: true,
+          autoComplete: "off",
+          label: (0, import_i18n.__)("Value"),
+          value,
+          onChange: (newVal) => setAttributes({ value: newVal }),
+          help: (0, import_i18n.__)(
+            "Sets the stored value for this hidden field."
+          )
+        }
+      )
+    ] })
   ] });
   const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_block_editor.RichText,
@@ -141,21 +156,13 @@ function InputFieldBlock({ attributes, setAttributes, className }) {
     }
   );
   if ("hidden" === type) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...blockProps, children: [
       controls,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
+        "span",
         {
-          type: "hidden",
-          className: (0, import_clsx.default)(
-            className,
-            "wp-block-form-input__input",
-            colorProps.className,
-            borderProps.className
-          ),
-          "aria-label": (0, import_i18n.__)("Value"),
-          value,
-          onChange: (event) => setAttributes({ value: event.target.value })
+          className: "wp-block-form-input__label is-input-hidden",
+          "data-message": (0, import_i18n.__)("Hidden field")
         }
       )
     ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../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\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\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\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\u2026' )\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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",
+  "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\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\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\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\t{ 'hidden' === type && (\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tlabel={ __( 'Value' ) }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ ( newVal ) =>\n\t\t\t\t\t\t\tsetAttributes( { value: newVal } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'Sets the stored value for this hidden field.'\n\t\t\t\t\t\t) }\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<div { ...blockProps }>\n\t\t\t\t{ controls }\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"wp-block-form-input__label is-input-hidden\"\n\t\t\t\t\tdata-message={ __( 'Hidden field' ) }\n\t\t\t\t/>\n\t\t\t</div>\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\u2026' )\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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",
   "names": ["useBorderProps", "useColorProps", "ToolsPanel", "ToolsPanelItem", "clsx"]
 }

package/build/form-input/variations.cjs

@@ -89,6 +89,16 @@ var variations = [
     isDefault: true,
     scope: ["inserter", "transform"],
     isActive: (blockAttributes) => blockAttributes?.type === "number"
+  },
+  {
+    name: "hidden",
+    title: (0, import_i18n.__)("Hidden Input"),
+    icon: "visibility",
+    description: (0, import_i18n.__)("A hidden input field."),
+    attributes: { type: "hidden" },
+    isDefault: true,
+    scope: ["inserter", "transform"],
+    isActive: (blockAttributes) => blockAttributes?.type === "hidden"
   }
 ];
 var variations_default = variations;

package/build/form-input/variations.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-input/variations.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst variations = [\n\t{\n\t\tname: 'text',\n\t\ttitle: __( 'Text Input' ),\n\t\tdescription: __( 'A generic text input.' ),\n\t\tattributes: { type: 'text' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes?.type || blockAttributes?.type === 'text',\n\t},\n\t{\n\t\tname: 'textarea',\n\t\ttitle: __( 'Textarea Input' ),\n\t\tdescription: __(\n\t\t\t'A textarea input to allow entering multiple lines of text.'\n\t\t),\n\t\tattributes: { type: 'textarea' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'textarea',\n\t},\n\t{\n\t\tname: 'checkbox',\n\t\ttitle: __( 'Checkbox Input' ),\n\t\tdescription: __( 'A simple checkbox input.' ),\n\t\tattributes: { type: 'checkbox', inlineLabel: true },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'checkbox',\n\t},\n\t{\n\t\tname: 'email',\n\t\ttitle: __( 'Email Input' ),\n\t\tdescription: __( 'Used for email addresses.' ),\n\t\tattributes: { type: 'email' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'email',\n\t},\n\t{\n\t\tname: 'url',\n\t\ttitle: __( 'URL Input' ),\n\t\tdescription: __( 'Used for URLs.' ),\n\t\tattributes: { type: 'url' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'url',\n\t},\n\t{\n\t\tname: 'tel',\n\t\ttitle: __( 'Telephone Input' ),\n\t\tdescription: __( 'Used for phone numbers.' ),\n\t\tattributes: { type: 'tel' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'tel',\n\t},\n\t{\n\t\tname: 'number',\n\t\ttitle: __( 'Number Input' ),\n\t\tdescription: __( 'A numeric input.' ),\n\t\tattributes: { type: 'number' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'number',\n\t},\n];\n\nexport default variations;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAEnB,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,YAAa;AAAA,IACxB,iBAAa,gBAAI,uBAAwB;AAAA,IACzC,YAAY,EAAE,MAAM,OAAO;AAAA,IAC3B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBACX,CAAE,iBAAiB,QAAQ,iBAAiB,SAAS;AAAA,EACvD;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,gBAAiB;AAAA,IAC5B,iBAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,YAAY,EAAE,MAAM,WAAW;AAAA,IAC/B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,gBAAiB;AAAA,IAC5B,iBAAa,gBAAI,0BAA2B;AAAA,IAC5C,YAAY,EAAE,MAAM,YAAY,aAAa,KAAK;AAAA,IAClD,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,aAAc;AAAA,IACzB,iBAAa,gBAAI,2BAA4B;AAAA,IAC7C,YAAY,EAAE,MAAM,QAAQ;AAAA,IAC5B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,WAAY;AAAA,IACvB,iBAAa,gBAAI,gBAAiB;AAAA,IAClC,YAAY,EAAE,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,iBAAkB;AAAA,IAC7B,iBAAa,gBAAI,yBAA0B;AAAA,IAC3C,YAAY,EAAE,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,cAAe;AAAA,IAC1B,iBAAa,gBAAI,kBAAmB;AAAA,IACpC,YAAY,EAAE,MAAM,SAAS;AAAA,IAC7B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AACD;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst variations = [\n\t{\n\t\tname: 'text',\n\t\ttitle: __( 'Text Input' ),\n\t\tdescription: __( 'A generic text input.' ),\n\t\tattributes: { type: 'text' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes?.type || blockAttributes?.type === 'text',\n\t},\n\t{\n\t\tname: 'textarea',\n\t\ttitle: __( 'Textarea Input' ),\n\t\tdescription: __(\n\t\t\t'A textarea input to allow entering multiple lines of text.'\n\t\t),\n\t\tattributes: { type: 'textarea' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'textarea',\n\t},\n\t{\n\t\tname: 'checkbox',\n\t\ttitle: __( 'Checkbox Input' ),\n\t\tdescription: __( 'A simple checkbox input.' ),\n\t\tattributes: { type: 'checkbox', inlineLabel: true },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'checkbox',\n\t},\n\t{\n\t\tname: 'email',\n\t\ttitle: __( 'Email Input' ),\n\t\tdescription: __( 'Used for email addresses.' ),\n\t\tattributes: { type: 'email' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'email',\n\t},\n\t{\n\t\tname: 'url',\n\t\ttitle: __( 'URL Input' ),\n\t\tdescription: __( 'Used for URLs.' ),\n\t\tattributes: { type: 'url' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'url',\n\t},\n\t{\n\t\tname: 'tel',\n\t\ttitle: __( 'Telephone Input' ),\n\t\tdescription: __( 'Used for phone numbers.' ),\n\t\tattributes: { type: 'tel' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'tel',\n\t},\n\t{\n\t\tname: 'number',\n\t\ttitle: __( 'Number Input' ),\n\t\tdescription: __( 'A numeric input.' ),\n\t\tattributes: { type: 'number' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'number',\n\t},\n\t{\n\t\tname: 'hidden',\n\t\ttitle: __( 'Hidden Input' ),\n\t\ticon: 'visibility',\n\t\tdescription: __( 'A hidden input field.' ),\n\t\tattributes: { type: 'hidden' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'hidden',\n\t},\n];\n\nexport default variations;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAEnB,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,YAAa;AAAA,IACxB,iBAAa,gBAAI,uBAAwB;AAAA,IACzC,YAAY,EAAE,MAAM,OAAO;AAAA,IAC3B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBACX,CAAE,iBAAiB,QAAQ,iBAAiB,SAAS;AAAA,EACvD;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,gBAAiB;AAAA,IAC5B,iBAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,YAAY,EAAE,MAAM,WAAW;AAAA,IAC/B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,gBAAiB;AAAA,IAC5B,iBAAa,gBAAI,0BAA2B;AAAA,IAC5C,YAAY,EAAE,MAAM,YAAY,aAAa,KAAK;AAAA,IAClD,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,aAAc;AAAA,IACzB,iBAAa,gBAAI,2BAA4B;AAAA,IAC7C,YAAY,EAAE,MAAM,QAAQ;AAAA,IAC5B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,WAAY;AAAA,IACvB,iBAAa,gBAAI,gBAAiB;AAAA,IAClC,YAAY,EAAE,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,iBAAkB;AAAA,IAC7B,iBAAa,gBAAI,yBAA0B;AAAA,IAC3C,YAAY,EAAE,MAAM,MAAM;AAAA,IAC1B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,cAAe;AAAA,IAC1B,iBAAa,gBAAI,kBAAmB;AAAA,IACpC,YAAY,EAAE,MAAM,SAAS;AAAA,IAC7B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,cAAe;AAAA,IAC1B,MAAM;AAAA,IACN,iBAAa,gBAAI,uBAAwB;AAAA,IACzC,YAAY,EAAE,MAAM,SAAS;AAAA,IAC7B,WAAW;AAAA,IACX,OAAO,CAAE,YAAY,WAAY;AAAA,IACjC,UAAU,CAAE,oBAAqB,iBAAiB,SAAS;AAAA,EAC5D;AACD;AAEA,IAAO,qBAAQ;",
   "names": []
 }

package/build/group/block.json

@@ -28,8 +28,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"color": {

package/build/html/modal.cjs

@@ -55,8 +55,6 @@ function HTMLEditModal({
   const [editedHtml, setEditedHtml] = (0, import_element.useState)(html);
   const [editedCss, setEditedCss] = (0, import_element.useState)(css);
   const [editedJs, setEditedJs] = (0, import_element.useState)(js);
-  const [isDirty, setIsDirty] = (0, import_element.useState)(false);
-  const [showUnsavedWarning, setShowUnsavedWarning] = (0, import_element.useState)(false);
   const [isFullscreen, setIsFullscreen] = (0, import_element.useState)(false);
   const isMobileViewport = (0, import_compose.useViewportMatch)("small", "<");
   const { canUserUseUnfilteredHTML } = (0, import_data.useSelect)((select) => {
@@ -69,18 +67,6 @@ function HTMLEditModal({
   if (!isOpen) {
     return null;
   }
-  const handleHtmlChange = (value) => {
-    setEditedHtml(value);
-    setIsDirty(true);
-  };
-  const handleCssChange = (value) => {
-    setEditedCss(value);
-    setIsDirty(true);
-  };
-  const handleJsChange = (value) => {
-    setEditedJs(value);
-    setIsDirty(true);
-  };
   const handleUpdate = () => {
     setAttributes({
       content: (0, import_utils.serializeContent)({
@@ -89,25 +75,6 @@ function HTMLEditModal({
         js: canUserUseUnfilteredHTML ? editedJs : ""
       })
     });
-    setIsDirty(false);
-  };
-  const handleCancel = () => {
-    setIsDirty(false);
-    onRequestClose();
-  };
-  const handleRequestClose = () => {
-    if (isDirty) {
-      setShowUnsavedWarning(true);
-    } else {
-      onRequestClose();
-    }
-  };
-  const handleDiscardChanges = () => {
-    setShowUnsavedWarning(false);
-    onRequestClose();
-  };
-  const handleContinueEditing = () => {
-    setShowUnsavedWarning(false);
   };
   const handleUpdateAndClose = () => {
     handleUpdate();
@@ -116,210 +83,165 @@ function HTMLEditModal({
   const toggleFullscreen = () => {
     setIsFullscreen((prevState) => !prevState);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.Modal,
-      {
-        title: (0, import_i18n.__)("Edit HTML"),
-        onRequestClose: handleRequestClose,
-        className: "block-library-html__modal",
-        size: "large",
-        isDismissible: false,
-        shouldCloseOnClickOutside: !isDirty,
-        shouldCloseOnEsc: !isDirty,
-        isFullScreen: isFullscreen,
-        __experimentalHideHeader: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { orientation: "horizontal", defaultTabId: "html", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { expanded: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.__experimentalHStack,
-            {
-              justify: "space-between",
-              className: "block-library-html__modal-header",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs.TabList, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "html", children: "HTML" }),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "css", children: "CSS" }),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "js", children: (0, import_i18n.__)("JavaScript") })
-                ] }) }),
-                !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
-                  {
-                    __next40pxDefaultSize: true,
-                    icon: isFullscreen ? import_icons.square : import_icons.fullscreen,
-                    label: (0, import_i18n.__)(
-                      "Enable/disable fullscreen"
-                    ),
-                    onClick: toggleFullscreen,
-                    variant: "tertiary"
-                  }
-                ) })
-              ]
-            }
-          ),
-          hasRestrictedContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Notice,
-            {
-              status: "warning",
-              isDismissible: false,
-              className: "block-library-html__modal-notice",
-              children: (0, import_i18n.__)(
-                "This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML."
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.Flex,
-            {
-              direction: isMobileViewport ? "column" : "row",
-              className: "block-library-html__modal-tabs",
-              align: "stretch",
-              gap: 8,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-library-html__modal-content", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Tabs.TabPanel,
-                    {
-                      tabId: "html",
-                      focusable: false,
-                      className: "block-library-html__modal-tab",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_block_editor.PlainText,
-                        {
-                          value: editedHtml,
-                          onChange: handleHtmlChange,
-                          placeholder: (0, import_i18n.__)("Write HTML\u2026"),
-                          "aria-label": (0, import_i18n.__)("HTML"),
-                          className: "block-library-html__modal-editor"
-                        }
-                      )
-                    }
-                  ),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Tabs.TabPanel,
-                    {
-                      tabId: "css",
-                      focusable: false,
-                      className: "block-library-html__modal-tab",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_block_editor.PlainText,
-                        {
-                          value: editedCss,
-                          onChange: handleCssChange,
-                          placeholder: (0, import_i18n.__)("Write CSS\u2026"),
-                          "aria-label": (0, import_i18n.__)("CSS"),
-                          className: "block-library-html__modal-editor"
-                        }
-                      )
-                    }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Modal,
+    {
+      title: (0, import_i18n.__)("Edit HTML"),
+      onRequestClose,
+      className: "block-library-html__modal",
+      size: "large",
+      isDismissible: false,
+      shouldCloseOnClickOutside: false,
+      isFullScreen: isFullscreen,
+      __experimentalHideHeader: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { orientation: "horizontal", defaultTabId: "html", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { expanded: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.__experimentalHStack,
+          {
+            justify: "space-between",
+            className: "block-library-html__modal-header",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs.TabList, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "html", children: "HTML" }),
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "css", children: "CSS" }),
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "js", children: (0, import_i18n.__)("JavaScript") })
+              ] }) }),
+              !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  icon: isFullscreen ? import_icons.square : import_icons.fullscreen,
+                  label: (0, import_i18n.__)(
+                    "Enable/disable fullscreen"
                   ),
-                  canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Tabs.TabPanel,
-                    {
-                      tabId: "js",
-                      focusable: false,
-                      className: "block-library-html__modal-tab",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_block_editor.PlainText,
-                        {
-                          value: editedJs,
-                          onChange: handleJsChange,
-                          placeholder: (0, import_i18n.__)(
-                            "Write JavaScript\u2026"
-                          ),
-                          "aria-label": (0, import_i18n.__)("JavaScript"),
-                          className: "block-library-html__modal-editor"
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-library-html__preview", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_preview.default,
+                  onClick: toggleFullscreen,
+                  variant: "tertiary"
+                }
+              ) })
+            ]
+          }
+        ),
+        hasRestrictedContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Notice,
+          {
+            status: "warning",
+            isDismissible: false,
+            className: "block-library-html__modal-notice",
+            children: (0, import_i18n.__)(
+              "This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML."
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.Flex,
+          {
+            direction: isMobileViewport ? "column" : "row",
+            className: "block-library-html__modal-tabs",
+            align: "stretch",
+            gap: 8,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-library-html__modal-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
                   {
-                    content: (0, import_utils.serializeContent)({
-                      html: editedHtml,
-                      css: editedCss,
-                      js: editedJs
-                    })
+                    tabId: "html",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
+                      {
+                        value: editedHtml,
+                        onChange: setEditedHtml,
+                        placeholder: (0, import_i18n.__)("Write HTML\u2026"),
+                        "aria-label": (0, import_i18n.__)("HTML"),
+                        className: "block-library-html__modal-editor"
+                      }
+                    )
                   }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            import_components.__experimentalHStack,
-            {
-              alignment: "center",
-              justify: "flex-end",
-              spacing: 4,
-              className: "block-library-html__modal-footer",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
+                ),
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
                   {
-                    __next40pxDefaultSize: true,
-                    variant: "tertiary",
-                    onClick: handleCancel,
-                    children: (0, import_i18n.__)("Cancel")
+                    tabId: "css",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
+                      {
+                        value: editedCss,
+                        onChange: setEditedCss,
+                        placeholder: (0, import_i18n.__)("Write CSS\u2026"),
+                        "aria-label": (0, import_i18n.__)("CSS"),
+                        className: "block-library-html__modal-editor"
+                      }
+                    )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.Button,
+                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  Tabs.TabPanel,
                   {
-                    __next40pxDefaultSize: true,
-                    variant: "primary",
-                    onClick: handleUpdateAndClose,
-                    children: (0, import_i18n.__)("Update")
+                    tabId: "js",
+                    focusable: false,
+                    className: "block-library-html__modal-tab",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_block_editor.PlainText,
+                      {
+                        value: editedJs,
+                        onChange: setEditedJs,
+                        placeholder: (0, import_i18n.__)(
+                          "Write JavaScript\u2026"
+                        ),
+                        "aria-label": (0, import_i18n.__)("JavaScript"),
+                        className: "block-library-html__modal-editor"
+                      }
+                    )
                   }
                 )
-              ]
-            }
-          )
-        ] }) })
-      }
-    ),
-    showUnsavedWarning && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.Modal,
-      {
-        title: (0, import_i18n.__)("Unsaved changes"),
-        onRequestClose: handleContinueEditing,
-        size: "medium",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)(
-            "You have unsaved changes. What would you like to do?"
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Flex, { direction: "row", justify: "flex-end", gap: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "secondary",
-                onClick: handleDiscardChanges,
-                children: (0, import_i18n.__)("Discard unsaved changes")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "secondary",
-                onClick: handleContinueEditing,
-                children: (0, import_i18n.__)("Continue editing")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "primary",
-                onClick: handleUpdateAndClose,
-                children: (0, import_i18n.__)("Update and close")
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-library-html__preview", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_preview.default,
+                {
+                  content: (0, import_utils.serializeContent)({
+                    html: editedHtml,
+                    css: editedCss,
+                    js: editedJs
+                  })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.__experimentalHStack,
+          {
+            alignment: "center",
+            justify: "flex-end",
+            spacing: 4,
+            className: "block-library-html__modal-footer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "tertiary",
+                  onClick: onRequestClose,
+                  children: (0, import_i18n.__)("Cancel")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "primary",
+                  onClick: handleUpdateAndClose,
+                  children: (0, import_i18n.__)("Update")
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    }
+  ) });
 }
 //# sourceMappingURL=modal.cjs.map