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

Block Inspector: Make Settings tab the default #47592

Merged
merged 2 commits into from
Feb 1, 2023
Merged

Block Inspector: Make Settings tab the default #47592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d49062
Block Inspector: Make Settings tab the default
aaronrobertshaw Jan 31, 2023
ff432fa
Fix e2es after default tab change
aaronrobertshaw Jan 31, 2023
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
2 changes: 1 addition & 1 deletion 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 @@ -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 styles tab
// available tabs so the panel defaults selection to the settings 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 Down
24 changes: 14 additions & 10 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 @@ -45,10 +45,7 @@ export default function useInspectorControlsTabs( blockName ) {
// List View Tab: If there are any fills for the list group add that tab.
const listViewDisabled = useIsListViewTabDisabled( blockName );
const listFills = useSlotFills( listGroup.Slot.__unstableName );

if ( ! listViewDisabled && !! listFills && listFills.length ) {
tabs.push( TAB_LIST_VIEW );
}
const hasListFills = ! listViewDisabled && !! listFills && listFills.length;

// Styles Tab: Add this tab if there are any fills for block supports
// e.g. border, color, spacing, typography, etc.
Expand All @@ -59,12 +56,9 @@ export default function useInspectorControlsTabs( blockName ) {
...( useSlotFills( stylesGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( typographyGroup.Slot.__unstableName ) || [] ),
];
const hasStyleFills = styleFills.length;

if ( styleFills.length ) {
tabs.push( TAB_STYLES );
}

// Settings Tab: If we don't already have multiple tabs to display
// Settings Tab: If we don't have multiple tabs to display
// (i.e. both list view and styles), check only the default and position
// InspectorControls slots. If we have multiple tabs, we'll need to check
// the advanced controls slot as well to ensure they are rendered.
Expand All @@ -74,13 +68,23 @@ export default function useInspectorControlsTabs( blockName ) {
const settingsFills = [
...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
...( useSlotFills( positionGroup.Slot.__unstableName ) || [] ),
...( tabs.length > 1 ? advancedFills : [] ),
...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
];

// Add the tabs in the order that they will default to if available.
// List View > Settings > Styles.
if ( hasListFills ) {
tabs.push( TAB_LIST_VIEW );
}

if ( settingsFills.length ) {
tabs.push( TAB_SETTINGS );
}

if ( hasStyleFills ) {
tabs.push( TAB_STYLES );
}

const tabSettings = useSelect( ( select ) => {
return select( blockEditorStore ).getSettings().blockInspectorTabs;
}, [] );
Expand Down
2 changes: 2 additions & 0 deletions packages/e2e-tests/specs/editor/blocks/cover.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
insertBlock,
createNewPost,
openDocumentSettingsSidebar,
switchBlockInspectorTab,
transformBlockTo,
} from '@wordpress/e2e-test-utils';

Expand Down Expand Up @@ -134,6 +135,7 @@ describe( 'Cover', () => {
'.block-editor-list-view-block__contents-container a'
);

switchBlockInspectorTab( 'Styles' );
const heightInputHandle = await page.waitForSelector(
'input[id*="block-cover-height-input"]'
);
Expand Down
16 changes: 16 additions & 0 deletions test/e2e/specs/editor/blocks/buttons.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,10 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

// Switch to the Styles tab.
await page.click(
`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
);
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
);
Expand All @@ -179,6 +183,10 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

// Switch to the Styles tab.
await page.click(
`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
);
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
);
Expand Down Expand Up @@ -210,6 +218,10 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

// Switch to the Styles tab.
await page.click(
`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
);
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
Expand All @@ -235,6 +247,10 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();

// Switch to the Styles tab.
await page.click(
`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
);
await page.click(
'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
);
Expand Down