@wordpress/block-editor 14.0.0 → 14.2.0

package/build-module/components/font-appearance-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CustomSelectControl","useMemo","__","sprintf","getFontStylesAndWeights","jsx","_jsx","getFontAppearanceLabel","hasFontStyles","hasFontWeights","FontAppearanceControl","props","onChange","fontFamilyFaces","value","fontStyle","fontWeight","otherProps","hasStylesOrWeights","label","defaultOption","key","name","style","undefined","fontStyles","fontWeights","combinedStyleAndWeightOptions","combineOptions","combinedOptions","push","styleOptions","forEach","weightOptions","selectOptions","options","currentSelection","find","option","getDescribedBy","className","describedBy","selectedItem"],"sources":["@wordpress/block-editor/src/components/font-appearance-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';\n\n/**\n * Adjusts font appearance field label in case either font styles or weights\n * are disabled.\n *\n * @param {boolean} hasFontStyles  Whether font styles are enabled and present.\n * @param {boolean} hasFontWeights Whether font weights are enabled and present.\n * @return {string} A label representing what font appearance is being edited.\n */\nconst getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\n\treturn __( 'Appearance' );\n};\n\n/**\n * Control to display font style and weight options of the active font.\n *\n * @param {Object} props Component props.\n *\n * @return {Element} Font appearance control.\n */\nexport default function FontAppearanceControl( props ) {\n\tconst {\n\t\tonChange,\n\t\thasFontStyles = true,\n\t\thasFontWeights = true,\n\t\tfontFamilyFaces,\n\t\tvalue: { fontStyle, fontWeight },\n\t\t...otherProps\n\t} = props;\n\tconst hasStylesOrWeights = hasFontStyles || hasFontWeights;\n\tconst label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );\n\tconst defaultOption = {\n\t\tkey: 'default',\n\t\tname: __( 'Default' ),\n\t\tstyle: { fontStyle: undefined, fontWeight: undefined },\n\t};\n\tconst { fontStyles, fontWeights, combinedStyleAndWeightOptions } =\n\t\tgetFontStylesAndWeights( fontFamilyFaces );\n\n\t// Generates select options for combined font styles and weights.\n\tconst combineOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tif ( combinedStyleAndWeightOptions ) {\n\t\t\tcombinedOptions.push( ...combinedStyleAndWeightOptions );\n\t\t}\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font styles only.\n\tconst styleOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tfontStyles.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: value, fontWeight: undefined },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font weights only.\n\tconst weightOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tfontWeights.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: undefined, fontWeight: value },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Map font styles and weights to select options.\n\tconst selectOptions = useMemo( () => {\n\t\t// Display combined available font style and weight options.\n\t\tif ( hasFontStyles && hasFontWeights ) {\n\t\t\treturn combineOptions();\n\t\t}\n\n\t\t// Display only font style options or font weight options.\n\t\treturn hasFontStyles ? styleOptions() : weightOptions();\n\t}, [\n\t\tprops.options,\n\t\tfontStyles,\n\t\tfontWeights,\n\t\tcombinedStyleAndWeightOptions,\n\t] );\n\n\t// Find current selection by comparing font style & weight against options,\n\t// and fall back to the Default option if there is no matching option.\n\tconst currentSelection =\n\t\tselectOptions.find(\n\t\t\t( option ) =>\n\t\t\t\toption.style.fontStyle === fontStyle &&\n\t\t\t\toption.style.fontWeight === fontWeight\n\t\t) || selectOptions[ 0 ];\n\n\t// Adjusts screen reader description based on styles or weights.\n\tconst getDescribedBy = () => {\n\t\tif ( ! currentSelection ) {\n\t\t\treturn __( 'No selected font appearance' );\n\t\t}\n\n\t\tif ( ! hasFontStyles ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font weight.\n\t\t\t\t__( 'Currently selected font weight: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\tif ( ! hasFontWeights ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font style.\n\t\t\t\t__( 'Currently selected font style: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\treturn sprintf(\n\t\t\t// translators: %s: Currently selected font appearance.\n\t\t\t__( 'Currently selected font appearance: %s' ),\n\t\t\tcurrentSelection.name\n\t\t);\n\t};\n\n\treturn (\n\t\thasStylesOrWeights && (\n\t\t\t<CustomSelectControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName=\"components-font-appearance-control\"\n\t\t\t\tlabel={ label }\n\t\t\t\tdescribedBy={ getDescribedBy() }\n\t\t\t\toptions={ selectOptions }\n\t\t\t\tvalue={ currentSelection }\n\t\t\t\tonChange={ ( { selectedItem } ) =>\n\t\t\t\t\tonChange( selectedItem.style )\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,yCAAyC;;AAEjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAQA,MAAMC,sBAAsB,GAAGA,CAAEC,aAAa,EAAEC,cAAc,KAAM;EACnE,IAAK,CAAED,aAAa,EAAG;IACtB,OAAON,EAAE,CAAE,aAAc,CAAC;EAC3B;EAEA,IAAK,CAAEO,cAAc,EAAG;IACvB,OAAOP,EAAE,CAAE,YAAa,CAAC;EAC1B;EAEA,OAAOA,EAAE,CAAE,YAAa,CAAC;AAC1B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASQ,qBAAqBA,CAAEC,KAAK,EAAG;EACtD,MAAM;IACLC,QAAQ;IACRJ,aAAa,GAAG,IAAI;IACpBC,cAAc,GAAG,IAAI;IACrBI,eAAe;IACfC,KAAK,EAAE;MAAEC,SAAS;MAAEC;IAAW,CAAC;IAChC,GAAGC;EACJ,CAAC,GAAGN,KAAK;EACT,MAAMO,kBAAkB,GAAGV,aAAa,IAAIC,cAAc;EAC1D,MAAMU,KAAK,GAAGZ,sBAAsB,CAAEC,aAAa,EAAEC,cAAe,CAAC;EACrE,MAAMW,aAAa,GAAG;IACrBC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAEpB,EAAE,CAAE,SAAU,CAAC;IACrBqB,KAAK,EAAE;MAAER,SAAS,EAAES,SAAS;MAAER,UAAU,EAAEQ;IAAU;EACtD,CAAC;EACD,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAA8B,CAAC,GAC/DvB,uBAAuB,CAAES,eAAgB,CAAC;;EAE3C;EACA,MAAMe,cAAc,GAAGA,CAAA,KAAM;IAC5B,MAAMC,eAAe,GAAG,CAAET,aAAa,CAAE;IACzC,IAAKO,6BAA6B,EAAG;MACpCE,eAAe,CAACC,IAAI,CAAE,GAAGH,6BAA8B,CAAC;IACzD;IACA,OAAOE,eAAe;EACvB,CAAC;;EAED;EACA,MAAME,YAAY,GAAGA,CAAA,KAAM;IAC1B,MAAMF,eAAe,GAAG,CAAET,aAAa,CAAE;IACzCK,UAAU,CAACO,OAAO,CAAE,CAAE;MAAEV,IAAI;MAAER;IAAM,CAAC,KAAM;MAC1Ce,eAAe,CAACC,IAAI,CAAE;QACrBT,GAAG,EAAEP,KAAK;QACVQ,IAAI;QACJC,KAAK,EAAE;UAAER,SAAS,EAAED,KAAK;UAAEE,UAAU,EAAEQ;QAAU;MAClD,CAAE,CAAC;IACJ,CAAE,CAAC;IACH,OAAOK,eAAe;EACvB,CAAC;;EAED;EACA,MAAMI,aAAa,GAAGA,CAAA,KAAM;IAC3B,MAAMJ,eAAe,GAAG,CAAET,aAAa,CAAE;IACzCM,WAAW,CAACM,OAAO,CAAE,CAAE;MAAEV,IAAI;MAAER;IAAM,CAAC,KAAM;MAC3Ce,eAAe,CAACC,IAAI,CAAE;QACrBT,GAAG,EAAEP,KAAK;QACVQ,IAAI;QACJC,KAAK,EAAE;UAAER,SAAS,EAAES,SAAS;UAAER,UAAU,EAAEF;QAAM;MAClD,CAAE,CAAC;IACJ,CAAE,CAAC;IACH,OAAOe,eAAe;EACvB,CAAC;;EAED;EACA,MAAMK,aAAa,GAAGjC,OAAO,CAAE,MAAM;IACpC;IACA,IAAKO,aAAa,IAAIC,cAAc,EAAG;MACtC,OAAOmB,cAAc,CAAC,CAAC;IACxB;;IAEA;IACA,OAAOpB,aAAa,GAAGuB,YAAY,CAAC,CAAC,GAAGE,aAAa,CAAC,CAAC;EACxD,CAAC,EAAE,CACFtB,KAAK,CAACwB,OAAO,EACbV,UAAU,EACVC,WAAW,EACXC,6BAA6B,CAC5B,CAAC;;EAEH;EACA;EACA,MAAMS,gBAAgB,GACrBF,aAAa,CAACG,IAAI,CACfC,MAAM,IACPA,MAAM,CAACf,KAAK,CAACR,SAAS,KAAKA,SAAS,IACpCuB,MAAM,CAACf,KAAK,CAACP,UAAU,KAAKA,UAC9B,CAAC,IAAIkB,aAAa,CAAE,CAAC,CAAE;;EAExB;EACA,MAAMK,cAAc,GAAGA,CAAA,KAAM;IAC5B,IAAK,CAAEH,gBAAgB,EAAG;MACzB,OAAOlC,EAAE,CAAE,6BAA8B,CAAC;IAC3C;IAEA,IAAK,CAAEM,aAAa,EAAG;MACtB,OAAOL,OAAO;MACb;MACAD,EAAE,CAAE,oCAAqC,CAAC,EAC1CkC,gBAAgB,CAACd,IAClB,CAAC;IACF;IAEA,IAAK,CAAEb,cAAc,EAAG;MACvB,OAAON,OAAO;MACb;MACAD,EAAE,CAAE,mCAAoC,CAAC,EACzCkC,gBAAgB,CAACd,IAClB,CAAC;IACF;IAEA,OAAOnB,OAAO;IACb;IACAD,EAAE,CAAE,wCAAyC,CAAC,EAC9CkC,gBAAgB,CAACd,IAClB,CAAC;EACF,CAAC;EAED,OACCJ,kBAAkB,iBACjBZ,IAAA,CAACN,mBAAmB;IAAA,GACdiB,UAAU;IACfuB,SAAS,EAAC,oCAAoC;IAC9CrB,KAAK,EAAGA,KAAO;IACfsB,WAAW,EAAGF,cAAc,CAAC,CAAG;IAChCJ,OAAO,EAAGD,aAAe;IACzBpB,KAAK,EAAGsB,gBAAkB;IAC1BxB,QAAQ,EAAGA,CAAE;MAAE8B;IAAa,CAAC,KAC5B9B,QAAQ,CAAE8B,YAAY,CAACnB,KAAM;EAC7B,CACD,CACD;AAEH","ignoreList":[]}
+{"version":3,"names":["CustomSelectControl","useMemo","__","sprintf","getFontStylesAndWeights","jsx","_jsx","getFontAppearanceLabel","hasFontStyles","hasFontWeights","FontAppearanceControl","props","__next40pxDefaultSize","onChange","fontFamilyFaces","value","fontStyle","fontWeight","otherProps","hasStylesOrWeights","label","defaultOption","key","name","style","undefined","fontStyles","fontWeights","combinedStyleAndWeightOptions","combineOptions","combinedOptions","push","styleOptions","forEach","weightOptions","selectOptions","options","currentSelection","find","option","getDescribedBy","className","describedBy","selectedItem"],"sources":["@wordpress/block-editor/src/components/font-appearance-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';\n\n/**\n * Adjusts font appearance field label in case either font styles or weights\n * are disabled.\n *\n * @param {boolean} hasFontStyles  Whether font styles are enabled and present.\n * @param {boolean} hasFontWeights Whether font weights are enabled and present.\n * @return {string} A label representing what font appearance is being edited.\n */\nconst getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\n\treturn __( 'Appearance' );\n};\n\n/**\n * Control to display font style and weight options of the active font.\n *\n * @param {Object} props Component props.\n *\n * @return {Element} Font appearance control.\n */\nexport default function FontAppearanceControl( props ) {\n\tconst {\n\t\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t\t__next40pxDefaultSize = false,\n\t\tonChange,\n\t\thasFontStyles = true,\n\t\thasFontWeights = true,\n\t\tfontFamilyFaces,\n\t\tvalue: { fontStyle, fontWeight },\n\t\t...otherProps\n\t} = props;\n\tconst hasStylesOrWeights = hasFontStyles || hasFontWeights;\n\tconst label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );\n\tconst defaultOption = {\n\t\tkey: 'default',\n\t\tname: __( 'Default' ),\n\t\tstyle: { fontStyle: undefined, fontWeight: undefined },\n\t};\n\tconst { fontStyles, fontWeights, combinedStyleAndWeightOptions } =\n\t\tgetFontStylesAndWeights( fontFamilyFaces );\n\n\t// Generates select options for combined font styles and weights.\n\tconst combineOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tif ( combinedStyleAndWeightOptions ) {\n\t\t\tcombinedOptions.push( ...combinedStyleAndWeightOptions );\n\t\t}\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font styles only.\n\tconst styleOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tfontStyles.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: value, fontWeight: undefined },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font weights only.\n\tconst weightOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tfontWeights.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: undefined, fontWeight: value },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Map font styles and weights to select options.\n\tconst selectOptions = useMemo( () => {\n\t\t// Display combined available font style and weight options.\n\t\tif ( hasFontStyles && hasFontWeights ) {\n\t\t\treturn combineOptions();\n\t\t}\n\n\t\t// Display only font style options or font weight options.\n\t\treturn hasFontStyles ? styleOptions() : weightOptions();\n\t}, [\n\t\tprops.options,\n\t\tfontStyles,\n\t\tfontWeights,\n\t\tcombinedStyleAndWeightOptions,\n\t] );\n\n\t// Find current selection by comparing font style & weight against options,\n\t// and fall back to the Default option if there is no matching option.\n\tconst currentSelection =\n\t\tselectOptions.find(\n\t\t\t( option ) =>\n\t\t\t\toption.style.fontStyle === fontStyle &&\n\t\t\t\toption.style.fontWeight === fontWeight\n\t\t) || selectOptions[ 0 ];\n\n\t// Adjusts screen reader description based on styles or weights.\n\tconst getDescribedBy = () => {\n\t\tif ( ! currentSelection ) {\n\t\t\treturn __( 'No selected font appearance' );\n\t\t}\n\n\t\tif ( ! hasFontStyles ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font weight.\n\t\t\t\t__( 'Currently selected font weight: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\tif ( ! hasFontWeights ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font style.\n\t\t\t\t__( 'Currently selected font style: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\treturn sprintf(\n\t\t\t// translators: %s: Currently selected font appearance.\n\t\t\t__( 'Currently selected font appearance: %s' ),\n\t\t\tcurrentSelection.name\n\t\t);\n\t};\n\n\treturn (\n\t\thasStylesOrWeights && (\n\t\t\t<CustomSelectControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName=\"components-font-appearance-control\"\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tlabel={ label }\n\t\t\t\tdescribedBy={ getDescribedBy() }\n\t\t\t\toptions={ selectOptions }\n\t\t\t\tvalue={ currentSelection }\n\t\t\t\tonChange={ ( { selectedItem } ) =>\n\t\t\t\t\tonChange( selectedItem.style )\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,yCAAyC;;AAEjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,SAAAC,GAAA,IAAAC,IAAA;AAQA,MAAMC,sBAAsB,GAAGA,CAAEC,aAAa,EAAEC,cAAc,KAAM;EACnE,IAAK,CAAED,aAAa,EAAG;IACtB,OAAON,EAAE,CAAE,aAAc,CAAC;EAC3B;EAEA,IAAK,CAAEO,cAAc,EAAG;IACvB,OAAOP,EAAE,CAAE,YAAa,CAAC;EAC1B;EAEA,OAAOA,EAAE,CAAE,YAAa,CAAC;AAC1B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASQ,qBAAqBA,CAAEC,KAAK,EAAG;EACtD,MAAM;IACL;IACAC,qBAAqB,GAAG,KAAK;IAC7BC,QAAQ;IACRL,aAAa,GAAG,IAAI;IACpBC,cAAc,GAAG,IAAI;IACrBK,eAAe;IACfC,KAAK,EAAE;MAAEC,SAAS;MAAEC;IAAW,CAAC;IAChC,GAAGC;EACJ,CAAC,GAAGP,KAAK;EACT,MAAMQ,kBAAkB,GAAGX,aAAa,IAAIC,cAAc;EAC1D,MAAMW,KAAK,GAAGb,sBAAsB,CAAEC,aAAa,EAAEC,cAAe,CAAC;EACrE,MAAMY,aAAa,GAAG;IACrBC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAErB,EAAE,CAAE,SAAU,CAAC;IACrBsB,KAAK,EAAE;MAAER,SAAS,EAAES,SAAS;MAAER,UAAU,EAAEQ;IAAU;EACtD,CAAC;EACD,MAAM;IAAEC,UAAU;IAAEC,WAAW;IAAEC;EAA8B,CAAC,GAC/DxB,uBAAuB,CAAEU,eAAgB,CAAC;;EAE3C;EACA,MAAMe,cAAc,GAAGA,CAAA,KAAM;IAC5B,MAAMC,eAAe,GAAG,CAAET,aAAa,CAAE;IACzC,IAAKO,6BAA6B,EAAG;MACpCE,eAAe,CAACC,IAAI,CAAE,GAAGH,6BAA8B,CAAC;IACzD;IACA,OAAOE,eAAe;EACvB,CAAC;;EAED;EACA,MAAME,YAAY,GAAGA,CAAA,KAAM;IAC1B,MAAMF,eAAe,GAAG,CAAET,aAAa,CAAE;IACzCK,UAAU,CAACO,OAAO,CAAE,CAAE;MAAEV,IAAI;MAAER;IAAM,CAAC,KAAM;MAC1Ce,eAAe,CAACC,IAAI,CAAE;QACrBT,GAAG,EAAEP,KAAK;QACVQ,IAAI;QACJC,KAAK,EAAE;UAAER,SAAS,EAAED,KAAK;UAAEE,UAAU,EAAEQ;QAAU;MAClD,CAAE,CAAC;IACJ,CAAE,CAAC;IACH,OAAOK,eAAe;EACvB,CAAC;;EAED;EACA,MAAMI,aAAa,GAAGA,CAAA,KAAM;IAC3B,MAAMJ,eAAe,GAAG,CAAET,aAAa,CAAE;IACzCM,WAAW,CAACM,OAAO,CAAE,CAAE;MAAEV,IAAI;MAAER;IAAM,CAAC,KAAM;MAC3Ce,eAAe,CAACC,IAAI,CAAE;QACrBT,GAAG,EAAEP,KAAK;QACVQ,IAAI;QACJC,KAAK,EAAE;UAAER,SAAS,EAAES,SAAS;UAAER,UAAU,EAAEF;QAAM;MAClD,CAAE,CAAC;IACJ,CAAE,CAAC;IACH,OAAOe,eAAe;EACvB,CAAC;;EAED;EACA,MAAMK,aAAa,GAAGlC,OAAO,CAAE,MAAM;IACpC;IACA,IAAKO,aAAa,IAAIC,cAAc,EAAG;MACtC,OAAOoB,cAAc,CAAC,CAAC;IACxB;;IAEA;IACA,OAAOrB,aAAa,GAAGwB,YAAY,CAAC,CAAC,GAAGE,aAAa,CAAC,CAAC;EACxD,CAAC,EAAE,CACFvB,KAAK,CAACyB,OAAO,EACbV,UAAU,EACVC,WAAW,EACXC,6BAA6B,CAC5B,CAAC;;EAEH;EACA;EACA,MAAMS,gBAAgB,GACrBF,aAAa,CAACG,IAAI,CACfC,MAAM,IACPA,MAAM,CAACf,KAAK,CAACR,SAAS,KAAKA,SAAS,IACpCuB,MAAM,CAACf,KAAK,CAACP,UAAU,KAAKA,UAC9B,CAAC,IAAIkB,aAAa,CAAE,CAAC,CAAE;;EAExB;EACA,MAAMK,cAAc,GAAGA,CAAA,KAAM;IAC5B,IAAK,CAAEH,gBAAgB,EAAG;MACzB,OAAOnC,EAAE,CAAE,6BAA8B,CAAC;IAC3C;IAEA,IAAK,CAAEM,aAAa,EAAG;MACtB,OAAOL,OAAO;MACb;MACAD,EAAE,CAAE,oCAAqC,CAAC,EAC1CmC,gBAAgB,CAACd,IAClB,CAAC;IACF;IAEA,IAAK,CAAEd,cAAc,EAAG;MACvB,OAAON,OAAO;MACb;MACAD,EAAE,CAAE,mCAAoC,CAAC,EACzCmC,gBAAgB,CAACd,IAClB,CAAC;IACF;IAEA,OAAOpB,OAAO;IACb;IACAD,EAAE,CAAE,wCAAyC,CAAC,EAC9CmC,gBAAgB,CAACd,IAClB,CAAC;EACF,CAAC;EAED,OACCJ,kBAAkB,iBACjBb,IAAA,CAACN,mBAAmB;IAAA,GACdkB,UAAU;IACfuB,SAAS,EAAC,oCAAoC;IAC9C7B,qBAAqB,EAAGA,qBAAuB;IAC/CQ,KAAK,EAAGA,KAAO;IACfsB,WAAW,EAAGF,cAAc,CAAC,CAAG;IAChCJ,OAAO,EAAGD,aAAe;IACzBpB,KAAK,EAAGsB,gBAAkB;IAC1BxB,QAAQ,EAAGA,CAAE;MAAE8B;IAAa,CAAC,KAC5B9B,QAAQ,CAAE8B,YAAY,CAACnB,KAAM;EAC7B,CACD,CACD;AAEH","ignoreList":[]}

package/build-module/components/font-family/index.js

@@ -11,6 +11,8 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function FontFamilyControl({
+  /** Start opting into the larger default height that will become the default size in a future version. */
+  __next40pxDefaultSize = false,
   /** Start opting into the new margin-free styles that will become the default in a future version. */
   __nextHasNoMarginBottom = false,
   value = '',
@@ -45,6 +47,7 @@ export default function FontFamilyControl({
     });
   }
   return /*#__PURE__*/_jsx(SelectControl, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: __('Font'),
     options: options,

package/build-module/components/font-family/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SelectControl","deprecated","__","useSettings","jsx","_jsx","FontFamilyControl","__nextHasNoMarginBottom","value","onChange","fontFamilies","props","blockLevelFontFamilies","length","options","label","map","fontFamily","name","since","version","hint","labelPosition"],"sources":["@wordpress/block-editor/src/components/font-family/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default function FontFamilyControl( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tvalue = '',\n\tonChange,\n\tfontFamilies,\n\t...props\n} ) {\n\tconst [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );\n\tif ( ! fontFamilies ) {\n\t\tfontFamilies = blockLevelFontFamilies;\n\t}\n\n\tif ( ! fontFamilies || fontFamilies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst options = [\n\t\t{ value: '', label: __( 'Default' ) },\n\t\t...fontFamilies.map( ( { fontFamily, name } ) => {\n\t\t\treturn {\n\t\t\t\tvalue: fontFamily,\n\t\t\t\tlabel: name || fontFamily,\n\t\t\t};\n\t\t} ),\n\t];\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.blockEditor.FontFamilyControl',\n\t\t\t{\n\t\t\t\tsince: '6.7',\n\t\t\t\tversion: '7.0',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ __( 'Font' ) }\n\t\t\toptions={ options }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,WAAW,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9C,eAAe,SAASC,iBAAiBA,CAAE;EAC1C;EACAC,uBAAuB,GAAG,KAAK;EAC/BC,KAAK,GAAG,EAAE;EACVC,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACJ,CAAC,EAAG;EACH,MAAM,CAAEC,sBAAsB,CAAE,GAAGT,WAAW,CAAE,yBAA0B,CAAC;EAC3E,IAAK,CAAEO,YAAY,EAAG;IACrBA,YAAY,GAAGE,sBAAsB;EACtC;EAEA,IAAK,CAAEF,YAAY,IAAIA,YAAY,CAACG,MAAM,KAAK,CAAC,EAAG;IAClD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,CACf;IAAEN,KAAK,EAAE,EAAE;IAAEO,KAAK,EAAEb,EAAE,CAAE,SAAU;EAAE,CAAC,EACrC,GAAGQ,YAAY,CAACM,GAAG,CAAE,CAAE;IAAEC,UAAU;IAAEC;EAAK,CAAC,KAAM;IAChD,OAAO;MACNV,KAAK,EAAES,UAAU;MACjBF,KAAK,EAAEG,IAAI,IAAID;IAChB,CAAC;EACF,CAAE,CAAC,CACH;EAED,IAAK,CAAEV,uBAAuB,EAAG;IAChCN,UAAU,CACT,2DAA2D,EAC3D;MACCkB,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CACD,CAAC;EACF;EAEA,oBACChB,IAAA,CAACL,aAAa;IACbO,uBAAuB,EAAGA,uBAAyB;IACnDQ,KAAK,EAAGb,EAAE,CAAE,MAAO,CAAG;IACtBY,OAAO,EAAGA,OAAS;IACnBN,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IACrBa,aAAa,EAAC,KAAK;IAAA,GACdX;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["SelectControl","deprecated","__","useSettings","jsx","_jsx","FontFamilyControl","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","fontFamilies","props","blockLevelFontFamilies","length","options","label","map","fontFamily","name","since","version","hint","labelPosition"],"sources":["@wordpress/block-editor/src/components/font-family/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default function FontFamilyControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next40pxDefaultSize = false,\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tvalue = '',\n\tonChange,\n\tfontFamilies,\n\t...props\n} ) {\n\tconst [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );\n\tif ( ! fontFamilies ) {\n\t\tfontFamilies = blockLevelFontFamilies;\n\t}\n\n\tif ( ! fontFamilies || fontFamilies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst options = [\n\t\t{ value: '', label: __( 'Default' ) },\n\t\t...fontFamilies.map( ( { fontFamily, name } ) => {\n\t\t\treturn {\n\t\t\t\tvalue: fontFamily,\n\t\t\t\tlabel: name || fontFamily,\n\t\t\t};\n\t\t} ),\n\t];\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.blockEditor.FontFamilyControl',\n\t\t\t{\n\t\t\t\tsince: '6.7',\n\t\t\t\tversion: '7.0',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ __( 'Font' ) }\n\t\t\toptions={ options }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tlabelPosition=\"top\"\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,OAAOC,UAAU,MAAM,uBAAuB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,WAAW,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9C,eAAe,SAASC,iBAAiBA,CAAE;EAC1C;EACAC,qBAAqB,GAAG,KAAK;EAC7B;EACAC,uBAAuB,GAAG,KAAK;EAC/BC,KAAK,GAAG,EAAE;EACVC,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACJ,CAAC,EAAG;EACH,MAAM,CAAEC,sBAAsB,CAAE,GAAGV,WAAW,CAAE,yBAA0B,CAAC;EAC3E,IAAK,CAAEQ,YAAY,EAAG;IACrBA,YAAY,GAAGE,sBAAsB;EACtC;EAEA,IAAK,CAAEF,YAAY,IAAIA,YAAY,CAACG,MAAM,KAAK,CAAC,EAAG;IAClD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,CACf;IAAEN,KAAK,EAAE,EAAE;IAAEO,KAAK,EAAEd,EAAE,CAAE,SAAU;EAAE,CAAC,EACrC,GAAGS,YAAY,CAACM,GAAG,CAAE,CAAE;IAAEC,UAAU;IAAEC;EAAK,CAAC,KAAM;IAChD,OAAO;MACNV,KAAK,EAAES,UAAU;MACjBF,KAAK,EAAEG,IAAI,IAAID;IAChB,CAAC;EACF,CAAE,CAAC,CACH;EAED,IAAK,CAAEV,uBAAuB,EAAG;IAChCP,UAAU,CACT,2DAA2D,EAC3D;MACCmB,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CACD,CAAC;EACF;EAEA,oBACCjB,IAAA,CAACL,aAAa;IACbO,qBAAqB,EAAGA,qBAAuB;IAC/CC,uBAAuB,EAAGA,uBAAyB;IACnDQ,KAAK,EAAGd,EAAE,CAAE,MAAO,CAAG;IACtBa,OAAO,EAAGA,OAAS;IACnBN,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IACrBa,aAAa,EAAC,KAAK;IAAA,GACdX;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -6,11 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, __experimentalVStack as VStack, DropZone, FlexItem, FocalPointPicker, MenuItem, VisuallyHidden, __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate, Dropdown, __experimentalDropdownContentWrapper as DropdownContentWrapper } from '@wordpress/components';
+import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, __experimentalVStack as VStack, DropZone, FlexItem, FocalPointPicker, MenuItem, VisuallyHidden, __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate, Dropdown, Placeholder, Spinner, __experimentalDropdownContentWrapper as DropdownContentWrapper } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { useCallback, Platform, useRef, useState, useEffect } from '@wordpress/element';
+import { useCallback, Platform, useRef, useState, useEffect, useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
@@ -18,11 +18,11 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps, getResolvedValue } 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 { globalStylesDataKey, globalStylesLinksDataKey } from '../../store/private-keys';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const IMAGE_BACKGROUND_TYPE = 'image';
@@ -217,15 +217,25 @@ function BackgroundControlsPanel({
     })
   });
 }
+function LoadingSpinner() {
+  return /*#__PURE__*/_jsx(Placeholder, {
+    className: "block-editor-global-styles-background-panel__loading",
+    children: /*#__PURE__*/_jsx(Spinner, {})
+  });
+}
 function BackgroundImageControls({
   onChange,
   style,
   inheritedValue,
   onRemoveImage = noop,
+  onResetImage = noop,
   displayInPanel,
-  themeFileURIs
+  defaultValues
 }) {
-  const mediaUpload = useSelect(select => select(blockEditorStore).getSettings().mediaUpload, []);
+  const [isUploading, setIsUploading] = useState(false);
+  const {
+    getSettings
+  } = useSelect(blockEditorStore);
   const {
     id,
     title,
@@ -241,14 +251,17 @@ function BackgroundImageControls({
     createErrorNotice(message, {
       type: 'snackbar'
     });
+    setIsUploading(false);
   };
   const resetBackgroundImage = () => onChange(setImmutably(style, ['background', 'backgroundImage'], undefined));
   const onSelectMedia = media => {
     if (!media || !media.url) {
       resetBackgroundImage();
+      setIsUploading(false);
       return;
     }
     if (isBlobURL(media.url)) {
+      setIsUploading(true);
       return;
     }
 
@@ -257,8 +270,8 @@ function BackgroundImageControls({
       onUploadError(__('Only images can be used as a background image.'));
       return;
     }
-    const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
-    const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition;
+    const sizeValue = style?.background?.backgroundSize || defaultValues?.backgroundSize;
+    const positionValue = style?.background?.backgroundPosition;
     onChange(setImmutably(style, ['background'], {
       ...style?.background,
       backgroundImage: {
@@ -267,18 +280,29 @@ function BackgroundImageControls({
         source: 'file',
         title: media.title || undefined
       },
-      backgroundPosition: !positionValue && ('auto' === sizeValue || !sizeValue) ? '50% 0' : positionValue,
+      backgroundPosition:
+      /*
+       * A background image uploaded and set in the editor receives a default background position of '50% 0',
+       * when the background image size is the equivalent of "Tile".
+       * This is to increase the chance that the image's focus point is visible.
+       * This is in-editor only to assist with the user experience.
+       */
+      !positionValue && ('auto' === sizeValue || !sizeValue) ? '50% 0' : positionValue,
       backgroundSize: sizeValue
     }));
+    setIsUploading(false);
   };
+
+  // Drag and drop callback, restricting image to one.
   const onFilesDrop = filesList => {
-    mediaUpload({
+    if (filesList?.length > 1) {
+      onUploadError(__('Only one image can be used as a background image.'));
+      return;
+    }
+    getSettings().mediaUpload({
       allowedTypes: [IMAGE_BACKGROUND_TYPE],
       filesList,
       onFileChange([image]) {
-        if (isBlobURL(image?.url)) {
-          return;
-        }
         onSelectMedia(image);
       },
       onError: onUploadError
@@ -293,13 +317,15 @@ function BackgroundImageControls({
     toggleButton?.focus();
     toggleButton?.click();
   };
-  const onRemove = () => onChange(setImmutably(style, ['background', 'backgroundImage'], 'none'));
+  const onRemove = () => onChange(setImmutably(style, ['background'], {
+    backgroundImage: 'none'
+  }));
   const canRemove = !hasValue && hasBackgroundImageValue(inheritedValue);
   const imgLabel = title || getFilename(url) || __('Add background image');
   return /*#__PURE__*/_jsxs("div", {
     ref: replaceContainerRef,
     className: "block-editor-global-styles-background-panel__image-tools-panel-item",
-    children: [/*#__PURE__*/_jsxs(MediaReplaceFlow, {
+    children: [isUploading && /*#__PURE__*/_jsx(LoadingSpinner, {}), /*#__PURE__*/_jsx(MediaReplaceFlow, {
       mediaId: id,
       mediaURL: url,
       allowedTypes: [IMAGE_BACKGROUND_TYPE],
@@ -312,24 +338,24 @@ function BackgroundImageControls({
       },
       name: /*#__PURE__*/_jsx(InspectorImagePreviewItem, {
         className: "block-editor-global-styles-background-panel__image-preview",
-        imgUrl: getResolvedThemeFilePath(url, themeFileURIs),
+        imgUrl: url,
         filename: title,
         label: imgLabel
       }),
       variant: "secondary",
-      children: [canRemove && /*#__PURE__*/_jsx(MenuItem, {
+      onError: onUploadError,
+      onReset: () => {
+        closeAndFocus();
+        onResetImage();
+      },
+      children: canRemove && /*#__PURE__*/_jsx(MenuItem, {
         onClick: () => {
           closeAndFocus();
           onRemove();
-        },
-        children: __('Remove')
-      }), hasValue && /*#__PURE__*/_jsx(MenuItem, {
-        onClick: () => {
-          closeAndFocus();
           onRemoveImage();
         },
-        children: __('Reset ')
-      })]
+        children: __('Remove')
+      })
     }), /*#__PURE__*/_jsx(DropZone, {
       onFilesDrop: onFilesDrop,
       label: __('Drop to upload')
@@ -340,13 +366,12 @@ function BackgroundSizeControls({
   onChange,
   style,
   inheritedValue,
-  defaultValues,
-  themeFileURIs
+  defaultValues
 }) {
   const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
   const repeatValue = style?.background?.backgroundRepeat || inheritedValue?.background?.backgroundRepeat;
   const imageValue = style?.background?.backgroundImage?.url || inheritedValue?.background?.backgroundImage?.url;
-  const isUploadedImage = style?.background?.backgroundImage?.id || inheritedValue?.background?.backgroundImage?.id;
+  const isUploadedImage = style?.background?.backgroundImage?.id;
   const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition;
   const attachmentValue = style?.background?.backgroundAttachment || inheritedValue?.background?.backgroundAttachment;
 
@@ -356,8 +381,12 @@ function BackgroundSizeControls({
    * Block-level controls may have different defaults to root-level controls.
    * A falsy value is treated by default as `auto` (Tile).
    */
-  const currentValueForToggle = !sizeValue && isUploadedImage ? defaultValues?.backgroundSize : sizeValue || 'auto';
-
+  let currentValueForToggle = !sizeValue && isUploadedImage ? defaultValues?.backgroundSize : sizeValue || 'auto';
+  /*
+   * The incoming value could be a value + unit, e.g. '20px'.
+   * In this case set the value to 'tile'.
+   */
+  currentValueForToggle = !['cover', 'contain', 'auto'].includes(currentValueForToggle) ? 'auto' : currentValueForToggle;
   /*
    * If the current value is `cover` and the repeat value is `undefined`, then
    * the toggle should be unchecked as the default state. Otherwise, the toggle
@@ -383,6 +412,7 @@ function BackgroundSizeControls({
        * 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.
+       * This is in-editor only to assist with the user experience.
        */
       if (!!style?.background?.backgroundImage?.id) {
         nextPosition = '50% 0';
@@ -408,22 +438,23 @@ function BackgroundSizeControls({
   };
   const toggleIsRepeated = () => onChange(setImmutably(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : 'repeat'));
   const toggleScrollWithPage = () => onChange(setImmutably(style, ['background', 'backgroundAttachment'], attachmentValue === 'fixed' ? 'scroll' : 'fixed'));
+
+  // Set a default background position for non-site-wide, uploaded images with a size of 'contain'.
+  const backgroundPositionValue = !positionValue && isUploadedImage && 'contain' === sizeValue ? defaultValues?.backgroundPosition : positionValue;
   return /*#__PURE__*/_jsxs(VStack, {
-    spacing: 4,
+    spacing: 3,
     className: "single-column",
     children: [/*#__PURE__*/_jsx(FocalPointPicker, {
-      __next40pxDefaultSize: true,
       __nextHasNoMarginBottom: true,
       label: __('Focal point'),
-      url: getResolvedThemeFilePath(imageValue, themeFileURIs),
-      value: backgroundPositionToCoords(positionValue),
+      url: imageValue,
+      value: backgroundPositionToCoords(backgroundPositionValue),
       onChange: updateBackgroundPosition
     }), /*#__PURE__*/_jsx(ToggleControl, {
       __nextHasNoMarginBottom: true,
       label: __('Fixed background'),
       checked: attachmentValue === 'fixed',
-      onChange: toggleScrollWithPage,
-      help: __('Whether your image should scroll with the page or stay fixed in place.')
+      onChange: toggleScrollWithPage
     }), /*#__PURE__*/_jsxs(ToggleGroupControl, {
       __nextHasNoMarginBottom: true,
       size: "__unstable-large",
@@ -478,9 +509,7 @@ function BackgroundToolsPanel({
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
   };
-  return /*#__PURE__*/_jsx(VStack, {
-    as: ToolsPanel,
-    spacing: 4,
+  return /*#__PURE__*/_jsx(ToolsPanel, {
     label: headerLabel,
     resetAll: resetAll,
     panelId: panelId,
@@ -497,9 +526,42 @@ export default function BackgroundPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   defaultValues = {},
-  headerLabel = __('Background image'),
-  themeFileURIs
+  headerLabel = __('Background image')
 }) {
+  /*
+   * Resolve any inherited "ref" pointers.
+   * Should the block editor need resolved, inherited values
+   * across all controls, this could be abstracted into a hook,
+   * e.g., useResolveGlobalStyle
+   */
+  const {
+    globalStyles,
+    _links
+  } = useSelect(select => {
+    const {
+      getSettings
+    } = select(blockEditorStore);
+    const _settings = getSettings();
+    return {
+      globalStyles: _settings[globalStylesDataKey],
+      _links: _settings[globalStylesLinksDataKey]
+    };
+  }, []);
+  const resolvedInheritedValue = useMemo(() => {
+    const resolvedValues = {
+      background: {}
+    };
+    if (!inheritedValue?.background) {
+      return inheritedValue;
+    }
+    Object.entries(inheritedValue?.background).forEach(([key, backgroundValue]) => {
+      resolvedValues.background[key] = getResolvedValue(backgroundValue, {
+        styles: globalStyles,
+        _links
+      });
+    });
+    return resolvedValues;
+  }, [globalStyles, _links, inheritedValue]);
   const resetAllFilter = useCallback(previousValue => {
     return {
       ...previousValue,
@@ -511,10 +573,11 @@ export default function BackgroundPanel({
     title,
     url
   } = value?.background?.backgroundImage || {
-    ...inheritedValue?.background?.backgroundImage
+    ...resolvedInheritedValue?.background?.backgroundImage
   };
-  const hasImageValue = hasBackgroundImageValue(value) || hasBackgroundImageValue(inheritedValue);
-  const shouldShowBackgroundImageControls = hasImageValue && (settings?.background?.backgroundSize || settings?.background?.backgroundPosition || settings?.background?.backgroundRepeat);
+  const hasImageValue = hasBackgroundImageValue(value) || hasBackgroundImageValue(resolvedInheritedValue);
+  const imageValue = value?.background?.backgroundImage || inheritedValue?.background?.backgroundImage;
+  const shouldShowBackgroundImageControls = hasImageValue && 'none' !== imageValue && (settings?.background?.backgroundSize || settings?.background?.backgroundPosition || settings?.background?.backgroundRepeat);
   const [isDropDownOpen, setIsDropDownOpen] = useState(false);
   return /*#__PURE__*/_jsx(Wrapper, {
     resetAllFilter: resetAllFilter,
@@ -527,7 +590,7 @@ export default function BackgroundPanel({
         'is-open': isDropDownOpen
       }),
       children: /*#__PURE__*/_jsx(ToolsPanelItem, {
-        hasValue: () => hasImageValue,
+        hasValue: () => !!value?.background,
         label: __('Image'),
         onDeselect: resetBackground,
         isShownByDefault: defaultControls.backgroundImage,
@@ -535,7 +598,7 @@ export default function BackgroundPanel({
         children: shouldShowBackgroundImageControls ? /*#__PURE__*/_jsx(BackgroundControlsPanel, {
           label: title,
           filename: title,
-          url: getResolvedThemeFilePath(url, themeFileURIs),
+          url: url,
           onToggle: setIsDropDownOpen,
           hasImageValue: hasImageValue,
           children: /*#__PURE__*/_jsxs(VStack, {
@@ -544,27 +607,32 @@ export default function BackgroundPanel({
             children: [/*#__PURE__*/_jsx(BackgroundImageControls, {
               onChange: onChange,
               style: value,
-              inheritedValue: inheritedValue,
-              themeFileURIs: themeFileURIs,
+              inheritedValue: resolvedInheritedValue,
               displayInPanel: true,
-              onRemoveImage: () => {
+              onResetImage: () => {
                 setIsDropDownOpen(false);
                 resetBackground();
-              }
+              },
+              onRemoveImage: () => setIsDropDownOpen(false),
+              defaultValues: defaultValues
             }), /*#__PURE__*/_jsx(BackgroundSizeControls, {
               onChange: onChange,
               panelId: panelId,
               style: value,
               defaultValues: defaultValues,
-              inheritedValue: inheritedValue,
-              themeFileURIs: themeFileURIs
+              inheritedValue: resolvedInheritedValue
             })]
           })
         }) : /*#__PURE__*/_jsx(BackgroundImageControls, {
           onChange: onChange,
           style: value,
-          inheritedValue: inheritedValue,
-          themeFileURIs: themeFileURIs
+          inheritedValue: resolvedInheritedValue,
+          defaultValues: defaultValues,
+          onResetImage: () => {
+            setIsDropDownOpen(false);
+            resetBackground();
+          },
+          onRemoveImage: () => setIsDropDownOpen(false)
         })
       })
     })