@wordpress/edit-site 6.2.0 → 6.4.0

package/build-module/components/global-styles/font-sizes/font-sizes.js

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { privateApis as componentsPrivateApis, __experimentalSpacer as Spacer, __experimentalView as View, __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, __experimentalHStack as HStack, FlexItem, FlexBlock, Button } from '@wordpress/components';
+import { Icon, plus, moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel
+} = unlock(componentsPrivateApis);
+const {
+  useGlobalSetting
+} = unlock(blockEditorPrivateApis);
+import Subtitle from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+import { getNewIndexFromPresets } from '../utils';
+import ScreenHeader from '../header';
+import ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function FontSizeGroup({
+  label,
+  origin,
+  sizes,
+  handleAddFontSize,
+  handleResetFontSizes
+}) {
+  const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
+  const toggleResetDialog = () => setIsResetDialogOpen(!isResetDialogOpen);
+  const resetDialogText = origin === 'custom' ? __('Are you sure you want to remove all custom font size presets?') : __('Are you sure you want to reset all font size presets to their default values?');
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isResetDialogOpen && /*#__PURE__*/_jsx(ConfirmResetFontSizesDialog, {
+      text: resetDialogText,
+      confirmButtonText: origin === 'custom' ? __('Remove') : __('Reset'),
+      isOpen: isResetDialogOpen,
+      toggleOpen: toggleResetDialog,
+      onConfirm: handleResetFontSizes
+    }), /*#__PURE__*/_jsxs(VStack, {
+      spacing: 4,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        justify: "space-between",
+        align: "center",
+        children: [/*#__PURE__*/_jsx(Subtitle, {
+          level: 3,
+          children: label
+        }), /*#__PURE__*/_jsxs(FlexItem, {
+          children: [origin === 'custom' && /*#__PURE__*/_jsx(Button, {
+            label: __('Add font size'),
+            icon: plus,
+            size: "small",
+            onClick: handleAddFontSize
+          }), !!handleResetFontSizes && /*#__PURE__*/_jsx(DropdownMenu, {
+            trigger: /*#__PURE__*/_jsx(Button, {
+              size: "small",
+              icon: moreVertical,
+              label: __('Font size presets options')
+            }),
+            children: /*#__PURE__*/_jsx(DropdownMenuItem, {
+              onClick: toggleResetDialog,
+              children: /*#__PURE__*/_jsx(DropdownMenuItemLabel, {
+                children: origin === 'custom' ? __('Remove font size presets') : __('Reset font size presets')
+              })
+            })
+          })]
+        })]
+      }), !!sizes.length && /*#__PURE__*/_jsx(ItemGroup, {
+        isBordered: true,
+        isSeparated: true,
+        children: sizes.map(size => /*#__PURE__*/_jsx(NavigationButtonAsItem, {
+          path: `/typography/font-sizes/${origin}/${size.slug}`,
+          children: /*#__PURE__*/_jsxs(HStack, {
+            direction: "row",
+            children: [/*#__PURE__*/_jsx(FlexItem, {
+              className: "edit-site-font-size__item",
+              children: size.name
+            }), /*#__PURE__*/_jsx(FlexItem, {
+              children: /*#__PURE__*/_jsxs(HStack, {
+                justify: "flex-end",
+                children: [/*#__PURE__*/_jsx(FlexBlock, {
+                  className: "edit-site-font-size__item edit-site-font-size__item-value",
+                  children: size.size
+                }), /*#__PURE__*/_jsx(Icon, {
+                  icon: isRTL() ? chevronLeft : chevronRight
+                })]
+              })
+            })]
+          })
+        }, size.slug))
+      })]
+    })]
+  });
+}
+function FontSizes() {
+  const [themeFontSizes, setThemeFontSizes] = useGlobalSetting('typography.fontSizes.theme');
+  const [baseThemeFontSizes] = useGlobalSetting('typography.fontSizes.theme', null, 'base');
+  const [defaultFontSizes, setDefaultFontSizes] = useGlobalSetting('typography.fontSizes.default');
+  const [baseDefaultFontSizes] = useGlobalSetting('typography.fontSizes.default', null, 'base');
+  const [customFontSizes = [], setCustomFontSizes] = useGlobalSetting('typography.fontSizes.custom');
+  const [defaultFontSizesEnabled] = useGlobalSetting('typography.defaultFontSizes');
+  const handleAddFontSize = () => {
+    const index = getNewIndexFromPresets(customFontSizes, 'custom-');
+    const newFontSize = {
+      /* translators: %d: font size index */
+      name: sprintf(__('New Font Size %d'), index),
+      size: '16px',
+      slug: `custom-${index}`
+    };
+    setCustomFontSizes([...customFontSizes, newFontSize]);
+  };
+  const hasSameSizeValues = (arr1, arr2) => arr1.map(item => item.size).join('') === arr2.map(item => item.size).join('');
+  return /*#__PURE__*/_jsxs(VStack, {
+    spacing: 2,
+    children: [/*#__PURE__*/_jsx(ScreenHeader, {
+      title: __('Font size presets'),
+      description: __('Create and edit the presets used for font sizes across the site.')
+    }), /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Spacer, {
+        paddingX: 4,
+        children: /*#__PURE__*/_jsxs(VStack, {
+          spacing: 8,
+          children: [!!themeFontSizes?.length && /*#__PURE__*/_jsx(FontSizeGroup, {
+            label: __('Theme'),
+            origin: "theme",
+            sizes: themeFontSizes,
+            baseSizes: baseThemeFontSizes,
+            handleAddFontSize: handleAddFontSize,
+            handleResetFontSizes: hasSameSizeValues(themeFontSizes, baseThemeFontSizes) ? null : () => setThemeFontSizes(baseThemeFontSizes)
+          }), defaultFontSizesEnabled && !!defaultFontSizes?.length && /*#__PURE__*/_jsx(FontSizeGroup, {
+            label: __('Default'),
+            origin: "default",
+            sizes: defaultFontSizes,
+            baseSizes: baseDefaultFontSizes,
+            handleAddFontSize: handleAddFontSize,
+            handleResetFontSizes: hasSameSizeValues(defaultFontSizes, baseDefaultFontSizes) ? null : () => setDefaultFontSizes(baseDefaultFontSizes)
+          }), /*#__PURE__*/_jsx(FontSizeGroup, {
+            label: __('Custom'),
+            origin: "custom",
+            sizes: customFontSizes,
+            handleAddFontSize: handleAddFontSize,
+            handleResetFontSizes: customFontSizes.length > 0 ? () => setCustomFontSizes([]) : null
+          })]
+        })
+      })
+    })]
+  });
+}
+export default FontSizes;
+//# sourceMappingURL=font-sizes.js.map

package/build-module/components/global-styles/font-sizes/font-sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["privateApis","blockEditorPrivateApis","__","sprintf","isRTL","componentsPrivateApis","__experimentalSpacer","Spacer","__experimentalView","View","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","FlexBlock","Button","Icon","plus","moreVertical","chevronLeft","chevronRight","useState","unlock","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","useGlobalSetting","Subtitle","NavigationButtonAsItem","getNewIndexFromPresets","ScreenHeader","ConfirmResetFontSizesDialog","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","FontSizeGroup","label","origin","sizes","handleAddFontSize","handleResetFontSizes","isResetDialogOpen","setIsResetDialogOpen","toggleResetDialog","resetDialogText","children","text","confirmButtonText","isOpen","toggleOpen","onConfirm","spacing","justify","align","level","icon","size","onClick","trigger","length","isBordered","isSeparated","map","path","slug","direction","className","name","FontSizes","themeFontSizes","setThemeFontSizes","baseThemeFontSizes","defaultFontSizes","setDefaultFontSizes","baseDefaultFontSizes","customFontSizes","setCustomFontSizes","defaultFontSizesEnabled","index","newFontSize","hasSameSizeValues","arr1","arr2","item","join","title","description","paddingX","baseSizes"],"sources":["@wordpress/edit-site/src/components/global-styles/font-sizes/font-sizes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tprivateApis as componentsPrivateApis,\n\t__experimentalSpacer as Spacer,\n\t__experimentalView as View,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n\tFlexBlock,\n\tButton,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tplus,\n\tmoreVertical,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nimport Subtitle from '../subtitle';\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { getNewIndexFromPresets } from '../utils';\nimport ScreenHeader from '../header';\nimport ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';\n\nfunction FontSizeGroup( {\n\tlabel,\n\torigin,\n\tsizes,\n\thandleAddFontSize,\n\thandleResetFontSizes,\n} ) {\n\tconst [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );\n\n\tconst toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );\n\n\tconst resetDialogText =\n\t\torigin === 'custom'\n\t\t\t? __(\n\t\t\t\t\t'Are you sure you want to remove all custom font size presets?'\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'Are you sure you want to reset all font size presets to their default values?'\n\t\t\t  );\n\n\treturn (\n\t\t<>\n\t\t\t{ isResetDialogOpen && (\n\t\t\t\t<ConfirmResetFontSizesDialog\n\t\t\t\t\ttext={ resetDialogText }\n\t\t\t\t\tconfirmButtonText={\n\t\t\t\t\t\torigin === 'custom' ? __( 'Remove' ) : __( 'Reset' )\n\t\t\t\t\t}\n\t\t\t\t\tisOpen={ isResetDialogOpen }\n\t\t\t\t\ttoggleOpen={ toggleResetDialog }\n\t\t\t\t\tonConfirm={ handleResetFontSizes }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<HStack justify=\"space-between\" align=\"center\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ label }</Subtitle>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t{ origin === 'custom' && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tlabel={ __( 'Add font size' ) }\n\t\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tonClick={ handleAddFontSize }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ !! handleResetFontSizes && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Font size presets options'\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>\n\t\t\t\t\t\t\t\t<DropdownMenuItem onClick={ toggleResetDialog }>\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t{ origin === 'custom'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Remove font size presets' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset font size presets' ) }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\n\t\t\t\t{ !! sizes.length && (\n\t\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t\t{ sizes.map( ( size ) => (\n\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\tkey={ size.slug }\n\t\t\t\t\t\t\t\tpath={ `/typography/font-sizes/${ origin }/${ size.slug }` }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t\t\t\t<FlexItem className=\"edit-site-font-size__item\">\n\t\t\t\t\t\t\t\t\t\t{ size.name }\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t<HStack justify=\"flex-end\">\n\t\t\t\t\t\t\t\t\t\t\t<FlexBlock className=\"edit-site-font-size__item edit-site-font-size__item-value\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ size.size }\n\t\t\t\t\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</ItemGroup>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nfunction FontSizes() {\n\tconst [ themeFontSizes, setThemeFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes.theme'\n\t);\n\n\tconst [ baseThemeFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes.theme',\n\t\tnull,\n\t\t'base'\n\t);\n\tconst [ defaultFontSizes, setDefaultFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes.default'\n\t);\n\n\tconst [ baseDefaultFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes.default',\n\t\tnull,\n\t\t'base'\n\t);\n\n\tconst [ customFontSizes = [], setCustomFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes.custom'\n\t);\n\n\tconst [ defaultFontSizesEnabled ] = useGlobalSetting(\n\t\t'typography.defaultFontSizes'\n\t);\n\n\tconst handleAddFontSize = () => {\n\t\tconst index = getNewIndexFromPresets( customFontSizes, 'custom-' );\n\t\tconst newFontSize = {\n\t\t\t/* translators: %d: font size index */\n\t\t\tname: sprintf( __( 'New Font Size %d' ), index ),\n\t\t\tsize: '16px',\n\t\t\tslug: `custom-${ index }`,\n\t\t};\n\n\t\tsetCustomFontSizes( [ ...customFontSizes, newFontSize ] );\n\t};\n\n\tconst hasSameSizeValues = ( arr1, arr2 ) =>\n\t\tarr1.map( ( item ) => item.size ).join( '' ) ===\n\t\tarr2.map( ( item ) => item.size ).join( '' );\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Font size presets' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Create and edit the presets used for font sizes across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\n\t\t\t<View>\n\t\t\t\t<Spacer paddingX={ 4 }>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t{ !! themeFontSizes?.length && (\n\t\t\t\t\t\t\t<FontSizeGroup\n\t\t\t\t\t\t\t\tlabel={ __( 'Theme' ) }\n\t\t\t\t\t\t\t\torigin=\"theme\"\n\t\t\t\t\t\t\t\tsizes={ themeFontSizes }\n\t\t\t\t\t\t\t\tbaseSizes={ baseThemeFontSizes }\n\t\t\t\t\t\t\t\thandleAddFontSize={ handleAddFontSize }\n\t\t\t\t\t\t\t\thandleResetFontSizes={\n\t\t\t\t\t\t\t\t\thasSameSizeValues(\n\t\t\t\t\t\t\t\t\t\tthemeFontSizes,\n\t\t\t\t\t\t\t\t\t\tbaseThemeFontSizes\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t: () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetThemeFontSizes(\n\t\t\t\t\t\t\t\t\t\t\t\t\tbaseThemeFontSizes\n\t\t\t\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\n\t\t\t\t\t\t{ defaultFontSizesEnabled &&\n\t\t\t\t\t\t\t!! defaultFontSizes?.length && (\n\t\t\t\t\t\t\t\t<FontSizeGroup\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\t\t\t\torigin=\"default\"\n\t\t\t\t\t\t\t\t\tsizes={ defaultFontSizes }\n\t\t\t\t\t\t\t\t\tbaseSizes={ baseDefaultFontSizes }\n\t\t\t\t\t\t\t\t\thandleAddFontSize={ handleAddFontSize }\n\t\t\t\t\t\t\t\t\thandleResetFontSizes={\n\t\t\t\t\t\t\t\t\t\thasSameSizeValues(\n\t\t\t\t\t\t\t\t\t\t\tdefaultFontSizes,\n\t\t\t\t\t\t\t\t\t\t\tbaseDefaultFontSizes\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t? null\n\t\t\t\t\t\t\t\t\t\t\t: () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDefaultFontSizes(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbaseDefaultFontSizes\n\t\t\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/>\n\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<FontSizeGroup\n\t\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\t\torigin=\"custom\"\n\t\t\t\t\t\t\tsizes={ customFontSizes }\n\t\t\t\t\t\t\thandleAddFontSize={ handleAddFontSize }\n\t\t\t\t\t\t\thandleResetFontSizes={\n\t\t\t\t\t\t\t\tcustomFontSizes.length > 0\n\t\t\t\t\t\t\t\t\t? () => setCustomFontSizes( [] )\n\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n\nexport default FontSizes;\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/global-styles/font-sizes/rename-font-size-dialog.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalInputControl as InputControl, __experimentalVStack as VStack, __experimentalHStack as HStack, Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function RenameFontSizeDialog({
+  fontSize,
+  toggleOpen,
+  handleRename
+}) {
+  const [newName, setNewName] = useState(fontSize.name);
+  const handleConfirm = () => {
+    // If the new name is not empty, call the handleRename function
+    if (newName.trim()) {
+      handleRename(newName);
+    }
+    toggleOpen();
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    onRequestClose: toggleOpen,
+    focusOnMount: "firstContentElement",
+    title: __('Rename'),
+    size: "small",
+    children: /*#__PURE__*/_jsx("form", {
+      onSubmit: event => {
+        event.preventDefault();
+        handleConfirm();
+        toggleOpen();
+      },
+      children: /*#__PURE__*/_jsxs(VStack, {
+        spacing: "3",
+        children: [/*#__PURE__*/_jsx(InputControl, {
+          __next40pxDefaultSize: true,
+          autoComplete: "off",
+          value: newName,
+          onChange: setNewName,
+          label: __('Name'),
+          placeholder: __('Font size preset name')
+        }), /*#__PURE__*/_jsxs(HStack, {
+          justify: "right",
+          children: [/*#__PURE__*/_jsx(Button, {
+            __next40pxDefaultSize: true,
+            variant: "tertiary",
+            onClick: toggleOpen,
+            children: __('Cancel')
+          }), /*#__PURE__*/_jsx(Button, {
+            __next40pxDefaultSize: true,
+            variant: "primary",
+            type: "submit",
+            children: __('Save')
+          })]
+        })]
+      })
+    })
+  });
+}
+export default RenameFontSizeDialog;
+//# sourceMappingURL=rename-font-size-dialog.js.map

package/build-module/components/global-styles/font-sizes/rename-font-size-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalInputControl","InputControl","__experimentalVStack","VStack","__experimentalHStack","HStack","Button","Modal","__","useState","jsx","_jsx","jsxs","_jsxs","RenameFontSizeDialog","fontSize","toggleOpen","handleRename","newName","setNewName","name","handleConfirm","trim","onRequestClose","focusOnMount","title","size","children","onSubmit","event","preventDefault","spacing","__next40pxDefaultSize","autoComplete","value","onChange","label","placeholder","justify","variant","onClick","type"],"sources":["@wordpress/edit-site/src/components/global-styles/font-sizes/rename-font-size-dialog.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\n\nfunction RenameFontSizeDialog( { fontSize, toggleOpen, handleRename } ) {\n\tconst [ newName, setNewName ] = useState( fontSize.name );\n\n\tconst handleConfirm = () => {\n\t\t// If the new name is not empty, call the handleRename function\n\t\tif ( newName.trim() ) {\n\t\t\thandleRename( newName );\n\t\t}\n\t\ttoggleOpen();\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\tonRequestClose={ toggleOpen }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\ttitle={ __( 'Rename' ) }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleConfirm();\n\t\t\t\t\ttoggleOpen();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing=\"3\">\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tvalue={ newName }\n\t\t\t\t\t\tonChange={ setNewName }\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Font size preset name' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ toggleOpen }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n\nexport default RenameFontSizeDialog;\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,0BAA0B,IAAIC,YAAY,EAC1CC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,KAAK,QACC,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE9C,SAASC,oBAAoBA,CAAE;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAa,CAAC,EAAG;EACvE,MAAM,CAAEC,OAAO,EAAEC,UAAU,CAAE,GAAGV,QAAQ,CAAEM,QAAQ,CAACK,IAAK,CAAC;EAEzD,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACA,IAAKH,OAAO,CAACI,IAAI,CAAC,CAAC,EAAG;MACrBL,YAAY,CAAEC,OAAQ,CAAC;IACxB;IACAF,UAAU,CAAC,CAAC;EACb,CAAC;EAED,oBACCL,IAAA,CAACJ,KAAK;IACLgB,cAAc,EAAGP,UAAY;IAC7BQ,YAAY,EAAC,qBAAqB;IAClCC,KAAK,EAAGjB,EAAE,CAAE,QAAS,CAAG;IACxBkB,IAAI,EAAC,OAAO;IAAAC,QAAA,eAEZhB,IAAA;MACCiB,QAAQ,EAAKC,KAAK,IAAM;QACvBA,KAAK,CAACC,cAAc,CAAC,CAAC;QACtBT,aAAa,CAAC,CAAC;QACfL,UAAU,CAAC,CAAC;MACb,CAAG;MAAAW,QAAA,eAEHd,KAAA,CAACV,MAAM;QAAC4B,OAAO,EAAC,GAAG;QAAAJ,QAAA,gBAClBhB,IAAA,CAACV,YAAY;UACZ+B,qBAAqB;UACrBC,YAAY,EAAC,KAAK;UAClBC,KAAK,EAAGhB,OAAS;UACjBiB,QAAQ,EAAGhB,UAAY;UACvBiB,KAAK,EAAG5B,EAAE,CAAE,MAAO,CAAG;UACtB6B,WAAW,EAAG7B,EAAE,CAAE,uBAAwB;QAAG,CAC7C,CAAC,eACFK,KAAA,CAACR,MAAM;UAACiC,OAAO,EAAC,OAAO;UAAAX,QAAA,gBACtBhB,IAAA,CAACL,MAAM;YACN0B,qBAAqB;YACrBO,OAAO,EAAC,UAAU;YAClBC,OAAO,EAAGxB,UAAY;YAAAW,QAAA,EAEpBnB,EAAE,CAAE,QAAS;UAAC,CACT,CAAC,eACTG,IAAA,CAACL,MAAM;YACN0B,qBAAqB;YACrBO,OAAO,EAAC,SAAS;YACjBE,IAAI,EAAC,QAAQ;YAAAd,QAAA,EAEXnB,EAAE,CAAE,MAAO;UAAC,CACP,CAAC;QAAA,CACF,CAAC;MAAA,CACF;IAAC,CACJ;EAAC,CACD,CAAC;AAEV;AAEA,eAAeM,oBAAoB","ignoreList":[]}

package/build-module/components/global-styles/hooks.js

@@ -9,12 +9,10 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 const {
@@ -81,40 +79,4 @@ export function useSupportedStyles(name, element) {
   }, [name, element]);
   return supportedPanels;
 }
-export function useColorVariations() {
-  const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'color'
-  });
-  /*
-   * Filter out variations with no settings or styles.
-   */
-  return colorVariations?.length ? colorVariations.filter(variation => {
-    const {
-      settings,
-      styles,
-      title
-    } = variation;
-    return title === __('Default') ||
-    // Always preseve the default variation.
-    Object.keys(settings).length > 0 || Object.keys(styles).length > 0;
-  }) : [];
-}
-export function useTypographyVariations() {
-  const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
-    property: 'typography'
-  });
-  /*
-   * Filter out variations with no settings or styles.
-   */
-  return typographyVariations?.length ? typographyVariations.filter(variation => {
-    const {
-      settings,
-      styles,
-      title
-    } = variation;
-    return title === __('Default') ||
-    // Always preseve the default variation.
-    Object.keys(settings).length > 0 || Object.keys(styles).length > 0;
-  }) : [];
-}
 //# sourceMappingURL=hooks.js.map

package/build-module/components/global-styles/hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","__","useCurrentMergeThemeStyleVariationsWithUserConfig","unlock","useSelect","useGlobalSetting","useGlobalStyle","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","property","length","variation","settings","styles","title","Object","keys","useTypographyVariations","typographyVariations"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useGlobalStyle(\n\t\t'elements.link.color.text'\n\t);\n\n\tconst [ buttonBackgroundColor = linkColor ] = useGlobalStyle(\n\t\t'elements.button.color.background'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn typographyVariations?.length\n\t\t? typographyVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useGlobalStyle","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useGlobalStyle(\n\t\t'elements.link.color.text'\n\t);\n\n\tconst [ buttonBackgroundColor = linkColor ] = useGlobalStyle(\n\t\t'elements.button.color.background'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,UAAU,MAAM,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAM;EAAEC,gBAAgB;EAAEC;AAAe,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;;AAE7E;AACAL,MAAM,CAAE,CAAEC,UAAU,CAAG,CAAC;AAExB,OAAO,SAASS,kBAAkBA,CAAEC,IAAI,EAAG;EAC1C,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGL,gBAAgB,CACvD,qBAAqB,EACrBG,IACD,CAAC;EAED,SAASG,eAAeA,CAAA,EAAG;IAC1B;IACA,MAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAK,CAAED,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAI,CAAC;IAC7D;;IAEA,MAAMC,SAAS,GAAGP,WAAW,CAACQ,GAAG,CAAIC,WAAW,IAAM;MACrD,MAAM;QAAEC;MAAM,CAAC,GAAGD,WAAW;MAC7B,MAAME,QAAQ,GAAGxB,MAAM,CAAEuB,KAAM,CAAC,CAC9BE,MAAM,CAAET,mBAAoB,CAAC,CAC7BU,KAAK,CAAC,CAAC;MAET,OAAO;QACN,GAAGJ,WAAW;QACdC,KAAK,EAAEC;MACR,CAAC;IACF,CAAE,CAAC;IAEHV,cAAc,CAAEM,SAAU,CAAC;EAC5B;EAEA,OAAOO,MAAM,CAACC,mCAAmC,GAC9C,CAAEb,eAAe,CAAE,GACnB,EAAE;AACN;AAEA,OAAO,SAASc,sBAAsBA,CAAA,EAAG;EACxC,MAAM,CAAEC,SAAS,GAAG,OAAO,CAAE,GAAGpB,cAAc,CAAE,YAAa,CAAC;EAC9D,MAAM,CAAEqB,eAAe,GAAG,OAAO,CAAE,GAAGrB,cAAc,CAAE,kBAAmB,CAAC;EAC1E,MAAM,CAAEsB,YAAY,GAAGF,SAAS,CAAE,GAAGpB,cAAc,CAClD,wBACD,CAAC;EACD,MAAM,CAAEuB,SAAS,GAAGD,YAAY,CAAE,GAAGtB,cAAc,CAClD,0BACD,CAAC;EAED,MAAM,CAAEwB,qBAAqB,GAAGD,SAAS,CAAE,GAAGvB,cAAc,CAC3D,kCACD,CAAC;EACD,MAAM,CAAEyB,UAAU,CAAE,GAAG1B,gBAAgB,CAAE,oBAAqB,CAAC;EAC/D,MAAM,CAAEI,WAAW,CAAE,GAAGJ,gBAAgB,CAAE,qBAAsB,CAAC;EACjE,MAAM,CAAE2B,YAAY,CAAE,GAAG3B,gBAAgB,CAAE,sBAAuB,CAAC;EAEnE,MAAM4B,aAAa,GAAG,CAAExB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,EAAE,EACvCyB,MAAM,CAAEF,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAG,CAAC,CAC5BE,MAAM,CAAEH,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAG,CAAC;EAE5B,MAAMI,eAAe,GAAGF,aAAa,CAACG,MAAM,CAC3C,CAAE;IAAEjB;EAAM,CAAC,KAAMA,KAAK,KAAKO,SAC5B,CAAC;EACD,MAAMW,2BAA2B,GAAGJ,aAAa,CAACG,MAAM,CACvD,CAAE;IAAEjB;EAAM,CAAC,KAAMA,KAAK,KAAKW,qBAC5B,CAAC;EAED,MAAMQ,iBAAiB,GAAGH,eAAe,CACvCD,MAAM,CAAEG,2BAA4B,CAAC,CACrCH,MAAM,CAAED,aAAc,CAAC,CACvBG,MAAM;EACN;EACA,CAAE;IAAEjB;EAAM,CAAC,KAAMA,KAAK,KAAKQ,eAC5B,CAAC,CACAY,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC;EAEf,OAAO;IACNN,aAAa;IACbK;EACD,CAAC;AACF;AAEA,OAAO,SAASE,kBAAkBA,CAAEhC,IAAI,EAAEiC,OAAO,EAAG;EACnD,MAAM;IAAEC;EAAgB,CAAC,GAAGtC,SAAS,CAClCuC,MAAM,IAAM;IACb,OAAO;MACND,eAAe,EAAEvC,MAAM,CACtBwC,MAAM,CAAE3C,WAAY,CACrB,CAAC,CAAC4C,kBAAkB,CAAEpC,IAAI,EAAEiC,OAAQ;IACrC,CAAC;EACF,CAAC,EACD,CAAEjC,IAAI,EAAEiC,OAAO,CAChB,CAAC;EAED,OAAOC,eAAe;AACvB","ignoreList":[]}

package/build-module/components/global-styles/preview-typography.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyExample from './typography-example';
+import PreviewIframe from './preview-iframe';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StylesPreviewTypography = ({
+  variation,
+  isFocused,
+  withHoverView
+}) => {
+  return /*#__PURE__*/_jsx(PreviewIframe, {
+    label: variation.title,
+    isFocused: isFocused,
+    withHoverView: withHoverView,
+    children: ({
+      ratio,
+      key
+    }) => /*#__PURE__*/_jsx(HStack, {
+      spacing: 10 * ratio,
+      justify: "center",
+      style: {
+        height: '100%',
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx(TypographyExample, {
+        variation: variation,
+        fontSize: 85 * ratio
+      })
+    }, key)
+  });
+};
+export default StylesPreviewTypography;
+//# sourceMappingURL=preview-typography.js.map

package/build-module/components/global-styles/preview-typography.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalHStack","HStack","TypographyExample","PreviewIframe","jsx","_jsx","StylesPreviewTypography","variation","isFocused","withHoverView","label","title","children","ratio","key","spacing","justify","style","height","overflow","fontSize"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-typography.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyExample from './typography-example';\nimport PreviewIframe from './preview-iframe';\n\nconst StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ variation.title }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default StylesPreviewTypography;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;;AAEtE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,sBAAsB;AACpD,OAAOC,aAAa,MAAM,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,uBAAuB,GAAGA,CAAE;EAAEC,SAAS;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EAC9E,oBACCJ,IAAA,CAACF,aAAa;IACbO,KAAK,EAAGH,SAAS,CAACI,KAAO;IACzBH,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA,aAAe;IAAAG,QAAA,EAE7BA,CAAE;MAAEC,KAAK;MAAEC;IAAI,CAAC,kBACjBT,IAAA,CAACJ,MAAM;MAENc,OAAO,EAAG,EAAE,GAAGF,KAAO;MACtBG,OAAO,EAAC,QAAQ;MAChBC,KAAK,EAAG;QACPC,MAAM,EAAE,MAAM;QACdC,QAAQ,EAAE;MACX,CAAG;MAAAP,QAAA,eAEHP,IAAA,CAACH,iBAAiB;QACjBK,SAAS,EAAGA,SAAW;QACvBa,QAAQ,EAAG,EAAE,GAAGP;MAAO,CACvB;IAAC,GAXIC,GAYC;EACR,CACa,CAAC;AAElB,CAAC;AAED,eAAeR,uBAAuB","ignoreList":[]}

package/build-module/components/global-styles/screen-block.js

@@ -17,9 +17,14 @@ import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 import Subtitle from './subtitle';
 import { useBlockVariations, VariationsPanel } from './variations/variations-panel';
+
+// Initial control values where no block style is set.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+  backgroundSize: 'cover'
+};
 function applyFallbackStyle(border) {
   if (!border) {
     return border;
@@ -60,13 +65,16 @@ const {
   useHasFiltersPanel,
   useHasImageSettingsPanel,
   useGlobalStyle,
+  useHasBackgroundPanel,
+  BackgroundPanel: StylesBackgroundPanel,
   BorderPanel: StylesBorderPanel,
   ColorPanel: StylesColorPanel,
   TypographyPanel: StylesTypographyPanel,
   DimensionsPanel: StylesDimensionsPanel,
   FiltersPanel: StylesFiltersPanel,
   ImageSettingsPanel,
-  AdvancedPanel: StylesAdvancedPanel
+  AdvancedPanel: StylesAdvancedPanel,
+  useGlobalStyleLinks
 } = unlock(blockEditorPrivateApis);
 function ScreenBlock({
   name,
@@ -87,6 +95,7 @@ function ScreenBlock({
   const [rawSettings, setSettings] = useGlobalSetting('', name);
   const settings = useSettingsForBlockElement(rawSettings, name);
   const blockType = getBlockType(name);
+  const _links = useGlobalStyleLinks();
 
   // Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
   if (settings?.spacing?.blockGap && blockType?.supports?.spacing?.blockGap && (blockType?.supports?.spacing?.__experimentalSkipSerialization === true || blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(spacingType => spacingType === 'blockGap'))) {
@@ -103,6 +112,7 @@ function ScreenBlock({
     settings.dimensions.aspectRatio = false;
   }
   const blockVariations = useBlockVariations(name);
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
   const hasTypographyPanel = useHasTypographyPanel(settings);
   const hasColorPanel = useHasColorPanel(settings);
   const hasBorderPanel = useHasBorderPanel(settings);
@@ -235,6 +245,13 @@ function ScreenBlock({
       value: style,
       onChange: setStyle,
       settings: settings
+    }), hasBackgroundPanel && /*#__PURE__*/_jsx(StylesBackgroundPanel, {
+      inheritedValue: inheritedStyle,
+      value: style,
+      onChange: setStyle,
+      settings: settings,
+      defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
+      themeFileURIs: _links?.['wp:theme-file']
     }), hasTypographyPanel && /*#__PURE__*/_jsx(StylesTypographyPanel, {
       inheritedValue: inheritedStyle,
       value: style,

package/build-module/components/global-styles/screen-block.js.map

@@ -1 +1 @@
-{"version":3,"names":["getBlockType","privateApis","blockEditorPrivateApis","useMemo","useSelect","store","coreStore","PanelBody","__experimentalVStack","VStack","__experimentalHasSplitBorders","hasSplitBorders","__","sprintf","ScreenHeader","BlockPreviewPanel","unlock","Subtitle","useBlockVariations","VariationsPanel","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","applyFallbackStyle","border","hasColorOrWidth","color","width","style","undefined","applyAllFallbackStyles","top","right","bottom","left","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useHasFiltersPanel","useHasImageSettingsPanel","useGlobalStyle","BorderPanel","StylesBorderPanel","ColorPanel","StylesColorPanel","TypographyPanel","StylesTypographyPanel","DimensionsPanel","StylesDimensionsPanel","FiltersPanel","StylesFiltersPanel","ImageSettingsPanel","AdvancedPanel","StylesAdvancedPanel","ScreenBlock","name","variation","prefixParts","concat","prefix","join","shouldDecodeEncode","inheritedStyle","setStyle","userSettings","rawSettings","setSettings","settings","blockType","spacing","blockGap","supports","__experimentalSkipSerialization","some","spacingType","dimensions","aspectRatio","blockVariations","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasFiltersPanel","hasImageSettingsPanel","hasVariationsPanel","length","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","_links","currentBlockStyle","find","s","inheritedStyleWithLayout","layout","styleWithLayout","onChangeDimensions","newStyle","updatedStyle","onChangeLightbox","newSetting","lightbox","onChangeBorders","radius","newBorder","updatedBorder","children","title","label","className","inheritedValue","value","onChange","includeLayoutControls","initialOpen"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../lock-unlock';\nimport Subtitle from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\n\nfunction applyFallbackStyle( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseGlobalStyle,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenBlock( { name, variation } ) {\n\tlet prefixParts = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ userSettings ] = useGlobalSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tif (\n\t\tsettings?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tsettings.spacing.blockGap = false;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tif ( settings?.dimensions?.aspectRatio && name === 'core/group' ) {\n\t\tsettings.dimensions.aspectRatio = false;\n\t}\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ variation ? currentBlockStyle?.label : blockType.title }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel name={ name } variation={ variation } />\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["getBlockType","privateApis","blockEditorPrivateApis","useMemo","useSelect","store","coreStore","PanelBody","__experimentalVStack","VStack","__experimentalHasSplitBorders","hasSplitBorders","__","sprintf","ScreenHeader","BlockPreviewPanel","unlock","Subtitle","useBlockVariations","VariationsPanel","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","BACKGROUND_BLOCK_DEFAULT_VALUES","backgroundSize","applyFallbackStyle","border","hasColorOrWidth","color","width","style","undefined","applyAllFallbackStyles","top","right","bottom","left","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useHasFiltersPanel","useHasImageSettingsPanel","useGlobalStyle","useHasBackgroundPanel","BackgroundPanel","StylesBackgroundPanel","BorderPanel","StylesBorderPanel","ColorPanel","StylesColorPanel","TypographyPanel","StylesTypographyPanel","DimensionsPanel","StylesDimensionsPanel","FiltersPanel","StylesFiltersPanel","ImageSettingsPanel","AdvancedPanel","StylesAdvancedPanel","useGlobalStyleLinks","ScreenBlock","name","variation","prefixParts","concat","prefix","join","shouldDecodeEncode","inheritedStyle","setStyle","userSettings","rawSettings","setSettings","settings","blockType","_links","spacing","blockGap","supports","__experimentalSkipSerialization","some","spacingType","dimensions","aspectRatio","blockVariations","hasBackgroundPanel","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasFiltersPanel","hasImageSettingsPanel","hasVariationsPanel","length","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","currentBlockStyle","find","s","inheritedStyleWithLayout","layout","styleWithLayout","onChangeDimensions","newStyle","updatedStyle","onChangeLightbox","newSetting","lightbox","onChangeBorders","radius","newBorder","updatedBorder","children","title","label","className","inheritedValue","value","onChange","defaultValues","themeFileURIs","includeLayoutControls","initialOpen"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-block.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { unlock } from '../../lock-unlock';\nimport Subtitle from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\n\n// Initial control values where no block style is set.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n};\n\nfunction applyFallbackStyle( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseGlobalStyle,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n\tuseGlobalStyleLinks,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenBlock( { name, variation } ) {\n\tlet prefixParts = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useGlobalStyle( prefix, name, 'user', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {\n\t\tshouldDecodeEncode: false,\n\t} );\n\tconst [ userSettings ] = useGlobalSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst blockType = getBlockType( name );\n\tconst _links = useGlobalStyleLinks();\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tif (\n\t\tsettings?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tsettings.spacing.blockGap = false;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tif ( settings?.dimensions?.aspectRatio && name === 'core/group' ) {\n\t\tsettings.dimensions.aspectRatio = false;\n\t}\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ variation ? currentBlockStyle?.label : blockType.title }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel name={ name } variation={ variation } />\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"edit-site-global-styles-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t\tthemeFileURIs={ _links?.[ 'wp:theme-file' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/global-styles/screen-layout.js

@@ -24,7 +24,11 @@ function ScreenLayout() {
   const [rawSettings] = useGlobalSetting('');
   const settings = useSettingsForBlockElement(rawSettings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
-  const hasBackgroundPanel = useHasBackgroundPanel(settings);
+  /*
+   * Use the raw settings to determine if the background panel should be displayed,
+   * as the background panel is not dependent on the block element settings.
+   */
+  const hasBackgroundPanel = useHasBackgroundPanel(rawSettings);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ScreenHeader, {
       title: __('Layout')

package/build-module/components/global-styles/screen-layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","privateApis","blockEditorPrivateApis","DimensionsPanel","BackgroundPanel","ScreenHeader","unlock","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useHasBackgroundPanel","useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","ScreenLayout","rawSettings","settings","hasDimensionsPanel","hasBackgroundPanel","children","title"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport BackgroundPanel from './background-panel';\nimport ScreenHeader from './header';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasBackgroundPanel,\n\tuseHasDimensionsPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenLayout() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel /> }\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE3C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC;AACD,CAAC,GAAGV,MAAM,CAAEJ,sBAAuB,CAAC;AAEpC,SAASe,YAAYA,CAAA,EAAG;EACvB,MAAM,CAAEC,WAAW,CAAE,GAAGH,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMI,QAAQ,GAAGH,0BAA0B,CAAEE,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGN,qBAAqB,CAAEK,QAAS,CAAC;EAC5D,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEM,QAAS,CAAC;EAC5D,oBACCP,KAAA,CAAAF,SAAA;IAAAY,QAAA,gBACCd,IAAA,CAACH,YAAY;MAACkB,KAAK,EAAGvB,EAAE,CAAE,QAAS;IAAG,CAAE,CAAC,EACvCoB,kBAAkB,iBAAIZ,IAAA,CAACL,eAAe,IAAE,CAAC,EACzCkB,kBAAkB,iBAAIb,IAAA,CAACJ,eAAe,IAAE,CAAC;EAAA,CAC1C,CAAC;AAEL;AAEA,eAAea,YAAY","ignoreList":[]}
+{"version":3,"names":["__","privateApis","blockEditorPrivateApis","DimensionsPanel","BackgroundPanel","ScreenHeader","unlock","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","useHasBackgroundPanel","useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","ScreenLayout","rawSettings","settings","hasDimensionsPanel","hasBackgroundPanel","children","title"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport BackgroundPanel from './background-panel';\nimport ScreenHeader from './header';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasBackgroundPanel,\n\tuseHasDimensionsPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ScreenLayout() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\t/*\n\t * Use the raw settings to determine if the background panel should be displayed,\n\t * as the background panel is not dependent on the block element settings.\n\t */\n\tconst hasBackgroundPanel = useHasBackgroundPanel( rawSettings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel /> }\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,YAAY,MAAM,UAAU;AACnC,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE3C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC;AACD,CAAC,GAAGV,MAAM,CAAEJ,sBAAuB,CAAC;AAEpC,SAASe,YAAYA,CAAA,EAAG;EACvB,MAAM,CAAEC,WAAW,CAAE,GAAGH,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMI,QAAQ,GAAGH,0BAA0B,CAAEE,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGN,qBAAqB,CAAEK,QAAS,CAAC;EAC5D;AACD;AACA;AACA;EACC,MAAME,kBAAkB,GAAGR,qBAAqB,CAAEK,WAAY,CAAC;EAC/D,oBACCN,KAAA,CAAAF,SAAA;IAAAY,QAAA,gBACCd,IAAA,CAACH,YAAY;MAACkB,KAAK,EAAGvB,EAAE,CAAE,QAAS;IAAG,CAAE,CAAC,EACvCoB,kBAAkB,iBAAIZ,IAAA,CAACL,eAAe,IAAE,CAAC,EACzCkB,kBAAkB,iBAAIb,IAAA,CAACJ,eAAe,IAAE,CAAC;EAAA,CAC1C,CAAC;AAEL;AAEA,eAAea,YAAY","ignoreList":[]}

package/build-module/components/global-styles/screen-revisions/revisions-buttons.js

@@ -133,7 +133,7 @@ function RevisionsButtons({
         "aria-current": isSelected,
         children: [/*#__PURE__*/_jsx(Button, {
           className: "edit-site-global-styles-screen-revisions__revision-button",
-          __experimentalIsFocusable: true,
+          accessibleWhenDisabled: true,
           disabled: isSelected,
           onClick: () => {
             onChange(revision);