Add captions

WordPress · Mar 21, 2023 · d1724b9 · d1724b9
1 parent 6145a3f
commit d1724b9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 27 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -360,6 +360,7 @@ class WP_Theme_JSON_Gutenberg {
 			'link'             => null,
 			'heading'          => null,
 			'button'           => null,
+			'caption'          => null,
 			'palette'          => null,
 			'text'             => null,
 		),
@@ -563,6 +564,7 @@ public static function get_element_class_name( $element ) {
 		array( 'color', 'link' ),
 		array( 'color', 'heading' ),
 		array( 'color', 'button' ),
+		array( 'color', 'caption' ),
 		array( 'dimensions', 'minHeight' ),
 		// BEGIN EXPERIMENTAL.
 		// Allow `position.fixed` to be opted-in by default.

diff --git a/lib/theme.json b/lib/theme.json
@@ -15,6 +15,7 @@
 			"heading": true,
 			"button": true,
 			"text": true,
+			"caption": true,
 			"custom": true,
 			"customDuotone": true,
 			"customGradient": true,

diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -35,13 +35,15 @@ export function useHasColorPanel( settings ) {
 	const hasLinkPanel = useHasLinkPanel( settings );
 	const hasHeadingPanel = useHasHeadingPanel( settings );
 	const hasButtonPanel = useHasHeadingPanel( settings );
+	const hasCaptionPanel = useHasCaptionPanel( settings );
 
 	return (
 		hasTextPanel ||
 		hasBackgroundPanel ||
 		hasLinkPanel ||
 		hasHeadingPanel ||
-		hasButtonPanel
+		hasButtonPanel ||
+		hasCaptionPanel
 	);
 }
 
@@ -61,6 +63,14 @@ export function useHasLinkPanel( settings ) {
 	);
 }
 
+export function useHasCaptionPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.caption &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
 export function useHasHeadingPanel( settings ) {
 	const colors = useColorsPerOrigin( settings );
 	const gradients = useGradientsPerOrigin( settings );
@@ -131,6 +141,7 @@ const DEFAULT_CONTROLS = {
 	link: true,
 	heading: true,
 	button: true,
+	caption: true,
 };
 
 const popoverProps = {
@@ -472,6 +483,11 @@ export default function ColorPanel( {
 			label: __( 'Heading' ),
 			showPanel: useHasHeadingPanel( settings ),
 		},
+		{
+			name: 'caption',
+			label: __( 'Caption' ),
+			showPanel: useHasCaptionPanel( settings ),
+		},
 	];
 
 	const resetAllFilter = useCallback( ( previousValue ) => {
@@ -642,40 +658,52 @@ export default function ColorPanel( {
 				},
 			} );
 		};
+		const supportsTextColor = true;
+		const supportsBackground = name !== 'caption';
 
 		items.push( {
 			key: name,
 			label,
 			hasValue: hasElement,
 			resetValue: resetElement,
 			isShownByDefault: defaultControls[ name ],
-			indicators: [
-				elementTextColor,
-				elementBackgroundColor ?? elementGradient,
-			],
+			indicators:
+				supportsTextColor && supportsBackground
+					? [
+							elementTextColor,
+							elementBackgroundColor ?? elementGradient,
+					  ]
+					: [
+							supportsTextColor
+								? elementTextColor
+								: elementBackgroundColor ?? elementGradient,
+					  ],
 			tabs: [
-				hasSolidColors && {
-					key: 'text',
-					label: __( 'Text' ),
-					inheritedValue: elementTextColor,
-					setValue: setElementTextColor,
-					userValue: elementTextUserColor,
-				},
-				hasSolidColors && {
-					key: 'background',
-					label: __( 'Background' ),
-					inheritedValue: elementBackgroundColor,
-					setValue: setElementBackgroundColor,
-					userValue: elementBackgroundUserColor,
-				},
-				hasGradientColors && {
-					key: 'gradient',
-					label: __( 'Gradient' ),
-					inheritedValue: elementGradient,
-					setValue: setElementGradient,
-					userValue: elementGradientUserColor,
-					isGradient: true,
-				},
+				hasSolidColors &&
+					supportsTextColor && {
+						key: 'text',
+						label: __( 'Text' ),
+						inheritedValue: elementTextColor,
+						setValue: setElementTextColor,
+						userValue: elementTextUserColor,
+					},
+				hasSolidColors &&
+					supportsBackground && {
+						key: 'background',
+						label: __( 'Background' ),
+						inheritedValue: elementBackgroundColor,
+						setValue: setElementBackgroundColor,
+						userValue: elementBackgroundUserColor,
+					},
+				hasGradientColors &&
+					supportsBackground && {
+						key: 'gradient',
+						label: __( 'Gradient' ),
+						inheritedValue: elementGradient,
+						setValue: setElementGradient,
+						userValue: elementGradientUserColor,
+						isGradient: true,
+					},
 			].filter( Boolean ),
 		} );
 	} );

diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
@@ -45,6 +45,7 @@ const VALID_SETTINGS = [
 	'color.background',
 	'color.heading',
 	'color.button',
+	'color.caption',
 	'custom',
 	'dimensions.minHeight',
 	'layout.contentSize',
@@ -274,6 +275,9 @@ export function useSettingsForBlockElement(
 			link:
 				updatedSettings.color?.link &&
 				supportedStyles.includes( 'linkColor' ),
+			caption:
+				updatedSettings.color?.caption &&
+				supportedStyles.includes( 'captionColor' ),
 		};
 
 		[