Support enabling custom link color from theme.json (#25148)

lib/client-assets.php

@@ -633,17 +633,3 @@ function gutenberg_extend_settings_custom_units( $settings ) {
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );
-
-/**
- * Extends block editor settings to determine whether to use custom spacing controls.
- * Currently experimental.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_extend_settings_link_color( $settings ) {
-	$settings['__experimentalEnableLinkColor'] = get_theme_support( 'experimental-link-color' );
-	return $settings;
-}
-add_filter( 'block_editor_settings', 'gutenberg_extend_settings_link_color' );

lib/experimental-default-theme.json

@@ -129,7 +129,8 @@
 				"dropCap": true
 			},
 			"color": {
-				"custom": true
+				"custom": true,
+				"link": false
 			},
 			"gradient": {
 				"custom": true

lib/global-styles.php

@@ -652,6 +652,12 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) {
 		}
 		$features['global']['spacing']['custom'] = true;
 	}
+	if ( get_theme_support( 'experimental-link-color' ) ) {
+		if ( ! isset( $features['global']['color'] ) ) {
+			$features['global']['color'] = array();
+		}
+		$features['global']['color']['link'] = true;
+	}
 
 	return $features;
 }

packages/block-editor/src/hooks/color.js

@@ -29,6 +29,7 @@ import {
 } from '../components/gradients';
 import { cleanEmptyObject } from './utils';
 import ColorPanel from './color-panel';
+import useEditorFeature from '../components/use-editor-feature';
 
 export const COLOR_SUPPORT_KEY = '__experimentalColor';
 
@@ -181,12 +182,10 @@ const getLinkColorFromAttributeValue = ( colors, value ) => {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const { colors, gradients, __experimentalEnableLinkColor } = useSelect(
-		( select ) => {
-			return select( 'core/block-editor' ).getSettings();
-		},
-		[]
-	);
+	const isLinkColorEnabled = useEditorFeature( 'color.link' );
+	const { colors, gradients } = useSelect( ( select ) => {
+		return select( 'core/block-editor' ).getSettings();
+	}, [] );
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
@@ -315,8 +314,7 @@ export function ColorEdit( props ) {
 						? onChangeGradient
 						: undefined,
 				},
-				...( __experimentalEnableLinkColor &&
-				hasLinkColorSupport( blockName )
+				...( isLinkColorEnabled && hasLinkColorSupport( blockName )
 					? [
 							{
 								label: __( 'Link Color' ),

packages/editor/src/components/provider/index.js

@@ -160,7 +160,6 @@ class EditorProvider extends Component {
 				'__experimentalBlockDirectory',
 				'__experimentalBlockPatterns',
 				'__experimentalBlockPatternCategories',
-				'__experimentalEnableLinkColor',
 				'__experimentalEnableFullSiteEditing',
 				'__experimentalEnableFullSiteEditingDemo',
 				'__experimentalFeatures',