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

Implement Tabs in site-editor settings #56959

Merged
merged 10 commits into from
Feb 2, 2024
Merged

Implement Tabs in site-editor settings #56959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b1c0a29
take that, slot/fill!
chad1008 Dec 11, 2023
7b21c85
panel margin style fix
chad1008 Dec 11, 2023
e3bee18
style updates
chad1008 Dec 11, 2023
7b04524
e2e test updates
chad1008 Dec 11, 2023
dd7fd69
ensure canvas is in edit mode
chad1008 Dec 13, 2023
225aba3
fix tabpanel ids
chad1008 Dec 14, 2023
21587d5
update new playwright tests
chad1008 Jan 2, 2024
883f800
disable `selectOnMove`
chad1008 Jan 3, 2024
b5cd94e
address tab flow race condition
chad1008 Feb 1, 2024
65a8221
implement feedback
chad1008 Feb 2, 2024
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
141 changes: 118 additions & 23 deletions packages/edit-site/src/components/sidebar-edit-mode/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
/**
* WordPress dependencies
*/
import { createSlotFill } from '@wordpress/components';
import {
createSlotFill,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { isRTL, __ } from '@wordpress/i18n';
import { drawerLeft, drawerRight } from '@wordpress/icons';
import { useEffect } from '@wordpress/element';
import { useCallback, useContext, useEffect, useRef } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as interfaceStore } from '@wordpress/interface';
import { store as blockEditorStore } from '@wordpress/block-editor';
Expand All @@ -22,26 +25,107 @@ import TemplatePanel from './template-panel';
import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';

const { Tabs } = unlock( componentsPrivateApis );

const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
'EditSiteSidebarInspector'
);
export const SidebarInspectorFill = InspectorFill;

const FillContents = ( {
sidebarName,
isEditingPage,
supportsGlobalStyles,
} ) => {
const tabListRef = useRef( null );
// Because `DefaultSidebar` renders a `ComplementaryArea`, we
// need to forward the `Tabs` context so it can be passed through the
// underlying slot/fill.
const tabsContextValue = useContext( Tabs.Context );

// This effect addresses a race condition caused by tabbing from the last
// block in the editor into the settings sidebar. Without this effect, the
// selected tab and browser focus can become separated in an unexpected way.
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
// (e.g the "block" tab is focused, but the "post" tab is selected).
useEffect( () => {
const tabsElements = Array.from(
tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
);
const selectedTabElement = tabsElements.find(
// We are purposefully using a custom `data-tab-id` attribute here
// because we don't want rely on any assumptions about `Tabs`
// component internals.
( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
);
const activeElement = selectedTabElement?.ownerDocument.activeElement;
const tabsHasFocus = tabsElements.some( ( element ) => {
return activeElement && activeElement.id === element.id;
} );
if (
tabsHasFocus &&
selectedTabElement &&
selectedTabElement.id !== activeElement?.id
) {
selectedTabElement?.focus();
}
}, [ sidebarName ] );

return (
<>
<DefaultSidebar
identifier={ sidebarName }
title={ __( 'Settings' ) }
icon={ isRTL() ? drawerLeft : drawerRight }
chad1008 marked this conversation as resolved.
Show resolved Hide resolved
closeLabel={ __( 'Close Settings' ) }
header={
<Tabs.Context.Provider value={ tabsContextValue }>
<SettingsHeader ref={ tabListRef } />
</Tabs.Context.Provider>
}
headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
// This classname is added so we can apply a corrective negative
// margin to the panel.
// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
className="edit-site-sidebar__panel"
>
<Tabs.Context.Provider value={ tabsContextValue }>
<Tabs.TabPanel
tabId={ SIDEBAR_TEMPLATE }
focusable={ false }
>
{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
<PluginTemplateSettingPanel.Slot />
</Tabs.TabPanel>
<Tabs.TabPanel tabId={ SIDEBAR_BLOCK } focusable={ false }>
<InspectorSlot bubblesVirtually />
</Tabs.TabPanel>
</Tabs.Context.Provider>
</DefaultSidebar>
{ supportsGlobalStyles && <GlobalStylesSidebar /> }
</>
);
};

export function SidebarComplementaryAreaFills() {
const {
sidebar,
isEditorSidebarOpened,
hasBlockSelection,
supportsGlobalStyles,
isEditingPage,
isEditorOpen,
} = useSelect( ( select ) => {
const _sidebar =
select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );

const _isEditorSidebarOpened = [
SIDEBAR_BLOCK,
SIDEBAR_TEMPLATE,
].includes( _sidebar );
const { getCanvasMode } = unlock( select( editSiteStore ) );
chad1008 marked this conversation as resolved.
Show resolved Hide resolved

return {
sidebar: _sidebar,
isEditorSidebarOpened: _isEditorSidebarOpened,
Expand All @@ -50,6 +134,7 @@ export function SidebarComplementaryAreaFills() {
supportsGlobalStyles:
select( coreStore ).getCurrentTheme()?.is_block_theme,
isEditingPage: select( editSiteStore ).isPage(),
isEditorOpen: getCanvasMode() === 'edit',
};
}, [] );
const { enableComplementaryArea } = useDispatch( interfaceStore );
Expand Down Expand Up @@ -79,27 +164,37 @@ export function SidebarComplementaryAreaFills() {
sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
}

// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
// the initial render) or when we don't want a tab displayed (i.e. the
// sidebar is closed). These cases should both be covered by the `!!` check
// below, so we shouldn't need any additional falsey handling.
const onTabSelect = useCallback(
( newSelectedTabId ) => {
if ( !! newSelectedTabId ) {
enableComplementaryArea( STORE_NAME, newSelectedTabId );
}
},
[ enableComplementaryArea ]
);

return (
<>
<DefaultSidebar
identifier={ sidebarName }
title={ __( 'Settings' ) }
icon={ isRTL() ? drawerLeft : drawerRight }
closeLabel={ __( 'Close Settings' ) }
header={ <SettingsHeader sidebarName={ sidebarName } /> }
headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
>
{ sidebarName === SIDEBAR_TEMPLATE && (
<>
{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
<PluginTemplateSettingPanel.Slot />
</>
) }
{ sidebarName === SIDEBAR_BLOCK && (
<InspectorSlot bubblesVirtually />
) }
</DefaultSidebar>
{ supportsGlobalStyles && <GlobalStylesSidebar /> }
</>
<Tabs
// Due to how this component is controlled (via a value from the
// edit-site store), when the sidebar closes the currently selected
// tab can't be found. This causes the component to continuously reset
// the selection to `null` in an infinite loop. Proactively setting
// the selected tab to `null` avoids that.
selectedTabId={
isEditorOpen && isEditorSidebarOpened ? sidebarName : null
}
onSelect={ onTabSelect }
selectOnMove={ false }
>
<FillContents
sidebarName={ sidebarName }
isEditingPage={ isEditingPage }
supportsGlobalStyles={ supportsGlobalStyles }
/>
</Tabs>
);
}
88 changes: 25 additions & 63 deletions packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,44 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as interfaceStore } from '@wordpress/interface';
import { privateApis as componentsPrivateApis } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { forwardRef } from '@wordpress/element';

/**
* Internal dependencies
*/
import { STORE_NAME } from '../../../store/constants';
import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
import { unlock } from '../../../lock-unlock';

const SettingsHeader = ( { sidebarName } ) => {
const { Tabs } = unlock( componentsPrivateApis );

const SettingsHeader = ( _, ref ) => {
const postTypeLabel = useSelect(
( select ) => select( editorStore ).getPostTypeLabel(),
[]
);

const { enableComplementaryArea } = useDispatch( interfaceStore );
const openTemplateSettings = () =>
enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
const openBlockSettings = () =>
enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );

const documentAriaLabel =
sidebarName === SIDEBAR_TEMPLATE
? // translators: ARIA label for the Template sidebar tab, selected.
sprintf( __( '%s (selected)' ), postTypeLabel )
: postTypeLabel;

/* Use a list so screen readers will announce how many tabs there are. */
return (
<ul>
<li>
<Button
onClick={ openTemplateSettings }
className={ classnames(
'edit-site-sidebar-edit-mode__panel-tab',
{
'is-active': sidebarName === SIDEBAR_TEMPLATE,
}
) }
aria-label={ documentAriaLabel }
data-label={ postTypeLabel }
>
{ postTypeLabel }
</Button>
</li>
<li>
<Button
onClick={ openBlockSettings }
className={ classnames(
'edit-site-sidebar-edit-mode__panel-tab',
{
'is-active': sidebarName === SIDEBAR_BLOCK,
}
) }
aria-label={
sidebarName === SIDEBAR_BLOCK
? // translators: ARIA label for the Block Settings Sidebar tab, selected.
__( 'Block (selected)' )
: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
__( 'Block' )
}
data-label={ __( 'Block' ) }
>
{ __( 'Block' ) }
</Button>
</li>
</ul>
<Tabs.TabList ref={ ref }>
<Tabs.Tab
tabId={ SIDEBAR_TEMPLATE }
// Used for focus management in the SettingsSidebar component.
data-tab-id={ SIDEBAR_TEMPLATE }
>
{ postTypeLabel }
</Tabs.Tab>
<Tabs.Tab
tabId={ SIDEBAR_BLOCK }
// Used for focus management in the SettingsSidebar component.
data-tab-id={ SIDEBAR_BLOCK }
>
{ __( 'Block' ) }
</Tabs.Tab>
</Tabs.TabList>
);
};

export default SettingsHeader;
export default forwardRef( SettingsHeader );
87 changes: 0 additions & 87 deletions packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,8 @@
.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
justify-content: flex-start;
padding-left: 0;
padding-right: $grid-unit-20;
border-top: 0;
margin-top: 0;

ul {
display: flex;
}
li {
margin: 0;
}

.components-button.has-icon {
display: none;
margin: 0 0 0 auto;
padding: 0;
min-width: $icon-size;
height: $icon-size;
Expand All @@ -24,78 +12,3 @@
}
}
}

// This tab style CSS is duplicated verbatim in
// /packages/components/src/tab-panel/style.scss
.components-button.edit-site-sidebar-edit-mode__panel-tab {
position: relative;
border-radius: 0;
height: $grid-unit-60;
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
margin-left: 0;
font-weight: 500;

&:focus:not(:disabled) {
position: relative;
box-shadow: none;
outline: none;
}

// Tab indicator
&::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;

// Draw the indicator.
background: var(--wp-admin-theme-color);
height: calc(0 * var(--wp-admin-border-width-focus));
border-radius: 0;

// Animation
transition: all 0.1s linear;
@include reduce-motion("transition");
}

// Active.
&.is-active::after {
height: calc(1 * var(--wp-admin-border-width-focus));

// Windows high contrast mode.
outline: 2px solid transparent;
outline-offset: -1px;
}

// Focus.
&::before {
content: "";
position: absolute;
top: $grid-unit-15;
right: $grid-unit-15;
bottom: $grid-unit-15;
left: $grid-unit-15;
pointer-events: none;

// Draw the indicator.
box-shadow: 0 0 0 0 transparent;
border-radius: $radius-block-ui;

// Animation
transition: all 0.1s linear;
@include reduce-motion("transition");
}

&:focus-visible::before {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

// Windows high contrast mode.
outline: 2px solid transparent;
}
}
Loading
Loading