@wordpress/block-editor 8.0.16 → 8.1.0

package/build-module/components/colors-gradients/dropdown.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * WordPress dependencies
+ */
+
+import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, FlexItem, ColorIndicator, Dropdown } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import ColorGradientControl from './control';
+export default function ColorGradientSettingsDropdown(_ref) {
+  let {
+    colors,
+    gradients,
+    disableCustomColors,
+    disableCustomGradients,
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar,
+    enableAlpha,
+    settings
+  } = _ref;
+  let dropdownPosition;
+
+  if (__experimentalIsRenderedInSidebar) {
+    dropdownPosition = 'bottom left';
+  }
+
+  return createElement(ItemGroup, {
+    isBordered: true,
+    isSeparated: true,
+    className: "block-editor-panel-color-gradient-settings__item-group"
+  }, settings.map((setting, index) => setting && createElement(Dropdown, {
+    key: index,
+    position: dropdownPosition,
+    className: "block-editor-panel-color-gradient-settings__dropdown",
+    contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
+    renderToggle: _ref2 => {
+      var _setting$gradientValu;
+
+      let {
+        isOpen,
+        onToggle
+      } = _ref2;
+      return createElement(Item, {
+        onClick: onToggle,
+        className: classnames('block-editor-panel-color-gradient-settings__item', {
+          'is-open': isOpen
+        })
+      }, createElement(HStack, {
+        justify: "flex-start"
+      }, createElement(ColorIndicator, {
+        className: "block-editor-panel-color-gradient-settings__color-indicator",
+        colorValue: (_setting$gradientValu = setting.gradientValue) !== null && _setting$gradientValu !== void 0 ? _setting$gradientValu : setting.colorValue
+      }), createElement(FlexItem, null, setting.label)));
+    },
+    renderContent: () => createElement(ColorGradientControl, _extends({
+      showTitle: false,
+      colors,
+      gradients,
+      disableCustomColors,
+      disableCustomGradients,
+      __experimentalHasMultipleOrigins,
+      __experimentalIsRenderedInSidebar,
+      enableAlpha
+    }, setting))
+  })));
+}
+//# sourceMappingURL=dropdown.js.map

package/build-module/components/colors-gradients/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/dropdown.js"],"names":["classnames","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","FlexItem","ColorIndicator","Dropdown","ColorGradientControl","ColorGradientSettingsDropdown","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","enableAlpha","settings","dropdownPosition","map","setting","index","isOpen","onToggle","gradientValue","colorValue","label"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SACCC,uBAAuB,IAAIC,SAD5B,EAECC,kBAAkB,IAAIC,IAFvB,EAGCC,oBAAoB,IAAIC,MAHzB,EAICC,QAJD,EAKCC,cALD,EAMCC,QAND,QAOO,uBAPP;AASA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,WAAjC;AAEA,eAAe,SAASC,6BAAT,OASX;AAAA,MATmD;AACtDC,IAAAA,MADsD;AAEtDC,IAAAA,SAFsD;AAGtDC,IAAAA,mBAHsD;AAItDC,IAAAA,sBAJsD;AAKtDC,IAAAA,gCALsD;AAMtDC,IAAAA,iCANsD;AAOtDC,IAAAA,WAPsD;AAQtDC,IAAAA;AARsD,GASnD;AACH,MAAIC,gBAAJ;;AACA,MAAKH,iCAAL,EAAyC;AACxCG,IAAAA,gBAAgB,GAAG,aAAnB;AACA;;AAED,SACC,cAAC,SAAD;AACC,IAAA,UAAU,MADX;AAEC,IAAA,WAAW,MAFZ;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGD,QAAQ,CAACE,GAAT,CACD,CAAEC,OAAF,EAAWC,KAAX,KACCD,OAAO,IACN,cAAC,QAAD;AACC,IAAA,GAAG,EAAGC,KADP;AAEC,IAAA,QAAQ,EAAGH,gBAFZ;AAGC,IAAA,SAAS,EAAC,sDAHX;AAIC,IAAA,gBAAgB,EAAC,8DAJlB;AAKC,IAAA,YAAY,EAAG,SAA4B;AAAA;;AAAA,UAA1B;AAAEI,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAA0B;AAC1C,aACC,cAAC,IAAD;AACC,QAAA,OAAO,EAAGA,QADX;AAEC,QAAA,SAAS,EAAGzB,UAAU,CACrB,kDADqB,EAErB;AAAE,qBAAWwB;AAAb,SAFqB;AAFvB,SAOC,cAAC,MAAD;AAAQ,QAAA,OAAO,EAAC;AAAhB,SACC,cAAC,cAAD;AACC,QAAA,SAAS,EAAC,6DADX;AAEC,QAAA,UAAU,2BACTF,OAAO,CAACI,aADC,yEAETJ,OAAO,CAACK;AAJV,QADD,EAQC,cAAC,QAAD,QACGL,OAAO,CAACM,KADX,CARD,CAPD,CADD;AAsBA,KA5BF;AA6BC,IAAA,aAAa,EAAG,MACf,cAAC,oBAAD;AACC,MAAA,SAAS,EAAG,KADb;AAGEhB,MAAAA,MAHF;AAIEC,MAAAA,SAJF;AAKEC,MAAAA,mBALF;AAMEC,MAAAA,sBANF;AAOEC,MAAAA,gCAPF;AAQEC,MAAAA,iCARF;AASEC,MAAAA;AATF,OAUKI,OAVL;AA9BF,IAHD,CALH,CADD;AA0DA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n\tColorIndicator,\n\tDropdown,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\n\nexport default function ColorGradientSettingsDropdown( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalHasMultipleOrigins,\n\t__experimentalIsRenderedInSidebar,\n\tenableAlpha,\n\tsettings,\n} ) {\n\tlet dropdownPosition;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = 'bottom left';\n\t}\n\n\treturn (\n\t\t<ItemGroup\n\t\t\tisBordered\n\t\t\tisSeparated\n\t\t\tclassName=\"block-editor-panel-color-gradient-settings__item-group\"\n\t\t>\n\t\t\t{ settings.map(\n\t\t\t\t( setting, index ) =>\n\t\t\t\t\tsetting && (\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__dropdown\"\n\t\t\t\t\t\t\tcontentClassName=\"block-editor-panel-color-gradient-settings__dropdown-content\"\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__item',\n\t\t\t\t\t\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetting.gradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetting.colorValue\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t{ setting.label }\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t\t\t\t{ ...{\n\t\t\t\t\t\t\t\t\t\tcolors,\n\t\t\t\t\t\t\t\t\t\tgradients,\n\t\t\t\t\t\t\t\t\t\tdisableCustomColors,\n\t\t\t\t\t\t\t\t\t\tdisableCustomGradients,\n\t\t\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins,\n\t\t\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar,\n\t\t\t\t\t\t\t\t\t\tenableAlpha,\n\t\t\t\t\t\t\t\t\t\t...setting,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t) }\n\t\t</ItemGroup>\n\t);\n}\n"]}

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -10,13 +10,13 @@ import { every, isEmpty } from 'lodash';
  * WordPress dependencies
  */
 
-import { PanelBody, ColorIndicator } from '@wordpress/components';
+import { __experimentalSpacer as Spacer, ColorIndicator, PanelBody } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
-import ColorGradientControl from './control';
+import ColorGradientSettingsDropdown from './dropdown';
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
 import useSetting from '../use-setting';
@@ -99,9 +99,8 @@ export const PanelColorGradientSettingsInner = _ref3 => {
   return createElement(PanelBody, _extends({
     className: classnames('block-editor-panel-color-gradient-settings', className),
     title: showTitle ? titleElement : undefined
-  }, props), settings.map((setting, index) => createElement(ColorGradientControl, _extends({
-    showTitle: showTitle,
-    key: index,
+  }, props), createElement(ColorGradientSettingsDropdown, {
+    settings: settings,
     colors,
     gradients,
     disableCustomColors,
@@ -109,7 +108,9 @@ export const PanelColorGradientSettingsInner = _ref3 => {
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
     enableAlpha
-  }, setting))), children);
+  }), !!children && createElement(Fragment, null, createElement(Spacer, {
+    marginY: 4
+  }), " ", children));
 };
 
 const PanelColorGradientSettingsSingleSelect = props => {

package/build-module/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":["classnames","every","isEmpty","PanelBody","ColorIndicator","sprintf","__","ColorGradientControl","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","useCommonSingleMultipleSelects","useMultipleOriginColorsAndGradients","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":["classnames","every","isEmpty","__experimentalSpacer","Spacer","ColorIndicator","PanelBody","sprintf","__","ColorGradientSettingsDropdown","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","useCommonSingleMultipleSelects","useMultipleOriginColorsAndGradients","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-module/components/colors-gradients/panel-color-gradient-settings.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -18,13 +18,15 @@ import { blockSettingsScreens } from '../block-settings';
 export default function PanelColorGradientSettings(_ref) {
   let {
     settings,
-    title
+    title,
+    children
   } = _ref;
   const navigation = useNavigation();
   const mappedSettings = useMemo(() => {
     return settings.map(_ref2 => {
       let {
         onColorChange,
+        onColorCleared,
         colorValue,
         onGradientChange,
         gradientValue,
@@ -37,6 +39,7 @@ export default function PanelColorGradientSettings(_ref) {
             colorValue: gradientValue || colorValue,
             gradientValue,
             onGradientChange,
+            onColorCleared,
             label
           });
         },
@@ -46,8 +49,8 @@ export default function PanelColorGradientSettings(_ref) {
       });
     });
   }, [settings]);
-  return createElement(PanelBody, {
+  return createElement(Fragment, null, createElement(PanelBody, {
     title: title
-  }, mappedSettings);
+  }, mappedSettings), createElement(PanelBody, null, children));
 }
 //# sourceMappingURL=panel-color-gradient-settings.native.js.map

package/build-module/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":["useNavigation","ColorControl","PanelBody","useMemo","blockSettingsScreens","PanelColorGradientSettings","settings","title","navigation","mappedSettings","map","onColorChange","colorValue","onGradientChange","gradientValue","label","navigate","color"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,SAAvB,QAAwC,uBAAxC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,mBAArC;AAEA,eAAe,SAASC,0BAAT,OAA2D;AAAA,MAAtB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAsB;AACzE,QAAMC,UAAU,GAAGR,aAAa,EAAhC;AAEA,QAAMS,cAAc,GAAGN,OAAO,CAAE,MAAM;AACrC,WAAOG,QAAQ,CAACI,GAAT,CACN;AAAA,UAAE;AACDC,QAAAA,aADC;AAEDC,QAAAA,UAFC;AAGDC,QAAAA,gBAHC;AAIDC,QAAAA,aAJC;AAKDC,QAAAA;AALC,OAAF;AAAA,aAOC,cAAC,YAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfP,UAAAA,UAAU,CAACQ,QAAX,CAAqBZ,oBAAoB,CAACa,KAA1C,EAAiD;AAChDN,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,GAzB6B,EAyB3B,CAAEN,QAAF,CAzB2B,CAA9B;AA2BA,SAAO,cAAC,SAAD;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":["useNavigation","ColorControl","PanelBody","useMemo","blockSettingsScreens","PanelColorGradientSettings","settings","title","children","navigation","mappedSettings","map","onColorChange","onColorCleared","colorValue","onGradientChange","gradientValue","label","navigate","color"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,YAAT,EAAuBC,SAAvB,QAAwC,uBAAxC;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,mBAArC;AAEA,eAAe,SAASC,0BAAT,OAIX;AAAA,MAJgD;AACnDC,IAAAA,QADmD;AAEnDC,IAAAA,KAFmD;AAGnDC,IAAAA;AAHmD,GAIhD;AACH,QAAMC,UAAU,GAAGT,aAAa,EAAhC;AAEA,QAAMU,cAAc,GAAGP,OAAO,CAAE,MAAM;AACrC,WAAOG,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,cAAC,YAAD;AACC,QAAA,OAAO,EAAG,MAAM;AACfR,UAAAA,UAAU,CAACS,QAAX,CAAqBd,oBAAoB,CAACe,KAA1C,EAAiD;AAChDP,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,GA3B6B,EA2B3B,CAAER,QAAF,CA3B2B,CAA9B;AA6BA,SACC,8BACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGC;AAAnB,KAA6BG,cAA7B,CADD,EAEC,cAAC,SAAD,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-module/components/contrast-checker/index.js

@@ -21,15 +21,24 @@ function ContrastCheckerMessage(_ref) {
     colordBackgroundColor,
     colordTextColor,
     backgroundColor,
-    textColor
+    textColor,
+    shouldShowTransparencyWarning
   } = _ref;
-  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? __('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : __('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 = __('Transparent text may be hard for people to read.');
+  } else {
+    msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? __('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : __('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.
 
+
   useEffect(() => {
-    speak(__('This color combination may be hard for people to read.'));
+    const speakMsg = shouldShowTransparencyWarning ? __('Transparent text may be hard for people to read.') : __('This color combination may be hard for people to read.');
+    speak(speakMsg);
   }, [backgroundColor, textColor]);
   return createElement("div", {
     className: "block-editor-contrast-checker"
@@ -48,7 +57,8 @@ function ContrastChecker(_ref2) {
     fontSize,
     // font size value in pixels
     isLargeText,
-    textColor
+    textColor,
+    enableAlphaChecker = false
   } = _ref2;
 
   if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
@@ -57,20 +67,35 @@ function ContrastChecker(_ref2) {
 
   const colordBackgroundColor = colord(backgroundColor || fallbackBackgroundColor);
   const colordTextColor = 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 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-module/components/contrast-checker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["colord","extend","namesPlugin","a11yPlugin","speak","__","Notice","useEffect","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","msg","brightness","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","alpha","isReadable","level","size"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAT,QAAsB,iBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,SAAT,QAA0B,oBAA1B;AAEAN,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;;AAEA,SAASK,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,GACGT,EAAE,CACF,0HADE,CADL,GAIGA,EAAE,CACF,0HADE,CALN,CADG,CAUH;AACA;AACA;AACA;;AACAE,EAAAA,SAAS,CAAE,MAAM;AAChBH,IAAAA,KAAK,CAAEC,EAAE,CAAE,wDAAF,CAAJ,CAAL;AACA,GAFQ,EAEN,CAAEM,eAAF,EAAmBC,SAAnB,CAFM,CAAT;AAIA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,MAAD;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,GAAGT,MAAM,CACnCW,eAAe,IAAIK,uBADgB,CAApC;AAGA,QAAMN,eAAe,GAAGV,MAAM,CAAEY,SAAS,IAAIK,iBAAf,CAA9B;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,cAAC,sBAAD;AACC,IAAA,eAAe,EAAGP,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,qBAAqB,EAAGH,qBAHzB;AAIC,IAAA,eAAe,EAAGC;AAJnB,IADD;AAQA;;AAED,eAAeK,eAAf","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":["colord","extend","namesPlugin","a11yPlugin","speak","__","Notice","useEffect","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","shouldShowTransparencyWarning","msg","brightness","speakMsg","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","enableAlphaChecker","textColorHasTransparency","alpha","backgroundColorHasTransparency","hasTransparency","isReadable","level","size"],"mappings":"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","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-module/components/contrast-checker/index.native.js

@@ -0,0 +1,90 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
+/**
+ * WordPress dependencies
+ */
+
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { Icon, warning } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import styles from './style.scss';
+extend([namesPlugin, a11yPlugin]);
+
+function ContrastCheckerMessage(_ref) {
+  let {
+    colordBackgroundColor,
+    colordTextColor,
+    backgroundColor,
+    textColor,
+    msgStyle
+  } = _ref;
+  const msg = colordBackgroundColor.brightness() < colordTextColor.brightness() ? __('This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.') : __('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.
+
+  useEffect(() => {
+    speak(__('This color combination may be hard for people to read.'));
+  }, [backgroundColor, textColor]);
+  const iconStyle = usePreferredColorSchemeStyle(styles['block-editor-contrast-checker__icon'], styles['block-editor-contrast-checker__icon-dark']);
+  return createElement(View, {
+    style: styles['block-editor-contrast-checker']
+  }, createElement(Icon, {
+    style: iconStyle,
+    icon: warning
+  }), createElement(Text, {
+    style: msgStyle
+  }, msg));
+}
+
+function ContrastChecker(_ref2) {
+  let {
+    backgroundColor,
+    fallbackBackgroundColor,
+    fallbackTextColor,
+    fontSize,
+    // font size value in pixels
+    isLargeText,
+    textColor
+  } = _ref2;
+  const msgStyle = usePreferredColorSchemeStyle(styles['block-editor-contrast-checker__notice'], styles['block-editor-contrast-checker__notice-dark']);
+
+  if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
+    return null;
+  }
+
+  const colordBackgroundColor = colord(backgroundColor || fallbackBackgroundColor);
+  const colordTextColor = 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 createElement(ContrastCheckerMessage, {
+    backgroundColor: backgroundColor,
+    textColor: textColor,
+    colordBackgroundColor: colordBackgroundColor,
+    colordTextColor: colordTextColor,
+    msgStyle: msgStyle
+  });
+}
+
+export default ContrastChecker;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.native.js"],"names":["Text","View","colord","extend","namesPlugin","a11yPlugin","speak","__","useEffect","usePreferredColorSchemeStyle","Icon","warning","styles","ContrastCheckerMessage","colordBackgroundColor","colordTextColor","backgroundColor","textColor","msgStyle","msg","brightness","iconStyle","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","alpha","isReadable","level","size"],"mappings":"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","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-module/components/default-block-appender/index.js

@@ -10,9 +10,9 @@ import classnames from 'classnames';
 
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
-import { getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -28,14 +28,13 @@ export const ZWNBSP = '\ufeff';
 export function DefaultBlockAppender(_ref) {
   let {
     isLocked,
-    isVisible,
     onAppend,
     showPrompt,
     placeholder,
     rootClientId
   } = _ref;
 
-  if (isLocked || !isVisible) {
+  if (isLocked) {
     return null;
   }
 
@@ -47,21 +46,24 @@ export function DefaultBlockAppender(_ref) {
       'has-visible-prompt': showPrompt
     })
   }, 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": __('Add block') // A wrapping container for this one already has the wp-block className.
+    "aria-label": __('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 (ENTER === event.keyCode || SPACE === event.keyCode) {
+        onAppend();
+      }
+    },
+    onClick: () => onAppend(),
+    onFocus: () => {
+      if (showPrompt) {
+        onAppend();
+      }
+    }
   }, showPrompt ? value : ZWNBSP), createElement(Inserter, {
     rootClientId: rootClientId,
     position: "bottom right",
@@ -72,19 +74,14 @@ export function DefaultBlockAppender(_ref) {
 export default compose(withSelect((select, ownProps) => {
   const {
     getBlockCount,
-    getBlockName,
-    isBlockValid,
     getSettings,
     getTemplateLock
   } = select(blockEditorStore);
   const isEmpty = !getBlockCount(ownProps.rootClientId);
-  const isLastBlockDefault = getBlockName(ownProps.lastBlockClientId) === getDefaultBlockName();
-  const isLastBlockValid = isBlockValid(ownProps.lastBlockClientId);
   const {
     bodyPlaceholder
   } = getSettings();
   return {
-    isVisible: isEmpty || !isLastBlockDefault || !isLastBlockValid,
     showPrompt: isEmpty,
     isLocked: !!getTemplateLock(ownProps.rootClientId),
     placeholder: bodyPlaceholder

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/default-block-appender/index.js"],"names":["classnames","__","compose","getDefaultBlockName","decodeEntities","withSelect","withDispatch","Inserter","store","blockEditorStore","ZWNBSP","DefaultBlockAppender","isLocked","isVisible","onAppend","showPrompt","placeholder","rootClientId","value","select","ownProps","getBlockCount","getBlockName","isBlockValid","getSettings","getTemplateLock","isEmpty","isLastBlockDefault","lastBlockClientId","isLastBlockValid","bodyPlaceholder","dispatch","insertDefaultBlock","startTyping","undefined"],"mappings":"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","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":["classnames","__","compose","decodeEntities","withSelect","withDispatch","ENTER","SPACE","Inserter","store","blockEditorStore","ZWNBSP","DefaultBlockAppender","isLocked","onAppend","showPrompt","placeholder","rootClientId","value","event","keyCode","select","ownProps","getBlockCount","getSettings","getTemplateLock","isEmpty","bodyPlaceholder","dispatch","insertDefaultBlock","startTyping","undefined"],"mappings":"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","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-module/components/default-style-picker/index.js

@@ -13,6 +13,7 @@ import { useSelect } from '@wordpress/data';
  */
 
 import { store as blockEditorStore } from '../../store';
+import { getDefaultStyle } from '../block-styles/utils';
 export default function DefaultStylePicker(_ref) {
   let {
     blockName
@@ -45,14 +46,27 @@ export default function DefaultStylePicker(_ref) {
       value: name
     };
   })], [styles]);
+  const defaultStyleName = useMemo(() => {
+    var _getDefaultStyle;
+
+    return (_getDefaultStyle = getDefaultStyle(styles)) === null || _getDefaultStyle === void 0 ? void 0 : _getDefaultStyle.name;
+  }, [styles]);
   const selectOnChange = useCallback(blockStyle => {
     onUpdatePreferredStyleVariations(blockName, blockStyle);
-  }, [blockName, onUpdatePreferredStyleVariations]);
-  return onUpdatePreferredStyleVariations && createElement(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 && createElement("div", {
+    className: "default-style-picker__default-switcher"
+  }, createElement(SelectControl, {
     options: selectOptions,
     value: preferredStyle || '',
     label: __('Default Style'),
     onChange: selectOnChange
-  });
+  }));
 }
 //# sourceMappingURL=index.js.map