@wordpress/block-editor 14.0.0 → 14.2.0

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_element","_i18n","_getFontStylesAndWeights","_jsxRuntime","getFontAppearanceLabel","hasFontStyles","hasFontWeights","__","FontAppearanceControl","props","onChange","fontFamilyFaces","value","fontStyle","fontWeight","otherProps","hasStylesOrWeights","label","defaultOption","key","name","style","undefined","fontStyles","fontWeights","combinedStyleAndWeightOptions","getFontStylesAndWeights","combineOptions","combinedOptions","push","styleOptions","forEach","weightOptions","selectOptions","useMemo","options","currentSelection","find","option","getDescribedBy","sprintf","jsx","CustomSelectControl","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":"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","ignoreList":[]}
+{"version":3,"names":["_components","require","_element","_i18n","_getFontStylesAndWeights","_jsxRuntime","getFontAppearanceLabel","hasFontStyles","hasFontWeights","__","FontAppearanceControl","props","__next40pxDefaultSize","onChange","fontFamilyFaces","value","fontStyle","fontWeight","otherProps","hasStylesOrWeights","label","defaultOption","key","name","style","undefined","fontStyles","fontWeights","combinedStyleAndWeightOptions","getFontStylesAndWeights","combineOptions","combinedOptions","push","styleOptions","forEach","weightOptions","selectOptions","useMemo","options","currentSelection","find","option","getDescribedBy","sprintf","jsx","CustomSelectControl","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":"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","ignoreList":[]}

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

@@ -19,6 +19,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 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 = '',
@@ -53,6 +55,7 @@ function FontFamilyControl({
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: (0, _i18n.__)('Font'),
     options: options,

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

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_deprecated","_interopRequireDefault","_i18n","_useSettings","_jsxRuntime","FontFamilyControl","__nextHasNoMarginBottom","value","onChange","fontFamilies","props","blockLevelFontFamilies","useSettings","length","options","label","__","map","fontFamily","name","deprecated","since","version","hint","jsx","SelectControl","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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,YAAA,GAAAJ,OAAA;AAA8C,IAAAK,WAAA,GAAAL,OAAA;AAV9C;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASM,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,GAAG,IAAAC,wBAAW,EAAE,yBAA0B,CAAC;EAC3E,IAAK,CAAEH,YAAY,EAAG;IACrBA,YAAY,GAAGE,sBAAsB;EACtC;EAEA,IAAK,CAAEF,YAAY,IAAIA,YAAY,CAACI,MAAM,KAAK,CAAC,EAAG;IAClD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,CACf;IAAEP,KAAK,EAAE,EAAE;IAAEQ,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;EAAE,CAAC,EACrC,GAAGP,YAAY,CAACQ,GAAG,CAAE,CAAE;IAAEC,UAAU;IAAEC;EAAK,CAAC,KAAM;IAChD,OAAO;MACNZ,KAAK,EAAEW,UAAU;MACjBH,KAAK,EAAEI,IAAI,IAAID;IAChB,CAAC;EACF,CAAE,CAAC,CACH;EAED,IAAK,CAAEZ,uBAAuB,EAAG;IAChC,IAAAc,mBAAU,EACT,2DAA2D,EAC3D;MACCC,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CACD,CAAC;EACF;EAEA,oBACC,IAAAnB,WAAA,CAAAoB,GAAA,EAAC1B,WAAA,CAAA2B,aAAa;IACbnB,uBAAuB,EAAGA,uBAAyB;IACnDS,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBF,OAAO,EAAGA,OAAS;IACnBP,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IACrBkB,aAAa,EAAC,KAAK;IAAA,GACdhB;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_deprecated","_interopRequireDefault","_i18n","_useSettings","_jsxRuntime","FontFamilyControl","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","fontFamilies","props","blockLevelFontFamilies","useSettings","length","options","label","__","map","fontFamily","name","deprecated","since","version","hint","jsx","SelectControl","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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,YAAA,GAAAJ,OAAA;AAA8C,IAAAK,WAAA,GAAAL,OAAA;AAV9C;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASM,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,GAAG,IAAAC,wBAAW,EAAE,yBAA0B,CAAC;EAC3E,IAAK,CAAEH,YAAY,EAAG;IACrBA,YAAY,GAAGE,sBAAsB;EACtC;EAEA,IAAK,CAAEF,YAAY,IAAIA,YAAY,CAACI,MAAM,KAAK,CAAC,EAAG;IAClD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,CACf;IAAEP,KAAK,EAAE,EAAE;IAAEQ,KAAK,EAAE,IAAAC,QAAE,EAAE,SAAU;EAAE,CAAC,EACrC,GAAGP,YAAY,CAACQ,GAAG,CAAE,CAAE;IAAEC,UAAU;IAAEC;EAAK,CAAC,KAAM;IAChD,OAAO;MACNZ,KAAK,EAAEW,UAAU;MACjBH,KAAK,EAAEI,IAAI,IAAID;IAChB,CAAC;EACF,CAAE,CAAC,CACH;EAED,IAAK,CAAEZ,uBAAuB,EAAG;IAChC,IAAAc,mBAAU,EACT,2DAA2D,EAC3D;MACCC,KAAK,EAAE,KAAK;MACZC,OAAO,EAAE,KAAK;MACdC,IAAI,EAAE;IACP,CACD,CAAC;EACF;EAEA,oBACC,IAAApB,WAAA,CAAAqB,GAAA,EAAC3B,WAAA,CAAA4B,aAAa;IACbpB,qBAAqB,EAAGA,qBAAuB;IAC/CC,uBAAuB,EAAGA,uBAAyB;IACnDS,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBF,OAAO,EAAGA,OAAS;IACnBP,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IACrBkB,aAAa,EAAC,KAAK;IAAA,GACdhB;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -22,7 +22,7 @@ var _utils = require("./utils");
 var _object = require("../../utils/object");
 var _mediaReplaceFlow = _interopRequireDefault(require("../media-replace-flow"));
 var _store = require("../../store");
-var _themeFileUriUtils = require("./theme-file-uri-utils");
+var _privateKeys = require("../../store/private-keys");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -230,15 +230,25 @@ function BackgroundControlsPanel({
     })
   });
 }
+function LoadingSpinner() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
+    className: "block-editor-global-styles-background-panel__loading",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
+  });
+}
 function BackgroundImageControls({
   onChange,
   style,
   inheritedValue,
   onRemoveImage = noop,
+  onResetImage = noop,
   displayInPanel,
-  themeFileURIs
+  defaultValues
 }) {
-  const mediaUpload = (0, _data.useSelect)(select => select(_store.store).getSettings().mediaUpload, []);
+  const [isUploading, setIsUploading] = (0, _element.useState)(false);
+  const {
+    getSettings
+  } = (0, _data.useSelect)(_store.store);
   const {
     id,
     title,
@@ -254,14 +264,17 @@ function BackgroundImageControls({
     createErrorNotice(message, {
       type: 'snackbar'
     });
+    setIsUploading(false);
   };
   const resetBackgroundImage = () => onChange((0, _object.setImmutably)(style, ['background', 'backgroundImage'], undefined));
   const onSelectMedia = media => {
     if (!media || !media.url) {
       resetBackgroundImage();
+      setIsUploading(false);
       return;
     }
     if ((0, _blob.isBlobURL)(media.url)) {
+      setIsUploading(true);
       return;
     }
 
@@ -270,8 +283,8 @@ function BackgroundImageControls({
       onUploadError((0, _i18n.__)('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((0, _object.setImmutably)(style, ['background'], {
       ...style?.background,
       backgroundImage: {
@@ -280,18 +293,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((0, _i18n.__)('Only one image can be used as a background image.'));
+      return;
+    }
+    getSettings().mediaUpload({
       allowedTypes: [IMAGE_BACKGROUND_TYPE],
       filesList,
       onFileChange([image]) {
-        if ((0, _blob.isBlobURL)(image?.url)) {
-          return;
-        }
         onSelectMedia(image);
       },
       onError: onUploadError
@@ -306,13 +330,15 @@ function BackgroundImageControls({
     toggleButton?.focus();
     toggleButton?.click();
   };
-  const onRemove = () => onChange((0, _object.setImmutably)(style, ['background', 'backgroundImage'], 'none'));
+  const onRemove = () => onChange((0, _object.setImmutably)(style, ['background'], {
+    backgroundImage: 'none'
+  }));
   const canRemove = !hasValue && hasBackgroundImageValue(inheritedValue);
   const imgLabel = title || (0, _url.getFilename)(url) || (0, _i18n.__)('Add background image');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: replaceContainerRef,
     className: "block-editor-global-styles-background-panel__image-tools-panel-item",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_mediaReplaceFlow.default, {
+    children: [isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaReplaceFlow.default, {
       mediaId: id,
       mediaURL: url,
       allowedTypes: [IMAGE_BACKGROUND_TYPE],
@@ -325,24 +351,24 @@ function BackgroundImageControls({
       },
       name: /*#__PURE__*/(0, _jsxRuntime.jsx)(InspectorImagePreviewItem, {
         className: "block-editor-global-styles-background-panel__image-preview",
-        imgUrl: (0, _themeFileUriUtils.getResolvedThemeFilePath)(url, themeFileURIs),
+        imgUrl: url,
         filename: title,
         label: imgLabel
       }),
       variant: "secondary",
-      children: [canRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+      onError: onUploadError,
+      onReset: () => {
+        closeAndFocus();
+        onResetImage();
+      },
+      children: canRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
         onClick: () => {
           closeAndFocus();
           onRemove();
-        },
-        children: (0, _i18n.__)('Remove')
-      }), hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-        onClick: () => {
-          closeAndFocus();
           onRemoveImage();
         },
-        children: (0, _i18n.__)('Reset ')
-      })]
+        children: (0, _i18n.__)('Remove')
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropZone, {
       onFilesDrop: onFilesDrop,
       label: (0, _i18n.__)('Drop to upload')
@@ -353,13 +379,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;
 
@@ -369,8 +394,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
@@ -396,6 +425,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';
@@ -421,22 +451,23 @@ function BackgroundSizeControls({
   };
   const toggleIsRepeated = () => onChange((0, _object.setImmutably)(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : 'repeat'));
   const toggleScrollWithPage = () => onChange((0, _object.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__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
-    spacing: 4,
+    spacing: 3,
     className: "single-column",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FocalPointPicker, {
-      __next40pxDefaultSize: true,
       __nextHasNoMarginBottom: true,
       label: (0, _i18n.__)('Focal point'),
-      url: (0, _themeFileUriUtils.getResolvedThemeFilePath)(imageValue, themeFileURIs),
-      value: backgroundPositionToCoords(positionValue),
+      url: imageValue,
+      value: backgroundPositionToCoords(backgroundPositionValue),
       onChange: updateBackgroundPosition
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
       __nextHasNoMarginBottom: true,
       label: (0, _i18n.__)('Fixed background'),
       checked: attachmentValue === 'fixed',
-      onChange: toggleScrollWithPage,
-      help: (0, _i18n.__)('Whether your image should scroll with the page or stay fixed in place.')
+      onChange: toggleScrollWithPage
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
       __nextHasNoMarginBottom: true,
       size: "__unstable-large",
@@ -491,9 +522,7 @@ function BackgroundToolsPanel({
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-    as: _components.__experimentalToolsPanel,
-    spacing: 4,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanel, {
     label: headerLabel,
     resetAll: resetAll,
     panelId: panelId,
@@ -510,9 +539,42 @@ function BackgroundPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   defaultValues = {},
-  headerLabel = (0, _i18n.__)('Background image'),
-  themeFileURIs
+  headerLabel = (0, _i18n.__)('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
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_store.store);
+    const _settings = getSettings();
+    return {
+      globalStyles: _settings[_privateKeys.globalStylesDataKey],
+      _links: _settings[_privateKeys.globalStylesLinksDataKey]
+    };
+  }, []);
+  const resolvedInheritedValue = (0, _element.useMemo)(() => {
+    const resolvedValues = {
+      background: {}
+    };
+    if (!inheritedValue?.background) {
+      return inheritedValue;
+    }
+    Object.entries(inheritedValue?.background).forEach(([key, backgroundValue]) => {
+      resolvedValues.background[key] = (0, _utils.getResolvedValue)(backgroundValue, {
+        styles: globalStyles,
+        _links
+      });
+    });
+    return resolvedValues;
+  }, [globalStyles, _links, inheritedValue]);
   const resetAllFilter = (0, _element.useCallback)(previousValue => {
     return {
       ...previousValue,
@@ -524,10 +586,11 @@ 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] = (0, _element.useState)(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     resetAllFilter: resetAllFilter,
@@ -540,7 +603,7 @@ function BackgroundPanel({
         'is-open': isDropDownOpen
       }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-        hasValue: () => hasImageValue,
+        hasValue: () => !!value?.background,
         label: (0, _i18n.__)('Image'),
         onDeselect: resetBackground,
         isShownByDefault: defaultControls.backgroundImage,
@@ -548,7 +611,7 @@ function BackgroundPanel({
         children: shouldShowBackgroundImageControls ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackgroundControlsPanel, {
           label: title,
           filename: title,
-          url: (0, _themeFileUriUtils.getResolvedThemeFilePath)(url, themeFileURIs),
+          url: url,
           onToggle: setIsDropDownOpen,
           hasImageValue: hasImageValue,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
@@ -557,27 +620,32 @@ function BackgroundPanel({
             children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(BackgroundSizeControls, {
               onChange: onChange,
               panelId: panelId,
               style: value,
               defaultValues: defaultValues,
-              inheritedValue: inheritedValue,
-              themeFileURIs: themeFileURIs
+              inheritedValue: resolvedInheritedValue
             })]
           })
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BackgroundImageControls, {
           onChange: onChange,
           style: value,
-          inheritedValue: inheritedValue,
-          themeFileURIs: themeFileURIs
+          inheritedValue: resolvedInheritedValue,
+          defaultValues: defaultValues,
+          onResetImage: () => {
+            setIsDropDownOpen(false);
+            resetBackground();
+          },
+          onRemoveImage: () => setIsDropDownOpen(false)
         })
       })
     })