@wordpress/edit-site 6.3.0 → 6.4.0

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

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _blockEditor = require("@wordpress/block-editor");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
+var _lockUnlock = require("../../../lock-unlock");
+var _header = _interopRequireDefault(require("../header"));
+var _fontSizePreview = _interopRequireDefault(require("./font-size-preview"));
+var _confirmDeleteFontSizeDialog = _interopRequireDefault(require("./confirm-delete-font-size-dialog"));
+var _renameFontSizeDialog = _interopRequireDefault(require("./rename-font-size-dialog"));
+var _sizeControl = _interopRequireDefault(require("../size-control"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const {
+  useGlobalSetting
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+function FontSize() {
+  var _fontSizes$origin, _fontSize$fluid;
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = (0, _element.useState)(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = (0, _element.useState)(false);
+  const {
+    params: {
+      origin,
+      slug
+    },
+    goBack,
+    goTo
+  } = (0, _components.__experimentalUseNavigator)();
+  const [fontSizes, setFontSizes] = useGlobalSetting('typography.fontSizes');
+
+  // Get the font sizes from the origin, default to empty array.
+  const sizes = (_fontSizes$origin = fontSizes[origin]) !== null && _fontSizes$origin !== void 0 ? _fontSizes$origin : [];
+
+  // Get the font size by slug.
+  const fontSize = sizes.find(size => size.slug === slug);
+
+  // Whether fluid is true or an object, set it to true, otherwise false.
+  const isFluid = (_fontSize$fluid = !!fontSize.fluid) !== null && _fontSize$fluid !== void 0 ? _fontSize$fluid : false;
+
+  // Whether custom fluid values are used.
+  const isCustomFluid = typeof fontSize.fluid === 'object';
+  const handleNameChange = value => {
+    updateFontSize('name', value);
+  };
+  const handleFontSizeChange = value => {
+    updateFontSize('size', value);
+  };
+  const handleFluidChange = value => {
+    updateFontSize('fluid', value);
+  };
+  const handleCustomFluidValues = value => {
+    if (value) {
+      // If custom values are used, init the values with the current ones.
+      updateFontSize('fluid', {
+        min: fontSize.size,
+        max: fontSize.size
+      });
+    } else {
+      // If custom fluid values are disabled, set fluid to true.
+      updateFontSize('fluid', true);
+    }
+  };
+  const handleMinChange = value => {
+    updateFontSize('fluid', {
+      ...fontSize.fluid,
+      min: value
+    });
+  };
+  const handleMaxChange = value => {
+    updateFontSize('fluid', {
+      ...fontSize.fluid,
+      max: value
+    });
+  };
+  const updateFontSize = (key, value) => {
+    const newFontSizes = sizes.map(size => {
+      if (size.slug === slug) {
+        return {
+          ...size,
+          [key]: value
+        }; // Create a new object with updated key
+      }
+      return size;
+    });
+    setFontSizes({
+      ...fontSizes,
+      [origin]: newFontSizes
+    });
+  };
+  const handleRemoveFontSize = () => {
+    // Navigate to the font sizes list.
+    goBack();
+    const newFontSizes = sizes.filter(size => size.slug !== slug);
+    setFontSizes({
+      ...fontSizes,
+      [origin]: newFontSizes
+    });
+  };
+  const toggleDeleteConfirm = () => {
+    setIsDeleteConfirmOpen(!isDeleteConfirmOpen);
+  };
+  const toggleRenameDialog = () => {
+    setIsRenameDialogOpen(!isRenameDialogOpen);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmDeleteFontSizeDialog.default, {
+      fontSize: fontSize,
+      isOpen: isDeleteConfirmOpen,
+      toggleOpen: toggleDeleteConfirm,
+      handleRemoveFontSize: handleRemoveFontSize
+    }), isRenameDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_renameFontSizeDialog.default, {
+      fontSize: fontSize,
+      toggleOpen: toggleRenameDialog,
+      handleRename: handleNameChange
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+      spacing: 4,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        justify: "space-between",
+        align: "flex-start",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+          title: fontSize.name,
+          description: (0, _i18n.sprintf)( /* translators: %s: font size preset name. */
+          (0, _i18n.__)('Manage the font size %s.'), fontSize.name),
+          onBack: () => goTo('/typography/font-sizes/')
+        }), origin === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+            marginTop: 3,
+            marginBottom: 0,
+            paddingX: 4,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenu, {
+              trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                size: "small",
+                icon: _icons.moreVertical,
+                label: (0, _i18n.__)('Font size options')
+              }),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+                onClick: toggleRenameDialog,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+                  children: (0, _i18n.__)('Rename')
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+                onClick: toggleDeleteConfirm,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+                  children: (0, _i18n.__)('Delete')
+                })
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          paddingX: 4,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+            spacing: 4,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePreview.default, {
+                fontSize: fontSize
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sizeControl.default, {
+              label: (0, _i18n.__)('Size'),
+              value: !isCustomFluid ? fontSize.size : '',
+              onChange: handleFontSizeChange,
+              disabled: isCustomFluid
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+              label: (0, _i18n.__)('Fluid typography'),
+              help: (0, _i18n.__)('Scale the font size dynamically to fit the screen or viewport.'),
+              checked: isFluid,
+              onChange: handleFluidChange,
+              __nextHasNoMarginBottom: true
+            }), isFluid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+              label: (0, _i18n.__)('Custom fluid values'),
+              help: (0, _i18n.__)('Set custom min and max values for the fluid font size.'),
+              checked: isCustomFluid,
+              onChange: handleCustomFluidValues,
+              __nextHasNoMarginBottom: true
+            }), isCustomFluid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sizeControl.default, {
+                label: (0, _i18n.__)('Minimum'),
+                value: fontSize.fluid?.min,
+                onChange: handleMinChange
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sizeControl.default, {
+                label: (0, _i18n.__)('Maximum'),
+                value: fontSize.fluid?.max,
+                onChange: handleMaxChange
+              })]
+            })]
+          })
+        })
+      })]
+    })]
+  });
+}
+var _default = exports.default = FontSize;
+//# sourceMappingURL=font-size.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_blockEditor","require","_i18n","_components","_icons","_element","_lockUnlock","_header","_interopRequireDefault","_fontSizePreview","_confirmDeleteFontSizeDialog","_renameFontSizeDialog","_sizeControl","_jsxRuntime","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","useGlobalSetting","blockEditorPrivateApis","FontSize","_fontSizes$origin","_fontSize$fluid","isDeleteConfirmOpen","setIsDeleteConfirmOpen","useState","isRenameDialogOpen","setIsRenameDialogOpen","params","origin","slug","goBack","goTo","useNavigator","fontSizes","setFontSizes","sizes","fontSize","find","size","isFluid","fluid","isCustomFluid","handleNameChange","value","updateFontSize","handleFontSizeChange","handleFluidChange","handleCustomFluidValues","min","max","handleMinChange","handleMaxChange","key","newFontSizes","map","handleRemoveFontSize","filter","toggleDeleteConfirm","toggleRenameDialog","jsxs","Fragment","children","jsx","default","isOpen","toggleOpen","handleRename","__experimentalVStack","spacing","__experimentalHStack","justify","align","title","name","description","sprintf","__","onBack","FlexItem","__experimentalSpacer","marginTop","marginBottom","paddingX","trigger","Button","icon","moreVertical","label","onClick","__experimentalView","onChange","disabled","ToggleControl","help","checked","__nextHasNoMarginBottom","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-sizes/font-size.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalView as View,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tFlexItem,\n\tToggleControl,\n} from '@wordpress/components';\nimport { moreVertical } 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 ScreenHeader from '../header';\nimport FontSizePreview from './font-size-preview';\nimport ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';\nimport RenameFontSizeDialog from './rename-font-size-dialog';\nimport SizeControl from '../size-control';\n\nfunction FontSize() {\n\tconst [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );\n\tconst [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );\n\n\tconst {\n\t\tparams: { origin, slug },\n\t\tgoBack,\n\t\tgoTo,\n\t} = useNavigator();\n\n\tconst [ fontSizes, setFontSizes ] = useGlobalSetting(\n\t\t'typography.fontSizes'\n\t);\n\n\t// Get the font sizes from the origin, default to empty array.\n\tconst sizes = fontSizes[ origin ] ?? [];\n\n\t// Get the font size by slug.\n\tconst fontSize = sizes.find( ( size ) => size.slug === slug );\n\n\t// Whether fluid is true or an object, set it to true, otherwise false.\n\tconst isFluid = !! fontSize.fluid ?? false;\n\n\t// Whether custom fluid values are used.\n\tconst isCustomFluid = typeof fontSize.fluid === 'object';\n\n\tconst handleNameChange = ( value ) => {\n\t\tupdateFontSize( 'name', value );\n\t};\n\n\tconst handleFontSizeChange = ( value ) => {\n\t\tupdateFontSize( 'size', value );\n\t};\n\n\tconst handleFluidChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', value );\n\t};\n\n\tconst handleCustomFluidValues = ( value ) => {\n\t\tif ( value ) {\n\t\t\t// If custom values are used, init the values with the current ones.\n\t\t\tupdateFontSize( 'fluid', {\n\t\t\t\tmin: fontSize.size,\n\t\t\t\tmax: fontSize.size,\n\t\t\t} );\n\t\t} else {\n\t\t\t// If custom fluid values are disabled, set fluid to true.\n\t\t\tupdateFontSize( 'fluid', true );\n\t\t}\n\t};\n\n\tconst handleMinChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', { ...fontSize.fluid, min: value } );\n\t};\n\n\tconst handleMaxChange = ( value ) => {\n\t\tupdateFontSize( 'fluid', { ...fontSize.fluid, max: value } );\n\t};\n\n\tconst updateFontSize = ( key, value ) => {\n\t\tconst newFontSizes = sizes.map( ( size ) => {\n\t\t\tif ( size.slug === slug ) {\n\t\t\t\treturn { ...size, [ key ]: value }; // Create a new object with updated key\n\t\t\t}\n\t\t\treturn size;\n\t\t} );\n\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst handleRemoveFontSize = () => {\n\t\t// Navigate to the font sizes list.\n\t\tgoBack();\n\n\t\tconst newFontSizes = sizes.filter( ( size ) => size.slug !== slug );\n\t\tsetFontSizes( {\n\t\t\t...fontSizes,\n\t\t\t[ origin ]: newFontSizes,\n\t\t} );\n\t};\n\n\tconst toggleDeleteConfirm = () => {\n\t\tsetIsDeleteConfirmOpen( ! isDeleteConfirmOpen );\n\t};\n\n\tconst toggleRenameDialog = () => {\n\t\tsetIsRenameDialogOpen( ! isRenameDialogOpen );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ConfirmDeleteFontSizeDialog\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\tisOpen={ isDeleteConfirmOpen }\n\t\t\t\ttoggleOpen={ toggleDeleteConfirm }\n\t\t\t\thandleRemoveFontSize={ handleRemoveFontSize }\n\t\t\t/>\n\n\t\t\t{ isRenameDialogOpen && (\n\t\t\t\t<RenameFontSizeDialog\n\t\t\t\t\tfontSize={ fontSize }\n\t\t\t\t\ttoggleOpen={ toggleRenameDialog }\n\t\t\t\t\thandleRename={ handleNameChange }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<HStack justify=\"space-between\" align=\"flex-start\">\n\t\t\t\t\t<ScreenHeader\n\t\t\t\t\t\ttitle={ fontSize.name }\n\t\t\t\t\t\tdescription={ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: font size preset name. */\n\t\t\t\t\t\t\t__( 'Manage the font size %s.' ),\n\t\t\t\t\t\t\tfontSize.name\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonBack={ () => goTo( '/typography/font-sizes/' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t{ origin === 'custom' && (\n\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\t\tmarginTop={ 3 }\n\t\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\t\tpaddingX={ 4 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Font size 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\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleRenameDialog }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Rename' ) }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleDeleteConfirm }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Delete' ) }\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\n\t\t\t\t<View>\n\t\t\t\t\t<Spacer paddingX={ 4 }>\n\t\t\t\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<FontSizePreview fontSize={ fontSize } />\n\t\t\t\t\t\t\t</FlexItem>\n\n\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\t\t\t\t\tvalue={ ! isCustomFluid ? fontSize.size : '' }\n\t\t\t\t\t\t\t\tonChange={ handleFontSizeChange }\n\t\t\t\t\t\t\t\tdisabled={ isCustomFluid }\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Fluid typography' ) }\n\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t'Scale the font size dynamically to fit the screen or viewport.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tchecked={ isFluid }\n\t\t\t\t\t\t\t\tonChange={ handleFluidChange }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t{ isFluid && (\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Custom fluid values' ) }\n\t\t\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t\t\t'Set custom min and max values for the fluid font size.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ isCustomFluid }\n\t\t\t\t\t\t\t\t\tonChange={ handleCustomFluidValues }\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\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\t{ isCustomFluid && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Minimum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ fontSize.fluid?.min }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMinChange }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<SizeControl\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Maximum' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ fontSize.fluid?.max }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleMaxChange }\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</VStack>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</View>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default FontSize;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAWA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,WAAA,GAAAL,OAAA;AAOA,IAAAM,OAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,4BAAA,GAAAF,sBAAA,CAAAP,OAAA;AACA,IAAAU,qBAAA,GAAAH,sBAAA,CAAAP,OAAA;AACA,IAAAW,YAAA,GAAAJ,sBAAA,CAAAP,OAAA;AAA0C,IAAAY,WAAA,GAAAZ,OAAA;AAjC1C;AACA;AACA;;AAiBA;AACA;AACA;;AAEA,MAAM;EACLa,cAAc,EAAEC,YAAY;EAC5BC,kBAAkB,EAAEC,gBAAgB;EACpCC,uBAAuB,EAAEC;AAC1B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AACnC,MAAM;EAAEC;AAAiB,CAAC,GAAG,IAAAF,kBAAM,EAAEG,wBAAuB,CAAC;AAO7D,SAASC,QAAQA,CAAA,EAAG;EAAA,IAAAC,iBAAA,EAAAC,eAAA;EACnB,MAAM,CAAEC,mBAAmB,EAAEC,sBAAsB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EACzE,MAAM,CAAEC,kBAAkB,EAAEC,qBAAqB,CAAE,GAAG,IAAAF,iBAAQ,EAAE,KAAM,CAAC;EAEvE,MAAM;IACLG,MAAM,EAAE;MAAEC,MAAM;MAAEC;IAAK,CAAC;IACxBC,MAAM;IACNC;EACD,CAAC,GAAG,IAAAC,sCAAY,EAAC,CAAC;EAElB,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAGjB,gBAAgB,CACnD,sBACD,CAAC;;EAED;EACA,MAAMkB,KAAK,IAAAf,iBAAA,GAAGa,SAAS,CAAEL,MAAM,CAAE,cAAAR,iBAAA,cAAAA,iBAAA,GAAI,EAAE;;EAEvC;EACA,MAAMgB,QAAQ,GAAGD,KAAK,CAACE,IAAI,CAAIC,IAAI,IAAMA,IAAI,CAACT,IAAI,KAAKA,IAAK,CAAC;;EAE7D;EACA,MAAMU,OAAO,IAAAlB,eAAA,GAAG,CAAC,CAAEe,QAAQ,CAACI,KAAK,cAAAnB,eAAA,cAAAA,eAAA,GAAI,KAAK;;EAE1C;EACA,MAAMoB,aAAa,GAAG,OAAOL,QAAQ,CAACI,KAAK,KAAK,QAAQ;EAExD,MAAME,gBAAgB,GAAKC,KAAK,IAAM;IACrCC,cAAc,CAAE,MAAM,EAAED,KAAM,CAAC;EAChC,CAAC;EAED,MAAME,oBAAoB,GAAKF,KAAK,IAAM;IACzCC,cAAc,CAAE,MAAM,EAAED,KAAM,CAAC;EAChC,CAAC;EAED,MAAMG,iBAAiB,GAAKH,KAAK,IAAM;IACtCC,cAAc,CAAE,OAAO,EAAED,KAAM,CAAC;EACjC,CAAC;EAED,MAAMI,uBAAuB,GAAKJ,KAAK,IAAM;IAC5C,IAAKA,KAAK,EAAG;MACZ;MACAC,cAAc,CAAE,OAAO,EAAE;QACxBI,GAAG,EAAEZ,QAAQ,CAACE,IAAI;QAClBW,GAAG,EAAEb,QAAQ,CAACE;MACf,CAAE,CAAC;IACJ,CAAC,MAAM;MACN;MACAM,cAAc,CAAE,OAAO,EAAE,IAAK,CAAC;IAChC;EACD,CAAC;EAED,MAAMM,eAAe,GAAKP,KAAK,IAAM;IACpCC,cAAc,CAAE,OAAO,EAAE;MAAE,GAAGR,QAAQ,CAACI,KAAK;MAAEQ,GAAG,EAAEL;IAAM,CAAE,CAAC;EAC7D,CAAC;EAED,MAAMQ,eAAe,GAAKR,KAAK,IAAM;IACpCC,cAAc,CAAE,OAAO,EAAE;MAAE,GAAGR,QAAQ,CAACI,KAAK;MAAES,GAAG,EAAEN;IAAM,CAAE,CAAC;EAC7D,CAAC;EAED,MAAMC,cAAc,GAAGA,CAAEQ,GAAG,EAAET,KAAK,KAAM;IACxC,MAAMU,YAAY,GAAGlB,KAAK,CAACmB,GAAG,CAAIhB,IAAI,IAAM;MAC3C,IAAKA,IAAI,CAACT,IAAI,KAAKA,IAAI,EAAG;QACzB,OAAO;UAAE,GAAGS,IAAI;UAAE,CAAEc,GAAG,GAAIT;QAAM,CAAC,CAAC,CAAC;MACrC;MACA,OAAOL,IAAI;IACZ,CAAE,CAAC;IAEHJ,YAAY,CAAE;MACb,GAAGD,SAAS;MACZ,CAAEL,MAAM,GAAIyB;IACb,CAAE,CAAC;EACJ,CAAC;EAED,MAAME,oBAAoB,GAAGA,CAAA,KAAM;IAClC;IACAzB,MAAM,CAAC,CAAC;IAER,MAAMuB,YAAY,GAAGlB,KAAK,CAACqB,MAAM,CAAIlB,IAAI,IAAMA,IAAI,CAACT,IAAI,KAAKA,IAAK,CAAC;IACnEK,YAAY,CAAE;MACb,GAAGD,SAAS;MACZ,CAAEL,MAAM,GAAIyB;IACb,CAAE,CAAC;EACJ,CAAC;EAED,MAAMI,mBAAmB,GAAGA,CAAA,KAAM;IACjClC,sBAAsB,CAAE,CAAED,mBAAoB,CAAC;EAChD,CAAC;EAED,MAAMoC,kBAAkB,GAAGA,CAAA,KAAM;IAChChC,qBAAqB,CAAE,CAAED,kBAAmB,CAAC;EAC9C,CAAC;EAED,oBACC,IAAAjB,WAAA,CAAAmD,IAAA,EAAAnD,WAAA,CAAAoD,QAAA;IAAAC,QAAA,gBACC,IAAArD,WAAA,CAAAsD,GAAA,EAACzD,4BAAA,CAAA0D,OAA2B;MAC3B3B,QAAQ,EAAGA,QAAU;MACrB4B,MAAM,EAAG1C,mBAAqB;MAC9B2C,UAAU,EAAGR,mBAAqB;MAClCF,oBAAoB,EAAGA;IAAsB,CAC7C,CAAC,EAEA9B,kBAAkB,iBACnB,IAAAjB,WAAA,CAAAsD,GAAA,EAACxD,qBAAA,CAAAyD,OAAoB;MACpB3B,QAAQ,EAAGA,QAAU;MACrB6B,UAAU,EAAGP,kBAAoB;MACjCQ,YAAY,EAAGxB;IAAkB,CACjC,CACD,eAED,IAAAlC,WAAA,CAAAmD,IAAA,EAAC7D,WAAA,CAAAqE,oBAAM;MAACC,OAAO,EAAG,CAAG;MAAAP,QAAA,gBACpB,IAAArD,WAAA,CAAAmD,IAAA,EAAC7D,WAAA,CAAAuE,oBAAM;QAACC,OAAO,EAAC,eAAe;QAACC,KAAK,EAAC,YAAY;QAAAV,QAAA,gBACjD,IAAArD,WAAA,CAAAsD,GAAA,EAAC5D,OAAA,CAAA6D,OAAY;UACZS,KAAK,EAAGpC,QAAQ,CAACqC,IAAM;UACvBC,WAAW,EAAG,IAAAC,aAAO,GACpB;UACA,IAAAC,QAAE,EAAE,0BAA2B,CAAC,EAChCxC,QAAQ,CAACqC,IACV,CAAG;UACHI,MAAM,EAAGA,CAAA,KAAM9C,IAAI,CAAE,yBAA0B;QAAG,CAClD,CAAC,EACAH,MAAM,KAAK,QAAQ,iBACpB,IAAApB,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAAgF,QAAQ;UAAAjB,QAAA,eACR,IAAArD,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAAiF,oBAAM;YACNC,SAAS,EAAG,CAAG;YACfC,YAAY,EAAG,CAAG;YAClBC,QAAQ,EAAG,CAAG;YAAArB,QAAA,eAEd,IAAArD,WAAA,CAAAmD,IAAA,EAACjD,YAAY;cACZyE,OAAO,eACN,IAAA3E,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAAsF,MAAM;gBACN9C,IAAI,EAAC,OAAO;gBACZ+C,IAAI,EAAGC,mBAAc;gBACrBC,KAAK,EAAG,IAAAX,QAAE,EAAE,mBAAoB;cAAG,CACnC,CACD;cAAAf,QAAA,gBAED,IAAArD,WAAA,CAAAsD,GAAA,EAAClD,gBAAgB;gBAChB4E,OAAO,EAAG9B,kBAAoB;gBAAAG,QAAA,eAE9B,IAAArD,WAAA,CAAAsD,GAAA,EAAChD,qBAAqB;kBAAA+C,QAAA,EACnB,IAAAe,QAAE,EAAE,QAAS;gBAAC,CACM;cAAC,CACP,CAAC,eACnB,IAAApE,WAAA,CAAAsD,GAAA,EAAClD,gBAAgB;gBAChB4E,OAAO,EAAG/B,mBAAqB;gBAAAI,QAAA,eAE/B,IAAArD,WAAA,CAAAsD,GAAA,EAAChD,qBAAqB;kBAAA+C,QAAA,EACnB,IAAAe,QAAE,EAAE,QAAS;gBAAC,CACM;cAAC,CACP,CAAC;YAAA,CACN;UAAC,CACR;QAAC,CACA,CACV;MAAA,CACM,CAAC,eAET,IAAApE,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAA2F,kBAAI;QAAA5B,QAAA,eACJ,IAAArD,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAAiF,oBAAM;UAACG,QAAQ,EAAG,CAAG;UAAArB,QAAA,eACrB,IAAArD,WAAA,CAAAmD,IAAA,EAAC7D,WAAA,CAAAqE,oBAAM;YAACC,OAAO,EAAG,CAAG;YAAAP,QAAA,gBACpB,IAAArD,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAAgF,QAAQ;cAAAjB,QAAA,eACR,IAAArD,WAAA,CAAAsD,GAAA,EAAC1D,gBAAA,CAAA2D,OAAe;gBAAC3B,QAAQ,EAAGA;cAAU,CAAE;YAAC,CAChC,CAAC,eAEX,IAAA5B,WAAA,CAAAsD,GAAA,EAACvD,YAAA,CAAAwD,OAAW;cACXwB,KAAK,EAAG,IAAAX,QAAE,EAAE,MAAO,CAAG;cACtBjC,KAAK,EAAG,CAAEF,aAAa,GAAGL,QAAQ,CAACE,IAAI,GAAG,EAAI;cAC9CoD,QAAQ,EAAG7C,oBAAsB;cACjC8C,QAAQ,EAAGlD;YAAe,CAC1B,CAAC,eAEF,IAAAjC,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAA8F,aAAa;cACbL,KAAK,EAAG,IAAAX,QAAE,EAAE,kBAAmB,CAAG;cAClCiB,IAAI,EAAG,IAAAjB,QAAE,EACR,gEACD,CAAG;cACHkB,OAAO,EAAGvD,OAAS;cACnBmD,QAAQ,EAAG5C,iBAAmB;cAC9BiD,uBAAuB;YAAA,CACvB,CAAC,EAEAxD,OAAO,iBACR,IAAA/B,WAAA,CAAAsD,GAAA,EAAChE,WAAA,CAAA8F,aAAa;cACbL,KAAK,EAAG,IAAAX,QAAE,EAAE,qBAAsB,CAAG;cACrCiB,IAAI,EAAG,IAAAjB,QAAE,EACR,wDACD,CAAG;cACHkB,OAAO,EAAGrD,aAAe;cACzBiD,QAAQ,EAAG3C,uBAAyB;cACpCgD,uBAAuB;YAAA,CACvB,CACD,EAECtD,aAAa,iBACd,IAAAjC,WAAA,CAAAmD,IAAA,EAAAnD,WAAA,CAAAoD,QAAA;cAAAC,QAAA,gBACC,IAAArD,WAAA,CAAAsD,GAAA,EAACvD,YAAA,CAAAwD,OAAW;gBACXwB,KAAK,EAAG,IAAAX,QAAE,EAAE,SAAU,CAAG;gBACzBjC,KAAK,EAAGP,QAAQ,CAACI,KAAK,EAAEQ,GAAK;gBAC7B0C,QAAQ,EAAGxC;cAAiB,CAC5B,CAAC,eACF,IAAA1C,WAAA,CAAAsD,GAAA,EAACvD,YAAA,CAAAwD,OAAW;gBACXwB,KAAK,EAAG,IAAAX,QAAE,EAAE,SAAU,CAAG;gBACzBjC,KAAK,EAAGP,QAAQ,CAACI,KAAK,EAAES,GAAK;gBAC7ByC,QAAQ,EAAGvC;cAAiB,CAC5B,CAAC;YAAA,CACD,CACF;UAAA,CACM;QAAC,CACF;MAAC,CACJ,CAAC;IAAA,CACA,CAAC;EAAA,CACR,CAAC;AAEL;AAAC,IAAA6C,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEc5C,QAAQ","ignoreList":[]}

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _subtitle = _interopRequireDefault(require("../subtitle"));
+var _navigationButton = require("../navigation-button");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function FontSizes() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    spacing: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+      justify: "space-between",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+        level: 3,
+        children: (0, _i18n.__)('Font Sizes')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
+      isBordered: true,
+      isSeparated: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
+        path: "/typography/font-sizes/",
+        "aria-label": (0, _i18n.__)('Edit font size presets'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          direction: "row",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+            children: (0, _i18n.__)('Font size presets')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+            icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
+          })]
+        })
+      })
+    })]
+  });
+}
+var _default = exports.default = FontSizes;
+//# sourceMappingURL=font-sizes-count.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_components","_icons","_subtitle","_interopRequireDefault","_navigationButton","_jsxRuntime","FontSizes","jsxs","__experimentalVStack","spacing","children","jsx","__experimentalHStack","justify","default","level","__","__experimentalItemGroup","isBordered","isSeparated","NavigationButtonAsItem","path","direction","FlexItem","Icon","icon","isRTL","chevronLeft","chevronRight","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from '../subtitle';\nimport { NavigationButtonAsItem } from '../navigation-button';\n\nfunction FontSizes() {\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>\n\t\t\t</HStack>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath=\"/typography/font-sizes/\"\n\t\t\t\t\taria-label={ __( 'Edit font size presets' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t<FlexItem>{ __( 'Font size presets' ) }</FlexItem>\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default FontSizes;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,SAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAA8D,IAAAM,WAAA,GAAAN,OAAA;AAhB9D;AACA;AACA;;AAUA;AACA;AACA;;AAIA,SAASO,SAASA,CAAA,EAAG;EACpB,oBACC,IAAAD,WAAA,CAAAE,IAAA,EAACP,WAAA,CAAAQ,oBAAM;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpB,IAAAL,WAAA,CAAAM,GAAA,EAACX,WAAA,CAAAY,oBAAM;MAACC,OAAO,EAAC,eAAe;MAAAH,QAAA,eAC9B,IAAAL,WAAA,CAAAM,GAAA,EAACT,SAAA,CAAAY,OAAQ;QAACC,KAAK,EAAG,CAAG;QAAAL,QAAA,EAAG,IAAAM,QAAE,EAAE,YAAa;MAAC,CAAY;IAAC,CAChD,CAAC,eACT,IAAAX,WAAA,CAAAM,GAAA,EAACX,WAAA,CAAAiB,uBAAS;MAACC,UAAU;MAACC,WAAW;MAAAT,QAAA,eAChC,IAAAL,WAAA,CAAAM,GAAA,EAACP,iBAAA,CAAAgB,sBAAsB;QACtBC,IAAI,EAAC,yBAAyB;QAC9B,cAAa,IAAAL,QAAE,EAAE,wBAAyB,CAAG;QAAAN,QAAA,eAE7C,IAAAL,WAAA,CAAAE,IAAA,EAACP,WAAA,CAAAY,oBAAM;UAACU,SAAS,EAAC,KAAK;UAAAZ,QAAA,gBACtB,IAAAL,WAAA,CAAAM,GAAA,EAACX,WAAA,CAAAuB,QAAQ;YAAAb,QAAA,EAAG,IAAAM,QAAE,EAAE,mBAAoB;UAAC,CAAY,CAAC,eAClD,IAAAX,WAAA,CAAAM,GAAA,EAACV,MAAA,CAAAuB,IAAI;YAACC,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,kBAAW,GAAGC;UAAc,CAAE,CAAC;QAAA,CAC/C;MAAC,CACc;IAAC,CACf,CAAC;EAAA,CACL,CAAC;AAEX;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAEcR,SAAS","ignoreList":[]}

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

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _blockEditor = require("@wordpress/block-editor");
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
+var _lockUnlock = require("../../../lock-unlock");
+var _subtitle = _interopRequireDefault(require("../subtitle"));
+var _navigationButton = require("../navigation-button");
+var _utils = require("../utils");
+var _header = _interopRequireDefault(require("../header"));
+var _confirmResetFontSizesDialog = _interopRequireDefault(require("./confirm-reset-font-sizes-dialog"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const {
+  useGlobalSetting
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+function FontSizeGroup({
+  label,
+  origin,
+  sizes,
+  handleAddFontSize,
+  handleResetFontSizes
+}) {
+  const [isResetDialogOpen, setIsResetDialogOpen] = (0, _element.useState)(false);
+  const toggleResetDialog = () => setIsResetDialogOpen(!isResetDialogOpen);
+  const resetDialogText = origin === 'custom' ? (0, _i18n.__)('Are you sure you want to remove all custom font size presets?') : (0, _i18n.__)('Are you sure you want to reset all font size presets to their default values?');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isResetDialogOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirmResetFontSizesDialog.default, {
+      text: resetDialogText,
+      confirmButtonText: origin === 'custom' ? (0, _i18n.__)('Remove') : (0, _i18n.__)('Reset'),
+      isOpen: isResetDialogOpen,
+      toggleOpen: toggleResetDialog,
+      onConfirm: handleResetFontSizes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+      spacing: 4,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        justify: "space-between",
+        align: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+          level: 3,
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.FlexItem, {
+          children: [origin === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            label: (0, _i18n.__)('Add font size'),
+            icon: _icons.plus,
+            size: "small",
+            onClick: handleAddFontSize
+          }), !!handleResetFontSizes && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu, {
+            trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              size: "small",
+              icon: _icons.moreVertical,
+              label: (0, _i18n.__)('Font size presets options')
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+              onClick: toggleResetDialog,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+                children: origin === 'custom' ? (0, _i18n.__)('Remove font size presets') : (0, _i18n.__)('Reset font size presets')
+              })
+            })
+          })]
+        })]
+      }), !!sizes.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
+        isBordered: true,
+        isSeparated: true,
+        children: sizes.map(size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
+          path: `/typography/font-sizes/${origin}/${size.slug}`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+            direction: "row",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+              className: "edit-site-font-size__item",
+              children: size.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+                justify: "flex-end",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexBlock, {
+                  className: "edit-site-font-size__item edit-site-font-size__item-value",
+                  children: size.size
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                  icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.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 = (0, _utils.getNewIndexFromPresets)(customFontSizes, 'custom-');
+    const newFontSize = {
+      /* translators: %d: font size index */
+      name: (0, _i18n.sprintf)((0, _i18n.__)('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__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    spacing: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+      title: (0, _i18n.__)('Font size presets'),
+      description: (0, _i18n.__)('Create and edit the presets used for font sizes across the site.')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+        paddingX: 4,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+          spacing: 8,
+          children: [!!themeFontSizes?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(FontSizeGroup, {
+            label: (0, _i18n.__)('Theme'),
+            origin: "theme",
+            sizes: themeFontSizes,
+            baseSizes: baseThemeFontSizes,
+            handleAddFontSize: handleAddFontSize,
+            handleResetFontSizes: hasSameSizeValues(themeFontSizes, baseThemeFontSizes) ? null : () => setThemeFontSizes(baseThemeFontSizes)
+          }), defaultFontSizesEnabled && !!defaultFontSizes?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(FontSizeGroup, {
+            label: (0, _i18n.__)('Default'),
+            origin: "default",
+            sizes: defaultFontSizes,
+            baseSizes: baseDefaultFontSizes,
+            handleAddFontSize: handleAddFontSize,
+            handleResetFontSizes: hasSameSizeValues(defaultFontSizes, baseDefaultFontSizes) ? null : () => setDefaultFontSizes(baseDefaultFontSizes)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FontSizeGroup, {
+            label: (0, _i18n.__)('Custom'),
+            origin: "custom",
+            sizes: customFontSizes,
+            handleAddFontSize: handleAddFontSize,
+            handleResetFontSizes: customFontSizes.length > 0 ? () => setCustomFontSizes([]) : null
+          })]
+        })
+      })
+    })]
+  });
+}
+var _default = exports.default = FontSizes;
+//# sourceMappingURL=font-sizes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_blockEditor","require","_i18n","_components","_icons","_element","_lockUnlock","_subtitle","_interopRequireDefault","_navigationButton","_utils","_header","_confirmResetFontSizesDialog","_jsxRuntime","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","unlock","componentsPrivateApis","useGlobalSetting","blockEditorPrivateApis","FontSizeGroup","label","origin","sizes","handleAddFontSize","handleResetFontSizes","isResetDialogOpen","setIsResetDialogOpen","useState","toggleResetDialog","resetDialogText","__","jsxs","Fragment","children","jsx","default","text","confirmButtonText","isOpen","toggleOpen","onConfirm","__experimentalVStack","spacing","__experimentalHStack","justify","align","level","FlexItem","Button","icon","plus","size","onClick","trigger","moreVertical","length","__experimentalItemGroup","isBordered","isSeparated","map","NavigationButtonAsItem","path","slug","direction","className","name","FlexBlock","Icon","isRTL","chevronLeft","chevronRight","FontSizes","themeFontSizes","setThemeFontSizes","baseThemeFontSizes","defaultFontSizes","setDefaultFontSizes","baseDefaultFontSizes","customFontSizes","setCustomFontSizes","defaultFontSizesEnabled","index","getNewIndexFromPresets","newFontSize","sprintf","hasSameSizeValues","arr1","arr2","item","join","title","description","__experimentalView","__experimentalSpacer","paddingX","baseSizes","_default","exports"],"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":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAWA,IAAAG,MAAA,GAAAH,OAAA;AAOA,IAAAI,QAAA,GAAAJ,OAAA;AAKA,IAAAK,WAAA,GAAAL,OAAA;AAOA,IAAAM,SAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,iBAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,OAAA,GAAAH,sBAAA,CAAAP,OAAA;AACA,IAAAW,4BAAA,GAAAJ,sBAAA,CAAAP,OAAA;AAA4E,IAAAY,WAAA,GAAAZ,OAAA;AAvC5E;AACA;AACA;;AAuBA;AACA;AACA;;AAEA,MAAM;EACLa,cAAc,EAAEC,YAAY;EAC5BC,kBAAkB,EAAEC,gBAAgB;EACpCC,uBAAuB,EAAEC;AAC1B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,uBAAsB,CAAC;AACnC,MAAM;EAAEC;AAAiB,CAAC,GAAG,IAAAF,kBAAM,EAAEG,wBAAuB,CAAC;AAO7D,SAASC,aAAaA,CAAE;EACvBC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,iBAAiB;EACjBC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,iBAAiB,EAAEC,oBAAoB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAMF,oBAAoB,CAAE,CAAED,iBAAkB,CAAC;EAE3E,MAAMI,eAAe,GACpBR,MAAM,KAAK,QAAQ,GAChB,IAAAS,QAAE,EACF,+DACA,CAAC,GACD,IAAAA,QAAE,EACF,+EACA,CAAC;EAEL,oBACC,IAAAtB,WAAA,CAAAuB,IAAA,EAAAvB,WAAA,CAAAwB,QAAA;IAAAC,QAAA,GACGR,iBAAiB,iBAClB,IAAAjB,WAAA,CAAA0B,GAAA,EAAC3B,4BAAA,CAAA4B,OAA2B;MAC3BC,IAAI,EAAGP,eAAiB;MACxBQ,iBAAiB,EAChBhB,MAAM,KAAK,QAAQ,GAAG,IAAAS,QAAE,EAAE,QAAS,CAAC,GAAG,IAAAA,QAAE,EAAE,OAAQ,CACnD;MACDQ,MAAM,EAAGb,iBAAmB;MAC5Bc,UAAU,EAAGX,iBAAmB;MAChCY,SAAS,EAAGhB;IAAsB,CAClC,CACD,eACD,IAAAhB,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAA2C,oBAAM;MAACC,OAAO,EAAG,CAAG;MAAAT,QAAA,gBACpB,IAAAzB,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAA6C,oBAAM;QAACC,OAAO,EAAC,eAAe;QAACC,KAAK,EAAC,QAAQ;QAAAZ,QAAA,gBAC7C,IAAAzB,WAAA,CAAA0B,GAAA,EAAChC,SAAA,CAAAiC,OAAQ;UAACW,KAAK,EAAG,CAAG;UAAAb,QAAA,EAAGb;QAAK,CAAY,CAAC,eAC1C,IAAAZ,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAAiD,QAAQ;UAAAd,QAAA,GACNZ,MAAM,KAAK,QAAQ,iBACpB,IAAAb,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAAkD,MAAM;YACN5B,KAAK,EAAG,IAAAU,QAAE,EAAE,eAAgB,CAAG;YAC/BmB,IAAI,EAAGC,WAAM;YACbC,IAAI,EAAC,OAAO;YACZC,OAAO,EAAG7B;UAAmB,CAC7B,CACD,EACC,CAAC,CAAEC,oBAAoB,iBACxB,IAAAhB,WAAA,CAAA0B,GAAA,EAACxB,YAAY;YACZ2C,OAAO,eACN,IAAA7C,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAAkD,MAAM;cACNG,IAAI,EAAC,OAAO;cACZF,IAAI,EAAGK,mBAAc;cACrBlC,KAAK,EAAG,IAAAU,QAAE,EACT,2BACD;YAAG,CACH,CACD;YAAAG,QAAA,eAED,IAAAzB,WAAA,CAAA0B,GAAA,EAACtB,gBAAgB;cAACwC,OAAO,EAAGxB,iBAAmB;cAAAK,QAAA,eAC9C,IAAAzB,WAAA,CAAA0B,GAAA,EAACpB,qBAAqB;gBAAAmB,QAAA,EACnBZ,MAAM,KAAK,QAAQ,GAClB,IAAAS,QAAE,EAAE,0BAA2B,CAAC,GAChC,IAAAA,QAAE,EAAE,yBAA0B;cAAC,CACZ;YAAC,CACP;UAAC,CACN,CACd;QAAA,CACQ,CAAC;MAAA,CACJ,CAAC,EAEP,CAAC,CAAER,KAAK,CAACiC,MAAM,iBAChB,IAAA/C,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAA0D,uBAAS;QAACC,UAAU;QAACC,WAAW;QAAAzB,QAAA,EAC9BX,KAAK,CAACqC,GAAG,CAAIR,IAAI,iBAClB,IAAA3C,WAAA,CAAA0B,GAAA,EAAC9B,iBAAA,CAAAwD,sBAAsB;UAEtBC,IAAI,EAAI,0BAA0BxC,MAAQ,IAAI8B,IAAI,CAACW,IAAM,EAAG;UAAA7B,QAAA,eAE5D,IAAAzB,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAA6C,oBAAM;YAACoB,SAAS,EAAC,KAAK;YAAA9B,QAAA,gBACtB,IAAAzB,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAAiD,QAAQ;cAACiB,SAAS,EAAC,2BAA2B;cAAA/B,QAAA,EAC5CkB,IAAI,CAACc;YAAI,CACF,CAAC,eACX,IAAAzD,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAAiD,QAAQ;cAAAd,QAAA,eACR,IAAAzB,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAA6C,oBAAM;gBAACC,OAAO,EAAC,UAAU;gBAAAX,QAAA,gBACzB,IAAAzB,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAAoE,SAAS;kBAACF,SAAS,EAAC,2DAA2D;kBAAA/B,QAAA,EAC7EkB,IAAI,CAACA;gBAAI,CACD,CAAC,eACZ,IAAA3C,WAAA,CAAA0B,GAAA,EAACnC,MAAA,CAAAoE,IAAI;kBACJlB,IAAI,EACH,IAAAmB,WAAK,EAAC,CAAC,GACJC,kBAAW,GACXC;gBACH,CACD,CAAC;cAAA,CACK;YAAC,CACA,CAAC;UAAA,CACJ;QAAC,GArBHnB,IAAI,CAACW,IAsBY,CACvB;MAAC,CACO,CACX;IAAA,CACM,CAAC;EAAA,CACR,CAAC;AAEL;AAEA,SAASS,SAASA,CAAA,EAAG;EACpB,MAAM,CAAEC,cAAc,EAAEC,iBAAiB,CAAE,GAAGxD,gBAAgB,CAC7D,4BACD,CAAC;EAED,MAAM,CAAEyD,kBAAkB,CAAE,GAAGzD,gBAAgB,CAC9C,4BAA4B,EAC5B,IAAI,EACJ,MACD,CAAC;EACD,MAAM,CAAE0D,gBAAgB,EAAEC,mBAAmB,CAAE,GAAG3D,gBAAgB,CACjE,8BACD,CAAC;EAED,MAAM,CAAE4D,oBAAoB,CAAE,GAAG5D,gBAAgB,CAChD,8BAA8B,EAC9B,IAAI,EACJ,MACD,CAAC;EAED,MAAM,CAAE6D,eAAe,GAAG,EAAE,EAAEC,kBAAkB,CAAE,GAAG9D,gBAAgB,CACpE,6BACD,CAAC;EAED,MAAM,CAAE+D,uBAAuB,CAAE,GAAG/D,gBAAgB,CACnD,6BACD,CAAC;EAED,MAAMM,iBAAiB,GAAGA,CAAA,KAAM;IAC/B,MAAM0D,KAAK,GAAG,IAAAC,6BAAsB,EAAEJ,eAAe,EAAE,SAAU,CAAC;IAClE,MAAMK,WAAW,GAAG;MACnB;MACAlB,IAAI,EAAE,IAAAmB,aAAO,EAAE,IAAAtD,QAAE,EAAE,kBAAmB,CAAC,EAAEmD,KAAM,CAAC;MAChD9B,IAAI,EAAE,MAAM;MACZW,IAAI,EAAG,UAAUmB,KAAO;IACzB,CAAC;IAEDF,kBAAkB,CAAE,CAAE,GAAGD,eAAe,EAAEK,WAAW,CAAG,CAAC;EAC1D,CAAC;EAED,MAAME,iBAAiB,GAAGA,CAAEC,IAAI,EAAEC,IAAI,KACrCD,IAAI,CAAC3B,GAAG,CAAI6B,IAAI,IAAMA,IAAI,CAACrC,IAAK,CAAC,CAACsC,IAAI,CAAE,EAAG,CAAC,KAC5CF,IAAI,CAAC5B,GAAG,CAAI6B,IAAI,IAAMA,IAAI,CAACrC,IAAK,CAAC,CAACsC,IAAI,CAAE,EAAG,CAAC;EAE7C,oBACC,IAAAjF,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAA2C,oBAAM;IAACC,OAAO,EAAG,CAAG;IAAAT,QAAA,gBACpB,IAAAzB,WAAA,CAAA0B,GAAA,EAAC5B,OAAA,CAAA6B,OAAY;MACZuD,KAAK,EAAG,IAAA5D,QAAE,EAAE,mBAAoB,CAAG;MACnC6D,WAAW,EAAG,IAAA7D,QAAE,EACf,kEACD;IAAG,CACH,CAAC,eAEF,IAAAtB,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAA8F,kBAAI;MAAA3D,QAAA,eACJ,IAAAzB,WAAA,CAAA0B,GAAA,EAACpC,WAAA,CAAA+F,oBAAM;QAACC,QAAQ,EAAG,CAAG;QAAA7D,QAAA,eACrB,IAAAzB,WAAA,CAAAuB,IAAA,EAACjC,WAAA,CAAA2C,oBAAM;UAACC,OAAO,EAAG,CAAG;UAAAT,QAAA,GAClB,CAAC,CAAEuC,cAAc,EAAEjB,MAAM,iBAC1B,IAAA/C,WAAA,CAAA0B,GAAA,EAACf,aAAa;YACbC,KAAK,EAAG,IAAAU,QAAE,EAAE,OAAQ,CAAG;YACvBT,MAAM,EAAC,OAAO;YACdC,KAAK,EAAGkD,cAAgB;YACxBuB,SAAS,EAAGrB,kBAAoB;YAChCnD,iBAAiB,EAAGA,iBAAmB;YACvCC,oBAAoB,EACnB6D,iBAAiB,CAChBb,cAAc,EACdE,kBACD,CAAC,GACE,IAAI,GACJ,MACAD,iBAAiB,CAChBC,kBACD;UACH,CACD,CACD,EAECM,uBAAuB,IACxB,CAAC,CAAEL,gBAAgB,EAAEpB,MAAM,iBAC1B,IAAA/C,WAAA,CAAA0B,GAAA,EAACf,aAAa;YACbC,KAAK,EAAG,IAAAU,QAAE,EAAE,SAAU,CAAG;YACzBT,MAAM,EAAC,SAAS;YAChBC,KAAK,EAAGqD,gBAAkB;YAC1BoB,SAAS,EAAGlB,oBAAsB;YAClCtD,iBAAiB,EAAGA,iBAAmB;YACvCC,oBAAoB,EACnB6D,iBAAiB,CAChBV,gBAAgB,EAChBE,oBACD,CAAC,GACE,IAAI,GACJ,MACAD,mBAAmB,CAClBC,oBACD;UACH,CACD,CACD,eAEF,IAAArE,WAAA,CAAA0B,GAAA,EAACf,aAAa;YACbC,KAAK,EAAG,IAAAU,QAAE,EAAE,QAAS,CAAG;YACxBT,MAAM,EAAC,QAAQ;YACfC,KAAK,EAAGwD,eAAiB;YACzBvD,iBAAiB,EAAGA,iBAAmB;YACvCC,oBAAoB,EACnBsD,eAAe,CAACvB,MAAM,GAAG,CAAC,GACvB,MAAMwB,kBAAkB,CAAE,EAAG,CAAC,GAC9B;UACH,CACD,CAAC;QAAA,CACK;MAAC,CACF;IAAC,CACJ,CAAC;EAAA,CACA,CAAC;AAEX;AAAC,IAAAiB,QAAA,GAAAC,OAAA,CAAA9D,OAAA,GAEcoC,SAAS","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_element","_jsxRuntime","RenameFontSizeDialog","fontSize","toggleOpen","handleRename","newName","setNewName","useState","name","handleConfirm","trim","jsx","Modal","onRequestClose","focusOnMount","title","__","size","children","onSubmit","event","preventDefault","jsxs","__experimentalVStack","spacing","__experimentalInputControl","__next40pxDefaultSize","autoComplete","value","onChange","label","placeholder","__experimentalHStack","justify","Button","variant","onClick","type","_default","exports","default"],"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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAOA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAA8C,IAAAG,WAAA,GAAAH,OAAA;AAX9C;AACA;AACA;;AAWA,SAASI,oBAAoBA,CAAE;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAa,CAAC,EAAG;EACvE,MAAM,CAAEC,OAAO,EAAEC,UAAU,CAAE,GAAG,IAAAC,iBAAQ,EAAEL,QAAQ,CAACM,IAAK,CAAC;EAEzD,MAAMC,aAAa,GAAGA,CAAA,KAAM;IAC3B;IACA,IAAKJ,OAAO,CAACK,IAAI,CAAC,CAAC,EAAG;MACrBN,YAAY,CAAEC,OAAQ,CAAC;IACxB;IACAF,UAAU,CAAC,CAAC;EACb,CAAC;EAED,oBACC,IAAAH,WAAA,CAAAW,GAAA,EAACf,WAAA,CAAAgB,KAAK;IACLC,cAAc,EAAGV,UAAY;IAC7BW,YAAY,EAAC,qBAAqB;IAClCC,KAAK,EAAG,IAAAC,QAAE,EAAE,QAAS,CAAG;IACxBC,IAAI,EAAC,OAAO;IAAAC,QAAA,eAEZ,IAAAlB,WAAA,CAAAW,GAAA;MACCQ,QAAQ,EAAKC,KAAK,IAAM;QACvBA,KAAK,CAACC,cAAc,CAAC,CAAC;QACtBZ,aAAa,CAAC,CAAC;QACfN,UAAU,CAAC,CAAC;MACb,CAAG;MAAAe,QAAA,eAEH,IAAAlB,WAAA,CAAAsB,IAAA,EAAC1B,WAAA,CAAA2B,oBAAM;QAACC,OAAO,EAAC,GAAG;QAAAN,QAAA,gBAClB,IAAAlB,WAAA,CAAAW,GAAA,EAACf,WAAA,CAAA6B,0BAAY;UACZC,qBAAqB;UACrBC,YAAY,EAAC,KAAK;UAClBC,KAAK,EAAGvB,OAAS;UACjBwB,QAAQ,EAAGvB,UAAY;UACvBwB,KAAK,EAAG,IAAAd,QAAE,EAAE,MAAO,CAAG;UACtBe,WAAW,EAAG,IAAAf,QAAE,EAAE,uBAAwB;QAAG,CAC7C,CAAC,eACF,IAAAhB,WAAA,CAAAsB,IAAA,EAAC1B,WAAA,CAAAoC,oBAAM;UAACC,OAAO,EAAC,OAAO;UAAAf,QAAA,gBACtB,IAAAlB,WAAA,CAAAW,GAAA,EAACf,WAAA,CAAAsC,MAAM;YACNR,qBAAqB;YACrBS,OAAO,EAAC,UAAU;YAClBC,OAAO,EAAGjC,UAAY;YAAAe,QAAA,EAEpB,IAAAF,QAAE,EAAE,QAAS;UAAC,CACT,CAAC,eACT,IAAAhB,WAAA,CAAAW,GAAA,EAACf,WAAA,CAAAsC,MAAM;YACNR,qBAAqB;YACrBS,OAAO,EAAC,SAAS;YACjBE,IAAI,EAAC,QAAQ;YAAAnB,QAAA,EAEX,IAAAF,QAAE,EAAE,MAAO;UAAC,CACP,CAAC;QAAA,CACF,CAAC;MAAA,CACF;IAAC,CACJ;EAAC,CACD,CAAC;AAEV;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcvC,oBAAoB","ignoreList":[]}

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

@@ -78,7 +78,8 @@ const {
   DimensionsPanel: StylesDimensionsPanel,
   FiltersPanel: StylesFiltersPanel,
   ImageSettingsPanel,
-  AdvancedPanel: StylesAdvancedPanel
+  AdvancedPanel: StylesAdvancedPanel,
+  useGlobalStyleLinks
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 function ScreenBlock({
   name,
@@ -99,6 +100,7 @@ function ScreenBlock({
   const [rawSettings, setSettings] = useGlobalSetting('', name);
   const settings = useSettingsForBlockElement(rawSettings, name);
   const blockType = (0, _blocks.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'))) {
@@ -248,6 +250,13 @@ function ScreenBlock({
       value: style,
       onChange: setStyle,
       settings: settings
+    }), hasBackgroundPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesBackgroundPanel, {
+      inheritedValue: inheritedStyle,
+      value: style,
+      onChange: setStyle,
+      settings: settings,
+      defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
+      themeFileURIs: _links?.['wp:theme-file']
     }), hasTypographyPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesTypographyPanel, {
       inheritedValue: inheritedStyle,
       value: style,
@@ -274,13 +283,6 @@ function ScreenBlock({
       onChange: onChangeLightbox,
       value: userSettings,
       inheritedValue: settings
-    }), hasBackgroundPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesBackgroundPanel, {
-      inheritedValue: inheritedStyle,
-      value: style,
-      onChange: setStyle,
-      settings: settings,
-      defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES,
-      defaultControls: blockType?.supports?.background?.__experimentalDefaultControls
     }), canEditCSS && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
       title: (0, _i18n.__)('Advanced'),
       initialOpen: false,