[WIP] Block Support: Custom secondary colors support

docs/manifest.json

@@ -1079,6 +1079,12 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ProgressiveDisclosurePanel",
+		"slug": "progressive-disclosure-panel",
+		"markdown_source": "../packages/components/src/progressive-disclosure-panel/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",

lib/block-supports/spacing.php → lib/block-supports/dimensions.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Spacing block support flag.
+ * Dimensions block support flag.
  *
  * @package gutenberg
  */
@@ -10,21 +10,43 @@
  *
  * @param WP_Block_Type $block_type Block Type.
  */
-function gutenberg_register_spacing_support( $block_type ) {
-	$has_spacing_support = gutenberg_block_has_support( $block_type, array( 'spacing' ), false );
-
+function gutenberg_register_dimensions_support( $block_type ) {
 	// Setup attributes and styles within that if needed.
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
 	}
 
-	if ( $has_spacing_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+	// Check for existing style attribute definition e.g. from block.json.
+	if ( array_key_exists( 'style', $block_type->attributes ) ) {
+		return;
+	}
+
+	$has_spacing_support = gutenberg_block_has_support( $block_type, array( 'spacing' ), false );
+	// Future block supports such as height & width will be added here.
+
+	if ( $has_spacing_support ) {
 		$block_type->attributes['style'] = array(
 			'type' => 'object',
 		);
 	}
 }
 
+/**
+ * Add CSS classes for block dimensions to the incoming attributes array.
+ * This will be applied to the block markup in the front-end.
+ *
+ * @param WP_Block_Type $block_type       Block Type.
+ * @param array         $block_attributes Block attributes.
+ *
+ * @return array Block spacing CSS classes and inline styles.
+ */
+function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
+	$spacing_styles = gutenberg_apply_spacing_support( $block_type, $block_attributes );
+	// Future block supports such as height and width will be added here.
+
+	return $spacing_styles;
+}
+
 /**
  * Add CSS classes for block spacing to the incoming attributes array.
  * This will be applied to the block markup in the front-end.
@@ -82,9 +104,9 @@ function gutenberg_skip_spacing_serialization( $block_type ) {
 
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
-	'spacing',
+	'dimensions',
 	array(
-		'register_attribute' => 'gutenberg_register_spacing_support',
-		'apply'              => 'gutenberg_apply_spacing_support',
+		'register_attribute' => 'gutenberg_register_dimensions_support',
+		'apply'              => 'gutenberg_apply_dimensions_support',
 	)
 );

lib/class-wp-theme-json-gutenberg.php

@@ -59,6 +59,7 @@ class WP_Theme_JSON_Gutenberg {
 			'background' => null,
 			'gradient'   => null,
 			'text'       => null,
+			'sets'       => null,
 		),
 		'spacing'    => array(
 			'margin'  => array(
@@ -268,6 +269,11 @@ class WP_Theme_JSON_Gutenberg {
 		),
 	);
 
+	const COLOR_SET_METADATA = array(
+		'background-color' => array( 'background' ),
+		'color'            => array( 'text' ),
+	);
+
 	const ELEMENTS = array(
 		'link' => 'a',
 		'h1'   => 'h1',
@@ -632,6 +638,23 @@ private static function compute_style_properties( $styles ) {
 			}
 		}
 
+		// Check for color set or style node that contains custom selector
+		// for targeting inner elements within blocks.
+		if ( isset( $styles['selector'] ) ) {
+			foreach ( self::COLOR_SET_METADATA as $css_property => $value_path ) {
+				$value = self::get_property_value( $styles, $value_path );
+
+				if ( empty( $value ) ) {
+					continue;
+				}
+
+				$declarations[] = array(
+					'name'  => $css_property,
+					'value' => $value,
+				);
+			}
+		}
+
 		foreach ( $properties as $prop ) {
 			$value = self::get_property_value( $styles, $prop['value'] );
 			if ( empty( $value ) ) {
@@ -1073,6 +1096,21 @@ private static function get_style_nodes( $theme_json, $selectors = array() ) {
 					);
 				}
 			}
+
+			// Create nodes for custom color sets targeting elements within
+			// the current block type.
+			if ( isset( $theme_json['styles']['blocks'][ $name ]['color']['sets'] ) ) {
+				$color_sets = $theme_json['styles']['blocks'][ $name ]['color']['sets'];
+
+				foreach ( $color_sets as $color_set_name => $color_set ) {
+					if ( isset( $color_set['selector'] ) ) {
+						$nodes[] = array(
+							'path'     => array( 'styles', 'blocks', $name, 'color', 'sets', $color_set_name ),
+							'selector' => $color_set['selector'],
+						);
+					}
+				}
+			}
 		}
 
 		return $nodes;

lib/load.php

@@ -127,5 +127,5 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/custom-classname.php';
 require __DIR__ . '/block-supports/border.php';
 require __DIR__ . '/block-supports/layout.php';
-require __DIR__ . '/block-supports/spacing.php';
+require __DIR__ . '/block-supports/dimensions.php';
 require __DIR__ . '/block-supports/duotone.php';

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

@@ -1,30 +1,83 @@
 /**
  * WordPress dependencies
  */
+import { __experimentalProgressiveDisclosurePanel as ProgressiveDisclosurePanel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
+import ColorGradientControl from '../components/colors-gradients/control';
 import ContrastChecker from '../components/contrast-checker';
 import InspectorControls from '../components/inspector-controls';
+import useSetting from '../components/use-setting';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
 
+// Simple wrapper to allow passing non DOM attribute props that will be
+// picked up an used by the progress disclosure panel
+// e.g. `hasValue` or `onDeselect`
+const ColorSetControlWrapper = ( { children } ) => {
+	return <div className="color-set-control">{ children }</div>;
+};
+
+// Wraps a semantic group of custom color controls and their contrast checker.
+// Making this a single component allows for these controls to be grouped within
+// the progressive disclosure panel's dropdown menu.
+const ColorSetControl = ( {
+	contrastSettings,
+	children,
+	colorSettings,
+	colors,
+	disableCustomColors,
+	disableCustomGradients,
+	gradients,
+	...props
+} ) => {
+	if ( ! colorSettings?.length ) {
+		return null;
+	}
+
+	return (
+		<ColorSetControlWrapper { ...props }>
+			{ colorSettings.map( ( setting, index ) => (
+				<ColorGradientControl
+					key={ index }
+					{ ...{
+						colors,
+						gradients,
+						disableCustomColors,
+						disableCustomGradients,
+						...setting,
+					} }
+				/>
+			) ) }
+			{ contrastSettings && <ContrastChecker { ...contrastSettings } /> }
+			{ children }
+		</ColorSetControlWrapper>
+	);
+};
+
 export default function ColorPanel( {
-	settings,
+	resetAll,
+	colorSets,
 	clientId,
 	enableContrastChecking = true,
+	...props
 } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const ref = useBlockRef( clientId );
 
+	const colors = useSetting( 'color.palette' );
+	const gradients = useSetting( 'color.gradients' );
+	const disableCustomColors = ! useSetting( 'color.custom' );
+	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+
 	useEffect( () => {
 		if ( ! enableContrastChecking ) {
 			return;
@@ -54,18 +107,33 @@ export default function ColorPanel( {
 
 	return (
 		<InspectorControls>
-			<PanelColorGradientSettings
+			<ProgressiveDisclosurePanel
+				label={ __( 'Color options' ) }
 				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
+				resetAll={ resetAll }
 			>
-				{ enableContrastChecking && (
-					<ContrastChecker
-						backgroundColor={ detectedBackgroundColor }
-						textColor={ detectedColor }
-					/>
-				) }
-			</PanelColorGradientSettings>
+				{ colorSets.map( ( colorSet, index ) => (
+					<ColorSetControl
+						key={ index }
+						{ ...{
+							colors,
+							gradients,
+							disableCustomColors,
+							disableCustomGradients,
+							...colorSet,
+						} }
+						{ ...props }
+					>
+						{ colorSet.checkDefaultContrast &&
+							enableContrastChecking && (
+								<ContrastChecker
+									backgroundColor={ detectedBackgroundColor }
+									textColor={ detectedColor }
+								/>
+							) }
+					</ColorSetControl>
+				) ) }
+			</ProgressiveDisclosurePanel>
 		</InspectorControls>
 	);
 }