From 7caa69325d589a44092d836ddc83e3e7de1aa64e Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 24 Nov 2022 17:57:57 +0800
Subject: [PATCH] Sidebar: Rename appearance tab to styles

---
 .../src/components/inspector-controls-tabs/index.js    | 10 +++++-----
 .../{appearance-tab.js => styles-tab.js}               |  4 ++--
 .../use-inspector-controls-tabs.js                     | 10 +++++-----
 .../src/components/inspector-controls-tabs/utils.js    |  8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)
 rename packages/block-editor/src/components/inspector-controls-tabs/{appearance-tab.js => styles-tab.js} (91%)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index f943c24f470615..efdaed591b4fec 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -6,9 +6,9 @@ import { TabPanel } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { TAB_SETTINGS, TAB_APPEARANCE, TAB_LIST_VIEW } from './utils';
-import AppearanceTab from './appearance-tab';
+import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
 import SettingsTab from './settings-tab';
+import StylesTab from './styles-tab';
 import InspectorControls from '../inspector-controls';
 import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 
@@ -20,7 +20,7 @@ export default function InspectorControlsTabs( {
 } ) {
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
-	// available tabs so the panel defaults selection to the appearance tab
+	// available tabs so the panel defaults selection to the styles tab
 	// which at the time is the first tab. This check allows blocks known to
 	// include the list view tab to set it as the tab selected by default.
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
@@ -41,9 +41,9 @@ export default function InspectorControlsTabs( {
 					);
 				}
 
-				if ( tab.name === TAB_APPEARANCE.name ) {
+				if ( tab.name === TAB_STYLES.name ) {
 					return (
-						<AppearanceTab
+						<StylesTab
 							blockName={ blockName }
 							clientId={ clientId }
 							hasBlockStyles={ hasBlockStyles }
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
similarity index 91%
rename from packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js
rename to packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
index f1f1a58e0f573e..f2eac99680b9aa 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -12,7 +12,7 @@ import BlockStyles from '../block-styles';
 import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
 
-const AppearanceTab = ( { blockName, clientId, hasBlockStyles } ) => {
+const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 	return (
 		<>
 			{ hasBlockStyles && (
@@ -48,4 +48,4 @@ const AppearanceTab = ( { blockName, clientId, hasBlockStyles } ) => {
 	);
 };
 
-export default AppearanceTab;
+export default StylesTab;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
index 3405b8606f0e58..28d9ecfc9ac3ad 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -9,7 +9,7 @@ import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/component
 import InspectorControlsGroups from '../inspector-controls/groups';
 import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
 import { InspectorAdvancedControls } from '../inspector-controls';
-import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_APPEARANCE } from './utils';
+import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES } from './utils';
 
 export default function useInspectorControlsTabs( blockName ) {
 	const tabs = [];
@@ -30,17 +30,17 @@ export default function useInspectorControlsTabs( blockName ) {
 		tabs.push( TAB_LIST_VIEW );
 	}
 
-	// Appearance Tab: Add this tab if there are any fills for block supports
+	// Styles Tab: Add this tab if there are any fills for block supports
 	// e.g. border, color, spacing, typography, etc.
-	const appearanceFills = [
+	const styleFills = [
 		...( useSlotFills( borderGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( colorGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( dimensionsGroup.Slot.__unstableName ) || [] ),
 		...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
 	];
 
-	if ( appearanceFills.length ) {
-		tabs.push( TAB_APPEARANCE );
+	if ( styleFills.length ) {
+		tabs.push( TAB_STYLES );
 	}
 
 	// Settings Tab: If there are any fills for the general InspectorControls
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/utils.js b/packages/block-editor/src/components/inspector-controls-tabs/utils.js
index 4ab6f0164a19c0..da8b10cb128445 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/utils.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/utils.js
@@ -11,10 +11,10 @@ export const TAB_SETTINGS = {
 	className: 'block-editor-block-inspector__tab-item',
 };
 
-export const TAB_APPEARANCE = {
-	name: 'appearance',
-	title: 'Appearance',
-	value: 'appearance',
+export const TAB_STYLES = {
+	name: 'styles',
+	title: 'Styles',
+	value: 'styles',
 	icon: styles,
 	className: 'block-editor-block-inspector__tab-item',
 };