@wordpress/block-editor 7.0.1 → 8.0.0

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

@@ -12,6 +12,7 @@ import { every, isEmpty } from 'lodash';
 
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -72,6 +73,8 @@ export const PanelColorGradientSettingsInner = ({
   children,
   settings,
   title,
+  showTitle = true,
+  __experimentalHasMultipleOrigins,
   ...props
 }) => {
   if (isEmpty(colors) && isEmpty(gradients) && disableCustomColors && disableCustomGradients && every(settings, setting => isEmpty(setting.colors) && isEmpty(setting.gradients) && (setting.disableCustomColors === undefined || setting.disableCustomColors) && (setting.disableCustomGradients === undefined || setting.disableCustomGradients))) {
@@ -87,22 +90,92 @@ export const PanelColorGradientSettingsInner = ({
   }));
   return createElement(PanelBody, _extends({
     className: classnames('block-editor-panel-color-gradient-settings', className),
-    title: titleElement
+    title: showTitle ? titleElement : undefined
   }, props), settings.map((setting, index) => createElement(ColorGradientControl, _extends({
+    showTitle: showTitle,
     key: index,
     colors,
     gradients,
     disableCustomColors,
-    disableCustomGradients
+    disableCustomGradients,
+    __experimentalHasMultipleOrigins
   }, setting))), children);
 };
 
-const PanelColorGradientSettingsSelect = props => {
-  const colorGradientSettings = {};
+function useCommonSingleMultipleSelects() {
+  return {
+    disableCustomColors: !useSetting('color.custom'),
+    disableCustomGradients: !useSetting('color.customGradient')
+  };
+}
+
+const PanelColorGradientSettingsSingleSelect = props => {
+  const colorGradientSettings = useCommonSingleMultipleSelects();
   colorGradientSettings.colors = useSetting('color.palette');
   colorGradientSettings.gradients = useSetting('color.gradients');
-  colorGradientSettings.disableCustomColors = !useSetting('color.custom');
-  colorGradientSettings.disableCustomGradients = !useSetting('color.customGradient');
+  return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
+};
+
+const PanelColorGradientSettingsMultipleSelect = props => {
+  const colorGradientSettings = useCommonSingleMultipleSelects();
+  const userColors = useSetting('color.palette.user');
+  const themeColors = useSetting('color.palette.theme');
+  const coreColors = useSetting('color.palette.core');
+  colorGradientSettings.colors = useMemo(() => {
+    const result = [];
+
+    if (coreColors && coreColors.length) {
+      result.push({
+        name: __('Core'),
+        colors: coreColors
+      });
+    }
+
+    if (themeColors && themeColors.length) {
+      result.push({
+        name: __('Theme'),
+        colors: themeColors
+      });
+    }
+
+    if (userColors && userColors.length) {
+      result.push({
+        name: __('User'),
+        colors: userColors
+      });
+    }
+
+    return result;
+  }, [coreColors, themeColors, userColors]);
+  const userGradients = useSetting('color.gradients.user');
+  const themeGradients = useSetting('color.gradients.theme');
+  const coreGradients = useSetting('color.gradients.core');
+  colorGradientSettings.gradients = useMemo(() => {
+    const result = [];
+
+    if (coreGradients && coreGradients.length) {
+      result.push({
+        name: __('Core'),
+        gradients: coreGradients
+      });
+    }
+
+    if (themeGradients && themeGradients.length) {
+      result.push({
+        name: __('Theme'),
+        gradients: themeGradients
+      });
+    }
+
+    if (userGradients && userGradients.length) {
+      result.push({
+        name: __('User'),
+        gradients: userGradients
+      });
+    }
+
+    return result;
+  }, [userGradients, themeGradients, coreGradients]);
   return createElement(PanelColorGradientSettingsInner, _extends({}, colorGradientSettings, props));
 };
 
@@ -111,7 +184,11 @@ const PanelColorGradientSettings = props => {
     return createElement(PanelColorGradientSettingsInner, props);
   }
 
-  return createElement(PanelColorGradientSettingsSelect, props);
+  if (props.__experimentalHasMultipleOrigins) {
+    return createElement(PanelColorGradientSettingsMultipleSelect, props);
+  }
+
+  return createElement(PanelColorGradientSettingsSingleSelect, props);
 };
 
 export default PanelColorGradientSettings;

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","colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","props","setting","undefined","titleElement","PanelColorGradientSettingsSelect","colorGradientSettings","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';\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\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\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={ titleElement }\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\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...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 PanelColorGradientSettingsSelect = ( props ) => {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\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\treturn <PanelColorGradientSettingsSelect { ...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","PanelBody","ColorIndicator","sprintf","__","useMemo","ColorGradientControl","getColorObjectByColorValue","__experimentalGetGradientObjectByGradientValue","useSetting","colorIndicatorAriaLabel","gradientIndicatorAriaLabel","colorsAndGradientKeys","Indicators","colors","gradients","settings","map","colorValue","gradientValue","label","availableColors","availableGradients","index","ariaLabel","colorObject","toLowerCase","name","gradientObject","PanelColorGradientSettingsInner","className","disableCustomColors","disableCustomGradients","children","title","showTitle","__experimentalHasMultipleOrigins","props","setting","undefined","titleElement","useCommonSingleMultipleSelects","PanelColorGradientSettingsSingleSelect","colorGradientSettings","PanelColorGradientSettingsMultipleSelect","userColors","themeColors","coreColors","result","length","push","userGradients","themeGradients","coreGradients","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';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport { getColorObjectByColorValue } from '../colors';\nimport { __experimentalGetGradientObjectByGradientValue } from '../gradients';\nimport useSetting from '../use-setting';\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...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...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\nfunction useCommonSingleMultipleSelects() {\n\treturn {\n\t\tdisableCustomColors: ! useSetting( 'color.custom' ),\n\t\tdisableCustomGradients: ! useSetting( 'color.customGradient' ),\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 = useCommonSingleMultipleSelects();\n\tconst userColors = useSetting( 'color.palette.user' );\n\tconst themeColors = useSetting( 'color.palette.theme' );\n\tconst coreColors = useSetting( 'color.palette.core' );\n\tcolorGradientSettings.colors = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( coreColors && coreColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Core' ),\n\t\t\t\tcolors: coreColors,\n\t\t\t} );\n\t\t}\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Theme' ),\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif ( userColors && userColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'User' ),\n\t\t\t\tcolors: userColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ coreColors, themeColors, userColors ] );\n\n\tconst userGradients = useSetting( 'color.gradients.user' );\n\tconst themeGradients = useSetting( 'color.gradients.theme' );\n\tconst coreGradients = useSetting( 'color.gradients.core' );\n\tcolorGradientSettings.gradients = useMemo( () => {\n\t\tconst result = [];\n\t\tif ( coreGradients && coreGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Core' ),\n\t\t\t\tgradients: coreGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'Theme' ),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( userGradients && userGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: __( 'User' ),\n\t\t\t\tgradients: userGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ userGradients, themeGradients, coreGradients ] );\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/contrast-checker/index.js

@@ -3,7 +3,9 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
@@ -12,14 +14,15 @@ import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
+extend([namesPlugin, a11yPlugin]);
 
 function ContrastCheckerMessage({
-  tinyBackgroundColor,
-  tinyTextColor,
+  colordBackgroundColor,
+  colordTextColor,
   backgroundColor,
   textColor
 }) {
-  const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ? __('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`
+  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.
@@ -49,11 +52,11 @@ function ContrastChecker({
     return null;
   }
 
-  const tinyBackgroundColor = tinycolor(backgroundColor || fallbackBackgroundColor);
-  const tinyTextColor = tinycolor(textColor || fallbackTextColor);
-  const hasTransparency = tinyBackgroundColor.getAlpha() !== 1 || tinyTextColor.getAlpha() !== 1;
+  const colordBackgroundColor = colord(backgroundColor || fallbackBackgroundColor);
+  const colordTextColor = colord(textColor || fallbackTextColor);
+  const hasTransparency = colordBackgroundColor.alpha() !== 1 || colordTextColor.alpha() !== 1;
 
-  if (hasTransparency || tinycolor.isReadable(tinyBackgroundColor, tinyTextColor, {
+  if (hasTransparency || colordTextColor.isReadable(colordBackgroundColor, {
     level: 'AA',
     size: isLargeText || isLargeText !== false && fontSize >= 24 ? 'large' : 'small'
   })) {
@@ -63,8 +66,8 @@ function ContrastChecker({
   return createElement(ContrastCheckerMessage, {
     backgroundColor: backgroundColor,
     textColor: textColor,
-    tinyBackgroundColor: tinyBackgroundColor,
-    tinyTextColor: tinyTextColor
+    colordBackgroundColor: colordBackgroundColor,
+    colordTextColor: colordTextColor
   });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/contrast-checker/index.js"],"names":["tinycolor","speak","__","Notice","useEffect","ContrastCheckerMessage","tinyBackgroundColor","tinyTextColor","backgroundColor","textColor","msg","getBrightness","ContrastChecker","fallbackBackgroundColor","fallbackTextColor","fontSize","isLargeText","hasTransparency","getAlpha","isReadable","level","size"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,YAAtB;AAEA;AACA;AACA;;AACA,SAASC,KAAT,QAAsB,iBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAEA,SAASC,sBAAT,CAAiC;AAChCC,EAAAA,mBADgC;AAEhCC,EAAAA,aAFgC;AAGhCC,EAAAA,eAHgC;AAIhCC,EAAAA;AAJgC,CAAjC,EAKI;AACH,QAAMC,GAAG,GACRJ,mBAAmB,CAACK,aAApB,KAAsCJ,aAAa,CAACI,aAAd,EAAtC,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,CAA0B;AACzBJ,EAAAA,eADyB;AAEzBK,EAAAA,uBAFyB;AAGzBC,EAAAA,iBAHyB;AAIzBC,EAAAA,QAJyB;AAIf;AACVC,EAAAA,WALyB;AAMzBP,EAAAA;AANyB,CAA1B,EAOI;AACH,MACC,EAAID,eAAe,IAAIK,uBAAvB,KACA,EAAIJ,SAAS,IAAIK,iBAAjB,CAFD,EAGE;AACD,WAAO,IAAP;AACA;;AACD,QAAMR,mBAAmB,GAAGN,SAAS,CACpCQ,eAAe,IAAIK,uBADiB,CAArC;AAGA,QAAMN,aAAa,GAAGP,SAAS,CAAES,SAAS,IAAIK,iBAAf,CAA/B;AACA,QAAMG,eAAe,GACpBX,mBAAmB,CAACY,QAApB,OAAmC,CAAnC,IAAwCX,aAAa,CAACW,QAAd,OAA6B,CADtE;;AAGA,MACCD,eAAe,IACfjB,SAAS,CAACmB,UAAV,CAAsBb,mBAAtB,EAA2CC,aAA3C,EAA0D;AACzDa,IAAAA,KAAK,EAAE,IADkD;AAEzDC,IAAAA,IAAI,EACHL,WAAW,IAAMA,WAAW,KAAK,KAAhB,IAAyBD,QAAQ,IAAI,EAAtD,GACG,OADH,GAEG;AALqD,GAA1D,CAFD,EASE;AACD,WAAO,IAAP;AACA;;AAED,SACC,cAAC,sBAAD;AACC,IAAA,eAAe,EAAGP,eADnB;AAEC,IAAA,SAAS,EAAGC,SAFb;AAGC,IAAA,mBAAmB,EAAGH,mBAHvB;AAIC,IAAA,aAAa,EAAGC;AAJjB,IADD;AAQA;;AAED,eAAeK,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport tinycolor from 'tinycolor2';\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\nfunction ContrastCheckerMessage( {\n\ttinyBackgroundColor,\n\ttinyTextColor,\n\tbackgroundColor,\n\ttextColor,\n} ) {\n\tconst msg =\n\t\ttinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness()\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 tinyBackgroundColor = tinycolor(\n\t\tbackgroundColor || fallbackBackgroundColor\n\t);\n\tconst tinyTextColor = tinycolor( textColor || fallbackTextColor );\n\tconst hasTransparency =\n\t\ttinyBackgroundColor.getAlpha() !== 1 || tinyTextColor.getAlpha() !== 1;\n\n\tif (\n\t\thasTransparency ||\n\t\ttinycolor.isReadable( tinyBackgroundColor, tinyTextColor, {\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\ttinyBackgroundColor={ tinyBackgroundColor }\n\t\t\ttinyTextColor={ tinyTextColor }\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","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,CAAiC;AAChCC,EAAAA,qBADgC;AAEhCC,EAAAA,eAFgC;AAGhCC,EAAAA,eAHgC;AAIhCC,EAAAA;AAJgC,CAAjC,EAKI;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,CAA0B;AACzBJ,EAAAA,eADyB;AAEzBK,EAAAA,uBAFyB;AAGzBC,EAAAA,iBAHyB;AAIzBC,EAAAA,QAJyB;AAIf;AACVC,EAAAA,WALyB;AAMzBP,EAAAA;AANyB,CAA1B,EAOI;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"]}

package/build-module/components/copy-handler/index.js

@@ -30,10 +30,10 @@ export function useNotifyCopy() {
     let notice = '';
 
     if (selectedBlockClientIds.length === 1) {
+      var _getBlockType;
+
       const clientId = selectedBlockClientIds[0];
-      const {
-        title
-      } = getBlockType(getBlockName(clientId));
+      const title = (_getBlockType = getBlockType(getBlockName(clientId))) === null || _getBlockType === void 0 ? void 0 : _getBlockType.title;
       notice = eventType === 'copy' ? sprintf( // Translators: Name of the block being copied, e.g. "Paragraph".
       __('Copied "%s" to clipboard.'), title) : sprintf( // Translators: Name of the block being cut, e.g. "Paragraph".
       __('Moved "%s" to clipboard.'), title);
@@ -90,6 +90,7 @@ export function useClipboardHandler() {
         return;
       }
 
+      const eventDefaultPrevented = event.defaultPrevented;
       event.preventDefault();
 
       if (event.type === 'copy' || event.type === 'cut') {
@@ -107,6 +108,11 @@ export function useClipboardHandler() {
       if (event.type === 'cut') {
         removeBlocks(selectedBlockClientIds);
       } else if (event.type === 'paste') {
+        if (eventDefaultPrevented) {
+          // This was likely already handled in rich-text/use-paste-handler.js
+          return;
+        }
+
         const {
           __experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML
         } = getSettings();

package/build-module/components/copy-handler/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/copy-handler/index.js"],"names":["useCallback","serialize","pasteHandler","store","blocksStore","documentHasSelection","documentHasUncollapsedSelection","useDispatch","useSelect","__","_n","sprintf","noticesStore","useRefEffect","getPasteEventData","blockEditorStore","useNotifyCopy","getBlockName","getBlockType","createSuccessNotice","eventType","selectedBlockClientIds","notice","length","clientId","title","type","useClipboardHandler","getBlocksByClientId","getSelectedBlockClientIds","hasMultiSelection","getSettings","flashBlock","removeBlocks","replaceBlocks","notifyCopy","node","handler","event","target","ownerDocument","hasSelection","contains","activeElement","preventDefault","blocks","serialized","clipboardData","setData","__experimentalCanUserUseUnfilteredHTML","canUserUseUnfilteredHTML","plainText","html","HTML","mode","addEventListener","removeEventListener","CopyHandler","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,oBAA5B;AACA,SACCC,SADD,EAECC,YAFD,EAGCC,KAAK,IAAIC,WAHV,QAIO,mBAJP;AAKA,SACCC,oBADD,EAECC,+BAFD,QAGO,gBAHP;AAIA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AACA,SAASC,EAAT,EAAaC,EAAb,EAAiBC,OAAjB,QAAgC,iBAAhC;AACA,SAASR,KAAK,IAAIS,YAAlB,QAAsC,oBAAtC;AACA,SAASC,YAAT,QAA6B,oBAA7B;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,kCAAlC;AACA,SAASX,KAAK,IAAIY,gBAAlB,QAA0C,aAA1C;AAEA,OAAO,SAASC,aAAT,GAAyB;AAC/B,QAAM;AAAEC,IAAAA;AAAF,MAAmBT,SAAS,CAAEO,gBAAF,CAAlC;AACA,QAAM;AAAEG,IAAAA;AAAF,MAAmBV,SAAS,CAAEJ,WAAF,CAAlC;AACA,QAAM;AAAEe,IAAAA;AAAF,MAA0BZ,WAAW,CAAEK,YAAF,CAA3C;AAEA,SAAOZ,WAAW,CAAE,CAAEoB,SAAF,EAAaC,sBAAb,KAAyC;AAC5D,QAAIC,MAAM,GAAG,EAAb;;AACA,QAAKD,sBAAsB,CAACE,MAAvB,KAAkC,CAAvC,EAA2C;AAC1C,YAAMC,QAAQ,GAAGH,sBAAsB,CAAE,CAAF,CAAvC;AACA,YAAM;AAAEI,QAAAA;AAAF,UAAYP,YAAY,CAAED,YAAY,CAAEO,QAAF,CAAd,CAA9B;AACAF,MAAAA,MAAM,GACLF,SAAS,KAAK,MAAd,GACGT,OAAO,EACP;AACAF,MAAAA,EAAE,CAAE,2BAAF,CAFK,EAGPgB,KAHO,CADV,GAMGd,OAAO,EACP;AACAF,MAAAA,EAAE,CAAE,0BAAF,CAFK,EAGPgB,KAHO,CAPX;AAYA,KAfD,MAeO;AACNH,MAAAA,MAAM,GACLF,SAAS,KAAK,MAAd,GACGT,OAAO,EACP;AACAD,MAAAA,EAAE,CACD,+BADC,EAED,gCAFC,EAGDW,sBAAsB,CAACE,MAHtB,CAFK,EAOPF,sBAAsB,CAACE,MAPhB,CADV,GAUGZ,OAAO,EACP;AACAD,MAAAA,EAAE,CACD,8BADC,EAED,+BAFC,EAGDW,sBAAsB,CAACE,MAHtB,CAFK,EAOPF,sBAAsB,CAACE,MAPhB,CAXX;AAoBA;;AACDJ,IAAAA,mBAAmB,CAAEG,MAAF,EAAU;AAC5BI,MAAAA,IAAI,EAAE;AADsB,KAAV,CAAnB;AAGA,GA1CiB,EA0Cf,EA1Ce,CAAlB;AA2CA;AAED,OAAO,SAASC,mBAAT,GAA+B;AACrC,QAAM;AACLC,IAAAA,mBADK;AAELC,IAAAA,yBAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA;AAJK,MAKFvB,SAAS,CAAEO,gBAAF,CALb;AAMA,QAAM;AAAEiB,IAAAA,UAAF;AAAcC,IAAAA,YAAd;AAA4BC,IAAAA;AAA5B,MAA8C3B,WAAW,CAC9DQ,gBAD8D,CAA/D;AAGA,QAAMoB,UAAU,GAAGnB,aAAa,EAAhC;AAEA,SAAOH,YAAY,CAAIuB,IAAF,IAAY;AAChC,aAASC,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,YAAMjB,sBAAsB,GAAGQ,yBAAyB,EAAxD;;AAEA,UAAKR,sBAAsB,CAACE,MAAvB,KAAkC,CAAvC,EAA2C;AAC1C;AACA,OALwB,CAOzB;;;AACA,UAAK,CAAEO,iBAAiB,EAAxB,EAA6B;AAC5B,cAAM;AAAES,UAAAA;AAAF,YAAaD,KAAnB;AACA,cAAM;AAAEE,UAAAA;AAAF,YAAoBD,MAA1B,CAF4B,CAG5B;AACA;;AACA,cAAME,YAAY,GACjBH,KAAK,CAACZ,IAAN,KAAe,MAAf,IAAyBY,KAAK,CAACZ,IAAN,KAAe,KAAxC,GACGpB,+BAA+B,CAAEkC,aAAF,CADlC,GAEGnC,oBAAoB,CAAEmC,aAAF,CAHxB,CAL4B,CAU5B;;AACA,YAAKC,YAAL,EAAoB;AACnB;AACA;AACD;;AAED,UAAK,CAAEL,IAAI,CAACM,QAAL,CAAeJ,KAAK,CAACC,MAAN,CAAaC,aAAb,CAA2BG,aAA1C,CAAP,EAAmE;AAClE;AACA;;AAEDL,MAAAA,KAAK,CAACM,cAAN;;AAEA,UAAKN,KAAK,CAACZ,IAAN,KAAe,MAAf,IAAyBY,KAAK,CAACZ,IAAN,KAAe,KAA7C,EAAqD;AACpD,YAAKL,sBAAsB,CAACE,MAAvB,KAAkC,CAAvC,EAA2C;AAC1CS,UAAAA,UAAU,CAAEX,sBAAsB,CAAE,CAAF,CAAxB,CAAV;AACA;;AACDc,QAAAA,UAAU,CAAEG,KAAK,CAACZ,IAAR,EAAcL,sBAAd,CAAV;AACA,cAAMwB,MAAM,GAAGjB,mBAAmB,CAAEP,sBAAF,CAAlC;AACA,cAAMyB,UAAU,GAAG7C,SAAS,CAAE4C,MAAF,CAA5B;AAEAP,QAAAA,KAAK,CAACS,aAAN,CAAoBC,OAApB,CAA6B,YAA7B,EAA2CF,UAA3C;AACAR,QAAAA,KAAK,CAACS,aAAN,CAAoBC,OAApB,CAA6B,WAA7B,EAA0CF,UAA1C;AACA;;AAED,UAAKR,KAAK,CAACZ,IAAN,KAAe,KAApB,EAA4B;AAC3BO,QAAAA,YAAY,CAAEZ,sBAAF,CAAZ;AACA,OAFD,MAEO,IAAKiB,KAAK,CAACZ,IAAN,KAAe,OAApB,EAA8B;AACpC,cAAM;AACLuB,UAAAA,sCAAsC,EAAEC;AADnC,YAEFnB,WAAW,EAFf;AAGA,cAAM;AAAEoB,UAAAA,SAAF;AAAaC,UAAAA;AAAb,YAAsBtC,iBAAiB,CAAEwB,KAAF,CAA7C;AACA,cAAMO,MAAM,GAAG3C,YAAY,CAAE;AAC5BmD,UAAAA,IAAI,EAAED,IADsB;AAE5BD,UAAAA,SAF4B;AAG5BG,UAAAA,IAAI,EAAE,QAHsB;AAI5BJ,UAAAA;AAJ4B,SAAF,CAA3B;AAOAhB,QAAAA,aAAa,CACZb,sBADY,EAEZwB,MAFY,EAGZA,MAAM,CAACtB,MAAP,GAAgB,CAHJ,EAIZ,CAAC,CAJW,CAAb;AAMA;AACD;;AAEDa,IAAAA,IAAI,CAACI,aAAL,CAAmBe,gBAAnB,CAAqC,MAArC,EAA6ClB,OAA7C;AACAD,IAAAA,IAAI,CAACI,aAAL,CAAmBe,gBAAnB,CAAqC,KAArC,EAA4ClB,OAA5C;AACAD,IAAAA,IAAI,CAACI,aAAL,CAAmBe,gBAAnB,CAAqC,OAArC,EAA8ClB,OAA9C;AAEA,WAAO,MAAM;AACZD,MAAAA,IAAI,CAACI,aAAL,CAAmBgB,mBAAnB,CAAwC,MAAxC,EAAgDnB,OAAhD;AACAD,MAAAA,IAAI,CAACI,aAAL,CAAmBgB,mBAAnB,CAAwC,KAAxC,EAA+CnB,OAA/C;AACAD,MAAAA,IAAI,CAACI,aAAL,CAAmBgB,mBAAnB,CAAwC,OAAxC,EAAiDnB,OAAjD;AACA,KAJD;AAKA,GA3EkB,EA2EhB,EA3EgB,CAAnB;AA4EA;;AAED,SAASoB,WAAT,CAAsB;AAAEC,EAAAA;AAAF,CAAtB,EAAqC;AACpC,SAAO;AAAK,IAAA,GAAG,EAAG/B,mBAAmB;AAA9B,KAAqC+B,QAArC,CAAP;AACA;;AAED,eAAeD,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport {\n\tserialize,\n\tpasteHandler,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport {\n\tdocumentHasSelection,\n\tdocumentHasUncollapsedSelection,\n} from '@wordpress/dom';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getPasteEventData } from '../../utils/get-paste-event-data';\nimport { store as blockEditorStore } from '../../store';\n\nexport function useNotifyCopy() {\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\tconst { getBlockType } = useSelect( blocksStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\treturn useCallback( ( eventType, selectedBlockClientIds ) => {\n\t\tlet notice = '';\n\t\tif ( selectedBlockClientIds.length === 1 ) {\n\t\t\tconst clientId = selectedBlockClientIds[ 0 ];\n\t\t\tconst { title } = getBlockType( getBlockName( clientId ) );\n\t\t\tnotice =\n\t\t\t\teventType === 'copy'\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// Translators: Name of the block being copied, e.g. \"Paragraph\".\n\t\t\t\t\t\t\t__( 'Copied \"%s\" to clipboard.' ),\n\t\t\t\t\t\t\ttitle\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// Translators: Name of the block being cut, e.g. \"Paragraph\".\n\t\t\t\t\t\t\t__( 'Moved \"%s\" to clipboard.' ),\n\t\t\t\t\t\t\ttitle\n\t\t\t\t\t  );\n\t\t} else {\n\t\t\tnotice =\n\t\t\t\teventType === 'copy'\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// Translators: %d: Number of blocks being copied.\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Copied %d block to clipboard.',\n\t\t\t\t\t\t\t\t'Copied %d blocks to clipboard.',\n\t\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// Translators: %d: Number of blocks being cut.\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Moved %d block to clipboard.',\n\t\t\t\t\t\t\t\t'Moved %d blocks to clipboard.',\n\t\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t  );\n\t\t}\n\t\tcreateSuccessNotice( notice, {\n\t\t\ttype: 'snackbar',\n\t\t} );\n\t}, [] );\n}\n\nexport function useClipboardHandler() {\n\tconst {\n\t\tgetBlocksByClientId,\n\t\tgetSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\tgetSettings,\n\t} = useSelect( blockEditorStore );\n\tconst { flashBlock, removeBlocks, replaceBlocks } = useDispatch(\n\t\tblockEditorStore\n\t);\n\tconst notifyCopy = useNotifyCopy();\n\n\treturn useRefEffect( ( node ) => {\n\t\tfunction handler( event ) {\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\n\t\t\tif ( selectedBlockClientIds.length === 0 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Always handle multiple selected blocks.\n\t\t\tif ( ! hasMultiSelection() ) {\n\t\t\t\tconst { target } = event;\n\t\t\t\tconst { ownerDocument } = target;\n\t\t\t\t// If copying, only consider actual text selection as selection.\n\t\t\t\t// Otherwise, any focus on an input field is considered.\n\t\t\t\tconst hasSelection =\n\t\t\t\t\tevent.type === 'copy' || event.type === 'cut'\n\t\t\t\t\t\t? documentHasUncollapsedSelection( ownerDocument )\n\t\t\t\t\t\t: documentHasSelection( ownerDocument );\n\n\t\t\t\t// Let native copy behaviour take over in input fields.\n\t\t\t\tif ( hasSelection ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( ! node.contains( event.target.ownerDocument.activeElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tevent.preventDefault();\n\n\t\t\tif ( event.type === 'copy' || event.type === 'cut' ) {\n\t\t\t\tif ( selectedBlockClientIds.length === 1 ) {\n\t\t\t\t\tflashBlock( selectedBlockClientIds[ 0 ] );\n\t\t\t\t}\n\t\t\t\tnotifyCopy( event.type, selectedBlockClientIds );\n\t\t\t\tconst blocks = getBlocksByClientId( selectedBlockClientIds );\n\t\t\t\tconst serialized = serialize( blocks );\n\n\t\t\t\tevent.clipboardData.setData( 'text/plain', serialized );\n\t\t\t\tevent.clipboardData.setData( 'text/html', serialized );\n\t\t\t}\n\n\t\t\tif ( event.type === 'cut' ) {\n\t\t\t\tremoveBlocks( selectedBlockClientIds );\n\t\t\t} else if ( event.type === 'paste' ) {\n\t\t\t\tconst {\n\t\t\t\t\t__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,\n\t\t\t\t} = getSettings();\n\t\t\t\tconst { plainText, html } = getPasteEventData( event );\n\t\t\t\tconst blocks = pasteHandler( {\n\t\t\t\t\tHTML: html,\n\t\t\t\t\tplainText,\n\t\t\t\t\tmode: 'BLOCKS',\n\t\t\t\t\tcanUserUseUnfilteredHTML,\n\t\t\t\t} );\n\n\t\t\t\treplaceBlocks(\n\t\t\t\t\tselectedBlockClientIds,\n\t\t\t\t\tblocks,\n\t\t\t\t\tblocks.length - 1,\n\t\t\t\t\t-1\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tnode.ownerDocument.addEventListener( 'copy', handler );\n\t\tnode.ownerDocument.addEventListener( 'cut', handler );\n\t\tnode.ownerDocument.addEventListener( 'paste', handler );\n\n\t\treturn () => {\n\t\t\tnode.ownerDocument.removeEventListener( 'copy', handler );\n\t\t\tnode.ownerDocument.removeEventListener( 'cut', handler );\n\t\t\tnode.ownerDocument.removeEventListener( 'paste', handler );\n\t\t};\n\t}, [] );\n}\n\nfunction CopyHandler( { children } ) {\n\treturn <div ref={ useClipboardHandler() }>{ children }</div>;\n}\n\nexport default CopyHandler;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/copy-handler/index.js"],"names":["useCallback","serialize","pasteHandler","store","blocksStore","documentHasSelection","documentHasUncollapsedSelection","useDispatch","useSelect","__","_n","sprintf","noticesStore","useRefEffect","getPasteEventData","blockEditorStore","useNotifyCopy","getBlockName","getBlockType","createSuccessNotice","eventType","selectedBlockClientIds","notice","length","clientId","title","type","useClipboardHandler","getBlocksByClientId","getSelectedBlockClientIds","hasMultiSelection","getSettings","flashBlock","removeBlocks","replaceBlocks","notifyCopy","node","handler","event","target","ownerDocument","hasSelection","contains","activeElement","eventDefaultPrevented","defaultPrevented","preventDefault","blocks","serialized","clipboardData","setData","__experimentalCanUserUseUnfilteredHTML","canUserUseUnfilteredHTML","plainText","html","HTML","mode","addEventListener","removeEventListener","CopyHandler","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,WAAT,QAA4B,oBAA5B;AACA,SACCC,SADD,EAECC,YAFD,EAGCC,KAAK,IAAIC,WAHV,QAIO,mBAJP;AAKA,SACCC,oBADD,EAECC,+BAFD,QAGO,gBAHP;AAIA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,iBAAvC;AACA,SAASC,EAAT,EAAaC,EAAb,EAAiBC,OAAjB,QAAgC,iBAAhC;AACA,SAASR,KAAK,IAAIS,YAAlB,QAAsC,oBAAtC;AACA,SAASC,YAAT,QAA6B,oBAA7B;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,kCAAlC;AACA,SAASX,KAAK,IAAIY,gBAAlB,QAA0C,aAA1C;AAEA,OAAO,SAASC,aAAT,GAAyB;AAC/B,QAAM;AAAEC,IAAAA;AAAF,MAAmBT,SAAS,CAAEO,gBAAF,CAAlC;AACA,QAAM;AAAEG,IAAAA;AAAF,MAAmBV,SAAS,CAAEJ,WAAF,CAAlC;AACA,QAAM;AAAEe,IAAAA;AAAF,MAA0BZ,WAAW,CAAEK,YAAF,CAA3C;AAEA,SAAOZ,WAAW,CAAE,CAAEoB,SAAF,EAAaC,sBAAb,KAAyC;AAC5D,QAAIC,MAAM,GAAG,EAAb;;AACA,QAAKD,sBAAsB,CAACE,MAAvB,KAAkC,CAAvC,EAA2C;AAAA;;AAC1C,YAAMC,QAAQ,GAAGH,sBAAsB,CAAE,CAAF,CAAvC;AACA,YAAMI,KAAK,oBAAGP,YAAY,CAAED,YAAY,CAAEO,QAAF,CAAd,CAAf,kDAAG,cAA0CC,KAAxD;AACAH,MAAAA,MAAM,GACLF,SAAS,KAAK,MAAd,GACGT,OAAO,EACP;AACAF,MAAAA,EAAE,CAAE,2BAAF,CAFK,EAGPgB,KAHO,CADV,GAMGd,OAAO,EACP;AACAF,MAAAA,EAAE,CAAE,0BAAF,CAFK,EAGPgB,KAHO,CAPX;AAYA,KAfD,MAeO;AACNH,MAAAA,MAAM,GACLF,SAAS,KAAK,MAAd,GACGT,OAAO,EACP;AACAD,MAAAA,EAAE,CACD,+BADC,EAED,gCAFC,EAGDW,sBAAsB,CAACE,MAHtB,CAFK,EAOPF,sBAAsB,CAACE,MAPhB,CADV,GAUGZ,OAAO,EACP;AACAD,MAAAA,EAAE,CACD,8BADC,EAED,+BAFC,EAGDW,sBAAsB,CAACE,MAHtB,CAFK,EAOPF,sBAAsB,CAACE,MAPhB,CAXX;AAoBA;;AACDJ,IAAAA,mBAAmB,CAAEG,MAAF,EAAU;AAC5BI,MAAAA,IAAI,EAAE;AADsB,KAAV,CAAnB;AAGA,GA1CiB,EA0Cf,EA1Ce,CAAlB;AA2CA;AAED,OAAO,SAASC,mBAAT,GAA+B;AACrC,QAAM;AACLC,IAAAA,mBADK;AAELC,IAAAA,yBAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA;AAJK,MAKFvB,SAAS,CAAEO,gBAAF,CALb;AAMA,QAAM;AAAEiB,IAAAA,UAAF;AAAcC,IAAAA,YAAd;AAA4BC,IAAAA;AAA5B,MAA8C3B,WAAW,CAC9DQ,gBAD8D,CAA/D;AAGA,QAAMoB,UAAU,GAAGnB,aAAa,EAAhC;AAEA,SAAOH,YAAY,CAAIuB,IAAF,IAAY;AAChC,aAASC,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,YAAMjB,sBAAsB,GAAGQ,yBAAyB,EAAxD;;AAEA,UAAKR,sBAAsB,CAACE,MAAvB,KAAkC,CAAvC,EAA2C;AAC1C;AACA,OALwB,CAOzB;;;AACA,UAAK,CAAEO,iBAAiB,EAAxB,EAA6B;AAC5B,cAAM;AAAES,UAAAA;AAAF,YAAaD,KAAnB;AACA,cAAM;AAAEE,UAAAA;AAAF,YAAoBD,MAA1B,CAF4B,CAG5B;AACA;;AACA,cAAME,YAAY,GACjBH,KAAK,CAACZ,IAAN,KAAe,MAAf,IAAyBY,KAAK,CAACZ,IAAN,KAAe,KAAxC,GACGpB,+BAA+B,CAAEkC,aAAF,CADlC,GAEGnC,oBAAoB,CAAEmC,aAAF,CAHxB,CAL4B,CAU5B;;AACA,YAAKC,YAAL,EAAoB;AACnB;AACA;AACD;;AAED,UAAK,CAAEL,IAAI,CAACM,QAAL,CAAeJ,KAAK,CAACC,MAAN,CAAaC,aAAb,CAA2BG,aAA1C,CAAP,EAAmE;AAClE;AACA;;AAED,YAAMC,qBAAqB,GAAGN,KAAK,CAACO,gBAApC;AACAP,MAAAA,KAAK,CAACQ,cAAN;;AAEA,UAAKR,KAAK,CAACZ,IAAN,KAAe,MAAf,IAAyBY,KAAK,CAACZ,IAAN,KAAe,KAA7C,EAAqD;AACpD,YAAKL,sBAAsB,CAACE,MAAvB,KAAkC,CAAvC,EAA2C;AAC1CS,UAAAA,UAAU,CAAEX,sBAAsB,CAAE,CAAF,CAAxB,CAAV;AACA;;AACDc,QAAAA,UAAU,CAAEG,KAAK,CAACZ,IAAR,EAAcL,sBAAd,CAAV;AACA,cAAM0B,MAAM,GAAGnB,mBAAmB,CAAEP,sBAAF,CAAlC;AACA,cAAM2B,UAAU,GAAG/C,SAAS,CAAE8C,MAAF,CAA5B;AAEAT,QAAAA,KAAK,CAACW,aAAN,CAAoBC,OAApB,CAA6B,YAA7B,EAA2CF,UAA3C;AACAV,QAAAA,KAAK,CAACW,aAAN,CAAoBC,OAApB,CAA6B,WAA7B,EAA0CF,UAA1C;AACA;;AAED,UAAKV,KAAK,CAACZ,IAAN,KAAe,KAApB,EAA4B;AAC3BO,QAAAA,YAAY,CAAEZ,sBAAF,CAAZ;AACA,OAFD,MAEO,IAAKiB,KAAK,CAACZ,IAAN,KAAe,OAApB,EAA8B;AACpC,YAAKkB,qBAAL,EAA6B;AAC5B;AACA;AACA;;AACD,cAAM;AACLO,UAAAA,sCAAsC,EAAEC;AADnC,YAEFrB,WAAW,EAFf;AAGA,cAAM;AAAEsB,UAAAA,SAAF;AAAaC,UAAAA;AAAb,YAAsBxC,iBAAiB,CAAEwB,KAAF,CAA7C;AACA,cAAMS,MAAM,GAAG7C,YAAY,CAAE;AAC5BqD,UAAAA,IAAI,EAAED,IADsB;AAE5BD,UAAAA,SAF4B;AAG5BG,UAAAA,IAAI,EAAE,QAHsB;AAI5BJ,UAAAA;AAJ4B,SAAF,CAA3B;AAOAlB,QAAAA,aAAa,CACZb,sBADY,EAEZ0B,MAFY,EAGZA,MAAM,CAACxB,MAAP,GAAgB,CAHJ,EAIZ,CAAC,CAJW,CAAb;AAMA;AACD;;AAEDa,IAAAA,IAAI,CAACI,aAAL,CAAmBiB,gBAAnB,CAAqC,MAArC,EAA6CpB,OAA7C;AACAD,IAAAA,IAAI,CAACI,aAAL,CAAmBiB,gBAAnB,CAAqC,KAArC,EAA4CpB,OAA5C;AACAD,IAAAA,IAAI,CAACI,aAAL,CAAmBiB,gBAAnB,CAAqC,OAArC,EAA8CpB,OAA9C;AAEA,WAAO,MAAM;AACZD,MAAAA,IAAI,CAACI,aAAL,CAAmBkB,mBAAnB,CAAwC,MAAxC,EAAgDrB,OAAhD;AACAD,MAAAA,IAAI,CAACI,aAAL,CAAmBkB,mBAAnB,CAAwC,KAAxC,EAA+CrB,OAA/C;AACAD,MAAAA,IAAI,CAACI,aAAL,CAAmBkB,mBAAnB,CAAwC,OAAxC,EAAiDrB,OAAjD;AACA,KAJD;AAKA,GAhFkB,EAgFhB,EAhFgB,CAAnB;AAiFA;;AAED,SAASsB,WAAT,CAAsB;AAAEC,EAAAA;AAAF,CAAtB,EAAqC;AACpC,SAAO;AAAK,IAAA,GAAG,EAAGjC,mBAAmB;AAA9B,KAAqCiC,QAArC,CAAP;AACA;;AAED,eAAeD,WAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport {\n\tserialize,\n\tpasteHandler,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport {\n\tdocumentHasSelection,\n\tdocumentHasUncollapsedSelection,\n} from '@wordpress/dom';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getPasteEventData } from '../../utils/get-paste-event-data';\nimport { store as blockEditorStore } from '../../store';\n\nexport function useNotifyCopy() {\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\tconst { getBlockType } = useSelect( blocksStore );\n\tconst { createSuccessNotice } = useDispatch( noticesStore );\n\n\treturn useCallback( ( eventType, selectedBlockClientIds ) => {\n\t\tlet notice = '';\n\t\tif ( selectedBlockClientIds.length === 1 ) {\n\t\t\tconst clientId = selectedBlockClientIds[ 0 ];\n\t\t\tconst title = getBlockType( getBlockName( clientId ) )?.title;\n\t\t\tnotice =\n\t\t\t\teventType === 'copy'\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// Translators: Name of the block being copied, e.g. \"Paragraph\".\n\t\t\t\t\t\t\t__( 'Copied \"%s\" to clipboard.' ),\n\t\t\t\t\t\t\ttitle\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// Translators: Name of the block being cut, e.g. \"Paragraph\".\n\t\t\t\t\t\t\t__( 'Moved \"%s\" to clipboard.' ),\n\t\t\t\t\t\t\ttitle\n\t\t\t\t\t  );\n\t\t} else {\n\t\t\tnotice =\n\t\t\t\teventType === 'copy'\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// Translators: %d: Number of blocks being copied.\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Copied %d block to clipboard.',\n\t\t\t\t\t\t\t\t'Copied %d blocks to clipboard.',\n\t\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// Translators: %d: Number of blocks being cut.\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'Moved %d block to clipboard.',\n\t\t\t\t\t\t\t\t'Moved %d blocks to clipboard.',\n\t\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tselectedBlockClientIds.length\n\t\t\t\t\t  );\n\t\t}\n\t\tcreateSuccessNotice( notice, {\n\t\t\ttype: 'snackbar',\n\t\t} );\n\t}, [] );\n}\n\nexport function useClipboardHandler() {\n\tconst {\n\t\tgetBlocksByClientId,\n\t\tgetSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\tgetSettings,\n\t} = useSelect( blockEditorStore );\n\tconst { flashBlock, removeBlocks, replaceBlocks } = useDispatch(\n\t\tblockEditorStore\n\t);\n\tconst notifyCopy = useNotifyCopy();\n\n\treturn useRefEffect( ( node ) => {\n\t\tfunction handler( event ) {\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\n\t\t\tif ( selectedBlockClientIds.length === 0 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Always handle multiple selected blocks.\n\t\t\tif ( ! hasMultiSelection() ) {\n\t\t\t\tconst { target } = event;\n\t\t\t\tconst { ownerDocument } = target;\n\t\t\t\t// If copying, only consider actual text selection as selection.\n\t\t\t\t// Otherwise, any focus on an input field is considered.\n\t\t\t\tconst hasSelection =\n\t\t\t\t\tevent.type === 'copy' || event.type === 'cut'\n\t\t\t\t\t\t? documentHasUncollapsedSelection( ownerDocument )\n\t\t\t\t\t\t: documentHasSelection( ownerDocument );\n\n\t\t\t\t// Let native copy behaviour take over in input fields.\n\t\t\t\tif ( hasSelection ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( ! node.contains( event.target.ownerDocument.activeElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst eventDefaultPrevented = event.defaultPrevented;\n\t\t\tevent.preventDefault();\n\n\t\t\tif ( event.type === 'copy' || event.type === 'cut' ) {\n\t\t\t\tif ( selectedBlockClientIds.length === 1 ) {\n\t\t\t\t\tflashBlock( selectedBlockClientIds[ 0 ] );\n\t\t\t\t}\n\t\t\t\tnotifyCopy( event.type, selectedBlockClientIds );\n\t\t\t\tconst blocks = getBlocksByClientId( selectedBlockClientIds );\n\t\t\t\tconst serialized = serialize( blocks );\n\n\t\t\t\tevent.clipboardData.setData( 'text/plain', serialized );\n\t\t\t\tevent.clipboardData.setData( 'text/html', serialized );\n\t\t\t}\n\n\t\t\tif ( event.type === 'cut' ) {\n\t\t\t\tremoveBlocks( selectedBlockClientIds );\n\t\t\t} else if ( event.type === 'paste' ) {\n\t\t\t\tif ( eventDefaultPrevented ) {\n\t\t\t\t\t// This was likely already handled in rich-text/use-paste-handler.js\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst {\n\t\t\t\t\t__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,\n\t\t\t\t} = getSettings();\n\t\t\t\tconst { plainText, html } = getPasteEventData( event );\n\t\t\t\tconst blocks = pasteHandler( {\n\t\t\t\t\tHTML: html,\n\t\t\t\t\tplainText,\n\t\t\t\t\tmode: 'BLOCKS',\n\t\t\t\t\tcanUserUseUnfilteredHTML,\n\t\t\t\t} );\n\n\t\t\t\treplaceBlocks(\n\t\t\t\t\tselectedBlockClientIds,\n\t\t\t\t\tblocks,\n\t\t\t\t\tblocks.length - 1,\n\t\t\t\t\t-1\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tnode.ownerDocument.addEventListener( 'copy', handler );\n\t\tnode.ownerDocument.addEventListener( 'cut', handler );\n\t\tnode.ownerDocument.addEventListener( 'paste', handler );\n\n\t\treturn () => {\n\t\t\tnode.ownerDocument.removeEventListener( 'copy', handler );\n\t\t\tnode.ownerDocument.removeEventListener( 'cut', handler );\n\t\t\tnode.ownerDocument.removeEventListener( 'paste', handler );\n\t\t};\n\t}, [] );\n}\n\nfunction CopyHandler( { children } ) {\n\treturn <div ref={ useClipboardHandler() }>{ children }</div>;\n}\n\nexport default CopyHandler;\n"]}

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

@@ -56,9 +56,9 @@ export function DefaultBlockAppender({
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
     ,
     role: "button",
-    "aria-label": __('Add block') // The wp-block className is important for editor styles.
+    "aria-label": __('Add block') // A wrapping container for this one already has the wp-block className.
     ,
-    className: "wp-block block-editor-default-block-appender__content",
+    className: "block-editor-default-block-appender__content",
     onFocus: onAppend
   }, showPrompt ? value : ZWNBSP), createElement(Inserter, {
     rootClientId: rootClientId,

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// The wp-block className is important for editor styles.\n\t\t\t\tclassName=\"wp-block 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","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"]}

package/build-module/components/duotone-control/index.js

@@ -1,17 +1,11 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, DuotoneSwatch } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { Dropdown, DuotonePicker, DuotoneSwatch, MenuGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
-/**
- * Internal dependencies
- */
-
-import DuotonePickerPopover from './duotone-picker-popover';
 
 function DuotoneControl({
   colorPalette,
@@ -21,38 +15,48 @@ function DuotoneControl({
   value,
   onChange
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const onToggle = () => {
-    setIsOpen(prev => !prev);
-  };
-
-  const openOnArrowDown = event => {
-    if (!isOpen && event.keyCode === DOWN) {
-      event.preventDefault();
-      onToggle();
-    }
-  };
+  return createElement(Dropdown, {
+    popoverProps: {
+      className: 'block-editor-duotone-control__popover',
+      headerTitle: __('Duotone'),
+      isAlternate: true
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => {
+      const openOnArrowDown = event => {
+        if (!isOpen && event.keyCode === DOWN) {
+          event.preventDefault();
+          onToggle();
+        }
+      };
 
-  return createElement(Fragment, null, createElement(ToolbarButton, {
-    showTooltip: true,
-    onClick: onToggle,
-    "aria-haspopup": "true",
-    "aria-expanded": isOpen,
-    onKeyDown: openOnArrowDown,
-    label: __('Apply duotone filter'),
-    icon: createElement(DuotoneSwatch, {
-      values: value
-    })
-  }), isOpen && createElement(DuotonePickerPopover, {
-    value: value,
-    onChange: onChange,
-    onToggle: onToggle,
-    duotonePalette: duotonePalette,
-    colorPalette: colorPalette,
-    disableCustomColors: disableCustomColors,
-    disableCustomDuotone: disableCustomDuotone
-  }));
+      return createElement(ToolbarButton, {
+        showTooltip: true,
+        onClick: onToggle,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        onKeyDown: openOnArrowDown,
+        label: __('Apply duotone filter'),
+        icon: createElement(DuotoneSwatch, {
+          values: value
+        })
+      });
+    },
+    renderContent: () => createElement(MenuGroup, {
+      label: __('Duotone')
+    }, createElement("div", {
+      className: "block-editor-duotone-control__description"
+    }, __('Create a two-tone color effect without losing your original image.')), createElement(DuotonePicker, {
+      colorPalette: colorPalette,
+      duotonePalette: duotonePalette,
+      disableCustomColors: disableCustomColors,
+      disableCustomDuotone: disableCustomDuotone,
+      value: value,
+      onChange: onChange
+    }))
+  });
 }
 
 export default DuotoneControl;

package/build-module/components/duotone-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"names":["ToolbarButton","DuotoneSwatch","useState","__","DOWN","DuotonePickerPopover","DuotoneControl","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","isOpen","setIsOpen","onToggle","prev","openOnArrowDown","event","keyCode","preventDefault"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,aAAxB,QAA6C,uBAA7C;AACA,SAASC,QAAT,QAAyB,oBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,IAAT,QAAqB,qBAArB;AAEA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,0BAAjC;;AAEA,SAASC,cAAT,CAAyB;AACxBC,EAAAA,YADwB;AAExBC,EAAAA,cAFwB;AAGxBC,EAAAA,mBAHwB;AAIxBC,EAAAA,oBAJwB;AAKxBC,EAAAA,KALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwBZ,QAAQ,CAAE,KAAF,CAAtC;;AAEA,QAAMa,QAAQ,GAAG,MAAM;AACtBD,IAAAA,SAAS,CAAIE,IAAF,IAAY,CAAEA,IAAhB,CAAT;AACA,GAFD;;AAIA,QAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,QAAK,CAAEL,MAAF,IAAYK,KAAK,CAACC,OAAN,KAAkBf,IAAnC,EAA0C;AACzCc,MAAAA,KAAK,CAACE,cAAN;AACAL,MAAAA,QAAQ;AACR;AACD,GALD;;AAOA,SACC,8BACC,cAAC,aAAD;AACC,IAAA,WAAW,MADZ;AAEC,IAAA,OAAO,EAAGA,QAFX;AAGC,qBAAc,MAHf;AAIC,qBAAgBF,MAJjB;AAKC,IAAA,SAAS,EAAGI,eALb;AAMC,IAAA,KAAK,EAAGd,EAAE,CAAE,sBAAF,CANX;AAOC,IAAA,IAAI,EAAG,cAAC,aAAD;AAAe,MAAA,MAAM,EAAGQ;AAAxB;AAPR,IADD,EAUGE,MAAM,IACP,cAAC,oBAAD;AACC,IAAA,KAAK,EAAGF,KADT;AAEC,IAAA,QAAQ,EAAGC,QAFZ;AAGC,IAAA,QAAQ,EAAGG,QAHZ;AAIC,IAAA,cAAc,EAAGP,cAJlB;AAKC,IAAA,YAAY,EAAGD,YALhB;AAMC,IAAA,mBAAmB,EAAGE,mBANvB;AAOC,IAAA,oBAAoB,EAAGC;AAPxB,IAXF,CADD;AAwBA;;AAED,eAAeJ,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton, DuotoneSwatch } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport DuotonePickerPopover from './duotone-picker-popover';\n\nfunction DuotoneControl( {\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst onToggle = () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t};\n\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tonToggle();\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarButton\n\t\t\t\tshowTooltip\n\t\t\t\tonClick={ onToggle }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\tlabel={ __( 'Apply duotone filter' ) }\n\t\t\t\ticon={ <DuotoneSwatch values={ value } /> }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<DuotonePickerPopover\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonToggle={ onToggle }\n\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default DuotoneControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"names":["Dropdown","DuotonePicker","DuotoneSwatch","MenuGroup","ToolbarButton","__","DOWN","DuotoneControl","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","className","headerTitle","isAlternate","isOpen","onToggle","openOnArrowDown","event","keyCode","preventDefault"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,aAFD,EAGCC,aAHD,EAICC,SAJD,EAKCC,aALD,QAMO,uBANP;AAOA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,IAAT,QAAqB,qBAArB;;AAEA,SAASC,cAAT,CAAyB;AACxBC,EAAAA,YADwB;AAExBC,EAAAA,cAFwB;AAGxBC,EAAAA,mBAHwB;AAIxBC,EAAAA,oBAJwB;AAKxBC,EAAAA,KALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,SACC,cAAC,QAAD;AACC,IAAA,YAAY,EAAG;AACdC,MAAAA,SAAS,EAAE,uCADG;AAEdC,MAAAA,WAAW,EAAEV,EAAE,CAAE,SAAF,CAFD;AAGdW,MAAAA,WAAW,EAAE;AAHC,KADhB;AAMC,IAAA,YAAY,EAAG,CAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KAA4B;AAC1C,YAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,YAAK,CAAEH,MAAF,IAAYG,KAAK,CAACC,OAAN,KAAkBf,IAAnC,EAA0C;AACzCc,UAAAA,KAAK,CAACE,cAAN;AACAJ,UAAAA,QAAQ;AACR;AACD,OALD;;AAMA,aACC,cAAC,aAAD;AACC,QAAA,WAAW,MADZ;AAEC,QAAA,OAAO,EAAGA,QAFX;AAGC,yBAAc,MAHf;AAIC,yBAAgBD,MAJjB;AAKC,QAAA,SAAS,EAAGE,eALb;AAMC,QAAA,KAAK,EAAGd,EAAE,CAAE,sBAAF,CANX;AAOC,QAAA,IAAI,EAAG,cAAC,aAAD;AAAe,UAAA,MAAM,EAAGO;AAAxB;AAPR,QADD;AAWA,KAxBF;AAyBC,IAAA,aAAa,EAAG,MACf,cAAC,SAAD;AAAW,MAAA,KAAK,EAAGP,EAAE,CAAE,SAAF;AAArB,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACGA,EAAE,CACH,oEADG,CADL,CADD,EAMC,cAAC,aAAD;AACC,MAAA,YAAY,EAAGG,YADhB;AAEC,MAAA,cAAc,EAAGC,cAFlB;AAGC,MAAA,mBAAmB,EAAGC,mBAHvB;AAIC,MAAA,oBAAoB,EAAGC,oBAJxB;AAKC,MAAA,KAAK,EAAGC,KALT;AAMC,MAAA,QAAQ,EAAGC;AANZ,MAND;AA1BF,IADD;AA6CA;;AAED,eAAeN,cAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\nfunction DuotoneControl( {\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t\tisAlternate: true,\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ __( 'Apply duotone filter' ) }\n\t\t\t\t\t\ticon={ <DuotoneSwatch values={ value } /> }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<div className=\"block-editor-duotone-control__description\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"]}

package/build-module/components/editor-styles/index.js

@@ -3,7 +3,9 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * External dependencies
  */
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
@@ -15,6 +17,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 
 import transformStyles from '../../utils/transform-styles';
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
+extend([namesPlugin, a11yPlugin]);
 
 function useDarkThemeBodyClassName(styles) {
   return useCallback(node => {
@@ -43,10 +46,11 @@ function useDarkThemeBodyClassName(styles) {
       body.removeChild(tempCanvas);
     } else {
       backgroundColor = defaultView.getComputedStyle(canvas, null).getPropertyValue('background-color');
-    } // If background is transparent, it should be treated as light color.
+    }
 
+    const colordBackgroundColor = colord(backgroundColor); // If background is transparent, it should be treated as light color.
 
-    if (tinycolor(backgroundColor).getLuminance() > 0.5 || tinycolor(backgroundColor).getAlpha() === 0) {
+    if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
       body.classList.remove('is-dark-theme');
     } else {
       body.classList.add('is-dark-theme');

package/build-module/components/editor-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["tinycolor","useCallback","useMemo","transformStyles","EDITOR_STYLES_SELECTOR","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","getLuminance","getAlpha","remove","EditorStyles","transformedStyles","map","css","index"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,SAAP,MAAsB,YAAtB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,OAAtB,QAAqC,oBAArC;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,8BAA5B;AAEA,MAAMC,sBAAsB,GAAG,wBAA/B;;AAEA,SAASC,yBAAT,CAAoCC,MAApC,EAA6C;AAC5C,SAAOL,WAAW,CACfM,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,IAA1B;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAwBF,aAA9B;AACA,UAAMG,MAAM,GAAGH,aAAa,CAACI,aAAd,CACdR,sBADc,CAAf;AAIA,QAAIS,eAAJ;;AAEA,QAAK,CAAEF,MAAP,EAAgB;AACf;AACA;AACA;AACA,YAAMG,UAAU,GAAGN,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAAnB;AACAD,MAAAA,UAAU,CAACE,SAAX,CAAqBC,GAArB,CAA0B,uBAA1B;AACAP,MAAAA,IAAI,CAACQ,WAAL,CAAkBJ,UAAlB;AAEAD,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACEL,UADF,EACc,IADd,EAEhBM,gBAFgB,CAEE,kBAFF,CAAlB;AAIAV,MAAAA,IAAI,CAACW,WAAL,CAAkBP,UAAlB;AACA,KAbD,MAaO;AACND,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACER,MADF,EACU,IADV,EAEhBS,gBAFgB,CAEE,kBAFF,CAAlB;AAGA,KA9BU,CAgCX;;;AACA,QACCpB,SAAS,CAAEa,eAAF,CAAT,CAA6BS,YAA7B,KAA8C,GAA9C,IACAtB,SAAS,CAAEa,eAAF,CAAT,CAA6BU,QAA7B,OAA4C,CAF7C,EAGE;AACDb,MAAAA,IAAI,CAACM,SAAL,CAAeQ,MAAf,CAAuB,eAAvB;AACA,KALD,MAKO;AACNd,MAAAA,IAAI,CAACM,SAAL,CAAeC,GAAf,CAAoB,eAApB;AACA;AACD,GA1CgB,EA2CjB,CAAEX,MAAF,CA3CiB,CAAlB;AA6CA;;AAED,eAAe,SAASmB,YAAT,CAAuB;AAAEnB,EAAAA;AAAF,CAAvB,EAAoC;AAClD,QAAMoB,iBAAiB,GAAGxB,OAAO,CAChC,MAAMC,eAAe,CAAEG,MAAF,EAAUF,sBAAV,CADW,EAEhC,CAAEE,MAAF,CAFgC,CAAjC;AAIA,SACC,8BAGC;AAAO,IAAA,GAAG,EAAGD,yBAAyB,CAAEC,MAAF;AAAtC,IAHD,EAIGoB,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,GAAF,EAAOC,KAAP,KACxB;AAAO,IAAA,GAAG,EAAGA;AAAb,KAAuBD,GAAvB,CADC,CAJH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport tinycolor from 'tinycolor2';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\ttinycolor( backgroundColor ).getLuminance() > 0.5 ||\n\t\t\t\ttinycolor( backgroundColor ).getAlpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst transformedStyles = useMemo(\n\t\t() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),\n\t\t[ styles ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( styles ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["colord","extend","namesPlugin","a11yPlugin","useCallback","useMemo","transformStyles","EDITOR_STYLES_SELECTOR","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","colordBackgroundColor","luminance","alpha","remove","EditorStyles","transformedStyles","map","css","index"],"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,WAAT,EAAsBC,OAAtB,QAAqC,oBAArC;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,8BAA5B;AAEA,MAAMC,sBAAsB,GAAG,wBAA/B;AACAN,MAAM,CAAE,CAAEC,WAAF,EAAeC,UAAf,CAAF,CAAN;;AAEA,SAASK,yBAAT,CAAoCC,MAApC,EAA6C;AAC5C,SAAOL,WAAW,CACfM,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,IAA1B;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAwBF,aAA9B;AACA,UAAMG,MAAM,GAAGH,aAAa,CAACI,aAAd,CACdR,sBADc,CAAf;AAIA,QAAIS,eAAJ;;AAEA,QAAK,CAAEF,MAAP,EAAgB;AACf;AACA;AACA;AACA,YAAMG,UAAU,GAAGN,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAAnB;AACAD,MAAAA,UAAU,CAACE,SAAX,CAAqBC,GAArB,CAA0B,uBAA1B;AACAP,MAAAA,IAAI,CAACQ,WAAL,CAAkBJ,UAAlB;AAEAD,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACEL,UADF,EACc,IADd,EAEhBM,gBAFgB,CAEE,kBAFF,CAAlB;AAIAV,MAAAA,IAAI,CAACW,WAAL,CAAkBP,UAAlB;AACA,KAbD,MAaO;AACND,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACER,MADF,EACU,IADV,EAEhBS,gBAFgB,CAEE,kBAFF,CAAlB;AAGA;;AACD,UAAME,qBAAqB,GAAGzB,MAAM,CAAEgB,eAAF,CAApC,CA/BW,CAgCX;;AACA,QACCS,qBAAqB,CAACC,SAAtB,KAAoC,GAApC,IACAD,qBAAqB,CAACE,KAAtB,OAAkC,CAFnC,EAGE;AACDd,MAAAA,IAAI,CAACM,SAAL,CAAeS,MAAf,CAAuB,eAAvB;AACA,KALD,MAKO;AACNf,MAAAA,IAAI,CAACM,SAAL,CAAeC,GAAf,CAAoB,eAApB;AACA;AACD,GA1CgB,EA2CjB,CAAEX,MAAF,CA3CiB,CAAlB;AA6CA;;AAED,eAAe,SAASoB,YAAT,CAAuB;AAAEpB,EAAAA;AAAF,CAAvB,EAAoC;AAClD,QAAMqB,iBAAiB,GAAGzB,OAAO,CAChC,MAAMC,eAAe,CAAEG,MAAF,EAAUF,sBAAV,CADW,EAEhC,CAAEE,MAAF,CAFgC,CAAjC;AAKA,SACC,8BAGC;AAAO,IAAA,GAAG,EAAGD,yBAAyB,CAAEC,MAAF;AAAtC,IAHD,EAIGqB,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,GAAF,EAAOC,KAAP,KACxB;AAAO,IAAA,GAAG,EAAGA;AAAb,KAAuBD,GAAvB,CADC,CAJH,CADD;AAUA","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 { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst transformedStyles = useMemo(\n\t\t() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),\n\t\t[ styles ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( styles ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"]}