First pass at trying elements panel

Author: aaronrobertshaw

packages/block-editor/src/components/block-inspector/index.js

@@ -66,6 +66,11 @@ function StyleInspectorSlots( {
 			/>
 			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
 			<InspectorControls.Slot group="styles" />
+			<InspectorControls.Slot
+				group="elements"
+				label={ __( 'Elements' ) }
+				className="elements-block-support-panel__inner-wrapper"
+			/>
 			{ showPositionControls && <PositionControls /> }
 			{ showBindingsControls && (
 				<InspectorControls.Slot group="bindings" />

packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js

@@ -12,7 +12,7 @@ import InspectorControls from '../inspector-controls';
 import { useBorderPanelLabel } from '../../hooks/border';
 import { useBlockSettings } from '../../hooks/utils';
 import { store as blockEditorStore } from '../../store';
-import { ColorEdit } from '../../hooks/color';
+import { ElementsEdit } from '../../hooks/elements';
 import { ColorToolsPanel } from '../global-styles/color-panel';
 
 function SectionBlockColorControls( {
@@ -42,16 +42,14 @@ function SectionBlockColorControls( {
 	};
 
 	return (
-		<ColorEdit
+		<ElementsEdit
 			clientId={ clientId }
 			name={ blockName }
 			settings={ settings }
 			setAttributes={ setAttributes }
 			asWrapper={ ColorToolsPanel }
-			label={ __( 'Color' ) }
+			label={ __( 'Elements' ) }
 			defaultControls={ {
-				text: true,
-				background: true,
 				button: hasButtons,
 				heading: hasHeading,
 			} }
@@ -72,11 +70,22 @@ const StylesTab = ( {
 		<>
 			{ hasBlockStyles && <BlockStyles clientId={ clientId } /> }
 			{ isSectionBlock && (
-				<SectionBlockColorControls
-					blockName={ blockName }
-					clientId={ clientId }
-					contentClientIds={ contentClientIds }
-				/>
+				<>
+					<SectionBlockColorControls
+						blockName={ blockName }
+						clientId={ clientId }
+						contentClientIds={ contentClientIds }
+					/>
+					<InspectorControls.Slot
+						group="background"
+						label={ __( 'Background' ) }
+						className="background-block-support-panel__inner-wrapper"
+					/>
+					<InspectorControls.Slot
+						group="typography"
+						label={ __( 'Typography' ) }
+					/>
+				</>
 			) }
 			{ ! isSectionBlock && (
 				<>
@@ -104,6 +113,11 @@ const StylesTab = ( {
 						label={ borderPanelLabel }
 					/>
 					<InspectorControls.Slot group="styles" />
+					<InspectorControls.Slot
+						group="elements"
+						label={ __( 'Elements' ) }
+						className="elements-block-support-panel__inner-wrapper"
+					/>
 				</>
 			) }
 		</>

packages/block-editor/src/components/inspector-controls/groups.js

@@ -15,6 +15,7 @@ const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsElements = createSlotFill( 'InspectorControlsElements' );
 const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
@@ -34,6 +35,7 @@ const groups = {
 	content: InspectorControlsContent,
 	dimensions: InspectorControlsDimensions,
 	effects: InspectorControlsEffects,
+	elements: InspectorControlsElements,
 	filter: InspectorControlsFilter,
 	list: InspectorControlsListView,
 	position: InspectorControlsPosition,

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

@@ -8,8 +8,7 @@ import clsx from 'clsx';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, Platform, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useMemo, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,20 +18,11 @@ import {
 	getColorObjectByAttributeValues,
 } from '../components/colors';
 import { __experimentalGetGradientClass } from '../components/gradients';
-import {
-	cleanEmptyObject,
-	transformStyles,
-	shouldSkipSerialization,
-} from './utils';
+import { transformStyles, shouldSkipSerialization } from './utils';
 import { getBackgroundImageClasses } from './background';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
-import {
-	useHasColorPanel,
-	default as StylesColorPanel,
-} from '../components/global-styles/color-panel';
 import BlockColorContrastChecker from './contrast-checker';
-import { store as blockEditorStore } from '../store';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
@@ -189,77 +179,6 @@ export function addSaveProps( props, blockNameOrType, attributes ) {
 	return props;
 }
 
-function styleToAttributes( style ) {
-	const textColorValue = style?.color?.text;
-	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
-		? textColorValue.substring( 'var:preset|color|'.length )
-		: undefined;
-	const backgroundColorValue = style?.color?.background;
-	const backgroundColorSlug = backgroundColorValue?.startsWith(
-		'var:preset|color|'
-	)
-		? backgroundColorValue.substring( 'var:preset|color|'.length )
-		: undefined;
-	const gradientValue = style?.color?.gradient;
-	const gradientSlug = gradientValue?.startsWith( 'var:preset|gradient|' )
-		? gradientValue.substring( 'var:preset|gradient|'.length )
-		: undefined;
-	const updatedStyle = { ...style };
-	updatedStyle.color = {
-		...updatedStyle.color,
-		text: textColorSlug ? undefined : textColorValue,
-		background: backgroundColorSlug ? undefined : backgroundColorValue,
-		gradient: gradientSlug ? undefined : gradientValue,
-	};
-	return {
-		style: cleanEmptyObject( updatedStyle ),
-		textColor: textColorSlug,
-		backgroundColor: backgroundColorSlug,
-		gradient: gradientSlug,
-	};
-}
-
-function attributesToStyle( attributes ) {
-	return {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			text: attributes.textColor
-				? 'var:preset|color|' + attributes.textColor
-				: attributes.style?.color?.text,
-			background: attributes.backgroundColor
-				? 'var:preset|color|' + attributes.backgroundColor
-				: attributes.style?.color?.background,
-			gradient: attributes.gradient
-				? 'var:preset|gradient|' + attributes.gradient
-				: attributes.style?.color?.gradient,
-		},
-	};
-}
-
-function ColorInspectorControl( { children, resetAllFilter } ) {
-	const attributesResetAllFilter = useCallback(
-		( attributes ) => {
-			const existingStyle = attributesToStyle( attributes );
-			const updatedStyle = resetAllFilter( existingStyle );
-			return {
-				...attributes,
-				...styleToAttributes( updatedStyle ),
-			};
-		},
-		[ resetAllFilter ]
-	);
-
-	return (
-		<InspectorControls
-			group="color"
-			resetAllFilter={ attributesResetAllFilter }
-		>
-			{ children }
-		</InspectorControls>
-	);
-}
-
 export function ContrastCheckerEdit( { clientId, name, settings } ) {
 	const enableContrastChecking =
 		Platform.OS === 'web' &&
@@ -281,85 +200,6 @@ export function ContrastCheckerEdit( { clientId, name, settings } ) {
 	);
 }
 
-export function ColorEdit( {
-	clientId,
-	name,
-	setAttributes,
-	settings,
-	asWrapper,
-	label,
-	defaultControls,
-} ) {
-	const isEnabled = useHasColorPanel( settings );
-
-	const { style, textColor, backgroundColor, gradient } = useSelect(
-		( select ) => {
-			// Early return to avoid subscription when disabled
-			if ( ! isEnabled ) {
-				return {};
-			}
-			const {
-				style: _style,
-				textColor: _textColor,
-				backgroundColor: _backgroundColor,
-				gradient: _gradient,
-			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-			return {
-				style: _style,
-				textColor: _textColor,
-				backgroundColor: _backgroundColor,
-				gradient: _gradient,
-			};
-		},
-		[ clientId, isEnabled ]
-	);
-	const value = useMemo( () => {
-		return attributesToStyle( {
-			style,
-			textColor,
-			backgroundColor,
-			gradient,
-		} );
-	}, [ style, textColor, backgroundColor, gradient ] );
-
-	const onChange = ( newStyle ) => {
-		setAttributes( styleToAttributes( newStyle ) );
-	};
-
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	defaultControls = defaultControls
-		? defaultControls
-		: getBlockSupport( name, [
-				COLOR_SUPPORT_KEY,
-				'__experimentalDefaultControls',
-		  ] );
-
-	// Use provided wrapper or default to ColorInspectorControl
-	const Wrapper = asWrapper || ColorInspectorControl;
-
-	return (
-		<StylesColorPanel
-			as={ Wrapper }
-			panelId={ clientId }
-			settings={ settings }
-			value={ value }
-			onChange={ onChange }
-			defaultControls={ defaultControls }
-			label={ label }
-			enableContrastChecker={
-				false !==
-				getBlockSupport( name, [
-					COLOR_SUPPORT_KEY,
-					'enableContrastChecker',
-				] )
-			}
-		/>
-	);
-}
-
 function useBlockProps( {
 	name,
 	backgroundColor,

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

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { useMemo, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import {
+	useHasColorPanel,
+	default as StylesColorPanel,
+} from '../components/global-styles/color-panel';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
+import { COLOR_SUPPORT_KEY } from './color';
+
+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 isEnabled = useHasColorPanel( settings );
+
+	const style = useSelect(
+		( select ) => {
+			if ( ! isEnabled ) {
+				return undefined;
+			}
+			const attributes =
+				select( blockEditorStore ).getBlockAttributes( clientId );
+			return attributes?.style;
+		},
+		[ clientId, isEnabled ]
+	);
+
+	const value = useMemo( () => style, [ style ] );
+
+	const onChange = ( newStyle ) => {
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	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 }
+		/>
+	);
+}

packages/block-editor/src/hooks/elements.scss

@@ -0,0 +1,8 @@
+.elements-block-support-panel {
+	/* Increased specificity required to remove the slot wrapper's row gap */
+	&#{&} {
+		.elements-block-support-panel__inner-wrapper {
+			row-gap: 0;
+		}
+	}
+}