@wordpress/block-editor 8.0.17 → 8.1.2-next.f435e9e01b.0

package/build/components/colors-gradients/tools-panel-color-dropdown.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ToolsPanelColorDropdown;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _control = _interopRequireDefault(require("./control"));
+
+var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("./use-multiple-origin-colors-and-gradients"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ToolsPanelColorDropdown(_ref) {
+  var _settings$gradientVal;
+
+  let {
+    settings,
+    enableAlpha,
+    ...otherProps
+  } = _ref;
+  const colorGradientSettings = (0, _useMultipleOriginColorsAndGradients.default)();
+  const controlSettings = { ...colorGradientSettings,
+    clearable: false,
+    enableAlpha,
+    label: settings.label,
+    onColorChange: settings.onColorChange,
+    onGradientChange: settings.onGradientChange,
+    colorValue: settings.colorValue,
+    gradientValue: settings.gradientValue
+  };
+  const selectedColor = (_settings$gradientVal = settings.gradientValue) !== null && _settings$gradientVal !== void 0 ? _settings$gradientVal : settings.colorValue;
+  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, (0, _extends2.default)({
+    hasValue: settings.hasValue,
+    label: settings.label,
+    onDeselect: settings.onDeselect,
+    isShownByDefault: settings.isShownByDefault,
+    resetAllFilter: settings.resetAllFilter
+  }, otherProps, {
+    className: "block-editor-tools-panel-color-gradient-settings__item"
+  }), (0, _element.createElement)(_components.Dropdown, {
+    className: "block-editor-tools-panel-color-dropdown",
+    contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
+    renderToggle: _ref2 => {
+      let {
+        isOpen,
+        onToggle
+      } = _ref2;
+      return (0, _element.createElement)(_components.Button, {
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        className: (0, _classnames.default)('block-editor-panel-color-gradient-settings__dropdown', {
+          'is-open': isOpen
+        })
+      }, (0, _element.createElement)(_components.__experimentalHStack, {
+        justify: "flex-start"
+      }, (0, _element.createElement)(_components.ColorIndicator, {
+        className: "block-editor-panel-color-gradient-settings__color-indicator",
+        colorValue: selectedColor
+      }), (0, _element.createElement)(_components.FlexItem, null, settings.label)));
+    },
+    renderContent: () => (0, _element.createElement)(_control.default, (0, _extends2.default)({
+      showTitle: false,
+      __experimentalHasMultipleOrigins: true,
+      __experimentalIsRenderedInSidebar: true,
+      enableAlpha: true
+    }, controlSettings))
+  }));
+}
+//# sourceMappingURL=tools-panel-color-dropdown.js.map

package/build/components/colors-gradients/tools-panel-color-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/tools-panel-color-dropdown.js"],"names":["ToolsPanelColorDropdown","settings","enableAlpha","otherProps","colorGradientSettings","controlSettings","clearable","label","onColorChange","onGradientChange","colorValue","gradientValue","selectedColor","hasValue","onDeselect","isShownByDefault","resetAllFilter","isOpen","onToggle"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAYA;;AACA;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AAIe,SAASA,uBAAT,OAIX;AAAA;;AAAA,MAJ6C;AAChDC,IAAAA,QADgD;AAEhDC,IAAAA,WAFgD;AAGhD,OAAGC;AAH6C,GAI7C;AACH,QAAMC,qBAAqB,GAAG,mDAA9B;AACA,QAAMC,eAAe,GAAG,EACvB,GAAGD,qBADoB;AAEvBE,IAAAA,SAAS,EAAE,KAFY;AAGvBJ,IAAAA,WAHuB;AAIvBK,IAAAA,KAAK,EAAEN,QAAQ,CAACM,KAJO;AAKvBC,IAAAA,aAAa,EAAEP,QAAQ,CAACO,aALD;AAMvBC,IAAAA,gBAAgB,EAAER,QAAQ,CAACQ,gBANJ;AAOvBC,IAAAA,UAAU,EAAET,QAAQ,CAACS,UAPE;AAQvBC,IAAAA,aAAa,EAAEV,QAAQ,CAACU;AARD,GAAxB;AAUA,QAAMC,aAAa,4BAAGX,QAAQ,CAACU,aAAZ,yEAA6BV,QAAQ,CAACS,UAAzD;AAEA,SACC,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAGT,QAAQ,CAACY,QADrB;AAEC,IAAA,KAAK,EAAGZ,QAAQ,CAACM,KAFlB;AAGC,IAAA,UAAU,EAAGN,QAAQ,CAACa,UAHvB;AAIC,IAAA,gBAAgB,EAAGb,QAAQ,CAACc,gBAJ7B;AAKC,IAAA,cAAc,EAAGd,QAAQ,CAACe;AAL3B,KAMMb,UANN;AAOC,IAAA,SAAS,EAAC;AAPX,MASC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,yCADX;AAEC,IAAA,gBAAgB,EAAC,8DAFlB;AAGC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEc,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,kBAAD;AACC,QAAA,OAAO,EAAGA,QADX;AAEC,yBAAgBD,MAFjB;AAGC,QAAA,SAAS,EAAG,yBACX,sDADW,EAEX;AAAE,qBAAWA;AAAb,SAFW;AAHb,SAQC,4BAAC,gCAAD;AAAQ,QAAA,OAAO,EAAC;AAAhB,SACC,4BAAC,0BAAD;AACC,QAAA,SAAS,EAAC,6DADX;AAEC,QAAA,UAAU,EAAGL;AAFd,QADD,EAKC,4BAAC,oBAAD,QAAYX,QAAQ,CAACM,KAArB,CALD,CARD,CADc;AAAA,KAHhB;AAqBC,IAAA,aAAa,EAAG,MACf,4BAAC,gBAAD;AACC,MAAA,SAAS,EAAG,KADb;AAEC,MAAA,gCAAgC,MAFjC;AAGC,MAAA,iCAAiC,MAHlC;AAIC,MAAA,WAAW;AAJZ,OAKMF,eALN;AAtBF,IATD,CADD;AA2CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';\n\nexport default function ToolsPanelColorDropdown( {\n\tsettings,\n\tenableAlpha,\n\t...otherProps\n} ) {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\tconst controlSettings = {\n\t\t...colorGradientSettings,\n\t\tclearable: false,\n\t\tenableAlpha,\n\t\tlabel: settings.label,\n\t\tonColorChange: settings.onColorChange,\n\t\tonGradientChange: settings.onGradientChange,\n\t\tcolorValue: settings.colorValue,\n\t\tgradientValue: settings.gradientValue,\n\t};\n\tconst selectedColor = settings.gradientValue ?? settings.colorValue;\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ settings.hasValue }\n\t\t\tlabel={ settings.label }\n\t\t\tonDeselect={ settings.onDeselect }\n\t\t\tisShownByDefault={ settings.isShownByDefault }\n\t\t\tresetAllFilter={ settings.resetAllFilter }\n\t\t\t{ ...otherProps }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tclassName=\"block-editor-tools-panel-color-dropdown\"\n\t\t\t\tcontentClassName=\"block-editor-panel-color-gradient-settings__dropdown-content\"\n\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\t\t\t\t\t\tcolorValue={ selectedColor }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<FlexItem>{ settings.label }</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tshowTitle={ false }\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{ ...controlSettings }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}

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

@@ -9,18 +9,18 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _colord = require("colord");
+var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 
-var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
-
-var _a11y2 = require("@wordpress/a11y");
+var _colord = require("colord");
 
 var _i18n = require("@wordpress/i18n");
 
 var _components = require("@wordpress/components");
 
+var _a11y2 = require("@wordpress/a11y");
+
 /**
  * External dependencies
  */
@@ -30,62 +30,98 @@ var _components = require("@wordpress/components");
  */
 (0, _colord.extend)([_names.default, _a11y.default]);
 
-function ContrastCheckerMessage(_ref) {
-  let {
-    colordBackgroundColor,
-    colordTextColor,
-    backgroundColor,
-    textColor
-  } = _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]);
-  return (0, _element.createElement)("div", {
-    className: "block-editor-contrast-checker"
-  }, (0, _element.createElement)(_components.Notice, {
-    spokenMessage: null,
-    status: "warning",
-    isDismissible: false
-  }, msg));
-}
-
-function ContrastChecker(_ref2) {
+function ContrastChecker(_ref) {
   let {
     backgroundColor,
     fallbackBackgroundColor,
     fallbackTextColor,
+    fallbackLinkColor,
     fontSize,
     // font size value in pixels
     isLargeText,
-    textColor
-  } = _ref2;
+    textColor,
+    linkColor,
+    enableAlphaChecker = false
+  } = _ref;
+  const currentBackgroundColor = backgroundColor || fallbackBackgroundColor; // Must have a background color.
 
-  if (!(backgroundColor || fallbackBackgroundColor) || !(textColor || fallbackTextColor)) {
+  if (!currentBackgroundColor) {
     return null;
   }
 
-  const colordBackgroundColor = (0, _colord.colord)(backgroundColor || fallbackBackgroundColor);
-  const colordTextColor = (0, _colord.colord)(textColor || fallbackTextColor);
-  const hasTransparency = colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
+  const currentTextColor = textColor || fallbackTextColor;
+  const currentLinkColor = linkColor || fallbackLinkColor; // Must have at least one text color.
+
+  if (!currentTextColor && !currentLinkColor) {
+    return null;
+  }
 
-  if (hasTransparency || colordTextColor.isReadable(colordBackgroundColor, {
+  const textColors = [{
+    color: currentTextColor,
+    description: (0, _i18n.__)('text color')
+  }, {
+    color: currentLinkColor,
+    description: (0, _i18n.__)('link color')
+  }];
+  const colordBackgroundColor = (0, _colord.colord)(currentBackgroundColor);
+  const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
+  const backgroundColorBrightness = colordBackgroundColor.brightness();
+  const isReadableOptions = {
     level: 'AA',
     size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
-  })) {
-    return null;
+  };
+  let message = '';
+  let speakMessage = '';
+
+  for (const item of textColors) {
+    // If there is no color, go no further.
+    if (!item.color) {
+      continue;
+    }
+
+    const colordTextColor = (0, _colord.colord)(item.color);
+    const isColordTextReadable = colordTextColor.isReadable(colordBackgroundColor, isReadableOptions);
+    const textHasTransparency = colordTextColor.alpha() < 1; // If the contrast is not readable.
+
+    if (!isColordTextReadable) {
+      // Don't show the message if the background or text is transparent.
+      if (backgroundColorHasTransparency || textHasTransparency) {
+        continue;
+      }
+
+      message = backgroundColorBrightness < colordTextColor.brightness() ? (0, _i18n.sprintf)( // translators: %s is a type of text color, e.g., "text color" or "link color"
+      (0, _i18n.__)('This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'), item.description) : (0, _i18n.sprintf)( // translators: %s is a type of text color, e.g., "text color" or "link color"
+      (0, _i18n.__)('This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'), item.description);
+      speakMessage = (0, _i18n.__)('This color combination may be hard for people to read.'); // Break from the loop when we have a contrast warning.
+      // These messages take priority over the transparency warning.
+
+      break;
+    } // If there is no contrast warning and the text is transparent,
+    // show the transparent warning if alpha check is enabled.
+
+
+    if (textHasTransparency && enableAlphaChecker) {
+      message = (0, _i18n.__)('Transparent text may be hard for people to read.');
+      speakMessage = (0, _i18n.__)('Transparent text may be hard for people to read.');
+    }
   }
 
-  return (0, _element.createElement)(ContrastCheckerMessage, {
-    backgroundColor: backgroundColor,
-    textColor: textColor,
-    colordBackgroundColor: colordBackgroundColor,
-    colordTextColor: colordTextColor
-  });
+  if (!message) {
+    return null;
+  } // 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, _a11y2.speak)(speakMessage);
+  return (0, _element.createElement)("div", {
+    className: "block-editor-contrast-checker"
+  }, (0, _element.createElement)(_components.Notice, {
+    spokenMessage: null,
+    status: "warning",
+    isDismissible: false
+  }, message));
 }
 
 var _default = ContrastChecker;

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","ContrastChecker","backgroundColor","fallbackBackgroundColor","fallbackTextColor","fallbackLinkColor","fontSize","isLargeText","textColor","linkColor","enableAlphaChecker","currentBackgroundColor","currentTextColor","currentLinkColor","textColors","color","description","colordBackgroundColor","backgroundColorHasTransparency","alpha","backgroundColorBrightness","brightness","isReadableOptions","level","size","message","speakMessage","item","colordTextColor","isColordTextReadable","isReadable","textHasTransparency"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAZA;AACA;AACA;;AAKA;AACA;AACA;AAKA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,eAAT,OAUI;AAAA,MAVsB;AACzBC,IAAAA,eADyB;AAEzBC,IAAAA,uBAFyB;AAGzBC,IAAAA,iBAHyB;AAIzBC,IAAAA,iBAJyB;AAKzBC,IAAAA,QALyB;AAKf;AACVC,IAAAA,WANyB;AAOzBC,IAAAA,SAPyB;AAQzBC,IAAAA,SARyB;AASzBC,IAAAA,kBAAkB,GAAG;AATI,GAUtB;AACH,QAAMC,sBAAsB,GAAGT,eAAe,IAAIC,uBAAlD,CADG,CAGH;;AACA,MAAK,CAAEQ,sBAAP,EAAgC;AAC/B,WAAO,IAAP;AACA;;AAED,QAAMC,gBAAgB,GAAGJ,SAAS,IAAIJ,iBAAtC;AACA,QAAMS,gBAAgB,GAAGJ,SAAS,IAAIJ,iBAAtC,CATG,CAWH;;AACA,MAAK,CAAEO,gBAAF,IAAsB,CAAEC,gBAA7B,EAAgD;AAC/C,WAAO,IAAP;AACA;;AAED,QAAMC,UAAU,GAAG,CAClB;AACCC,IAAAA,KAAK,EAAEH,gBADR;AAECI,IAAAA,WAAW,EAAE,cAAI,YAAJ;AAFd,GADkB,EAKlB;AACCD,IAAAA,KAAK,EAAEF,gBADR;AAECG,IAAAA,WAAW,EAAE,cAAI,YAAJ;AAFd,GALkB,CAAnB;AAUA,QAAMC,qBAAqB,GAAG,oBAAQN,sBAAR,CAA9B;AACA,QAAMO,8BAA8B,GAAGD,qBAAqB,CAACE,KAAtB,KAAgC,CAAvE;AACA,QAAMC,yBAAyB,GAAGH,qBAAqB,CAACI,UAAtB,EAAlC;AACA,QAAMC,iBAAiB,GAAG;AACzBC,IAAAA,KAAK,EAAE,IADkB;AAEzBC,IAAAA,IAAI,EACHjB,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;AALqB,GAA1B;AAQA,MAAImB,OAAO,GAAG,EAAd;AACA,MAAIC,YAAY,GAAG,EAAnB;;AACA,OAAM,MAAMC,IAAZ,IAAoBb,UAApB,EAAiC;AAChC;AACA,QAAK,CAAEa,IAAI,CAACZ,KAAZ,EAAoB;AACnB;AACA;;AACD,UAAMa,eAAe,GAAG,oBAAQD,IAAI,CAACZ,KAAb,CAAxB;AACA,UAAMc,oBAAoB,GAAGD,eAAe,CAACE,UAAhB,CAC5Bb,qBAD4B,EAE5BK,iBAF4B,CAA7B;AAIA,UAAMS,mBAAmB,GAAGH,eAAe,CAACT,KAAhB,KAA0B,CAAtD,CAVgC,CAYhC;;AACA,QAAK,CAAEU,oBAAP,EAA8B;AAC7B;AACA,UAAKX,8BAA8B,IAAIa,mBAAvC,EAA6D;AAC5D;AACA;;AACDN,MAAAA,OAAO,GACNL,yBAAyB,GAAGQ,eAAe,CAACP,UAAhB,EAA5B,GACG,oBACA;AACA,oBACC,kHADD,CAFA,EAKAM,IAAI,CAACX,WALL,CADH,GAQG,oBACA;AACA,oBACC,kHADD,CAFA,EAKAW,IAAI,CAACX,WALL,CATJ;AAgBAU,MAAAA,YAAY,GAAG,cACd,wDADc,CAAf,CArB6B,CAwB7B;AACA;;AACA;AACA,KAxC+B,CA0ChC;AACA;;;AACA,QAAKK,mBAAmB,IAAIrB,kBAA5B,EAAiD;AAChDe,MAAAA,OAAO,GAAG,cAAI,kDAAJ,CAAV;AACAC,MAAAA,YAAY,GAAG,cACd,kDADc,CAAf;AAGA;AACD;;AAED,MAAK,CAAED,OAAP,EAAiB;AAChB,WAAO,IAAP;AACA,GA7FE,CA+FH;AACA;AACA;AACA;;;AACA,oBAAOC,YAAP;AAEA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,kBAAD;AACC,IAAA,aAAa,EAAG,IADjB;AAEC,IAAA,MAAM,EAAC,SAFR;AAGC,IAAA,aAAa,EAAG;AAHjB,KAKGD,OALH,CADD,CADD;AAWA;;eAEcxB,e","sourcesContent":["/**\n * External dependencies\n */\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\nimport { colord, extend } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Notice } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction ContrastChecker( {\n\tbackgroundColor,\n\tfallbackBackgroundColor,\n\tfallbackTextColor,\n\tfallbackLinkColor,\n\tfontSize, // font size value in pixels\n\tisLargeText,\n\ttextColor,\n\tlinkColor,\n\tenableAlphaChecker = false,\n} ) {\n\tconst currentBackgroundColor = backgroundColor || fallbackBackgroundColor;\n\n\t// Must have a background color.\n\tif ( ! currentBackgroundColor ) {\n\t\treturn null;\n\t}\n\n\tconst currentTextColor = textColor || fallbackTextColor;\n\tconst currentLinkColor = linkColor || fallbackLinkColor;\n\n\t// Must have at least one text color.\n\tif ( ! currentTextColor && ! currentLinkColor ) {\n\t\treturn null;\n\t}\n\n\tconst textColors = [\n\t\t{\n\t\t\tcolor: currentTextColor,\n\t\t\tdescription: __( 'text color' ),\n\t\t},\n\t\t{\n\t\t\tcolor: currentLinkColor,\n\t\t\tdescription: __( 'link color' ),\n\t\t},\n\t];\n\tconst colordBackgroundColor = colord( currentBackgroundColor );\n\tconst backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;\n\tconst backgroundColorBrightness = colordBackgroundColor.brightness();\n\tconst isReadableOptions = {\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\tlet message = '';\n\tlet speakMessage = '';\n\tfor ( const item of textColors ) {\n\t\t// If there is no color, go no further.\n\t\tif ( ! item.color ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst colordTextColor = colord( item.color );\n\t\tconst isColordTextReadable = colordTextColor.isReadable(\n\t\t\tcolordBackgroundColor,\n\t\t\tisReadableOptions\n\t\t);\n\t\tconst textHasTransparency = colordTextColor.alpha() < 1;\n\n\t\t// If the contrast is not readable.\n\t\tif ( ! isColordTextReadable ) {\n\t\t\t// Don't show the message if the background or text is transparent.\n\t\t\tif ( backgroundColorHasTransparency || textHasTransparency ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tmessage =\n\t\t\t\tbackgroundColorBrightness < colordTextColor.brightness()\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\"\n\t\t\t\t\t\t\t__(\n\t\t\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 %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s is a type of text color, e.g., \"text color\" or \"link color\"\n\t\t\t\t\t\t\t__(\n\t\t\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 %s.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\titem.description\n\t\t\t\t\t  );\n\t\t\tspeakMessage = __(\n\t\t\t\t'This color combination may be hard for people to read.'\n\t\t\t);\n\t\t\t// Break from the loop when we have a contrast warning.\n\t\t\t// These messages take priority over the transparency warning.\n\t\t\tbreak;\n\t\t}\n\n\t\t// If there is no contrast warning and the text is transparent,\n\t\t// show the transparent warning if alpha check is enabled.\n\t\tif ( textHasTransparency && enableAlphaChecker ) {\n\t\t\tmessage = __( 'Transparent text may be hard for people to read.' );\n\t\t\tspeakMessage = __(\n\t\t\t\t'Transparent text may be hard for people to read.'\n\t\t\t);\n\t\t}\n\t}\n\n\tif ( ! message ) {\n\t\treturn null;\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\tspeak( speakMessage );\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{ message }\n\t\t\t</Notice>\n\t\t</div>\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"]}