Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar: Rename appearance tab to styles #46027

Merged
merged 1 commit into from
Nov 25, 2022
Merged

Sidebar: Rename appearance tab to styles #46027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/inspector-controls-tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 )
Expand All @@ -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 }
Expand Down
4 changes: 2 additions & 2 deletions ...inspector-controls-tabs/appearance-tab.js → ...nts/inspector-controls-tabs/styles-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down Expand Up @@ -48,4 +48,4 @@ const AppearanceTab = ( { blockName, clientId, hasBlockStyles } ) => {
);
};

export default AppearanceTab;
export default StylesTab;
10 changes: 5 additions & 5 deletions packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/inspector-controls-tabs/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};
Expand Down