Add utilities to retrieve color block support classes and styles (#30869

)

This includes two functions.

The first collects CSS classes and styles, suitable for a block's save.

The second is a hook to also force inline styles so named color selections are
respected even when themes do not load their color stylesheets in the editor.

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

@@ -9,3 +9,5 @@ import './style';
 import './color';
 import './font-size';
 import './layout';
+
+export { getColorClassesAndStyles, useColorProps } from './use-color-props';

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

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getInlineStyles } from './style';
+import {
+	getColorClassName,
+	getColorObjectByAttributeValues,
+} from '../components/colors';
+import {
+	__experimentalGetGradientClass,
+	getGradientValueBySlug,
+} from '../components/gradients';
+import useEditorFeature from '../components/use-editor-feature';
+
+// The code in this file has largely been lifted from the color block support
+// hook.
+//
+// This utility is intended to assist where the serialization of the colors
+// block support is being skipped for a block but the color related CSS classes
+// & styles still need to be generated so they can be applied to inner elements.
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Provides the CSS class names and inline styles for a block's color support
+ * attributes.
+ *
+ * @param  {Object} attributes Block attributes.
+ * @return {Object}            Color block support derived CSS classes & styles.
+ */
+export function getColorClassesAndStyles( attributes ) {
+	const { backgroundColor, textColor, gradient, style } = attributes;
+
+	// Collect color CSS classes.
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
+	const textClass = getColorClassName( 'color', textColor );
+
+	const gradientClass = __experimentalGetGradientClass( gradient );
+	const hasGradient = gradientClass || style?.color?.gradient;
+
+	// Determine color CSS class name list.
+	const className = classnames( textClass, gradientClass, {
+		// Don't apply the background class if there's a gradient.
+		[ backgroundClass ]: ! hasGradient && !! backgroundClass,
+		'has-text-color': textColor || style?.color?.text,
+		'has-background':
+			backgroundColor ||
+			style?.color?.background ||
+			gradient ||
+			style?.color?.gradient,
+		'has-link-color': style?.color?.link,
+	} );
+
+	// Collect inline styles for colors.
+	const colorStyles = style?.color || {};
+	const styleProp = getInlineStyles( { color: colorStyles } );
+
+	return {
+		className: className || undefined,
+		style: styleProp,
+	};
+}
+
+/**
+ * Determines the color related props for a block derived from its color block
+ * support attributes.
+ *
+ * Inline styles are forced for named colors to ensure these selections are
+ * reflected when themes do not load their color stylesheets in the editor.
+ *
+ * @param  {Object} attributes Block attributes.
+ * @return {Object}            ClassName & style props from colors block support.
+ */
+export function useColorProps( attributes ) {
+	const { backgroundColor, textColor, gradient } = attributes;
+
+	const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
+	const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY;
+
+	const colorProps = getColorClassesAndStyles( attributes );
+
+	// Force inline styles to apply colors when themes do not load their color
+	// stylesheets in the editor.
+	if ( backgroundColor ) {
+		const backgroundColorObject = getColorObjectByAttributeValues(
+			colors,
+			backgroundColor
+		);
+
+		colorProps.style.backgroundColor = backgroundColorObject.color;
+	}
+
+	if ( gradient ) {
+		colorProps.style.background = getGradientValueBySlug(
+			gradients,
+			gradient
+		);
+	}
+
+	if ( textColor ) {
+		const textColorObject = getColorObjectByAttributeValues(
+			colors,
+			textColor
+		);
+
+		colorProps.style.color = textColorObject.color;
+	}
+
+	return colorProps;
+}

packages/block-editor/src/index.js

@@ -7,6 +7,10 @@ import '@wordpress/rich-text';
  * Internal dependencies
  */
 import './hooks';
+export {
+	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
+	useColorProps as __experimentalUseColorProps,
+} from './hooks';
 export * from './components';
 export * from './utils';
 export { storeConfig, store } from './store';