Inspector Controls: Rephrase, polish, and make consistent color label…

…s. (#30075) * Try: Rephrase, polish, and make consistent color labels. * Restore background color.
WordPress · Apr 15, 2021 · 4abfc1e · 4abfc1e
1 parent eb957e7
commit 4abfc1e
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 19 deletions.
diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php
@@ -81,7 +81,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 	$classes                       = array();
 	$styles                        = array();
 
-	// Text Colors.
+	// Text colors.
 	// Check support for text colors.
 	if ( $has_text_colors_support ) {
 		$has_named_text_color  = array_key_exists( 'textColor', $block_attributes );
@@ -117,7 +117,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 		}
 	}
 
-	// Background Colors.
+	// Background colors.
 	if ( $has_background_colors_support ) {
 		$has_named_background_color  = array_key_exists( 'backgroundColor', $block_attributes );
 		$has_custom_background_color = isset( $block_attributes['style']['color']['background'] );

diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
@@ -35,8 +35,8 @@ function getComputedStyle( node ) {
 const DEFAULT_COLORS = [];
 
 const COMMON_COLOR_LABELS = {
-	textColor: __( 'Text Color' ),
-	backgroundColor: __( 'Background Color' ),
+	textColor: __( 'Text color' ),
+	backgroundColor: __( 'Background color' ),
 };
 
 const InspectorControlsColorPanel = ( props ) => (
@@ -48,7 +48,7 @@ const InspectorControlsColorPanel = ( props ) => (
 export default function __experimentalUseColors(
 	colorConfigs,
 	{
-		panelTitle = __( 'Color settings' ),
+		panelTitle = __( 'Color' ),
 		colorPanelProps,
 		contrastCheckers,
 		panelChildren,
@@ -58,7 +58,7 @@ export default function __experimentalUseColors(
 			textColorTargetRef = targetRef,
 		} = {},
 	} = {
-		panelTitle: __( 'Color settings' ),
+		panelTitle: __( 'Color' ),
 	},
 	deps = []
 ) {

diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
@@ -55,7 +55,7 @@ export default function ColorPanel( {
 	return (
 		<InspectorControls>
 			<PanelColorGradientSettings
-				title={ __( 'Color settings' ) }
+				title={ __( 'Color' ) }
 				initialOpen={ false }
 				settings={ settings }
 			>

diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -327,7 +327,7 @@ export function ColorEdit( props ) {
 				...( hasTextColorSupport( blockName )
 					? [
 							{
-								label: __( 'Text Color' ),
+								label: __( 'Text color' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
 									colors,
@@ -340,7 +340,7 @@ export function ColorEdit( props ) {
 				...( hasBackground || hasGradient
 					? [
 							{
-								label: __( 'Background Color' ),
+								label: __( 'Background color' ),
 								onColorChange: hasBackground
 									? onChangeColor( 'background' )
 									: undefined,

diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js
@@ -68,9 +68,7 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 
-	const title = isWebPlatform
-		? __( 'Color settings' )
-		: __( 'Color Settings' );
+	const title = __( 'Color' );
 
 	useEffect( () => {
 		if ( isWebPlatform && ! enableContrastChecking ) {
@@ -209,7 +207,7 @@ function ColorEdit( props ) {
 	const settings = useMemo( () => {
 		return [
 			{
-				label: __( 'Text Color' ),
+				label: __( 'Text color' ),
 				onColorChange: onChangeColor( 'text' ),
 				colorValue: getColorObjectByAttributeValues(
 					colors,
@@ -218,7 +216,7 @@ function ColorEdit( props ) {
 				).color,
 			},
 			{
-				label: __( 'Background Color' ),
+				label: __( 'Background color' ),
 				onColorChange: onChangeColor( 'background' ),
 				colorValue: getColorObjectByAttributeValues(
 					colors,

diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
@@ -160,7 +160,7 @@ function PullQuoteEdit( {
 			{ Platform.OS === 'web' && (
 				<InspectorControls>
 					<PanelColorSettings
-						title={ __( 'Color settings' ) }
+						title={ __( 'Color' ) }
 						colorSettings={ [
 							{
 								value: mainColor.color,

diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js
@@ -7,7 +7,7 @@ import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
 const SeparatorSettings = ( { color, setColor } ) => (
 	<InspectorControls>
 		<PanelColorSettings
-			title={ __( 'Color settings' ) }
+			title={ __( 'Color' ) }
 			colorSettings={ [
 				{
 					value: color.color,

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -188,7 +188,7 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 				<PanelColorSettings
-					title={ __( 'Color settings' ) }
+					title={ __( 'Color' ) }
 					colorSettings={ [
 						{
 							// Use custom attribute as fallback to prevent loss of named color selection when

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -500,7 +500,7 @@ function TableEdit( {
 						/>
 					</PanelBody>
 					<PanelColorSettings
-						title={ __( 'Color settings' ) }
+						title={ __( 'Color' ) }
 						initialOpen={ false }
 						colorSettings={ [
 							{

diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js
@@ -14,7 +14,7 @@ describe( 'Heading', () => {
 	const COLOR_INPUT_FIELD_SELECTOR =
 		'.components-color-palette__picker .components-text-control__input';
 	const COLOR_PANEL_TOGGLE_X_SELECTOR =
-		"//button[./span[contains(text(),'Color settings')]]";
+		"//button[./span[contains(text(),'Color')]]";
 
 	beforeEach( async () => {
 		await createNewPost();