@wordpress/block-editor/src/hooks/use-color-props.js

Generic block editor.

/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { useMemo } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { getInlineStyles } from './style';
import {
	getColorClassName,
	getColorObjectByAttributeValues,
} from '../components/colors';
import {
	__experimentalGetGradientClass,
	getGradientValueBySlug,
} from '../components/gradients';
import { useSettings } from '../components/use-settings';

// 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.

/**
 * 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 = clsx( 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?.elements?.link?.color,
	} );

	// 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 [
		userPalette,
		themePalette,
		defaultPalette,
		userGradients,
		themeGradients,
		defaultGradients,
	] = useSettings(
		'color.palette.custom',
		'color.palette.theme',
		'color.palette.default',
		'color.gradients.custom',
		'color.gradients.theme',
		'color.gradients.default'
	);

	const colors = useMemo(
		() => [
			...( userPalette || [] ),
			...( themePalette || [] ),
			...( defaultPalette || [] ),
		],
		[ userPalette, themePalette, defaultPalette ]
	);
	const gradients = useMemo(
		() => [
			...( userGradients || [] ),
			...( themeGradients || [] ),
			...( defaultGradients || [] ),
		],
		[ userGradients, themeGradients, defaultGradients ]
	);

	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;
}