@wordpress/block-editor 8.0.13 → 8.1.0

package/build/components/colors-gradients/panel-color-gradient-settings.js

@@ -19,7 +19,7 @@ var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
-var _control = _interopRequireDefault(require("./control"));
+var _dropdown = _interopRequireDefault(require("./dropdown"));
 
 var _colors = require("../colors");
 
@@ -116,9 +116,8 @@ const PanelColorGradientSettingsInner = _ref3 => {
   return (0, _element.createElement)(_components.PanelBody, (0, _extends2.default)({
     className: (0, _classnames.default)('block-editor-panel-color-gradient-settings', className),
     title: showTitle ? titleElement : undefined
-  }, props), settings.map((setting, index) => (0, _element.createElement)(_control.default, (0, _extends2.default)({
-    showTitle: showTitle,
-    key: index,
+  }, props), (0, _element.createElement)(_dropdown.default, {
+    settings: settings,
     colors,
     gradients,
     disableCustomColors,
@@ -126,7 +125,9 @@ const PanelColorGradientSettingsInner = _ref3 => {
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
     enableAlpha
-  }, setting))), children);
+  }), !!children && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalSpacer, {
+    marginY: 4
+  }), " ", children));
 };
 
 exports.PanelColorGradientSettingsInner = PanelColorGradientSettingsInner;

package/build/components/colors-gradients/panel-color-gradient-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","index","colorValue","gradientValue","label","availableColors","availableGradients","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","enableAlpha","props","setting","undefined","titleElement","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { PanelBody, ColorIndicator } from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\nimport useCommonSingleMultipleSelects from './use-common-single-multiple-selects';\nimport useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors || colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) || colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients || gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) || gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue || gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ settings.map( ( setting, index ) => (\n\t\t\t\t<ColorGradientControl\n\t\t\t\t\tshowTitle={ showTitle }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\t{ ...{\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tgradients,\n\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t\tenableAlpha,\n\t\t\t\t\t\t...setting,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t\t{ children }\n\t\t</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSingleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettingsMultipleSelect = ( props ) => {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\tif ( props.__experimentalHasMultipleOrigins ) {\n\t\treturn <PanelColorGradientSettingsMultipleSelect { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSingleSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js"],"names":["colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","index","colorValue","gradientValue","label","availableColors","availableGradients","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","enableAlpha","props","setting","undefined","titleElement","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","PanelColorGradientSettings","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { every, isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalSpacer as Spacer,\n\tColorIndicator,\n\tPanelBody,\n} from '@wordpress/components';\nimport { sprintf, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientSettingsDropdown from './dropdown';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\nimport useCommonSingleMultipleSelects from './use-common-single-multiple-selects';\nimport useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst colorIndicatorAriaLabel = __( '(%s: color %s)' );\n\n// translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)\nconst gradientIndicatorAriaLabel = __( '(%s: gradient %s)' );\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst Indicators = ( { colors, gradients, settings } ) => {\n\treturn settings.map(\n\t\t(\n\t\t\t{\n\t\t\t\tcolorValue,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t\tcolors: availableColors,\n\t\t\t\tgradients: availableGradients,\n\t\t\t},\n\t\t\tindex\n\t\t) => {\n\t\t\tif ( ! colorValue && ! gradientValue ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tlet ariaLabel;\n\t\t\tif ( colorValue ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue(\n\t\t\t\t\tavailableColors || colors,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tcolorIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( colorObject && colorObject.name ) || colorValue\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst gradientObject = __experimentalGetGradientObjectByGradientValue(\n\t\t\t\t\tavailableGradients || gradients,\n\t\t\t\t\tcolorValue\n\t\t\t\t);\n\t\t\t\tariaLabel = sprintf(\n\t\t\t\t\tgradientIndicatorAriaLabel,\n\t\t\t\t\tlabel.toLowerCase(),\n\t\t\t\t\t( gradientObject && gradientObject.name ) || gradientValue\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ColorIndicator\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tcolorValue={ colorValue || gradientValue }\n\t\t\t\t\taria-label={ ariaLabel }\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t);\n};\n\nexport const PanelColorGradientSettingsInner = ( {\n\tclassName,\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\tchildren,\n\tsettings,\n\ttitle,\n\tshowTitle = true,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n\t...props\n} ) => {\n\tif (\n\t\tisEmpty( colors ) &&\n\t\tisEmpty( gradients ) &&\n\t\tdisableCustomColors &&\n\t\tdisableCustomGradients &&\n\t\tevery(\n\t\t\tsettings,\n\t\t\t( setting ) =>\n\t\t\t\tisEmpty( setting.colors ) &&\n\t\t\t\tisEmpty( setting.gradients ) &&\n\t\t\t\t( setting.disableCustomColors === undefined ||\n\t\t\t\t\tsetting.disableCustomColors ) &&\n\t\t\t\t( setting.disableCustomGradients === undefined ||\n\t\t\t\t\tsetting.disableCustomGradients )\n\t\t)\n\t) {\n\t\treturn null;\n\t}\n\n\tconst titleElement = (\n\t\t<span className=\"block-editor-panel-color-gradient-settings__panel-title\">\n\t\t\t{ title }\n\t\t\t<Indicators\n\t\t\t\tcolors={ colors }\n\t\t\t\tgradients={ gradients }\n\t\t\t\tsettings={ settings }\n\t\t\t/>\n\t\t</span>\n\t);\n\n\treturn (\n\t\t<PanelBody\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-panel-color-gradient-settings',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttitle={ showTitle ? titleElement : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\tsettings={ settings }\n\t\t\t\t{ ...{\n\t\t\t\t\tcolors,\n\t\t\t\t\tgradients,\n\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\tenableAlpha,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ !! children && (\n\t\t\t\t<>\n\t\t\t\t\t<Spacer marginY={ 4 } /> { children }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</PanelBody>\n\t);\n};\n\nconst PanelColorGradientSettingsSingleSelect = ( props ) => {\n\tconst colorGradientSettings = useCommonSingleMultipleSelects();\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettingsMultipleSelect = ( props ) => {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\treturn (\n\t\t<PanelColorGradientSettingsInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n};\n\nconst PanelColorGradientSettings = ( props ) => {\n\tif (\n\t\tevery( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <PanelColorGradientSettingsInner { ...props } />;\n\t}\n\tif ( props.__experimentalHasMultipleOrigins ) {\n\t\treturn <PanelColorGradientSettingsMultipleSelect { ...props } />;\n\t}\n\treturn <PanelColorGradientSettingsSingleSelect { ...props } />;\n};\n\nexport default PanelColorGradientSettings;\n"]}

package/build/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -27,13 +27,15 @@ var _blockSettings = require("../block-settings");
 function PanelColorGradientSettings(_ref) {
   let {
     settings,
-    title
+    title,
+    children
   } = _ref;
   const navigation = (0, _native.useNavigation)();
   const mappedSettings = (0, _element.useMemo)(() => {
     return settings.map(_ref2 => {
       let {
         onColorChange,
+        onColorCleared,
         colorValue,
         onGradientChange,
         gradientValue,
@@ -46,6 +48,7 @@ function PanelColorGradientSettings(_ref) {
             colorValue: gradientValue || colorValue,
             gradientValue,
             onGradientChange,
+            onColorCleared,
             label
           });
         },
@@ -55,8 +58,8 @@ function PanelColorGradientSettings(_ref) {
       });
     });
   }, [settings]);
-  return (0, _element.createElement)(_components.PanelBody, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.PanelBody, {
     title: title
-  }, mappedSettings);
+  }, mappedSettings), (0, _element.createElement)(_components.PanelBody, null, children));
 }
 //# sourceMappingURL=panel-color-gradient-settings.native.js.map

package/build/components/colors-gradients/panel-color-gradient-settings.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js"],"names":["PanelColorGradientSettings","settings","title","navigation","mappedSettings","map","onColorChange","colorValue","onGradientChange","gradientValue","label","navigate","blockSettingsScreens","color"],"mappings":";;;;;;;AASA;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,0BAAT,OAA2D;AAAA,MAAtB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAsB;AACzE,QAAMC,UAAU,GAAG,4BAAnB;AAEA,QAAMC,cAAc,GAAG,sBAAS,MAAM;AACrC,WAAOH,QAAQ,CAACI,GAAT,CACN;AAAA,UAAE;AACDC,QAAAA,aADC;AAEDC,QAAAA,UAFC;AAGDC,QAAAA,gBAHC;AAIDC,QAAAA,aAJC;AAKDC,QAAAA;AALC,OAAF;AAAA,aAOC,4BAAC,wBAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfP,UAAAA,UAAU,CAACQ,QAAX,CAAqBC,oCAAqBC,KAA1C,EAAiD;AAChDP,YAAAA,aADgD;AAEhDC,YAAAA,UAAU,EAAEE,aAAa,IAAIF,UAFmB;AAGhDE,YAAAA,aAHgD;AAIhDD,YAAAA,gBAJgD;AAKhDE,YAAAA;AALgD,WAAjD;AAOA,SATF;AAUC,QAAA,GAAG,EAAI,iBAAiBA,KAAO,EAVhC;AAWC,QAAA,KAAK,EAAGA,KAXT;AAYC,QAAA,KAAK,EAAGD,aAAa,IAAIF;AAZ1B,QAPD;AAAA,KADM,CAAP;AAwBA,GAzBsB,EAyBpB,CAAEN,QAAF,CAzBoB,CAAvB;AA2BA,SAAO,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BE,cAA7B,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { ColorControl, PanelBody } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { blockSettingsScreens } from '../block-settings';\n\nexport default function PanelColorGradientSettings( { settings, title } ) {\n\tconst navigation = useNavigation();\n\n\tconst mappedSettings = useMemo( () => {\n\t\treturn settings.map(\n\t\t\t( {\n\t\t\t\tonColorChange,\n\t\t\t\tcolorValue,\n\t\t\t\tonGradientChange,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t} ) => (\n\t\t\t\t<ColorControl\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tnavigation.navigate( blockSettingsScreens.color, {\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tcolorValue: gradientValue || colorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tkey={ `color-setting-${ label }` }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tcolor={ gradientValue || colorValue }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t}, [ settings ] );\n\n\treturn <PanelBody title={ title }>{ mappedSettings }</PanelBody>;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js"],"names":["PanelColorGradientSettings","settings","title","children","navigation","mappedSettings","map","onColorChange","onColorCleared","colorValue","onGradientChange","gradientValue","label","navigate","blockSettingsScreens","color"],"mappings":";;;;;;;AASA;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,0BAAT,OAIX;AAAA,MAJgD;AACnDC,IAAAA,QADmD;AAEnDC,IAAAA,KAFmD;AAGnDC,IAAAA;AAHmD,GAIhD;AACH,QAAMC,UAAU,GAAG,4BAAnB;AAEA,QAAMC,cAAc,GAAG,sBAAS,MAAM;AACrC,WAAOJ,QAAQ,CAACK,GAAT,CACN;AAAA,UAAE;AACDC,QAAAA,aADC;AAEDC,QAAAA,cAFC;AAGDC,QAAAA,UAHC;AAIDC,QAAAA,gBAJC;AAKDC,QAAAA,aALC;AAMDC,QAAAA;AANC,OAAF;AAAA,aAQC,4BAAC,wBAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfR,UAAAA,UAAU,CAACS,QAAX,CAAqBC,oCAAqBC,KAA1C,EAAiD;AAChDR,YAAAA,aADgD;AAEhDE,YAAAA,UAAU,EAAEE,aAAa,IAAIF,UAFmB;AAGhDE,YAAAA,aAHgD;AAIhDD,YAAAA,gBAJgD;AAKhDF,YAAAA,cALgD;AAMhDI,YAAAA;AANgD,WAAjD;AAQA,SAVF;AAWC,QAAA,GAAG,EAAI,iBAAiBA,KAAO,EAXhC;AAYC,QAAA,KAAK,EAAGA,KAZT;AAaC,QAAA,KAAK,EAAGD,aAAa,IAAIF;AAb1B,QARD;AAAA,KADM,CAAP;AA0BA,GA3BsB,EA2BpB,CAAER,QAAF,CA3BoB,CAAvB;AA6BA,SACC,qDACC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BG,cAA7B,CADD,EAEC,4BAAC,qBAAD,QAAaF,QAAb,CAFD,CADD;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { ColorControl, PanelBody } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { blockSettingsScreens } from '../block-settings';\n\nexport default function PanelColorGradientSettings( {\n\tsettings,\n\ttitle,\n\tchildren,\n} ) {\n\tconst navigation = useNavigation();\n\n\tconst mappedSettings = useMemo( () => {\n\t\treturn settings.map(\n\t\t\t( {\n\t\t\t\tonColorChange,\n\t\t\t\tonColorCleared,\n\t\t\t\tcolorValue,\n\t\t\t\tonGradientChange,\n\t\t\t\tgradientValue,\n\t\t\t\tlabel,\n\t\t\t} ) => (\n\t\t\t\t<ColorControl\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tnavigation.navigate( blockSettingsScreens.color, {\n\t\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\t\tcolorValue: gradientValue || colorValue,\n\t\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\t\tonColorCleared,\n\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tkey={ `color-setting-${ label }` }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tcolor={ gradientValue || colorValue }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t}, [ settings ] );\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ title }>{ mappedSettings }</PanelBody>\n\t\t\t<PanelBody>{ children }</PanelBody>\n\t\t</>\n\t);\n}\n"]}

package/build/components/contrast-checker/index.js

@@ -35,15 +35,24 @@ function ContrastCheckerMessage(_ref) {
     colordBackgroundColor,
     colordTextColor,
     backgroundColor,
-    textColor
+    textColor,
+    shouldShowTransparencyWarning
   } = _ref;
-  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'); // Note: The `Notice` component can speak messages via its `spokenMessage`
+  let msg = '';
+
+  if (shouldShowTransparencyWarning) {
+    msg = (0, _i18n.__)('Transparent text may be hard for people to read.');
+  } else {
+    msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.');
+  } // Note: The `Notice` component can speak messages via its `spokenMessage`
   // prop, but the contrast checker requires granular control over when the
   // announcements are made. Notably, the message will be re-announced if a
   // new color combination is selected and the contrast is still insufficient.
 
+
   (0, _element.useEffect)(() => {
-    (0, _a11y2.speak)((0, _i18n.__)('This color combination may be hard for people to read.'));
+    const speakMsg = shouldShowTransparencyWarning ? (0, _i18n.__)('Transparent text may be hard for people to read.') : (0, _i18n.__)('This color combination may be hard for people to read.');
+    (0, _a11y2.speak)(speakMsg);
   }, [backgroundColor, textColor]);
   return (0, _element.createElement)("div", {
     className: "block-editor-contrast-checker"
@@ -62,7 +71,8 @@ function ContrastChecker(_ref2) {
     fontSize,
     // font size value in pixels
     isLargeText,
-    textColor
+    textColor,
+    enableAlphaChecker = false
   } = _ref2;
 
   if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
@@ -71,20 +81,35 @@ function ContrastChecker(_ref2) {
 
   const colordBackgroundColor = (0, _colord.colord)(backgroundColor || fallbackBackgroundColor);
   const colordTextColor = (0, _colord.colord)(textColor || fallbackTextColor);
-  const hasTransparency = colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
-
-  if (hasTransparency || colordTextColor.isReadable(colordBackgroundColor, {
+  const textColorHasTransparency = colordTextColor.alpha() < 1;
+  const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
+  const hasTransparency = textColorHasTransparency || backgroundColorHasTransparency;
+  const isReadable = colordTextColor.isReadable(colordBackgroundColor, {
     level: 'AA',
     size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
-  })) {
+  }); // Don't show the message if the text is readable AND there's no transparency.
+  // This is the default.
+
+  if (isReadable && !hasTransparency) {
     return null;
   }
 
+  if (hasTransparency) {
+    if ( // If there's transparency, don't show the message if the alpha checker is disabled.
+    !enableAlphaChecker || // If the alpha checker is enabled, we only show the warning if the text has transparency.
+    isReadable && !textColorHasTransparency) {
+      return null;
+    }
+  }
+
   return (0, _element.createElement)(ContrastCheckerMessage, {
     backgroundColor: backgroundColor,
     textColor: textColor,
     colordBackgroundColor: colordBackgroundColor,
-    colordTextColor: colordTextColor
+    colordTextColor: colordTextColor // Flag to warn about transparency only if the text is otherwise readable according to colord
+    // to ensure the readability warnings take precedence.
+    ,
+    shouldShowTransparencyWarning: isReadable && textColorHasTransparency
   });
 }
 

package/build/components/contrast-checker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["namesPlugin","a11yPlugin","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","msg","brightness","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","alpha","isReadable","level","size"],"mappings":";;;;;;;;;AAaA;;AAVA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAZA;AACA;AACA;;AAKA;AACA;AACA;AAMA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,sBAAT,OAKI;AAAA,MAL6B;AAChCC,IAAAA,qBADgC;AAEhCC,IAAAA,eAFgC;AAGhCC,IAAAA,eAHgC;AAIhCC,IAAAA;AAJgC,GAK7B;AACH,QAAMC,GAAG,GACRJ,qBAAqB,CAACK,UAAtB,KAAqCJ,eAAe,CAACI,UAAhB,EAArC,GACG,cACA,0HADA,CADH,GAIG,cACA,0HADA,CALJ,CADG,CAUH;AACA;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,sBAAO,cAAI,wDAAJ,CAAP;AACA,GAFD,EAEG,CAAEH,eAAF,EAAmBC,SAAnB,CAFH;AAIA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AACC,IAAA,aAAa,EAAG,IADjB;AAEC,IAAA,MAAM,EAAC,SAFR;AAGC,IAAA,aAAa,EAAG;AAHjB,KAKGC,GALH,CADD,CADD;AAWA;;AAED,SAASE,eAAT,QAOI;AAAA,MAPsB;AACzBJ,IAAAA,eADyB;AAEzBK,IAAAA,uBAFyB;AAGzBC,IAAAA,iBAHyB;AAIzBC,IAAAA,QAJyB;AAIf;AACVC,IAAAA,WALyB;AAMzBP,IAAAA;AANyB,GAOtB;;AACH,MACC,EAAID,eAAe,IAAIK,uBAAvB,KACA,EAAIJ,SAAS,IAAIK,iBAAjB,CAFD,EAGE;AACD,WAAO,IAAP;AACA;;AACD,QAAMR,qBAAqB,GAAG,oBAC7BE,eAAe,IAAIK,uBADU,CAA9B;AAGA,QAAMN,eAAe,GAAG,oBAAQE,SAAS,IAAIK,iBAArB,CAAxB;AACA,QAAMG,eAAe,GACpBX,qBAAqB,CAACY,KAAtB,OAAkC,CAAlC,IAAuCX,eAAe,CAACW,KAAhB,OAA4B,CADpE;;AAGA,MACCD,eAAe,IACfV,eAAe,CAACY,UAAhB,CAA4Bb,qBAA5B,EAAmD;AAClDc,IAAAA,KAAK,EAAE,IAD2C;AAElDC,IAAAA,IAAI,EACHL,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;AAL8C,GAAnD,CAFD,EASE;AACD,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,sBAAD;AACC,IAAA,eAAe,EAAGP,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,qBAAqB,EAAGH,qBAHzB;AAIC,IAAA,eAAe,EAAGC;AAJnB,IADD;AAQA;;eAEcK,e","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { useEffect } from '@wordpress/element';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction ContrastCheckerMessage( {\n\tcolordBackgroundColor,\n\tcolordTextColor,\n\tbackgroundColor,\n\ttextColor,\n} ) {\n\tconst msg =\n\t\tcolordBackgroundColor.brightness() < colordTextColor.brightness()\n\t\t\t? __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'\n\t\t\t  );\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tuseEffect( () => {\n\t\tspeak( __( 'This color combination may be hard for people to read.' ) );\n\t}, [ backgroundColor, textColor ] );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ msg }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfontSize, // font size value in pixels\n\tisLargeText,\n\ttextColor,\n} ) {\n\tif (\n\t\t! ( backgroundColor || fallbackBackgroundColor ) ||\n\t\t! ( textColor || fallbackTextColor )\n\t) {\n\t\treturn null;\n\t}\n\tconst colordBackgroundColor = colord(\n\t\tbackgroundColor || fallbackBackgroundColor\n\t);\n\tconst colordTextColor = colord( textColor || fallbackTextColor );\n\tconst hasTransparency =\n\t\tcolordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;\n\n\tif (\n\t\thasTransparency ||\n\t\tcolordTextColor.isReadable( colordBackgroundColor, {\n\t\t\tlevel: 'AA',\n\t\t\tsize:\n\t\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t\t? 'large'\n\t\t\t\t\t: 'small',\n\t\t} )\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ContrastCheckerMessage\n\t\t\tbackgroundColor={ backgroundColor }\n\t\t\ttextColor={ textColor }\n\t\t\tcolordBackgroundColor={ colordBackgroundColor }\n\t\t\tcolordTextColor={ colordTextColor }\n\t\t/>\n\t);\n}\n\nexport default ContrastChecker;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["namesPlugin","a11yPlugin","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","shouldShowTransparencyWarning","msg","brightness","speakMsg","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","enableAlphaChecker","textColorHasTransparency","alpha","backgroundColorHasTransparency","hasTransparency","isReadable","level","size"],"mappings":";;;;;;;;;AAaA;;AAVA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAZA;AACA;AACA;;AAKA;AACA;AACA;AAMA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,sBAAT,OAMI;AAAA,MAN6B;AAChCC,IAAAA,qBADgC;AAEhCC,IAAAA,eAFgC;AAGhCC,IAAAA,eAHgC;AAIhCC,IAAAA,SAJgC;AAKhCC,IAAAA;AALgC,GAM7B;AACH,MAAIC,GAAG,GAAG,EAAV;;AACA,MAAKD,6BAAL,EAAqC;AACpCC,IAAAA,GAAG,GAAG,cAAI,kDAAJ,CAAN;AACA,GAFD,MAEO;AACNA,IAAAA,GAAG,GACFL,qBAAqB,CAACM,UAAtB,KAAqCL,eAAe,CAACK,UAAhB,EAArC,GACG,cACA,0HADA,CADH,GAIG,cACA,0HADA,CALJ;AAQA,GAbE,CAeH;AACA;AACA;AACA;;;AACA,0BAAW,MAAM;AAChB,UAAMC,QAAQ,GAAGH,6BAA6B,GAC3C,cAAI,kDAAJ,CAD2C,GAE3C,cAAI,wDAAJ,CAFH;AAGA,sBAAOG,QAAP;AACA,GALD,EAKG,CAAEL,eAAF,EAAmBC,SAAnB,CALH;AAOA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AACC,IAAA,aAAa,EAAG,IADjB;AAEC,IAAA,MAAM,EAAC,SAFR;AAGC,IAAA,aAAa,EAAG;AAHjB,KAKGE,GALH,CADD,CADD;AAWA;;AAED,SAASG,eAAT,QAQI;AAAA,MARsB;AACzBN,IAAAA,eADyB;AAEzBO,IAAAA,uBAFyB;AAGzBC,IAAAA,iBAHyB;AAIzBC,IAAAA,QAJyB;AAIf;AACVC,IAAAA,WALyB;AAMzBT,IAAAA,SANyB;AAOzBU,IAAAA,kBAAkB,GAAG;AAPI,GAQtB;;AACH,MACC,EAAIX,eAAe,IAAIO,uBAAvB,KACA,EAAIN,SAAS,IAAIO,iBAAjB,CAFD,EAGE;AACD,WAAO,IAAP;AACA;;AACD,QAAMV,qBAAqB,GAAG,oBAC7BE,eAAe,IAAIO,uBADU,CAA9B;AAGA,QAAMR,eAAe,GAAG,oBAAQE,SAAS,IAAIO,iBAArB,CAAxB;AACA,QAAMI,wBAAwB,GAAGb,eAAe,CAACc,KAAhB,KAA0B,CAA3D;AACA,QAAMC,8BAA8B,GAAGhB,qBAAqB,CAACe,KAAtB,KAAgC,CAAvE;AACA,QAAME,eAAe,GACpBH,wBAAwB,IAAIE,8BAD7B;AAEA,QAAME,UAAU,GAAGjB,eAAe,CAACiB,UAAhB,CAA4BlB,qBAA5B,EAAmD;AACrEmB,IAAAA,KAAK,EAAE,IAD8D;AAErEC,IAAAA,IAAI,EACHR,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;AALiE,GAAnD,CAAnB,CAfG,CAuBH;AACA;;AACA,MAAKO,UAAU,IAAI,CAAED,eAArB,EAAuC;AACtC,WAAO,IAAP;AACA;;AAED,MAAKA,eAAL,EAAuB;AACtB,SACC;AACA,KAAEJ,kBAAF,IACA;AACEK,IAAAA,UAAU,IAAI,CAAEJ,wBAJnB,EAKE;AACD,aAAO,IAAP;AACA;AACD;;AAED,SACC,4BAAC,sBAAD;AACC,IAAA,eAAe,EAAGZ,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,qBAAqB,EAAGH,qBAHzB;AAIC,IAAA,eAAe,EAAGC,eAJnB,CAKC;AACA;AAND;AAOC,IAAA,6BAA6B,EAC5BiB,UAAU,IAAIJ;AARhB,IADD;AAaA;;eAEcN,e","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { useEffect } from '@wordpress/element';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction ContrastCheckerMessage( {\n\tcolordBackgroundColor,\n\tcolordTextColor,\n\tbackgroundColor,\n\ttextColor,\n\tshouldShowTransparencyWarning,\n} ) {\n\tlet msg = '';\n\tif ( shouldShowTransparencyWarning ) {\n\t\tmsg = __( 'Transparent text may be hard for people to read.' );\n\t} else {\n\t\tmsg =\n\t\t\tcolordBackgroundColor.brightness() < colordTextColor.brightness()\n\t\t\t\t? __(\n\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'\n\t\t\t\t  )\n\t\t\t\t: __(\n\t\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'\n\t\t\t\t  );\n\t}\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tuseEffect( () => {\n\t\tconst speakMsg = shouldShowTransparencyWarning\n\t\t\t? __( 'Transparent text may be hard for people to read.' )\n\t\t\t: __( 'This color combination may be hard for people to read.' );\n\t\tspeak( speakMsg );\n\t}, [ backgroundColor, textColor ] );\n\n\treturn (\n\t\t<div className=\"block-editor-contrast-checker\">\n\t\t\t<Notice\n\t\t\t\tspokenMessage={ null }\n\t\t\t\tstatus=\"warning\"\n\t\t\t\tisDismissible={ false }\n\t\t\t>\n\t\t\t\t{ msg }\n\t\t\t</Notice>\n\t\t</div>\n\t);\n}\n\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfontSize, // font size value in pixels\n\tisLargeText,\n\ttextColor,\n\tenableAlphaChecker = false,\n} ) {\n\tif (\n\t\t! ( backgroundColor || fallbackBackgroundColor ) ||\n\t\t! ( textColor || fallbackTextColor )\n\t) {\n\t\treturn null;\n\t}\n\tconst colordBackgroundColor = colord(\n\t\tbackgroundColor || fallbackBackgroundColor\n\t);\n\tconst colordTextColor = colord( textColor || fallbackTextColor );\n\tconst textColorHasTransparency = colordTextColor.alpha() < 1;\n\tconst backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;\n\tconst hasTransparency =\n\t\ttextColorHasTransparency || backgroundColorHasTransparency;\n\tconst isReadable = colordTextColor.isReadable( colordBackgroundColor, {\n\t\tlevel: 'AA',\n\t\tsize:\n\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t? 'large'\n\t\t\t\t: 'small',\n\t} );\n\n\t// Don't show the message if the text is readable AND there's no transparency.\n\t// This is the default.\n\tif ( isReadable && ! hasTransparency ) {\n\t\treturn null;\n\t}\n\n\tif ( hasTransparency ) {\n\t\tif (\n\t\t\t// If there's transparency, don't show the message if the alpha checker is disabled.\n\t\t\t! enableAlphaChecker ||\n\t\t\t// If the alpha checker is enabled, we only show the warning if the text has transparency.\n\t\t\t( isReadable && ! textColorHasTransparency )\n\t\t) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn (\n\t\t<ContrastCheckerMessage\n\t\t\tbackgroundColor={ backgroundColor }\n\t\t\ttextColor={ textColor }\n\t\t\tcolordBackgroundColor={ colordBackgroundColor }\n\t\t\tcolordTextColor={ colordTextColor }\n\t\t\t// Flag to warn about transparency only if the text is otherwise readable according to colord\n\t\t\t// to ensure the readability warnings take precedence.\n\t\t\tshouldShowTransparencyWarning={\n\t\t\t\tisReadable && textColorHasTransparency\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default ContrastChecker;\n"]}

package/build/components/contrast-checker/index.native.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _reactNative = require("react-native");
+
+var _colord = require("colord");
+
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+
+var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
+
+var _a11y2 = require("@wordpress/a11y");
+
+var _i18n = require("@wordpress/i18n");
+
+var _compose = require("@wordpress/compose");
+
+var _icons = require("@wordpress/icons");
+
+var _style = _interopRequireDefault(require("./style.scss"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+(0, _colord.extend)([_names.default, _a11y.default]);
+
+function ContrastCheckerMessage(_ref) {
+  let {
+    colordBackgroundColor,
+    colordTextColor,
+    backgroundColor,
+    textColor,
+    msgStyle
+  } = _ref;
+  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'); // Note: The `Notice` component can speak messages via its `spokenMessage`
+  // prop, but the contrast checker requires granular control over when the
+  // announcements are made. Notably, the message will be re-announced if a
+  // new color combination is selected and the contrast is still insufficient.
+
+  (0, _element.useEffect)(() => {
+    (0, _a11y2.speak)((0, _i18n.__)('This color combination may be hard for people to read.'));
+  }, [backgroundColor, textColor]);
+  const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['block-editor-contrast-checker__icon'], _style.default['block-editor-contrast-checker__icon-dark']);
+  return (0, _element.createElement)(_reactNative.View, {
+    style: _style.default['block-editor-contrast-checker']
+  }, (0, _element.createElement)(_icons.Icon, {
+    style: iconStyle,
+    icon: _icons.warning
+  }), (0, _element.createElement)(_reactNative.Text, {
+    style: msgStyle
+  }, msg));
+}
+
+function ContrastChecker(_ref2) {
+  let {
+    backgroundColor,
+    fallbackBackgroundColor,
+    fallbackTextColor,
+    fontSize,
+    // font size value in pixels
+    isLargeText,
+    textColor
+  } = _ref2;
+  const msgStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['block-editor-contrast-checker__notice'], _style.default['block-editor-contrast-checker__notice-dark']);
+
+  if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
+    return null;
+  }
+
+  const colordBackgroundColor = (0, _colord.colord)(backgroundColor || fallbackBackgroundColor);
+  const colordTextColor = (0, _colord.colord)(textColor || fallbackTextColor);
+  const hasTransparency = colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
+
+  if (hasTransparency || colordTextColor.isReadable(colordBackgroundColor, {
+    level: 'AA',
+    size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
+  })) {
+    return null;
+  }
+
+  return (0, _element.createElement)(ContrastCheckerMessage, {
+    backgroundColor: backgroundColor,
+    textColor: textColor,
+    colordBackgroundColor: colordBackgroundColor,
+    colordTextColor: colordTextColor,
+    msgStyle: msgStyle
+  });
+}
+
+var _default = ContrastChecker;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/build/components/contrast-checker/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.native.js"],"names":["namesPlugin","a11yPlugin","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","msgStyle","msg","brightness","iconStyle","styles","warning","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","alpha","isReadable","level","size"],"mappings":";;;;;;;;;AAaA;;AAVA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAEA;;AACA;;AAIA;;AAnBA;AACA;AACA;;AAMA;AACA;AACA;;AAMA;AACA;AACA;AAGA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,sBAAT,OAMI;AAAA,MAN6B;AAChCC,IAAAA,qBADgC;AAEhCC,IAAAA,eAFgC;AAGhCC,IAAAA,eAHgC;AAIhCC,IAAAA,SAJgC;AAKhCC,IAAAA;AALgC,GAM7B;AACH,QAAMC,GAAG,GACRL,qBAAqB,CAACM,UAAtB,KAAqCL,eAAe,CAACK,UAAhB,EAArC,GACG,cACA,0HADA,CADH,GAIG,cACA,0HADA,CALJ,CADG,CAUH;AACA;AACA;AACA;;AACA,0BAAW,MAAM;AAChB,sBAAO,cAAI,wDAAJ,CAAP;AACA,GAFD,EAEG,CAAEJ,eAAF,EAAmBC,SAAnB,CAFH;AAIA,QAAMI,SAAS,GAAG,2CACjBC,eAAQ,qCAAR,CADiB,EAEjBA,eAAQ,0CAAR,CAFiB,CAAlB;AAKA,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGA,eAAQ,+BAAR;AAAd,KACC,4BAAC,WAAD;AAAM,IAAA,KAAK,EAAGD,SAAd;AAA0B,IAAA,IAAI,EAAGE;AAAjC,IADD,EAEC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGL;AAAd,KAA2BC,GAA3B,CAFD,CADD;AAMA;;AAED,SAASK,eAAT,QAOI;AAAA,MAPsB;AACzBR,IAAAA,eADyB;AAEzBS,IAAAA,uBAFyB;AAGzBC,IAAAA,iBAHyB;AAIzBC,IAAAA,QAJyB;AAIf;AACVC,IAAAA,WALyB;AAMzBX,IAAAA;AANyB,GAOtB;AACH,QAAMC,QAAQ,GAAG,2CAChBI,eAAQ,uCAAR,CADgB,EAEhBA,eAAQ,4CAAR,CAFgB,CAAjB;;AAKA,MACC,EAAIN,eAAe,IAAIS,uBAAvB,KACA,EAAIR,SAAS,IAAIS,iBAAjB,CAFD,EAGE;AACD,WAAO,IAAP;AACA;;AAED,QAAMZ,qBAAqB,GAAG,oBAC7BE,eAAe,IAAIS,uBADU,CAA9B;AAGA,QAAMV,eAAe,GAAG,oBAAQE,SAAS,IAAIS,iBAArB,CAAxB;AAEA,QAAMG,eAAe,GACpBf,qBAAqB,CAACgB,KAAtB,OAAkC,CAAlC,IAAuCf,eAAe,CAACe,KAAhB,OAA4B,CADpE;;AAGA,MACCD,eAAe,IACfd,eAAe,CAACgB,UAAhB,CAA4BjB,qBAA5B,EAAmD;AAClDkB,IAAAA,KAAK,EAAE,IAD2C;AAElDC,IAAAA,IAAI,EACHL,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;AAL8C,GAAnD,CAFD,EASE;AACD,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,sBAAD;AACC,IAAA,eAAe,EAAGX,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,qBAAqB,EAAGH,qBAHzB;AAIC,IAAA,eAAe,EAAGC,eAJnB;AAKC,IAAA,QAAQ,EAAGG;AALZ,IADD;AASA;;eAEcM,e","sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, warning } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction ContrastCheckerMessage( {\n\tcolordBackgroundColor,\n\tcolordTextColor,\n\tbackgroundColor,\n\ttextColor,\n\tmsgStyle,\n} ) {\n\tconst msg =\n\t\tcolordBackgroundColor.brightness() < colordTextColor.brightness()\n\t\t\t? __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'\n\t\t\t  );\n\n\t// Note: The `Notice` component can speak messages via its `spokenMessage`\n\t// prop, but the contrast checker requires granular control over when the\n\t// announcements are made. Notably, the message will be re-announced if a\n\t// new color combination is selected and the contrast is still insufficient.\n\tuseEffect( () => {\n\t\tspeak( __( 'This color combination may be hard for people to read.' ) );\n\t}, [ backgroundColor, textColor ] );\n\n\tconst iconStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-editor-contrast-checker__icon' ],\n\t\tstyles[ 'block-editor-contrast-checker__icon-dark' ]\n\t);\n\n\treturn (\n\t\t<View style={ styles[ 'block-editor-contrast-checker' ] }>\n\t\t\t<Icon style={ iconStyle } icon={ warning } />\n\t\t\t<Text style={ msgStyle }>{ msg }</Text>\n\t\t</View>\n\t);\n}\n\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfontSize, // font size value in pixels\n\tisLargeText,\n\ttextColor,\n} ) {\n\tconst msgStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'block-editor-contrast-checker__notice' ],\n\t\tstyles[ 'block-editor-contrast-checker__notice-dark' ]\n\t);\n\n\tif (\n\t\t! ( backgroundColor || fallbackBackgroundColor ) ||\n\t\t! ( textColor || fallbackTextColor )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst colordBackgroundColor = colord(\n\t\tbackgroundColor || fallbackBackgroundColor\n\t);\n\tconst colordTextColor = colord( textColor || fallbackTextColor );\n\n\tconst hasTransparency =\n\t\tcolordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;\n\n\tif (\n\t\thasTransparency ||\n\t\tcolordTextColor.isReadable( colordBackgroundColor, {\n\t\t\tlevel: 'AA',\n\t\t\tsize:\n\t\t\t\tisLargeText || ( isLargeText !== false && fontSize >= 24 )\n\t\t\t\t\t? 'large'\n\t\t\t\t\t: 'small',\n\t\t} )\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ContrastCheckerMessage\n\t\t\tbackgroundColor={ backgroundColor }\n\t\t\ttextColor={ textColor }\n\t\t\tcolordBackgroundColor={ colordBackgroundColor }\n\t\t\tcolordTextColor={ colordTextColor }\n\t\t\tmsgStyle={ msgStyle }\n\t\t/>\n\t);\n}\n\nexport default ContrastChecker;\n"]}

package/build/components/default-block-appender/index.js

@@ -16,12 +16,12 @@ var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
 
-var _blocks = require("@wordpress/blocks");
-
 var _htmlEntities = require("@wordpress/html-entities");
 
 var _data = require("@wordpress/data");
 
+var _keycodes = require("@wordpress/keycodes");
+
 var _inserter = _interopRequireDefault(require("../inserter"));
 
 var _store = require("../../store");
@@ -48,14 +48,13 @@ exports.ZWNBSP = ZWNBSP;
 function DefaultBlockAppender(_ref) {
   let {
     isLocked,
-    isVisible,
     onAppend,
     showPrompt,
     placeholder,
     rootClientId
   } = _ref;
 
-  if (isLocked || !isVisible) {
+  if (isLocked) {
     return null;
   }
 
@@ -66,21 +65,24 @@ function DefaultBlockAppender(_ref) {
       'has-visible-prompt': showPrompt
     })
   }, (0, _element.createElement)("p", {
-    tabIndex: "0" // Only necessary for `useCanvasClickRedirect` to consider it
-    // as a target. Ideally it should consider any tabbable target,
-    // but the inserter is rendered in place while it should be
-    // rendered in a popover, just like it does for an empty
-    // paragraph block.
-    ,
-    contentEditable: true,
-    suppressContentEditableWarning: true // We want this element to be styled as a paragraph by themes.
+    tabIndex: "0" // We want this element to be styled as a paragraph by themes.
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
     ,
     role: "button",
-    "aria-label": (0, _i18n.__)('Add block') // A wrapping container for this one already has the wp-block className.
+    "aria-label": (0, _i18n.__)('Add default block') // A wrapping container for this one already has the wp-block className.
     ,
     className: "block-editor-default-block-appender__content",
-    onFocus: onAppend
+    onKeyDown: event => {
+      if (_keycodes.ENTER === event.keyCode || _keycodes.SPACE === event.keyCode) {
+        onAppend();
+      }
+    },
+    onClick: () => onAppend(),
+    onFocus: () => {
+      if (showPrompt) {
+        onAppend();
+      }
+    }
   }, showPrompt ? value : ZWNBSP), (0, _element.createElement)(_inserter.default, {
     rootClientId: rootClientId,
     position: "bottom right",
@@ -92,19 +94,14 @@ function DefaultBlockAppender(_ref) {
 var _default = (0, _compose.compose)((0, _data.withSelect)((select, ownProps) => {
   const {
     getBlockCount,
-    getBlockName,
-    isBlockValid,
     getSettings,
     getTemplateLock
   } = select(_store.store);
   const isEmpty = !getBlockCount(ownProps.rootClientId);
-  const isLastBlockDefault = getBlockName(ownProps.lastBlockClientId) === (0, _blocks.getDefaultBlockName)();
-  const isLastBlockValid = isBlockValid(ownProps.lastBlockClientId);
   const {
     bodyPlaceholder
   } = getSettings();
   return {
-    isVisible: isEmpty || !isLastBlockDefault || !isLastBlockValid,
     showPrompt: isEmpty,
     isLocked: !!getTemplateLock(ownProps.rootClientId),
     placeholder: bodyPlaceholder

package/build/components/default-block-appender/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/default-block-appender/index.js"],"names":["ZWNBSP","DefaultBlockAppender","isLocked","isVisible","onAppend","showPrompt","placeholder","rootClientId","value","select","ownProps","getBlockCount","getBlockName","isBlockValid","getSettings","getTemplateLock","blockEditorStore","isEmpty","isLastBlockDefault","lastBlockClientId","isLastBlockValid","bodyPlaceholder","dispatch","insertDefaultBlock","startTyping","undefined"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACO,MAAMA,MAAM,GAAG,QAAf;;;AAEA,SAASC,oBAAT,OAOH;AAAA,MAPkC;AACrCC,IAAAA,QADqC;AAErCC,IAAAA,SAFqC;AAGrCC,IAAAA,QAHqC;AAIrCC,IAAAA,UAJqC;AAKrCC,IAAAA,WALqC;AAMrCC,IAAAA;AANqC,GAOlC;;AACH,MAAKL,QAAQ,IAAI,CAAEC,SAAnB,EAA+B;AAC9B,WAAO,IAAP;AACA;;AAED,QAAMK,KAAK,GACV,kCAAgBF,WAAhB,KAAiC,cAAI,0BAAJ,CADlC;AAGA,SACC;AACC,2BAAsBC,YAAY,IAAI,EADvC;AAEC,IAAA,SAAS,EAAG,yBAAY,qCAAZ,EAAmD;AAC9D,4BAAsBF;AADwC,KAAnD;AAFb,KAMC;AACC,IAAA,QAAQ,EAAC,GADV,CAEC;AACA;AACA;AACA;AACA;AAND;AAOC,IAAA,eAAe,MAPhB;AAQC,IAAA,8BAA8B,MAR/B,CASC;AACA;AAVD;AAWC,IAAA,IAAI,EAAC,QAXN;AAYC,kBAAa,cAAI,WAAJ,CAZd,CAaC;AAbD;AAcC,IAAA,SAAS,EAAC,8CAdX;AAeC,IAAA,OAAO,EAAGD;AAfX,KAiBGC,UAAU,GAAGG,KAAH,GAAWR,MAjBxB,CAND,EAyBC,4BAAC,iBAAD;AACC,IAAA,YAAY,EAAGO,YADhB;AAEC,IAAA,QAAQ,EAAC,cAFV;AAGC,IAAA,UAAU,MAHX;AAIC,IAAA,qBAAqB;AAJtB,IAzBD,CADD;AAkCA;;eAEc,sBACd,sBAAY,CAAEE,MAAF,EAAUC,QAAV,KAAwB;AACnC,QAAM;AACLC,IAAAA,aADK;AAELC,IAAAA,YAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,WAJK;AAKLC,IAAAA;AALK,MAMFN,MAAM,CAAEO,YAAF,CANV;AAQA,QAAMC,OAAO,GAAG,CAAEN,aAAa,CAAED,QAAQ,CAACH,YAAX,CAA/B;AACA,QAAMW,kBAAkB,GACvBN,YAAY,CAAEF,QAAQ,CAACS,iBAAX,CAAZ,KACA,kCAFD;AAGA,QAAMC,gBAAgB,GAAGP,YAAY,CAAEH,QAAQ,CAACS,iBAAX,CAArC;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAsBP,WAAW,EAAvC;AAEA,SAAO;AACNX,IAAAA,SAAS,EAAEc,OAAO,IAAI,CAAEC,kBAAb,IAAmC,CAAEE,gBAD1C;AAENf,IAAAA,UAAU,EAAEY,OAFN;AAGNf,IAAAA,QAAQ,EAAE,CAAC,CAAEa,eAAe,CAAEL,QAAQ,CAACH,YAAX,CAHtB;AAIND,IAAAA,WAAW,EAAEe;AAJP,GAAP;AAMA,CAtBD,CADc,EAwBd,wBAAc,CAAEC,QAAF,EAAYZ,QAAZ,KAA0B;AACvC,QAAM;AAAEa,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAsCF,QAAQ,CACnDN,YADmD,CAApD;AAIA,SAAO;AACNZ,IAAAA,QAAQ,GAAG;AACV,YAAM;AAAEG,QAAAA;AAAF,UAAmBG,QAAzB;AAEAa,MAAAA,kBAAkB,CAAEE,SAAF,EAAalB,YAAb,CAAlB;AACAiB,MAAAA,WAAW;AACX;;AANK,GAAP;AAQA,CAbD,CAxBc,EAsCZvB,oBAtCY,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { compose } from '@wordpress/compose';\nimport { getDefaultBlockName } from '@wordpress/blocks';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { withSelect, withDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Zero width non-breaking space, used as padding for the paragraph when it is\n * empty.\n */\nexport const ZWNBSP = '\\ufeff';\n\nexport function DefaultBlockAppender( {\n\tisLocked,\n\tisVisible,\n\tonAppend,\n\tshowPrompt,\n\tplaceholder,\n\trootClientId,\n} ) {\n\tif ( isLocked || ! isVisible ) {\n\t\treturn null;\n\t}\n\n\tconst value =\n\t\tdecodeEntities( placeholder ) || __( 'Type / to choose a block' );\n\n\treturn (\n\t\t<div\n\t\t\tdata-root-client-id={ rootClientId || '' }\n\t\t\tclassName={ classnames( 'block-editor-default-block-appender', {\n\t\t\t\t'has-visible-prompt': showPrompt,\n\t\t\t} ) }\n\t\t>\n\t\t\t<p\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\t// Only necessary for `useCanvasClickRedirect` to consider it\n\t\t\t\t// as a target. Ideally it should consider any tabbable target,\n\t\t\t\t// but the inserter is rendered in place while it should be\n\t\t\t\t// rendered in a popover, just like it does for an empty\n\t\t\t\t// paragraph block.\n\t\t\t\tcontentEditable\n\t\t\t\tsuppressContentEditableWarning\n\t\t\t\t// We want this element to be styled as a paragraph by themes.\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={ __( 'Add block' ) }\n\t\t\t\t// A wrapping container for this one already has the wp-block className.\n\t\t\t\tclassName=\"block-editor-default-block-appender__content\"\n\t\t\t\tonFocus={ onAppend }\n\t\t\t>\n\t\t\t\t{ showPrompt ? value : ZWNBSP }\n\t\t\t</p>\n\t\t\t<Inserter\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tposition=\"bottom right\"\n\t\t\t\tisAppender\n\t\t\t\t__experimentalIsQuick\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default compose(\n\twithSelect( ( select, ownProps ) => {\n\t\tconst {\n\t\t\tgetBlockCount,\n\t\t\tgetBlockName,\n\t\t\tisBlockValid,\n\t\t\tgetSettings,\n\t\t\tgetTemplateLock,\n\t\t} = select( blockEditorStore );\n\n\t\tconst isEmpty = ! getBlockCount( ownProps.rootClientId );\n\t\tconst isLastBlockDefault =\n\t\t\tgetBlockName( ownProps.lastBlockClientId ) ===\n\t\t\tgetDefaultBlockName();\n\t\tconst isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );\n\t\tconst { bodyPlaceholder } = getSettings();\n\n\t\treturn {\n\t\t\tisVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,\n\t\t\tshowPrompt: isEmpty,\n\t\t\tisLocked: !! getTemplateLock( ownProps.rootClientId ),\n\t\t\tplaceholder: bodyPlaceholder,\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => {\n\t\tconst { insertDefaultBlock, startTyping } = dispatch(\n\t\t\tblockEditorStore\n\t\t);\n\n\t\treturn {\n\t\t\tonAppend() {\n\t\t\t\tconst { rootClientId } = ownProps;\n\n\t\t\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\t\t\tstartTyping();\n\t\t\t},\n\t\t};\n\t} )\n)( DefaultBlockAppender );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/default-block-appender/index.js"],"names":["ZWNBSP","DefaultBlockAppender","isLocked","onAppend","showPrompt","placeholder","rootClientId","value","event","ENTER","keyCode","SPACE","select","ownProps","getBlockCount","getSettings","getTemplateLock","blockEditorStore","isEmpty","bodyPlaceholder","dispatch","insertDefaultBlock","startTyping","undefined"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACO,MAAMA,MAAM,GAAG,QAAf;;;AAEA,SAASC,oBAAT,OAMH;AAAA,MANkC;AACrCC,IAAAA,QADqC;AAErCC,IAAAA,QAFqC;AAGrCC,IAAAA,UAHqC;AAIrCC,IAAAA,WAJqC;AAKrCC,IAAAA;AALqC,GAMlC;;AACH,MAAKJ,QAAL,EAAgB;AACf,WAAO,IAAP;AACA;;AAED,QAAMK,KAAK,GACV,kCAAgBF,WAAhB,KAAiC,cAAI,0BAAJ,CADlC;AAGA,SACC;AACC,2BAAsBC,YAAY,IAAI,EADvC;AAEC,IAAA,SAAS,EAAG,yBAAY,qCAAZ,EAAmD;AAC9D,4BAAsBF;AADwC,KAAnD;AAFb,KAMC;AACC,IAAA,QAAQ,EAAC,GADV,CAEC;AACA;AAHD;AAIC,IAAA,IAAI,EAAC,QAJN;AAKC,kBAAa,cAAI,mBAAJ,CALd,CAMC;AAND;AAOC,IAAA,SAAS,EAAC,8CAPX;AAQC,IAAA,SAAS,EAAKI,KAAF,IAAa;AACxB,UAAKC,oBAAUD,KAAK,CAACE,OAAhB,IAA2BC,oBAAUH,KAAK,CAACE,OAAhD,EAA0D;AACzDP,QAAAA,QAAQ;AACR;AACD,KAZF;AAaC,IAAA,OAAO,EAAG,MAAMA,QAAQ,EAbzB;AAcC,IAAA,OAAO,EAAG,MAAM;AACf,UAAKC,UAAL,EAAkB;AACjBD,QAAAA,QAAQ;AACR;AACD;AAlBF,KAoBGC,UAAU,GAAGG,KAAH,GAAWP,MApBxB,CAND,EA4BC,4BAAC,iBAAD;AACC,IAAA,YAAY,EAAGM,YADhB;AAEC,IAAA,QAAQ,EAAC,cAFV;AAGC,IAAA,UAAU,MAHX;AAIC,IAAA,qBAAqB;AAJtB,IA5BD,CADD;AAqCA;;eAEc,sBACd,sBAAY,CAAEM,MAAF,EAAUC,QAAV,KAAwB;AACnC,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA,WAAjB;AAA8BC,IAAAA;AAA9B,MAAkDJ,MAAM,CAC7DK,YAD6D,CAA9D;AAIA,QAAMC,OAAO,GAAG,CAAEJ,aAAa,CAAED,QAAQ,CAACP,YAAX,CAA/B;AACA,QAAM;AAAEa,IAAAA;AAAF,MAAsBJ,WAAW,EAAvC;AAEA,SAAO;AACNX,IAAAA,UAAU,EAAEc,OADN;AAENhB,IAAAA,QAAQ,EAAE,CAAC,CAAEc,eAAe,CAAEH,QAAQ,CAACP,YAAX,CAFtB;AAGND,IAAAA,WAAW,EAAEc;AAHP,GAAP;AAKA,CAbD,CADc,EAed,wBAAc,CAAEC,QAAF,EAAYP,QAAZ,KAA0B;AACvC,QAAM;AAAEQ,IAAAA,kBAAF;AAAsBC,IAAAA;AAAtB,MAAsCF,QAAQ,CACnDH,YADmD,CAApD;AAIA,SAAO;AACNd,IAAAA,QAAQ,GAAG;AACV,YAAM;AAAEG,QAAAA;AAAF,UAAmBO,QAAzB;AAEAQ,MAAAA,kBAAkB,CAAEE,SAAF,EAAajB,YAAb,CAAlB;AACAgB,MAAAA,WAAW;AACX;;AANK,GAAP;AAQA,CAbD,CAfc,EA6BZrB,oBA7BY,C","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { compose } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Inserter from '../inserter';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Zero width non-breaking space, used as padding for the paragraph when it is\n * empty.\n */\nexport const ZWNBSP = '\\ufeff';\n\nexport function DefaultBlockAppender( {\n\tisLocked,\n\tonAppend,\n\tshowPrompt,\n\tplaceholder,\n\trootClientId,\n} ) {\n\tif ( isLocked ) {\n\t\treturn null;\n\t}\n\n\tconst value =\n\t\tdecodeEntities( placeholder ) || __( 'Type / to choose a block' );\n\n\treturn (\n\t\t<div\n\t\t\tdata-root-client-id={ rootClientId || '' }\n\t\t\tclassName={ classnames( 'block-editor-default-block-appender', {\n\t\t\t\t'has-visible-prompt': showPrompt,\n\t\t\t} ) }\n\t\t>\n\t\t\t<p\n\t\t\t\ttabIndex=\"0\"\n\t\t\t\t// We want this element to be styled as a paragraph by themes.\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\t\trole=\"button\"\n\t\t\t\taria-label={ __( 'Add default block' ) }\n\t\t\t\t// A wrapping container for this one already has the wp-block className.\n\t\t\t\tclassName=\"block-editor-default-block-appender__content\"\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( ENTER === event.keyCode || SPACE === event.keyCode ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\tonClick={ () => onAppend() }\n\t\t\t\tonFocus={ () => {\n\t\t\t\t\tif ( showPrompt ) {\n\t\t\t\t\t\tonAppend();\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ showPrompt ? value : ZWNBSP }\n\t\t\t</p>\n\t\t\t<Inserter\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tposition=\"bottom right\"\n\t\t\t\tisAppender\n\t\t\t\t__experimentalIsQuick\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default compose(\n\twithSelect( ( select, ownProps ) => {\n\t\tconst { getBlockCount, getSettings, getTemplateLock } = select(\n\t\t\tblockEditorStore\n\t\t);\n\n\t\tconst isEmpty = ! getBlockCount( ownProps.rootClientId );\n\t\tconst { bodyPlaceholder } = getSettings();\n\n\t\treturn {\n\t\t\tshowPrompt: isEmpty,\n\t\t\tisLocked: !! getTemplateLock( ownProps.rootClientId ),\n\t\t\tplaceholder: bodyPlaceholder,\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => {\n\t\tconst { insertDefaultBlock, startTyping } = dispatch(\n\t\t\tblockEditorStore\n\t\t);\n\n\t\treturn {\n\t\t\tonAppend() {\n\t\t\t\tconst { rootClientId } = ownProps;\n\n\t\t\t\tinsertDefaultBlock( undefined, rootClientId );\n\t\t\t\tstartTyping();\n\t\t\t},\n\t\t};\n\t} )\n)( DefaultBlockAppender );\n"]}

package/build/components/default-style-picker/index.js

@@ -17,6 +17,8 @@ var _data = require("@wordpress/data");
 
 var _store = require("../../store");
 
+var _utils = require("../block-styles/utils");
+
 /**
  * WordPress dependencies
  */
@@ -56,14 +58,27 @@ function DefaultStylePicker(_ref) {
       value: name
     };
   })], [styles]);
+  const defaultStyleName = (0, _element.useMemo)(() => {
+    var _getDefaultStyle;
+
+    return (_getDefaultStyle = (0, _utils.getDefaultStyle)(styles)) === null || _getDefaultStyle === void 0 ? void 0 : _getDefaultStyle.name;
+  }, [styles]);
   const selectOnChange = (0, _element.useCallback)(blockStyle => {
     onUpdatePreferredStyleVariations(blockName, blockStyle);
-  }, [blockName, onUpdatePreferredStyleVariations]);
-  return onUpdatePreferredStyleVariations && (0, _element.createElement)(_components.SelectControl, {
+  }, [blockName, onUpdatePreferredStyleVariations]); // Until the functionality is migrated to global styles,
+  // only show the default style picker if a non-default style has already been selected.
+
+  if (!preferredStyle || preferredStyle === defaultStyleName) {
+    return null;
+  }
+
+  return onUpdatePreferredStyleVariations && (0, _element.createElement)("div", {
+    className: "default-style-picker__default-switcher"
+  }, (0, _element.createElement)(_components.SelectControl, {
     options: selectOptions,
     value: preferredStyle || '',
     label: (0, _i18n.__)('Default Style'),
     onChange: selectOnChange
-  });
+  }));
 }
 //# sourceMappingURL=index.js.map

package/build/components/default-style-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/default-style-picker/index.js"],"names":["DefaultStylePicker","blockName","preferredStyle","onUpdatePreferredStyleVariations","styles","select","settings","blockEditorStore","getSettings","preferredStyleVariations","__experimentalPreferredStyleVariations","value","onChange","blocksStore","getBlockStyles","selectOptions","label","map","name","selectOnChange","blockStyle"],"mappings":";;;;;;;AAIA;;AADA;;AAEA;;AACA;;AACA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;AAGe,SAASA,kBAAT,OAA6C;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC3D,QAAM;AACLC,IAAAA,cADK;AAELC,IAAAA,gCAFK;AAGLC,IAAAA;AAHK,MAIF,qBACDC,MAAF,IAAc;AAAA;;AACb,UAAMC,QAAQ,GAAGD,MAAM,CAAEE,YAAF,CAAN,CAA2BC,WAA3B,EAAjB;AACA,UAAMC,wBAAwB,GAC7BH,QAAQ,CAACI,sCADV;AAEA,WAAO;AACNR,MAAAA,cAAc,EAAEO,wBAAF,aAAEA,wBAAF,gDAAEA,wBAAwB,CAAEE,KAA5B,0DAAE,sBAAmCV,SAAnC,CADV;AAENE,MAAAA,gCAAgC,4BAC/BM,wBAD+B,aAC/BA,wBAD+B,uBAC/BA,wBAAwB,CAAEG,QADK,2EACO,IAHjC;AAINR,MAAAA,MAAM,EAAEC,MAAM,CAAEQ,aAAF,CAAN,CAAsBC,cAAtB,CAAsCb,SAAtC;AAJF,KAAP;AAMA,GAXE,EAYH,CAAEA,SAAF,CAZG,CAJJ;AAkBA,QAAMc,aAAa,GAAG,sBACrB,MAAM,CACL;AAAEC,IAAAA,KAAK,EAAE,cAAI,SAAJ,CAAT;AAA0BL,IAAAA,KAAK,EAAE;AAAjC,GADK,EAEL,GAAGP,MAAM,CAACa,GAAP,CAAY;AAAA,QAAE;AAAED,MAAAA,KAAF;AAASE,MAAAA;AAAT,KAAF;AAAA,WAAyB;AAAEF,MAAAA,KAAF;AAASL,MAAAA,KAAK,EAAEO;AAAhB,KAAzB;AAAA,GAAZ,CAFE,CADe,EAKrB,CAAEd,MAAF,CALqB,CAAtB;AAOA,QAAMe,cAAc,GAAG,0BACpBC,UAAF,IAAkB;AACjBjB,IAAAA,gCAAgC,CAAEF,SAAF,EAAamB,UAAb,CAAhC;AACA,GAHqB,EAItB,CAAEnB,SAAF,EAAaE,gCAAb,CAJsB,CAAvB;AAOA,SACCA,gCAAgC,IAC/B,4BAAC,yBAAD;AACC,IAAA,OAAO,EAAGY,aADX;AAEC,IAAA,KAAK,EAAGb,cAAc,IAAI,EAF3B;AAGC,IAAA,KAAK,EAAG,cAAI,eAAJ,CAHT;AAIC,IAAA,QAAQ,EAAGiB;AAJZ,IAFF;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nexport default function DefaultStylePicker( { blockName } ) {\n\tconst {\n\t\tpreferredStyle,\n\t\tonUpdatePreferredStyleVariations,\n\t\tstyles,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst preferredStyleVariations =\n\t\t\t\tsettings.__experimentalPreferredStyleVariations;\n\t\t\treturn {\n\t\t\t\tpreferredStyle: preferredStyleVariations?.value?.[ blockName ],\n\t\t\t\tonUpdatePreferredStyleVariations:\n\t\t\t\t\tpreferredStyleVariations?.onChange ?? null,\n\t\t\t\tstyles: select( blocksStore ).getBlockStyles( blockName ),\n\t\t\t};\n\t\t},\n\t\t[ blockName ]\n\t);\n\tconst selectOptions = useMemo(\n\t\t() => [\n\t\t\t{ label: __( 'Not set' ), value: '' },\n\t\t\t...styles.map( ( { label, name } ) => ( { label, value: name } ) ),\n\t\t],\n\t\t[ styles ]\n\t);\n\tconst selectOnChange = useCallback(\n\t\t( blockStyle ) => {\n\t\t\tonUpdatePreferredStyleVariations( blockName, blockStyle );\n\t\t},\n\t\t[ blockName, onUpdatePreferredStyleVariations ]\n\t);\n\n\treturn (\n\t\tonUpdatePreferredStyleVariations && (\n\t\t\t<SelectControl\n\t\t\t\toptions={ selectOptions }\n\t\t\t\tvalue={ preferredStyle || '' }\n\t\t\t\tlabel={ __( 'Default Style' ) }\n\t\t\t\tonChange={ selectOnChange }\n\t\t\t/>\n\t\t)\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/default-style-picker/index.js"],"names":["DefaultStylePicker","blockName","preferredStyle","onUpdatePreferredStyleVariations","styles","select","settings","blockEditorStore","getSettings","preferredStyleVariations","__experimentalPreferredStyleVariations","value","onChange","blocksStore","getBlockStyles","selectOptions","label","map","name","defaultStyleName","selectOnChange","blockStyle"],"mappings":";;;;;;;AAIA;;AADA;;AAEA;;AACA;;AACA;;AAKA;;AACA;;AAbA;AACA;AACA;;AAOA;AACA;AACA;AAIe,SAASA,kBAAT,OAA6C;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC3D,QAAM;AACLC,IAAAA,cADK;AAELC,IAAAA,gCAFK;AAGLC,IAAAA;AAHK,MAIF,qBACDC,MAAF,IAAc;AAAA;;AACb,UAAMC,QAAQ,GAAGD,MAAM,CAAEE,YAAF,CAAN,CAA2BC,WAA3B,EAAjB;AACA,UAAMC,wBAAwB,GAC7BH,QAAQ,CAACI,sCADV;AAEA,WAAO;AACNR,MAAAA,cAAc,EAAEO,wBAAF,aAAEA,wBAAF,gDAAEA,wBAAwB,CAAEE,KAA5B,0DAAE,sBAAmCV,SAAnC,CADV;AAENE,MAAAA,gCAAgC,4BAC/BM,wBAD+B,aAC/BA,wBAD+B,uBAC/BA,wBAAwB,CAAEG,QADK,2EACO,IAHjC;AAINR,MAAAA,MAAM,EAAEC,MAAM,CAAEQ,aAAF,CAAN,CAAsBC,cAAtB,CAAsCb,SAAtC;AAJF,KAAP;AAMA,GAXE,EAYH,CAAEA,SAAF,CAZG,CAJJ;AAkBA,QAAMc,aAAa,GAAG,sBACrB,MAAM,CACL;AAAEC,IAAAA,KAAK,EAAE,cAAI,SAAJ,CAAT;AAA0BL,IAAAA,KAAK,EAAE;AAAjC,GADK,EAEL,GAAGP,MAAM,CAACa,GAAP,CAAY;AAAA,QAAE;AAAED,MAAAA,KAAF;AAASE,MAAAA;AAAT,KAAF;AAAA,WAAyB;AAAEF,MAAAA,KAAF;AAASL,MAAAA,KAAK,EAAEO;AAAhB,KAAzB;AAAA,GAAZ,CAFE,CADe,EAKrB,CAAEd,MAAF,CALqB,CAAtB;AAOA,QAAMe,gBAAgB,GAAG,sBAAS;AAAA;;AAAA,+BAAM,4BAAiBf,MAAjB,CAAN,qDAAM,iBAA2Bc,IAAjC;AAAA,GAAT,EAAgD,CACxEd,MADwE,CAAhD,CAAzB;AAGA,QAAMgB,cAAc,GAAG,0BACpBC,UAAF,IAAkB;AACjBlB,IAAAA,gCAAgC,CAAEF,SAAF,EAAaoB,UAAb,CAAhC;AACA,GAHqB,EAItB,CAAEpB,SAAF,EAAaE,gCAAb,CAJsB,CAAvB,CA7B2D,CAoC3D;AACA;;AACA,MAAK,CAAED,cAAF,IAAoBA,cAAc,KAAKiB,gBAA5C,EAA+D;AAC9D,WAAO,IAAP;AACA;;AAED,SACChB,gCAAgC,IAC/B;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,yBAAD;AACC,IAAA,OAAO,EAAGY,aADX;AAEC,IAAA,KAAK,EAAGb,cAAc,IAAI,EAF3B;AAGC,IAAA,KAAK,EAAG,cAAI,eAAJ,CAHT;AAIC,IAAA,QAAQ,EAAGkB;AAJZ,IADD,CAFF;AAYA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useMemo, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { getDefaultStyle } from '../block-styles/utils';\n\nexport default function DefaultStylePicker( { blockName } ) {\n\tconst {\n\t\tpreferredStyle,\n\t\tonUpdatePreferredStyleVariations,\n\t\tstyles,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst preferredStyleVariations =\n\t\t\t\tsettings.__experimentalPreferredStyleVariations;\n\t\t\treturn {\n\t\t\t\tpreferredStyle: preferredStyleVariations?.value?.[ blockName ],\n\t\t\t\tonUpdatePreferredStyleVariations:\n\t\t\t\t\tpreferredStyleVariations?.onChange ?? null,\n\t\t\t\tstyles: select( blocksStore ).getBlockStyles( blockName ),\n\t\t\t};\n\t\t},\n\t\t[ blockName ]\n\t);\n\tconst selectOptions = useMemo(\n\t\t() => [\n\t\t\t{ label: __( 'Not set' ), value: '' },\n\t\t\t...styles.map( ( { label, name } ) => ( { label, value: name } ) ),\n\t\t],\n\t\t[ styles ]\n\t);\n\tconst defaultStyleName = useMemo( () => getDefaultStyle( styles )?.name, [\n\t\tstyles,\n\t] );\n\tconst selectOnChange = useCallback(\n\t\t( blockStyle ) => {\n\t\t\tonUpdatePreferredStyleVariations( blockName, blockStyle );\n\t\t},\n\t\t[ blockName, onUpdatePreferredStyleVariations ]\n\t);\n\n\t// Until the functionality is migrated to global styles,\n\t// only show the default style picker if a non-default style has already been selected.\n\tif ( ! preferredStyle || preferredStyle === defaultStyleName ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tonUpdatePreferredStyleVariations && (\n\t\t\t<div className=\"default-style-picker__default-switcher\">\n\t\t\t\t<SelectControl\n\t\t\t\t\toptions={ selectOptions }\n\t\t\t\t\tvalue={ preferredStyle || '' }\n\t\t\t\t\tlabel={ __( 'Default Style' ) }\n\t\t\t\t\tonChange={ selectOnChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"]}

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

@@ -16,38 +16,38 @@ var _i18n = require("@wordpress/i18n");
  * WordPress dependencies
  */
 const FONT_STYLES = [{
-  name: (0, _i18n.__)('Regular'),
+  name: (0, _i18n._x)('Regular', 'font style'),
   value: 'normal'
 }, {
-  name: (0, _i18n.__)('Italic'),
+  name: (0, _i18n._x)('Italic', 'font style'),
   value: 'italic'
 }];
 const FONT_WEIGHTS = [{
-  name: (0, _i18n.__)('Thin'),
+  name: (0, _i18n._x)('Thin', 'font weight'),
   value: '100'
 }, {
-  name: (0, _i18n.__)('Extra Light'),
+  name: (0, _i18n._x)('Extra Light', 'font weight'),
   value: '200'
 }, {
-  name: (0, _i18n.__)('Light'),
+  name: (0, _i18n._x)('Light', 'font weight'),
   value: '300'
 }, {
-  name: (0, _i18n.__)('Regular'),
+  name: (0, _i18n._x)('Regular', 'font weight'),
   value: '400'
 }, {
-  name: (0, _i18n.__)('Medium'),
+  name: (0, _i18n._x)('Medium', 'font weight'),
   value: '500'
 }, {
-  name: (0, _i18n.__)('Semi Bold'),
+  name: (0, _i18n._x)('Semi Bold', 'font weight'),
   value: '600'
 }, {
-  name: (0, _i18n.__)('Bold'),
+  name: (0, _i18n._x)('Bold', 'font weight'),
   value: '700'
 }, {
-  name: (0, _i18n.__)('Extra Bold'),
+  name: (0, _i18n._x)('Extra Bold', 'font weight'),
   value: '800'
 }, {
-  name: (0, _i18n.__)('Black'),
+  name: (0, _i18n._x)('Black', 'font weight'),
   value: '900'
 }];
 /**