Sidebar: Rename appearance tab to styles

WordPress · Nov 25, 2022 · 7caa693 · 7caa693
1 parent 02b6a80
commit 7caa693
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git 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/...inspector-controls-tabs/appearance-tab.js → ...nts/inspector-controls-tabs/styles-tab.js b/...inspector-controls-tabs/appearance-tab.js → ...nts/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
@@ -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
@@ -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',
 };