@wordpress/block-editor 8.1.0 → 8.1.2

package/build-module/hooks/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/utils.js"],"names":["pickBy","isEmpty","isObject","identity","mapValues","cleanEmptyObject","object","Array","isArray","cleanedNestedObjects","undefined"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,OAAjB,EAA0BC,QAA1B,EAAoCC,QAApC,EAA8CC,SAA9C,QAA+D,QAA/D;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAKC,MAAF,IAAc;AAC7C,MAAK,CAAEJ,QAAQ,CAAEI,MAAF,CAAV,IAAwBC,KAAK,CAACC,OAAN,CAAeF,MAAf,CAA7B,EAAuD;AACtD,WAAOA,MAAP;AACA;;AACD,QAAMG,oBAAoB,GAAGT,MAAM,CAClCI,SAAS,CAAEE,MAAF,EAAUD,gBAAV,CADyB,EAElCF,QAFkC,CAAnC;AAIA,SAAOF,OAAO,CAAEQ,oBAAF,CAAP,GAAkCC,SAAlC,GAA8CD,oBAArD;AACA,CATM","sourcesContent":["/**\n * External dependencies\n */\nimport { pickBy, isEmpty, isObject, identity, mapValues } from 'lodash';\n\n/**\n * Removed falsy values from nested object.\n *\n * @param {*} object\n * @return {*} Object cleaned from falsy values\n */\nexport const cleanEmptyObject = ( object ) => {\n\tif ( ! isObject( object ) || Array.isArray( object ) ) {\n\t\treturn object;\n\t}\n\tconst cleanedNestedObjects = pickBy(\n\t\tmapValues( object, cleanEmptyObject ),\n\t\tidentity\n\t);\n\treturn isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/utils.js"],"names":["pickBy","isEmpty","isObject","identity","mapValues","forEach","get","setWith","clone","every","cleanEmptyObject","object","Array","isArray","cleanedNestedObjects","undefined","immutableSet","path","value","transformStyles","activeSupports","migrationPaths","result","source","index","results","isActive","length","innerBlocks","referenceBlockAttributes","attributes","returnBlock","support","styleValue"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,MADD,EAECC,OAFD,EAGCC,QAHD,EAICC,QAJD,EAKCC,SALD,EAMCC,OAND,EAOCC,GAPD,EAQCC,OARD,EASCC,KATD,EAUCC,KAVD,QAWO,QAXP;AAaA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,gBAAgB,GAAKC,MAAF,IAAc;AAC7C,MAAK,CAAET,QAAQ,CAAES,MAAF,CAAV,IAAwBC,KAAK,CAACC,OAAN,CAAeF,MAAf,CAA7B,EAAuD;AACtD,WAAOA,MAAP;AACA;;AACD,QAAMG,oBAAoB,GAAGd,MAAM,CAClCI,SAAS,CAAEO,MAAF,EAAUD,gBAAV,CADyB,EAElCP,QAFkC,CAAnC;AAIA,SAAOF,OAAO,CAAEa,oBAAF,CAAP,GAAkCC,SAAlC,GAA8CD,oBAArD;AACA,CATM;AAWP,OAAO,SAASE,YAAT,CAAuBL,MAAvB,EAA+BM,IAA/B,EAAqCC,KAArC,EAA6C;AACnD,SAAOX,OAAO,CAAEI,MAAM,GAAGH,KAAK,CAAEG,MAAF,CAAR,GAAqB,EAA7B,EAAiCM,IAAjC,EAAuCC,KAAvC,EAA8CV,KAA9C,CAAd;AACA;AAED,OAAO,SAASW,eAAT,CACNC,cADM,EAENC,cAFM,EAGNC,MAHM,EAINC,MAJM,EAKNC,KALM,EAMNC,OANM,EAOL;AAAA;;AACD;AACA,MAAKhB,KAAK,CAAEW,cAAF,EAAoBM,QAAF,IAAgB,CAAEA,QAApC,CAAV,EAA2D;AAC1D,WAAOJ,MAAP;AACA,GAJA,CAKD;AACA;;;AACA,MAAKG,OAAO,CAACE,MAAR,KAAmB,CAAnB,IAAwBL,MAAM,CAACM,WAAP,CAAmBD,MAAnB,KAA8BJ,MAAM,CAACI,MAAlE,EAA2E;AAC1E,WAAOL,MAAP;AACA,GATA,CAUD;AACA;AACA;;;AACA,MAAIO,wBAAwB,eAAGN,MAAM,CAAE,CAAF,CAAT,6CAAG,SAAaO,UAA5C,CAbC,CAcD;AACA;AACA;AACA;;AACA,MAAKL,OAAO,CAACE,MAAR,GAAiB,CAAjB,IAAsBJ,MAAM,CAACI,MAAP,GAAgB,CAA3C,EAA+C;AAC9C,QAAKJ,MAAM,CAAEC,KAAF,CAAX,EAAuB;AAAA;;AACtBK,MAAAA,wBAAwB,oBAAGN,MAAM,CAAEC,KAAF,CAAT,kDAAG,cAAiBM,UAA5C;AACA,KAFD,MAEO;AACN,aAAOR,MAAP;AACA;AACD;;AACD,MAAIS,WAAW,GAAGT,MAAlB;AACAjB,EAAAA,OAAO,CAAEe,cAAF,EAAkB,CAAEM,QAAF,EAAYM,OAAZ,KAAyB;AACjD,QAAKN,QAAL,EAAgB;AACfL,MAAAA,cAAc,CAAEW,OAAF,CAAd,CAA0B3B,OAA1B,CAAqCY,IAAF,IAAY;AAC9C,cAAMgB,UAAU,GAAG3B,GAAG,CAAEuB,wBAAF,EAA4BZ,IAA5B,CAAtB;;AACA,YAAKgB,UAAL,EAAkB;AACjBF,UAAAA,WAAW,GAAG,EACb,GAAGA,WADU;AAEbD,YAAAA,UAAU,EAAEd,YAAY,CACvBe,WAAW,CAACD,UADW,EAEvBb,IAFuB,EAGvBgB,UAHuB;AAFX,WAAd;AAQA;AACD,OAZD;AAaA;AACD,GAhBM,CAAP;AAiBA,SAAOF,WAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tpickBy,\n\tisEmpty,\n\tisObject,\n\tidentity,\n\tmapValues,\n\tforEach,\n\tget,\n\tsetWith,\n\tclone,\n\tevery,\n} from 'lodash';\n\n/**\n * Removed falsy values from nested object.\n *\n * @param {*} object\n * @return {*} Object cleaned from falsy values\n */\nexport const cleanEmptyObject = ( object ) => {\n\tif ( ! isObject( object ) || Array.isArray( object ) ) {\n\t\treturn object;\n\t}\n\tconst cleanedNestedObjects = pickBy(\n\t\tmapValues( object, cleanEmptyObject ),\n\t\tidentity\n\t);\n\treturn isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;\n};\n\nexport function immutableSet( object, path, value ) {\n\treturn setWith( object ? clone( object ) : {}, path, value, clone );\n}\n\nexport function transformStyles(\n\tactiveSupports,\n\tmigrationPaths,\n\tresult,\n\tsource,\n\tindex,\n\tresults\n) {\n\t// If there are no active supports return early.\n\tif ( every( activeSupports, ( isActive ) => ! isActive ) ) {\n\t\treturn result;\n\t}\n\t// If the condition verifies we are probably in the presence of a wrapping transform\n\t// e.g: nesting paragraphs in a group or columns and in that case the styles should not be transformed.\n\tif ( results.length === 1 && result.innerBlocks.length === source.length ) {\n\t\treturn result;\n\t}\n\t// For cases where we have a transform from one block to multiple blocks\n\t// or multiple blocks to one block we apply the styles of the first source block\n\t// to the result(s).\n\tlet referenceBlockAttributes = source[ 0 ]?.attributes;\n\t// If we are in presence of transform between more than one block in the source\n\t// that has more than one block in the result\n\t// we apply the styles on source N to the result N,\n\t// if source N does not exists we do nothing.\n\tif ( results.length > 1 && source.length > 1 ) {\n\t\tif ( source[ index ] ) {\n\t\t\treferenceBlockAttributes = source[ index ]?.attributes;\n\t\t} else {\n\t\t\treturn result;\n\t\t}\n\t}\n\tlet returnBlock = result;\n\tforEach( activeSupports, ( isActive, support ) => {\n\t\tif ( isActive ) {\n\t\t\tmigrationPaths[ support ].forEach( ( path ) => {\n\t\t\t\tconst styleValue = get( referenceBlockAttributes, path );\n\t\t\t\tif ( styleValue ) {\n\t\t\t\t\treturnBlock = {\n\t\t\t\t\t\t...returnBlock,\n\t\t\t\t\t\tattributes: immutableSet(\n\t\t\t\t\t\t\treturnBlock.attributes,\n\t\t\t\t\t\t\tpath,\n\t\t\t\t\t\t\tstyleValue\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\treturn returnBlock;\n}\n"]}

package/build-style/style-rtl.css

@@ -2533,16 +2533,10 @@
    * Position spinner to the left of the actions.
    *
    * Compensate for:
-   *  - Input margin ($grid-unit-20)
-   *  - Border (1px)
-   *  - Vertically, for the difference in height between the input (40px)
-   *    and the spinner.
-   *  - Horizontally, adjust for the width occupied by the icon buttons,
-   *    then artificially create spacing that mimics as if the spinner
-   *    were center-padded to the same width as an icon button.
+   *  - Input padding right ($button-size)
    */
-  top: 28px;
-  left: 62px;
+  top: calc(50% - 16px / 2);
+  left: 36px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -3600,6 +3594,74 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
+.color-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * The following styles replicate the separated border of the
+   * `ItemGroup` component but allows for hidden items. This is because
+   * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+   * must at least render a placeholder which would otherwise interfere
+   * with the `:last-child` styles.
+   */
+  /**
+   * The following few styles fix the layout and spacing for the due to the
+   * introduced wrapper element by the `Item` component.
+   */
+}
+.color-block-support-panel .block-editor-contrast-checker {
+  /**
+   * Contrast checkers are forced to the bottom of the panel so all
+   * injected color controls can appear as a single item group without
+   * the contrast checkers suddenly appearing between items.
+   */
+  order: 9999;
+  grid-column: span 2;
+  margin-top: 16px;
+}
+.color-block-support-panel .block-editor-contrast-checker .components-notice__content {
+  margin-left: 0;
+}
+.color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
+  row-gap: 0;
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item {
+  padding: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div,
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button {
+  border-radius: inherit;
+}
+.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown {
+  display: block;
+  padding: 0;
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown > button {
+  height: 46px;
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open {
+  background: #f0f0f0;
+  color: var(--wp-admin-theme-color);
+}
+.color-block-support-panel .color-block-support-panel__item-group > div {
+  grid-column: span 2;
+  border-radius: inherit;
+}
+
 /**
  * Block Toolbar
  */

package/build-style/style.css

@@ -2533,16 +2533,10 @@
    * Position spinner to the left of the actions.
    *
    * Compensate for:
-   *  - Input margin ($grid-unit-20)
-   *  - Border (1px)
-   *  - Vertically, for the difference in height between the input (40px)
-   *    and the spinner.
-   *  - Horizontally, adjust for the width occupied by the icon buttons,
-   *    then artificially create spacing that mimics as if the spinner
-   *    were center-padded to the same width as an icon button.
+   *  - Input padding right ($button-size)
    */
-  top: 28px;
-  right: 62px;
+  top: calc(50% - 16px / 2);
+  right: 36px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -3600,6 +3594,74 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
+.color-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * The following styles replicate the separated border of the
+   * `ItemGroup` component but allows for hidden items. This is because
+   * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+   * must at least render a placeholder which would otherwise interfere
+   * with the `:last-child` styles.
+   */
+  /**
+   * The following few styles fix the layout and spacing for the due to the
+   * introduced wrapper element by the `Item` component.
+   */
+}
+.color-block-support-panel .block-editor-contrast-checker {
+  /**
+   * Contrast checkers are forced to the bottom of the panel so all
+   * injected color controls can appear as a single item group without
+   * the contrast checkers suddenly appearing between items.
+   */
+  order: 9999;
+  grid-column: span 2;
+  margin-top: 16px;
+}
+.color-block-support-panel .block-editor-contrast-checker .components-notice__content {
+  margin-right: 0;
+}
+.color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
+  row-gap: 0;
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item {
+  padding: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last {
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div,
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button {
+  border-radius: inherit;
+}
+.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown {
+  display: block;
+  padding: 0;
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown > button {
+  height: 46px;
+}
+.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open {
+  background: #f0f0f0;
+  color: var(--wp-admin-theme-color);
+}
+.color-block-support-panel .color-block-support-panel__item-group > div {
+  grid-column: span 2;
+  border-radius: inherit;
+}
+
 /**
  * Block Toolbar
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "8.1.0",
+	"version": "8.1.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,42 +33,38 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.3.0",
-		"@wordpress/api-fetch": "^6.0.0",
-		"@wordpress/blob": "^3.3.0",
-		"@wordpress/block-serialization-default-parser": "^4.3.0",
-		"@wordpress/blocks": "^11.2.0",
-		"@wordpress/components": "^19.3.0",
-		"@wordpress/compose": "^5.1.0",
-		"@wordpress/data": "^6.2.0",
-		"@wordpress/deprecated": "^3.3.0",
-		"@wordpress/dom": "^3.3.0",
-		"@wordpress/element": "^4.1.0",
-		"@wordpress/hooks": "^3.3.0",
-		"@wordpress/html-entities": "^3.3.0",
-		"@wordpress/i18n": "^4.3.0",
-		"@wordpress/icons": "^6.2.0",
-		"@wordpress/is-shallow-equal": "^4.3.0",
-		"@wordpress/keyboard-shortcuts": "^3.1.0",
-		"@wordpress/keycodes": "^3.3.0",
-		"@wordpress/notices": "^3.3.0",
-		"@wordpress/rich-text": "^5.1.0",
-		"@wordpress/shortcode": "^3.3.0",
-		"@wordpress/token-list": "^2.3.0",
-		"@wordpress/url": "^3.4.0",
-		"@wordpress/warning": "^2.3.0",
-		"@wordpress/wordcount": "^3.3.0",
+		"@wordpress/a11y": "^3.3.1",
+		"@wordpress/api-fetch": "^6.0.1",
+		"@wordpress/blob": "^3.3.1",
+		"@wordpress/blocks": "^11.2.1",
+		"@wordpress/components": "^19.4.1",
+		"@wordpress/compose": "^5.1.1",
+		"@wordpress/data": "^6.2.1",
+		"@wordpress/deprecated": "^3.3.1",
+		"@wordpress/dom": "^3.3.1",
+		"@wordpress/element": "^4.1.1",
+		"@wordpress/hooks": "^3.3.1",
+		"@wordpress/html-entities": "^3.3.1",
+		"@wordpress/i18n": "^4.3.1",
+		"@wordpress/icons": "^7.0.0",
+		"@wordpress/is-shallow-equal": "^4.3.1",
+		"@wordpress/keyboard-shortcuts": "^3.1.1",
+		"@wordpress/keycodes": "^3.3.1",
+		"@wordpress/notices": "^3.3.1",
+		"@wordpress/rich-text": "^5.1.1",
+		"@wordpress/shortcode": "^3.3.1",
+		"@wordpress/token-list": "^2.3.1",
+		"@wordpress/url": "^3.4.1",
+		"@wordpress/warning": "^2.3.1",
+		"@wordpress/wordcount": "^3.3.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
-		"css-mediaquery": "^0.1.2",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
-		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",
 		"traverse": "^0.6.6"
 	},
@@ -79,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d95ccb9366e249133cdb1d7b25c382446b9ee502"
+	"gitHead": "0f838547f37472e46e6d5a9d2e84b6c61f4bd3f0"
 }

package/src/components/block-inspector/index.js

@@ -67,6 +67,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
 				<InspectorControls.Slot />
+				<InspectorControls.Slot
+					__experimentalGroup="color"
+					label={ __( 'Color' ) }
+				/>
 				<InspectorControls.Slot
 					__experimentalGroup="typography"
 					label={ __( 'Typography' ) }
@@ -139,6 +143,11 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				__experimentalGroup="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="typography"
 				label={ __( 'Typography' ) }

package/src/components/block-preview/auto.js

@@ -84,6 +84,9 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 						documentElement.style.width = '100%';
 						bodyElement.style.padding =
 							__experimentalPadding + 'px';
+
+						// necessary for contentResizeListener to work.
+						bodyElement.style.position = 'relative';
 					}, [] ) }
 					aria-hidden
 					tabIndex={ -1 }

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -150,7 +150,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   fill="#000"
                   focusable={false}
                   height={24}
-                  role="img"
                   viewBox="0 0 24 24"
                   width={24}
                   xmlns="http://www.w3.org/2000/svg"

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

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ColorIndicator,
+	Dropdown,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from './control';
+import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+
+export default function ToolsPanelColorDropdown( {
+	settings,
+	enableAlpha,
+	...otherProps
+} ) {
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const controlSettings = {
+		...colorGradientSettings,
+		clearable: false,
+		enableAlpha,
+		label: settings.label,
+		onColorChange: settings.onColorChange,
+		onGradientChange: settings.onGradientChange,
+		colorValue: settings.colorValue,
+		gradientValue: settings.gradientValue,
+	};
+	const selectedColor = settings.gradientValue ?? settings.colorValue;
+
+	return (
+		<ToolsPanelItem
+			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"
+		>
+			<Dropdown
+				className="block-editor-tools-panel-color-dropdown"
+				contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						className={ classnames(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						) }
+					>
+						<HStack justify="flex-start">
+							<ColorIndicator
+								className="block-editor-panel-color-gradient-settings__color-indicator"
+								colorValue={ selectedColor }
+							/>
+							<FlexItem>{ settings.label }</FlexItem>
+						</HStack>
+					</Button>
+				) }
+				renderContent={ () => (
+					<ColorGradientControl
+						showTitle={ false }
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
+						enableAlpha
+						{ ...controlSettings }
+					/>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}

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

@@ -1,125 +1,140 @@
 /**
  * External dependencies
  */
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import namesPlugin from 'colord/plugins/names';
+import { colord, extend } from 'colord';
 
 /**
  * WordPress dependencies
  */
-import { speak } from '@wordpress/a11y';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';
-import { useEffect } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
-function ContrastCheckerMessage( {
-	colordBackgroundColor,
-	colordTextColor,
-	backgroundColor,
-	textColor,
-	shouldShowTransparencyWarning,
-} ) {
-	let msg = '';
-	if ( shouldShowTransparencyWarning ) {
-		msg = __( 'Transparent text may be hard for people to read.' );
-	} else {
-		msg =
-			colordBackgroundColor.brightness() < colordTextColor.brightness()
-				? __(
-						'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
-				  )
-				: __(
-						'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
-				  );
-	}
-
-	// Note: The `Notice` component can speak messages via its `spokenMessage`
-	// prop, but the contrast checker requires granular control over when the
-	// announcements are made. Notably, the message will be re-announced if a
-	// new color combination is selected and the contrast is still insufficient.
-	useEffect( () => {
-		const speakMsg = shouldShowTransparencyWarning
-			? __( 'Transparent text may be hard for people to read.' )
-			: __( 'This color combination may be hard for people to read.' );
-		speak( speakMsg );
-	}, [ backgroundColor, textColor ] );
-
-	return (
-		<div className="block-editor-contrast-checker">
-			<Notice
-				spokenMessage={ null }
-				status="warning"
-				isDismissible={ false }
-			>
-				{ msg }
-			</Notice>
-		</div>
-	);
-}
-
 function ContrastChecker( {
 	backgroundColor,
 	fallbackBackgroundColor,
 	fallbackTextColor,
+	fallbackLinkColor,
 	fontSize, // font size value in pixels
 	isLargeText,
 	textColor,
+	linkColor,
 	enableAlphaChecker = false,
 } ) {
-	if (
-		! ( backgroundColor || fallbackBackgroundColor ) ||
-		! ( textColor || fallbackTextColor )
-	) {
+	const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
+
+	// Must have a background color.
+	if ( ! currentBackgroundColor ) {
 		return null;
 	}
-	const colordBackgroundColor = colord(
-		backgroundColor || fallbackBackgroundColor
-	);
-	const colordTextColor = colord( textColor || fallbackTextColor );
-	const textColorHasTransparency = colordTextColor.alpha() < 1;
+
+	const currentTextColor = textColor || fallbackTextColor;
+	const currentLinkColor = linkColor || fallbackLinkColor;
+
+	// Must have at least one text color.
+	if ( ! currentTextColor && ! currentLinkColor ) {
+		return null;
+	}
+
+	const textColors = [
+		{
+			color: currentTextColor,
+			description: __( 'text color' ),
+		},
+		{
+			color: currentLinkColor,
+			description: __( 'link color' ),
+		},
+	];
+	const colordBackgroundColor = colord( currentBackgroundColor );
 	const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
-	const hasTransparency =
-		textColorHasTransparency || backgroundColorHasTransparency;
-	const isReadable = colordTextColor.isReadable( colordBackgroundColor, {
+	const backgroundColorBrightness = colordBackgroundColor.brightness();
+	const isReadableOptions = {
 		level: 'AA',
 		size:
 			isLargeText || ( isLargeText !== false && fontSize >= 24 )
 				? 'large'
 				: 'small',
-	} );
+	};
 
-	// Don't show the message if the text is readable AND there's no transparency.
-	// This is the default.
-	if ( isReadable && ! hasTransparency ) {
-		return null;
-	}
+	let message = '';
+	let speakMessage = '';
+	for ( const item of textColors ) {
+		// If there is no color, go no further.
+		if ( ! item.color ) {
+			continue;
+		}
+		const colordTextColor = 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()
+					? sprintf(
+							// translators: %s is a type of text color, e.g., "text color" or "link color"
+							__(
+								'This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s.'
+							),
+							item.description
+					  )
+					: sprintf(
+							// translators: %s is a type of text color, e.g., "text color" or "link color"
+							__(
+								'This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s.'
+							),
+							item.description
+					  );
+			speakMessage = __(
+				'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 ( hasTransparency ) {
-		if (
-			// If there's transparency, don't show the message if the alpha checker is disabled.
-			! enableAlphaChecker ||
-			// If the alpha checker is enabled, we only show the warning if the text has transparency.
-			( isReadable && ! textColorHasTransparency )
-		) {
-			return null;
+		// If there is no contrast warning and the text is transparent,
+		// show the transparent warning if alpha check is enabled.
+		if ( textHasTransparency && enableAlphaChecker ) {
+			message = __( 'Transparent text may be hard for people to read.' );
+			speakMessage = __(
+				'Transparent text may be hard for people to read.'
+			);
 		}
 	}
 
+	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.
+	speak( speakMessage );
+
 	return (
-		<ContrastCheckerMessage
-			backgroundColor={ backgroundColor }
-			textColor={ textColor }
-			colordBackgroundColor={ colordBackgroundColor }
-			colordTextColor={ colordTextColor }
-			// Flag to warn about transparency only if the text is otherwise readable according to colord
-			// to ensure the readability warnings take precedence.
-			shouldShowTransparencyWarning={
-				isReadable && textColorHasTransparency
-			}
-		/>
+		<div className="block-editor-contrast-checker">
+			<Notice
+				spokenMessage={ null }
+				status="warning"
+				isDismissible={ false }
+			>
+				{ message }
+			</Notice>
+		</div>
 	);
 }