packages/block-editor/src/hooks/elements.js - trunk - githubmirror/gutenberg

packages/block-editor/src/hooks/elements.js
143 строки3 KB
Marco Ciampini
ESLint: Replace strict config with bulk suppressions (#81248)
07 авг 2026, 14:34
07 авг 2026, 14:347f43eaf
import { getBlockSupport } from '@wordpress/blocks';
import { useMemo, useCallback } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import InspectorControls from '../components/inspector-controls';
import {
	useHasColorPanel,
	default as StylesColorPanel,
} from '../components/global-styles/color-panel';
import { useResolvedStyle } from '../components/global-styles/inherited-value-context';
import { cleanEmptyObject } from './utils';
import { store as blockEditorStore } from '../store';
import { COLOR_SUPPORT_KEY } from './color';
import useBlockColorContrastWarning from './contrast-checker';
import {
	getStyleForState,
	isDefaultBlockStyleState,
	setStyleForState,
	useBlockStyleState,
} from './block-style-state';

function ElementsInspectorControl( { children, resetAllFilter } ) {
	const attributesResetAllFilter = useCallback(
		( attributes ) => {
			const updatedStyle = resetAllFilter( attributes.style );
			return {
				...attributes,
				style: cleanEmptyObject( updatedStyle ),
			};
		},
		[ resetAllFilter ]
	);

	return (
		<InspectorControls
			group="elements"
			resetAllFilter={ attributesResetAllFilter }
		>
			{ children }
		</InspectorControls>
	);
}

export function ElementsEdit( {
	clientId,
	name,
	setAttributes,
	settings,
	asWrapper,
	label,
	defaultControls,
} ) {
	const selectedState = useBlockStyleState();
	const isEnabled = useHasColorPanel( settings );

	const { style, className } = useSelect(
		( select ) => {
			if ( ! isEnabled ) {
				return {};
			}
			const attributes =
				select( blockEditorStore ).getBlockAttributes( clientId );
			return {
				style: attributes?.style,
				className: attributes?.className,
			};
		},
		[ clientId, isEnabled ]
	);

	const { value: inheritedValue } = useResolvedStyle(
		name,
		className,
		selectedState
	);

	const isStateSelected = ! isDefaultBlockStyleState( selectedState );

	const value = useMemo( () => {
		if ( isStateSelected ) {
			return getStyleForState( style, selectedState );
		}
		return style;
	}, [ isStateSelected, selectedState, style ] );

	const onChange = isStateSelected
		? ( newStyle ) => {
				setAttributes( {
					style: setStyleForState( style, selectedState, newStyle ),
				} );
		  }
		: ( newStyle ) => {
				setAttributes( { style: cleanEmptyObject( newStyle ) } );
		  };

	// Text and background color failures are reported by the Typography and
	// Background panels, which own those selections.
	const enableContrastChecking =
		!! value?.elements?.link?.color?.text &&
		settings?.color?.link &&
		false !==
			getBlockSupport( name, [
				COLOR_SUPPORT_KEY,
				'enableContrastChecker',
			] );

	const contrastWarning = useBlockColorContrastWarning( {
		clientId,
		name,
		enabled: !! enableContrastChecking,
		checkTextColor: false,
		messageOverride: __(
			'This link color has poor contrast against the background. Consider increasing contrast.'
		),
	} );

	if ( ! isEnabled ) {
		return null;
	}

	defaultControls = defaultControls
		? defaultControls
		: getBlockSupport( name, [
				COLOR_SUPPORT_KEY,
				'__experimentalDefaultControls',
		  ] );

	const Wrapper = asWrapper || ElementsInspectorControl;

	return (
		<StylesColorPanel
			as={ Wrapper }
			panelId={ clientId }
			settings={ settings }
			value={ value }
			onChange={ onChange }
			defaultControls={ defaultControls }
			label={ label }
			contrastWarning={ contrastWarning }
			inheritedValue={ inheritedValue }
		/>
	);
}