@wordpress/block-editor 12.25.0 → 13.0.0

package/build-module/components/font-sizes/with-font-sizes.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -10,6 +9,7 @@ import { Component } from '@wordpress/element';
  */
 import { getFontSize, getFontSizeClass } from './utils';
 import { useSettings } from '../use-settings';
+import { jsx as _jsx } from "react/jsx-runtime";
 const DEFAULT_FONT_SIZES = [];
 
 /**
@@ -43,7 +43,7 @@ export default ((...fontSizeNames) => {
   }, {});
   return createHigherOrderComponent(compose([createHigherOrderComponent(WrappedComponent => props => {
     const [fontSizes] = useSettings('typography.fontSizes');
-    return createElement(WrappedComponent, {
+    return /*#__PURE__*/_jsx(WrappedComponent, {
       ...props,
       fontSizes: fontSizes || DEFAULT_FONT_SIZES
     });
@@ -106,7 +106,7 @@ export default ((...fontSizeNames) => {
         };
       }
       render() {
-        return createElement(WrappedComponent, {
+        return /*#__PURE__*/_jsx(WrappedComponent, {
           ...this.props,
           fontSizes: undefined,
           ...this.state,

package/build-module/components/font-sizes/with-font-sizes.js.map

@@ -1 +1 @@
-{"version":3,"names":["createHigherOrderComponent","compose","Component","getFontSize","getFontSizeClass","useSettings","DEFAULT_FONT_SIZES","upperFirst","firstLetter","rest","toUpperCase","join","fontSizeNames","fontSizeAttributeNames","reduce","fontSizeAttributeNamesAccumulator","fontSizeAttributeName","WrappedComponent","props","fontSizes","createElement","constructor","setters","createSetters","state","Object","entries","settersAccumulator","customFontSizeAttributeName","upperFirstFontSizeAttributeName","createSetFontSize","fontSizeValue","fontSizeObject","find","size","Number","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","didAttributesChange","values","some","newState","filter","key","value","newStateAccumulator","fontSizeAttributeValue","class","render"],"sources":["@wordpress/block-editor/src/components/font-sizes/with-font-sizes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, compose } from '@wordpress/compose';\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getFontSize, getFontSizeClass } from './utils';\nimport { useSettings } from '../use-settings';\n\nconst DEFAULT_FONT_SIZES = [];\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher-order component, which handles font size logic for class generation,\n * font size value retrieval, and font size change handling.\n *\n * @param {...(Object|string)} fontSizeNames The arguments should all be strings.\n *                                           Each string contains the font size\n *                                           attribute name e.g: 'fontSize'.\n *\n * @return {Function} Higher-order component.\n */\nexport default ( ...fontSizeNames ) => {\n\t/*\n\t * Computes an object whose key is the font size attribute name as passed in the array,\n\t * and the value is the custom font size attribute name.\n\t * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.\n\t */\n\tconst fontSizeAttributeNames = fontSizeNames.reduce(\n\t\t( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {\n\t\t\tfontSizeAttributeNamesAccumulator[\n\t\t\t\tfontSizeAttributeName\n\t\t\t] = `custom${ upperFirst( fontSizeAttributeName ) }`;\n\t\t\treturn fontSizeAttributeNamesAccumulator;\n\t\t},\n\t\t{}\n\t);\n\n\treturn createHigherOrderComponent(\n\t\tcompose( [\n\t\t\tcreateHigherOrderComponent(\n\t\t\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t\t\tconst [ fontSizes ] = useSettings( 'typography.fontSizes' );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tfontSizes={ fontSizes || DEFAULT_FONT_SIZES }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t'withFontSizes'\n\t\t\t),\n\t\t\t( WrappedComponent ) => {\n\t\t\t\treturn class extends Component {\n\t\t\t\t\tconstructor( props ) {\n\t\t\t\t\t\tsuper( props );\n\n\t\t\t\t\t\tthis.setters = this.createSetters();\n\n\t\t\t\t\t\tthis.state = {};\n\t\t\t\t\t}\n\n\t\t\t\t\tcreateSetters() {\n\t\t\t\t\t\treturn Object.entries( fontSizeAttributeNames ).reduce(\n\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\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\tconst upperFirstFontSizeAttributeName =\n\t\t\t\t\t\t\t\t\tupperFirst( fontSizeAttributeName );\n\t\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t\t`set${ upperFirstFontSizeAttributeName }`\n\t\t\t\t\t\t\t\t] = this.createSetFontSize(\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tcreateSetFontSize(\n\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn ( fontSizeValue ) => {\n\t\t\t\t\t\t\tconst fontSizeObject = this.props.fontSizes?.find(\n\t\t\t\t\t\t\t\t( { size } ) => size === Number( fontSizeValue )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t\t[ fontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t[ customFontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: fontSizeValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t\t{ attributes, fontSizes },\n\t\t\t\t\t\tpreviousState\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst didAttributesChange = (\n\t\t\t\t\t\t\tcustomFontSizeAttributeName,\n\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tif ( previousState[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t// If new font size is name compare with the previous slug.\n\t\t\t\t\t\t\t\tif ( attributes[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ] !==\n\t\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t\t.slug\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// If font size is not named, update when the font size value changes.\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t.size !==\n\t\t\t\t\t\t\t\t\tattributes[ customFontSizeAttributeName ]\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// In this case we need to build the font size object.\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! Object.values( fontSizeAttributeNames ).some(\n\t\t\t\t\t\t\t\tdidAttributesChange\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst newState = Object.entries(\n\t\t\t\t\t\t\tfontSizeAttributeNames\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.filter( ( [ key, value ] ) =>\n\t\t\t\t\t\t\t\tdidAttributesChange( value, key )\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.reduce(\n\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\tnewStateAccumulator,\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\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\tconst fontSizeAttributeValue =\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ];\n\t\t\t\t\t\t\t\t\tconst fontSizeObject = getFontSize(\n\t\t\t\t\t\t\t\t\t\tfontSizes,\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue,\n\t\t\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\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\tnewStateAccumulator[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t\t\t\t] = {\n\t\t\t\t\t\t\t\t\t\t...fontSizeObject,\n\t\t\t\t\t\t\t\t\t\tclass: getFontSizeClass(\n\t\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue\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\treturn newStateAccumulator;\n\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\treturn {\n\t\t\t\t\t\t\t...previousState,\n\t\t\t\t\t\t\t...newState,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\trender() {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\t\tfontSizes: undefined,\n\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t] ),\n\t\t'withFontSizes'\n\t);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createHigherOrderComponent","compose","Component","getFontSize","getFontSizeClass","useSettings","jsx","_jsx","DEFAULT_FONT_SIZES","upperFirst","firstLetter","rest","toUpperCase","join","fontSizeNames","fontSizeAttributeNames","reduce","fontSizeAttributeNamesAccumulator","fontSizeAttributeName","WrappedComponent","props","fontSizes","constructor","setters","createSetters","state","Object","entries","settersAccumulator","customFontSizeAttributeName","upperFirstFontSizeAttributeName","createSetFontSize","fontSizeValue","fontSizeObject","find","size","Number","setAttributes","slug","undefined","getDerivedStateFromProps","attributes","previousState","didAttributesChange","values","some","newState","filter","key","value","newStateAccumulator","fontSizeAttributeValue","class","render"],"sources":["@wordpress/block-editor/src/components/font-sizes/with-font-sizes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, compose } from '@wordpress/compose';\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getFontSize, getFontSizeClass } from './utils';\nimport { useSettings } from '../use-settings';\n\nconst DEFAULT_FONT_SIZES = [];\n\n/**\n * Capitalizes the first letter in a string.\n *\n * @param {string} str The string whose first letter the function will capitalize.\n *\n * @return {string} Capitalized string.\n */\nconst upperFirst = ( [ firstLetter, ...rest ] ) =>\n\tfirstLetter.toUpperCase() + rest.join( '' );\n\n/**\n * Higher-order component, which handles font size logic for class generation,\n * font size value retrieval, and font size change handling.\n *\n * @param {...(Object|string)} fontSizeNames The arguments should all be strings.\n *                                           Each string contains the font size\n *                                           attribute name e.g: 'fontSize'.\n *\n * @return {Function} Higher-order component.\n */\nexport default ( ...fontSizeNames ) => {\n\t/*\n\t * Computes an object whose key is the font size attribute name as passed in the array,\n\t * and the value is the custom font size attribute name.\n\t * Custom font size is automatically compted by appending custom followed by the font size attribute name in with the first letter capitalized.\n\t */\n\tconst fontSizeAttributeNames = fontSizeNames.reduce(\n\t\t( fontSizeAttributeNamesAccumulator, fontSizeAttributeName ) => {\n\t\t\tfontSizeAttributeNamesAccumulator[\n\t\t\t\tfontSizeAttributeName\n\t\t\t] = `custom${ upperFirst( fontSizeAttributeName ) }`;\n\t\t\treturn fontSizeAttributeNamesAccumulator;\n\t\t},\n\t\t{}\n\t);\n\n\treturn createHigherOrderComponent(\n\t\tcompose( [\n\t\t\tcreateHigherOrderComponent(\n\t\t\t\t( WrappedComponent ) => ( props ) => {\n\t\t\t\t\tconst [ fontSizes ] = useSettings( 'typography.fontSizes' );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tfontSizes={ fontSizes || DEFAULT_FONT_SIZES }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t'withFontSizes'\n\t\t\t),\n\t\t\t( WrappedComponent ) => {\n\t\t\t\treturn class extends Component {\n\t\t\t\t\tconstructor( props ) {\n\t\t\t\t\t\tsuper( props );\n\n\t\t\t\t\t\tthis.setters = this.createSetters();\n\n\t\t\t\t\t\tthis.state = {};\n\t\t\t\t\t}\n\n\t\t\t\t\tcreateSetters() {\n\t\t\t\t\t\treturn Object.entries( fontSizeAttributeNames ).reduce(\n\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\tsettersAccumulator,\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\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\tconst upperFirstFontSizeAttributeName =\n\t\t\t\t\t\t\t\t\tupperFirst( fontSizeAttributeName );\n\t\t\t\t\t\t\t\tsettersAccumulator[\n\t\t\t\t\t\t\t\t\t`set${ upperFirstFontSizeAttributeName }`\n\t\t\t\t\t\t\t\t] = this.createSetFontSize(\n\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\treturn settersAccumulator;\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tcreateSetFontSize(\n\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\tcustomFontSizeAttributeName\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn ( fontSizeValue ) => {\n\t\t\t\t\t\t\tconst fontSizeObject = this.props.fontSizes?.find(\n\t\t\t\t\t\t\t\t( { size } ) => size === Number( fontSizeValue )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tthis.props.setAttributes( {\n\t\t\t\t\t\t\t\t[ fontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t[ customFontSizeAttributeName ]:\n\t\t\t\t\t\t\t\t\tfontSizeObject && fontSizeObject.slug\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: fontSizeValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tstatic getDerivedStateFromProps(\n\t\t\t\t\t\t{ attributes, fontSizes },\n\t\t\t\t\t\tpreviousState\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst didAttributesChange = (\n\t\t\t\t\t\t\tcustomFontSizeAttributeName,\n\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tif ( previousState[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t// If new font size is name compare with the previous slug.\n\t\t\t\t\t\t\t\tif ( attributes[ fontSizeAttributeName ] ) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ] !==\n\t\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t\t.slug\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// If font size is not named, update when the font size value changes.\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\tpreviousState[ fontSizeAttributeName ]\n\t\t\t\t\t\t\t\t\t\t.size !==\n\t\t\t\t\t\t\t\t\tattributes[ customFontSizeAttributeName ]\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// In this case we need to build the font size object.\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t! Object.values( fontSizeAttributeNames ).some(\n\t\t\t\t\t\t\t\tdidAttributesChange\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst newState = Object.entries(\n\t\t\t\t\t\t\tfontSizeAttributeNames\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.filter( ( [ key, value ] ) =>\n\t\t\t\t\t\t\t\tdidAttributesChange( value, key )\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.reduce(\n\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\tnewStateAccumulator,\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName,\n\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName,\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\tconst fontSizeAttributeValue =\n\t\t\t\t\t\t\t\t\t\tattributes[ fontSizeAttributeName ];\n\t\t\t\t\t\t\t\t\tconst fontSizeObject = getFontSize(\n\t\t\t\t\t\t\t\t\t\tfontSizes,\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue,\n\t\t\t\t\t\t\t\t\t\tattributes[\n\t\t\t\t\t\t\t\t\t\t\tcustomFontSizeAttributeName\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\tnewStateAccumulator[\n\t\t\t\t\t\t\t\t\t\tfontSizeAttributeName\n\t\t\t\t\t\t\t\t\t] = {\n\t\t\t\t\t\t\t\t\t\t...fontSizeObject,\n\t\t\t\t\t\t\t\t\t\tclass: getFontSizeClass(\n\t\t\t\t\t\t\t\t\t\t\tfontSizeAttributeValue\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\treturn newStateAccumulator;\n\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\treturn {\n\t\t\t\t\t\t\t...previousState,\n\t\t\t\t\t\t\t...newState,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\trender() {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t\t...this.props,\n\t\t\t\t\t\t\t\t\tfontSizes: undefined,\n\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t...this.setters,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t] ),\n\t\t'withFontSizes'\n\t);\n};\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/global-styles/advanced-panel.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -10,6 +9,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { default as transformStyles } from '../../utils/transform-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function AdvancedPanel({
   value,
   onChange,
@@ -49,19 +50,21 @@ export default function AdvancedPanel({
     }], '.for-validation-only');
     setCSSError(transformed === null ? __('There is an error with your CSS structure.') : null);
   }
-  return createElement(VStack, {
-    spacing: 3
-  }, cssError && createElement(Notice, {
-    status: "error",
-    onRemove: () => setCSSError(null)
-  }, cssError), createElement(TextareaControl, {
-    label: __('Additional CSS'),
-    __nextHasNoMarginBottom: true,
-    value: customCSS,
-    onChange: newValue => handleOnChange(newValue),
-    onBlur: handleOnBlur,
-    className: "block-editor-global-styles-advanced-panel__custom-css-input",
-    spellCheck: false
-  }));
+  return /*#__PURE__*/_jsxs(VStack, {
+    spacing: 3,
+    children: [cssError && /*#__PURE__*/_jsx(Notice, {
+      status: "error",
+      onRemove: () => setCSSError(null),
+      children: cssError
+    }), /*#__PURE__*/_jsx(TextareaControl, {
+      label: __('Additional CSS'),
+      __nextHasNoMarginBottom: true,
+      value: customCSS,
+      onChange: newValue => handleOnChange(newValue),
+      onBlur: handleOnBlur,
+      className: "block-editor-global-styles-advanced-panel__custom-css-input",
+      spellCheck: false
+    })]
+  });
 }
 //# sourceMappingURL=advanced-panel.js.map

package/build-module/components/global-styles/advanced-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["TextareaControl","Notice","__experimentalVStack","VStack","useState","__","default","transformStyles","AdvancedPanel","value","onChange","inheritedValue","cssError","setCSSError","customCSS","css","handleOnChange","newValue","transformed","handleOnBlur","event","target","createElement","spacing","status","onRemove","label","__nextHasNoMarginBottom","onBlur","className","spellCheck"],"sources":["@wordpress/block-editor/src/components/global-styles/advanced-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tTextareaControl,\n\tNotice,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n} ) {\n\t// Custom CSS\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst customCSS = inheritedValue?.css;\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\t\tif ( cssError ) {\n\t\t\t// Check if the new value is valid CSS, and pass a wrapping selector\n\t\t\t// to ensure that `transformStyles` validates the CSS. Note that the\n\t\t\t// wrapping selector here is not used in the actual output of any styles.\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: newValue } ],\n\t\t\t\t'.for-validation-only'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if the new value is valid CSS, and pass a wrapping selector\n\t\t// to ensure that `transformStyles` validates the CSS. Note that the\n\t\t// wrapping selector here is not used in the actual output of any styles.\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.for-validation-only'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,eAAe,EACfC,MAAM,EACNC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,OAAO,IAAIC,eAAe,QAAQ,8BAA8B;AAEzE,eAAe,SAASC,aAAaA,CAAE;EACtCC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAGF;AAClB,CAAC,EAAG;EACH;EACA,MAAM,CAAEG,QAAQ,EAAEC,WAAW,CAAE,GAAGT,QAAQ,CAAE,IAAK,CAAC;EAClD,MAAMU,SAAS,GAAGH,cAAc,EAAEI,GAAG;EACrC,SAASC,cAAcA,CAAEC,QAAQ,EAAG;IACnCP,QAAQ,CAAE;MACT,GAAGD,KAAK;MACRM,GAAG,EAAEE;IACN,CAAE,CAAC;IACH,IAAKL,QAAQ,EAAG;MACf;MACA;MACA;MACA,MAAM,CAAEM,WAAW,CAAE,GAAGX,eAAe,CACtC,CAAE;QAAEQ,GAAG,EAAEE;MAAS,CAAC,CAAE,EACrB,sBACD,CAAC;MACD,IAAKC,WAAW,EAAG;QAClBL,WAAW,CAAE,IAAK,CAAC;MACpB;IACD;EACD;EACA,SAASM,YAAYA,CAAEC,KAAK,EAAG;IAC9B,IAAK,CAAEA,KAAK,EAAEC,MAAM,EAAEZ,KAAK,EAAG;MAC7BI,WAAW,CAAE,IAAK,CAAC;MACnB;IACD;;IAEA;IACA;IACA;IACA,MAAM,CAAEK,WAAW,CAAE,GAAGX,eAAe,CACtC,CAAE;MAAEQ,GAAG,EAAEK,KAAK,CAACC,MAAM,CAACZ;IAAM,CAAC,CAAE,EAC/B,sBACD,CAAC;IAEDI,WAAW,CACVK,WAAW,KAAK,IAAI,GACjBb,EAAE,CAAE,4CAA6C,CAAC,GAClD,IACJ,CAAC;EACF;EAEA,OACCiB,aAAA,CAACnB,MAAM;IAACoB,OAAO,EAAG;EAAG,GAClBX,QAAQ,IACTU,aAAA,CAACrB,MAAM;IAACuB,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAGA,CAAA,KAAMZ,WAAW,CAAE,IAAK;EAAG,GAC1DD,QACK,CACR,EACDU,aAAA,CAACtB,eAAe;IACf0B,KAAK,EAAGrB,EAAE,CAAE,gBAAiB,CAAG;IAChCsB,uBAAuB;IACvBlB,KAAK,EAAGK,SAAW;IACnBJ,QAAQ,EAAKO,QAAQ,IAAMD,cAAc,CAAEC,QAAS,CAAG;IACvDW,MAAM,EAAGT,YAAc;IACvBU,SAAS,EAAC,6DAA6D;IACvEC,UAAU,EAAG;EAAO,CACpB,CACM,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["TextareaControl","Notice","__experimentalVStack","VStack","useState","__","default","transformStyles","jsx","_jsx","jsxs","_jsxs","AdvancedPanel","value","onChange","inheritedValue","cssError","setCSSError","customCSS","css","handleOnChange","newValue","transformed","handleOnBlur","event","target","spacing","children","status","onRemove","label","__nextHasNoMarginBottom","onBlur","className","spellCheck"],"sources":["@wordpress/block-editor/src/components/global-styles/advanced-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tTextareaControl,\n\tNotice,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as transformStyles } from '../../utils/transform-styles';\n\nexport default function AdvancedPanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n} ) {\n\t// Custom CSS\n\tconst [ cssError, setCSSError ] = useState( null );\n\tconst customCSS = inheritedValue?.css;\n\tfunction handleOnChange( newValue ) {\n\t\tonChange( {\n\t\t\t...value,\n\t\t\tcss: newValue,\n\t\t} );\n\t\tif ( cssError ) {\n\t\t\t// Check if the new value is valid CSS, and pass a wrapping selector\n\t\t\t// to ensure that `transformStyles` validates the CSS. Note that the\n\t\t\t// wrapping selector here is not used in the actual output of any styles.\n\t\t\tconst [ transformed ] = transformStyles(\n\t\t\t\t[ { css: newValue } ],\n\t\t\t\t'.for-validation-only'\n\t\t\t);\n\t\t\tif ( transformed ) {\n\t\t\t\tsetCSSError( null );\n\t\t\t}\n\t\t}\n\t}\n\tfunction handleOnBlur( event ) {\n\t\tif ( ! event?.target?.value ) {\n\t\t\tsetCSSError( null );\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if the new value is valid CSS, and pass a wrapping selector\n\t\t// to ensure that `transformStyles` validates the CSS. Note that the\n\t\t// wrapping selector here is not used in the actual output of any styles.\n\t\tconst [ transformed ] = transformStyles(\n\t\t\t[ { css: event.target.value } ],\n\t\t\t'.for-validation-only'\n\t\t);\n\n\t\tsetCSSError(\n\t\t\ttransformed === null\n\t\t\t\t? __( 'There is an error with your CSS structure.' )\n\t\t\t\t: null\n\t\t);\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ cssError && (\n\t\t\t\t<Notice status=\"error\" onRemove={ () => setCSSError( null ) }>\n\t\t\t\t\t{ cssError }\n\t\t\t\t</Notice>\n\t\t\t) }\n\t\t\t<TextareaControl\n\t\t\t\tlabel={ __( 'Additional CSS' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ customCSS }\n\t\t\t\tonChange={ ( newValue ) => handleOnChange( newValue ) }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tclassName=\"block-editor-global-styles-advanced-panel__custom-css-input\"\n\t\t\t\tspellCheck={ false }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,eAAe,EACfC,MAAM,EACNC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,OAAO,IAAIC,eAAe,QAAQ,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE1E,eAAe,SAASC,aAAaA,CAAE;EACtCC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAGF;AAClB,CAAC,EAAG;EACH;EACA,MAAM,CAAEG,QAAQ,EAAEC,WAAW,CAAE,GAAGb,QAAQ,CAAE,IAAK,CAAC;EAClD,MAAMc,SAAS,GAAGH,cAAc,EAAEI,GAAG;EACrC,SAASC,cAAcA,CAAEC,QAAQ,EAAG;IACnCP,QAAQ,CAAE;MACT,GAAGD,KAAK;MACRM,GAAG,EAAEE;IACN,CAAE,CAAC;IACH,IAAKL,QAAQ,EAAG;MACf;MACA;MACA;MACA,MAAM,CAAEM,WAAW,CAAE,GAAGf,eAAe,CACtC,CAAE;QAAEY,GAAG,EAAEE;MAAS,CAAC,CAAE,EACrB,sBACD,CAAC;MACD,IAAKC,WAAW,EAAG;QAClBL,WAAW,CAAE,IAAK,CAAC;MACpB;IACD;EACD;EACA,SAASM,YAAYA,CAAEC,KAAK,EAAG;IAC9B,IAAK,CAAEA,KAAK,EAAEC,MAAM,EAAEZ,KAAK,EAAG;MAC7BI,WAAW,CAAE,IAAK,CAAC;MACnB;IACD;;IAEA;IACA;IACA;IACA,MAAM,CAAEK,WAAW,CAAE,GAAGf,eAAe,CACtC,CAAE;MAAEY,GAAG,EAAEK,KAAK,CAACC,MAAM,CAACZ;IAAM,CAAC,CAAE,EAC/B,sBACD,CAAC;IAEDI,WAAW,CACVK,WAAW,KAAK,IAAI,GACjBjB,EAAE,CAAE,4CAA6C,CAAC,GAClD,IACJ,CAAC;EACF;EAEA,oBACCM,KAAA,CAACR,MAAM;IAACuB,OAAO,EAAG,CAAG;IAAAC,QAAA,GAClBX,QAAQ,iBACTP,IAAA,CAACR,MAAM;MAAC2B,MAAM,EAAC,OAAO;MAACC,QAAQ,EAAGA,CAAA,KAAMZ,WAAW,CAAE,IAAK,CAAG;MAAAU,QAAA,EAC1DX;IAAQ,CACH,CACR,eACDP,IAAA,CAACT,eAAe;MACf8B,KAAK,EAAGzB,EAAE,CAAE,gBAAiB,CAAG;MAChC0B,uBAAuB;MACvBlB,KAAK,EAAGK,SAAW;MACnBJ,QAAQ,EAAKO,QAAQ,IAAMD,cAAc,CAAEC,QAAS,CAAG;MACvDW,MAAM,EAAGT,YAAc;MACvBU,SAAS,EAAC,6DAA6D;MACvEC,UAAU,EAAG;IAAO,CACpB,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}

package/build-module/components/global-styles/background-panel.js

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,6 +22,9 @@ import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
+import { getResolvedThemeFilePath } from './theme-file-uri-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
   backgroundImage: true,
@@ -61,7 +63,9 @@ export function hasBackgroundSizeValue(style) {
  * @return {boolean}     Whether the block has a background image value set.
  */
 export function hasBackgroundImageValue(style) {
-  return !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url;
+  return !!style?.background?.backgroundImage?.id ||
+  // Supports url() string values in theme.json.
+  'string' === typeof style?.background?.backgroundImage || !!style?.background?.backgroundImage?.url;
 }
 
 /**
@@ -77,7 +81,7 @@ function backgroundSizeHelpText(value) {
   if (value === 'contain') {
     return __('Image is contained without distortion.');
   }
-  return __('Specify a fixed width.');
+  return __('Image has a fixed width.');
 }
 
 /**
@@ -123,37 +127,44 @@ function InspectorImagePreview({
   url: imgUrl
 }) {
   const imgLabel = label || getFilename(imgUrl) || __('Add background image');
-  return createElement(ItemGroup, {
-    as: "span"
-  }, createElement(HStack, {
-    justify: imgUrl ? 'flex-start' : 'center',
-    as: "span"
-  }, imgUrl && createElement("span", {
-    className: classnames('block-editor-global-styles-background-panel__inspector-image-indicator-wrapper', {
-      'has-image': imgUrl
-    }),
-    "aria-hidden": true
-  }, createElement("span", {
-    className: "block-editor-global-styles-background-panel__inspector-image-indicator",
-    style: {
-      backgroundImage: `url(${imgUrl})`
-    }
-  })), createElement(FlexItem, {
-    as: "span"
-  }, createElement(Truncate, {
-    numberOfLines: 1,
-    className: "block-editor-global-styles-background-panel__inspector-media-replace-title"
-  }, imgLabel), createElement(VisuallyHidden, {
-    as: "span"
-  }, filename ? sprintf( /* translators: %s: file name */
-  __('Selected image: %s'), filename) : __('No image selected')))));
+  return /*#__PURE__*/_jsx(ItemGroup, {
+    as: "span",
+    children: /*#__PURE__*/_jsxs(HStack, {
+      justify: imgUrl ? 'flex-start' : 'center',
+      as: "span",
+      children: [imgUrl && /*#__PURE__*/_jsx("span", {
+        className: clsx('block-editor-global-styles-background-panel__inspector-image-indicator-wrapper', {
+          'has-image': imgUrl
+        }),
+        "aria-hidden": true,
+        children: /*#__PURE__*/_jsx("span", {
+          className: "block-editor-global-styles-background-panel__inspector-image-indicator",
+          style: {
+            backgroundImage: `url(${imgUrl})`
+          }
+        })
+      }), /*#__PURE__*/_jsxs(FlexItem, {
+        as: "span",
+        children: [/*#__PURE__*/_jsx(Truncate, {
+          numberOfLines: 1,
+          className: "block-editor-global-styles-background-panel__inspector-media-replace-title",
+          children: imgLabel
+        }), /*#__PURE__*/_jsx(VisuallyHidden, {
+          as: "span",
+          children: imgUrl ? sprintf( /* translators: %s: file name */
+          __('Background image: %s'), filename || imgLabel) : __('No background image selected')
+        })]
+      })]
+    })
+  });
 }
 function BackgroundImageToolsPanelItem({
   panelId,
   isShownByDefault,
   onChange,
   style,
-  inheritedValue
+  inheritedValue,
+  themeFileURIs
 }) {
   const mediaUpload = useSelect(select => select(blockEditorStore).getSettings().mediaUpload, []);
   const {
@@ -187,11 +198,17 @@ function BackgroundImageToolsPanelItem({
       onUploadError(__('Only images can be used as a background image.'));
       return;
     }
-    onChange(setImmutably(style, ['background', 'backgroundImage'], {
-      url: media.url,
-      id: media.id,
-      source: 'file',
-      title: media.title || undefined
+    const sizeValue = style?.background?.backgroundSize;
+    const positionValue = style?.background?.backgroundPosition;
+    onChange(setImmutably(style, ['background'], {
+      ...style?.background,
+      backgroundImage: {
+        url: media.url,
+        id: media.id,
+        source: 'file',
+        title: media.title || undefined
+      },
+      backgroundPosition: !positionValue && ('auto' === sizeValue || !sizeValue) ? '50% 0' : positionValue
     }));
   };
   const onFilesDrop = filesList => {
@@ -217,43 +234,58 @@ function BackgroundImageToolsPanelItem({
     };
   }, []);
   const hasValue = hasBackgroundImageValue(style);
-  return createElement(ToolsPanelItem, {
+  const closeAndFocus = () => {
+    const [toggleButton] = focus.tabbable.find(replaceContainerRef.current);
+    // Focus the toggle button and close the dropdown menu.
+    // This ensures similar behaviour as to selecting an image, where the dropdown is
+    // closed and focus is redirected to the dropdown toggle button.
+    toggleButton?.focus();
+    toggleButton?.click();
+  };
+  const onRemove = () => onChange(setImmutably(style, ['background', 'backgroundImage'], 'none'));
+  const canRemove = !hasValue && hasBackgroundImageValue(inheritedValue);
+  return /*#__PURE__*/_jsx(ToolsPanelItem, {
     className: "single-column",
     hasValue: () => hasValue,
     label: __('Background image'),
     onDeselect: resetBackgroundImage,
     isShownByDefault: isShownByDefault,
     resetAllFilter: resetAllFilter,
-    panelId: panelId
-  }, createElement("div", {
-    className: "block-editor-global-styles-background-panel__inspector-media-replace-container",
-    ref: replaceContainerRef
-  }, createElement(MediaReplaceFlow, {
-    mediaId: id,
-    mediaURL: url,
-    allowedTypes: [IMAGE_BACKGROUND_TYPE],
-    accept: "image/*",
-    onSelect: onSelectMedia,
-    name: createElement(InspectorImagePreview, {
-      label: title,
-      filename: title || __('Untitled'),
-      url: url
-    }),
-    variant: "secondary"
-  }, hasValue && createElement(MenuItem, {
-    onClick: () => {
-      const [toggleButton] = focus.tabbable.find(replaceContainerRef.current);
-      // Focus the toggle button and close the dropdown menu.
-      // This ensures similar behaviour as to selecting an image, where the dropdown is
-      // closed and focus is redirected to the dropdown toggle button.
-      toggleButton?.focus();
-      toggleButton?.click();
-      resetBackgroundImage();
-    }
-  }, __('Reset '))), createElement(DropZone, {
-    onFilesDrop: onFilesDrop,
-    label: __('Drop to upload')
-  })));
+    panelId: panelId,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "block-editor-global-styles-background-panel__inspector-media-replace-container",
+      ref: replaceContainerRef,
+      children: [/*#__PURE__*/_jsxs(MediaReplaceFlow, {
+        mediaId: id,
+        mediaURL: url,
+        allowedTypes: [IMAGE_BACKGROUND_TYPE],
+        accept: "image/*",
+        onSelect: onSelectMedia,
+        name: /*#__PURE__*/_jsx(InspectorImagePreview, {
+          label: title,
+          filename: title,
+          url: getResolvedThemeFilePath(url, themeFileURIs)
+        }),
+        variant: "secondary",
+        children: [canRemove && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => {
+            closeAndFocus();
+            onRemove();
+          },
+          children: __('Remove')
+        }), hasValue && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => {
+            closeAndFocus();
+            resetBackgroundImage();
+          },
+          children: __('Reset ')
+        })]
+      }), /*#__PURE__*/_jsx(DropZone, {
+        onFilesDrop: onFilesDrop,
+        label: __('Drop to upload')
+      })]
+    })
+  });
 }
 function BackgroundSizeToolsPanelItem({
   panelId,
@@ -261,7 +293,8 @@ function BackgroundSizeToolsPanelItem({
   onChange,
   style,
   inheritedValue,
-  defaultValues
+  defaultValues,
+  themeFileURIs
 }) {
   const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
   const repeatValue = style?.background?.backgroundRepeat || inheritedValue?.background?.backgroundRepeat;
@@ -300,17 +333,38 @@ function BackgroundSizeToolsPanelItem({
   const updateBackgroundSize = next => {
     // When switching to 'contain' toggle the repeat off.
     let nextRepeat = repeatValue;
+    let nextPosition = positionValue;
     if (next === 'contain') {
       nextRepeat = 'no-repeat';
+      nextPosition = undefined;
     }
     if (next === 'cover') {
       nextRepeat = undefined;
+      nextPosition = undefined;
     }
     if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
       nextRepeat = undefined;
+      /*
+       * A background image uploaded and set in the editor (an image with a record id),
+       * receives a default background position of '50% 0',
+       * when the toggle switches to "Tile". This is to increase the chance that
+       * the image's focus point is visible.
+       */
+      if (!!style?.background?.backgroundImage?.id) {
+        nextPosition = '50% 0';
+      }
+    }
+
+    /*
+     * Next will be null when the input is cleared,
+     * in which case the value should be 'auto'.
+     */
+    if (!next && currentValueForToggle === 'auto') {
+      next = 'auto';
     }
     onChange(setImmutably(style, ['background'], {
       ...style?.background,
+      backgroundPosition: nextPosition,
       backgroundRepeat: nextRepeat,
       backgroundSize: next
     }));
@@ -318,14 +372,14 @@ function BackgroundSizeToolsPanelItem({
   const updateBackgroundPosition = next => {
     onChange(setImmutably(style, ['background', 'backgroundPosition'], coordsToBackgroundPosition(next)));
   };
-  const toggleIsRepeated = () => onChange(setImmutably(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : undefined));
+  const toggleIsRepeated = () => onChange(setImmutably(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : 'repeat'));
   const resetBackgroundSize = () => onChange(setImmutably(style, ['background'], {
     ...style?.background,
     backgroundPosition: undefined,
     backgroundRepeat: undefined,
     backgroundSize: undefined
   }));
-  return createElement(VStack, {
+  return /*#__PURE__*/_jsxs(VStack, {
     as: ToolsPanelItem,
     spacing: 2,
     className: "single-column",
@@ -334,41 +388,49 @@ function BackgroundSizeToolsPanelItem({
     onDeselect: resetBackgroundSize,
     isShownByDefault: isShownByDefault,
     resetAllFilter: resetAllFilter,
-    panelId: panelId
-  }, createElement(FocalPointPicker, {
-    __next40pxDefaultSize: true,
-    label: __('Position'),
-    url: imageValue,
-    value: backgroundPositionToCoords(positionValue),
-    onChange: updateBackgroundPosition
-  }), createElement(ToggleGroupControl, {
-    size: '__unstable-large',
-    label: __('Size'),
-    value: currentValueForToggle,
-    onChange: updateBackgroundSize,
-    isBlock: true,
-    help: backgroundSizeHelpText(sizeValue)
-  }, createElement(ToggleGroupControlOption, {
-    key: 'cover',
-    value: 'cover',
-    label: __('Cover')
-  }), createElement(ToggleGroupControlOption, {
-    key: 'contain',
-    value: 'contain',
-    label: __('Contain')
-  }), createElement(ToggleGroupControlOption, {
-    key: 'fixed',
-    value: 'auto',
-    label: __('Fixed')
-  })), currentValueForToggle !== undefined && currentValueForToggle !== 'cover' && currentValueForToggle !== 'contain' ? createElement(UnitControl, {
-    size: '__unstable-large',
-    onChange: updateBackgroundSize,
-    value: sizeValue
-  }) : null, currentValueForToggle !== 'cover' && createElement(ToggleControl, {
-    label: __('Repeat'),
-    checked: repeatCheckedValue,
-    onChange: toggleIsRepeated
-  }));
+    panelId: panelId,
+    children: [/*#__PURE__*/_jsx(FocalPointPicker, {
+      __next40pxDefaultSize: true,
+      label: __('Position'),
+      url: getResolvedThemeFilePath(imageValue, themeFileURIs),
+      value: backgroundPositionToCoords(positionValue),
+      onChange: updateBackgroundPosition
+    }), /*#__PURE__*/_jsxs(ToggleGroupControl, {
+      size: "__unstable-large",
+      label: __('Size'),
+      value: currentValueForToggle,
+      onChange: updateBackgroundSize,
+      isBlock: true,
+      help: backgroundSizeHelpText(sizeValue || defaultValues?.backgroundSize),
+      children: [/*#__PURE__*/_jsx(ToggleGroupControlOption, {
+        value: "cover",
+        label: __('Cover')
+      }, "cover"), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+        value: "contain",
+        label: __('Contain')
+      }, "contain"), /*#__PURE__*/_jsx(ToggleGroupControlOption, {
+        value: "auto",
+        label: __('Tile')
+      }, "tile")]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      justify: "flex-start",
+      spacing: 2,
+      as: "span",
+      children: [currentValueForToggle !== undefined && currentValueForToggle !== 'cover' && currentValueForToggle !== 'contain' ? /*#__PURE__*/_jsx(UnitControl, {
+        "aria-label": __('Background image width'),
+        onChange: updateBackgroundSize,
+        value: sizeValue,
+        size: "__unstable-large",
+        __unstableInputWidth: "100px",
+        min: 0,
+        placeholder: __('Auto')
+      }) : null, currentValueForToggle !== 'cover' && /*#__PURE__*/_jsx(ToggleControl, {
+        label: __('Repeat'),
+        checked: repeatCheckedValue,
+        onChange: toggleIsRepeated
+      })]
+    })]
+  });
 }
 function BackgroundToolsPanel({
   resetAllFilter,
@@ -382,14 +444,15 @@ function BackgroundToolsPanel({
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
   };
-  return createElement(VStack, {
+  return /*#__PURE__*/_jsx(VStack, {
     as: ToolsPanel,
     spacing: 4,
     label: headerLabel,
     resetAll: resetAll,
     panelId: panelId,
-    dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS
-  }, children);
+    dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS,
+    children: children
+  });
 }
 export default function BackgroundPanel({
   as: Wrapper = BackgroundToolsPanel,
@@ -400,7 +463,8 @@ export default function BackgroundPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   defaultValues = {},
-  headerLabel = __('Background image')
+  headerLabel = __('Background image'),
+  themeFileURIs
 }) {
   const resetAllFilter = useCallback(previousValue => {
     return {
@@ -409,25 +473,28 @@ export default function BackgroundPanel({
     };
   }, []);
   const shouldShowBackgroundSizeControls = settings?.background?.backgroundSize;
-  return createElement(Wrapper, {
+  return /*#__PURE__*/_jsxs(Wrapper, {
     resetAllFilter: resetAllFilter,
     value: value,
     onChange: onChange,
     panelId: panelId,
-    headerLabel: headerLabel
-  }, createElement(BackgroundImageToolsPanelItem, {
-    onChange: onChange,
-    panelId: panelId,
-    isShownByDefault: defaultControls.backgroundImage,
-    style: value,
-    inheritedValue: inheritedValue
-  }), shouldShowBackgroundSizeControls && createElement(BackgroundSizeToolsPanelItem, {
-    onChange: onChange,
-    panelId: panelId,
-    isShownByDefault: defaultControls.backgroundSize,
-    style: value,
-    inheritedValue: inheritedValue,
-    defaultValues: defaultValues
-  }));
+    headerLabel: headerLabel,
+    children: [/*#__PURE__*/_jsx(BackgroundImageToolsPanelItem, {
+      onChange: onChange,
+      panelId: panelId,
+      isShownByDefault: defaultControls.backgroundImage,
+      style: value,
+      inheritedValue: inheritedValue,
+      themeFileURIs: themeFileURIs
+    }), shouldShowBackgroundSizeControls && /*#__PURE__*/_jsx(BackgroundSizeToolsPanelItem, {
+      onChange: onChange,
+      panelId: panelId,
+      isShownByDefault: defaultControls.backgroundSize,
+      style: value,
+      inheritedValue: inheritedValue,
+      defaultValues: defaultValues,
+      themeFileURIs: themeFileURIs
+    })]
+  });
 }
 //# sourceMappingURL=background-panel.js.map