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

Components: replace TabPanel with Tabs in the editor Document Overview sidebar #57082

Merged
merged 13 commits into from
Jan 30, 2024
Merged

Components: replace TabPanel with Tabs in the editor Document Overview sidebar #57082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
81db200
implement Tabs
chad1008 Dec 14, 2023
7eddb43
update styles
chad1008 Dec 14, 2023
cea53c3
fix tab flow and placement styles
chad1008 Dec 19, 2023
d592aac
clean up DOM structure
chad1008 Dec 19, 2023
4d7e39c
enable selectOnMove
chad1008 Dec 19, 2023
b00e5e0
remove old css becuase i forgot in the last commit
chad1008 Dec 19, 2023
fe4b6dd
re-disable `selectOnMove`
chad1008 Jan 2, 2024
d5dbd5c
implement initialTabId value
chad1008 Jan 22, 2024
1cf828e
fix merge conflict errors
chad1008 Jan 22, 2024
7177813
incorporate post-rebase feedback
chad1008 Jan 26, 2024
869bc23
classnames instead of roles
chad1008 Jan 26, 2024
3bd148c
fix horizontal scroll bar
chad1008 Jan 29, 2024
2237970
Update packages/editor/src/components/list-view-sidebar/index.js
chad1008 Jan 30, 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
107 changes: 60 additions & 47 deletions packages/editor/src/components/list-view-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
* WordPress dependencies
*/
import { __experimentalListView as ListView } from '@wordpress/block-editor';
import { Button, TabPanel } from '@wordpress/components';
import {
Button,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
Expand All @@ -19,6 +22,8 @@ import ListViewOutline from './list-view-outline';
import { unlock } from '../../lock-unlock';
import { store as editorStore } from '../../store';

const { Tabs } = unlock( componentsPrivateApis );

export default function ListViewSidebar() {
const { setIsListViewOpened } = useDispatch( editorStore );
const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
Expand Down Expand Up @@ -51,7 +56,7 @@ export default function ListViewSidebar() {
// This ref refers to the sidebar as a whole.
const sidebarRef = useRef();
// This ref refers to the tab panel.
const tabPanelRef = useRef();
const tabsRef = useRef();
// This ref refers to the list view application area.
const listViewRef = useRef();

Expand All @@ -71,7 +76,7 @@ export default function ListViewSidebar() {
*/
function handleSidebarFocus( currentTab ) {
// Tab panel focus.
const tabPanelFocus = focus.tabbable.find( tabPanelRef.current )[ 0 ];
const tabPanelFocus = focus.tabbable.find( tabsRef.current )[ 0 ];
// List view tab is selected.
if ( currentTab === 'list-view' ) {
// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
Expand Down Expand Up @@ -108,62 +113,70 @@ export default function ListViewSidebar() {
// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut );

/**
* Render tab content for a given tab name.
*
* @param {string} tabName The name of the tab to render.
*/
function renderTabContent( tabName ) {
if ( tabName === 'list-view' ) {
return (
<div className="editor-list-view-sidebar__list-view-panel-content">
<ListView dropZoneElement={ dropZoneElement } />
</div>
);
}
return <ListViewOutline />;
}

return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
className="editor-list-view-sidebar"
onKeyDown={ closeOnEscape }
ref={ sidebarRef }
>
<Button
className="editor-list-view-sidebar__close-button"
icon={ closeSmall }
label={ __( 'Close' ) }
onClick={ closeListView }
/>
<TabPanel
className="editor-list-view-sidebar__tab-panel"
ref={ tabPanelRef }
<Tabs
onSelect={ ( tabName ) => setTab( tabName ) }
selectOnMove={ false }
tabs={ [
{
name: 'list-view',
title: _x( 'List View', 'Post overview' ),
className: 'editor-list-view-sidebar__panel-tab',
},
{
name: 'outline',
title: _x( 'Outline', 'Post overview' ),
className: 'editor-list-view-sidebar__panel-tab',
},
] }
// The initial tab value is set explicitly to avoid an initial
// render where no tab is selected. This ensures that the
// tabpanel height is correct so the relevant scroll container
// can be rendered internally.
initialTabId="list-view"
>
{ ( currentTab ) => (
<div
className="editor-list-view-sidebar__list-view-container"
ref={ listViewContainerRef }
<div className="edit-post-editor__document-overview-panel__header">
<Button
className="editor-list-view-sidebar__close-button"
icon={ closeSmall }
label={ __( 'Close' ) }
onClick={ closeListView }
/>
<Tabs.TabList
className="editor-list-view-sidebar__tabs-tablist"
ref={ tabsRef }
>
{ renderTabContent( currentTab.name ) }
<Tabs.Tab
className="editor-list-view-sidebar__tabs-tab"
tabId="list-view"
>
{ _x( 'List View', 'Post overview' ) }
</Tabs.Tab>
<Tabs.Tab
className="editor-list-view-sidebar__tabs-tab"
tabId="outline"
>
{ _x( 'Outline', 'Post overview' ) }
</Tabs.Tab>
</Tabs.TabList>
</div>

<Tabs.TabPanel
ref={ listViewContainerRef }
className="editor-list-view-sidebar__tabs-tabpanel"
tabId="list-view"
focusable={ false }
>
<div className="editor-list-view-sidebar__list-view-container">
<div className="editor-list-view-sidebar__list-view-panel-content">
<ListView dropZoneElement={ dropZoneElement } />
</div>
</div>
</Tabs.TabPanel>
<Tabs.TabPanel
className="editor-list-view-sidebar__tabs-tabpanel"
tabId="outline"
focusable={ false }
>
<div className="editor-list-view-sidebar__list-view-container">
<ListViewOutline />
</div>
) }
</TabPanel>
</Tabs.TabPanel>
</Tabs>
</div>
);
}
40 changes: 20 additions & 20 deletions packages/editor/src/components/list-view-sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,31 @@
// @see packages/block-editor/src/components/inserter/style.scss
width: 350px;
}

.edit-post-editor__document-overview-panel__header {
display: flex;
border-bottom: $border-width solid $gray-300;
}
.editor-list-view-sidebar__close-button {
position: absolute;
right: $grid-unit-10;
top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
z-index: 1;
background: $white;
order: 1;
align-self: center;
margin-right: $grid-unit-10;
}
}

// The TabPanel style overrides in the following blocks should be removed when the new TabPanel is available.
.components-tab-panel__tabs {
border-bottom: $border-width solid $gray-300;
box-sizing: border-box;
display: flex;
width: 100%;
padding-right: $grid-unit-70;
.editor-list-view-sidebar__tabs-tablist {
box-sizing: border-box;
flex-grow: 1;

.editor-list-view-sidebar__panel-tab {
width: 50%;
margin-bottom: -$border-width;
}
}
}

.components-tab-panel__tab-content {
height: calc(100% - #{$grid-unit-60 - $border-width});
}
.editor-list-view-sidebar__tabs-tab {
width: 50%;
margin-bottom: -$border-width;
}

.editor-list-view-sidebar__tabs-tabpanel {
height: calc(100% - #{$grid-unit-60 - $border-width});
}

.editor-list-view-sidebar__list-view-panel-content,
Expand Down Expand Up @@ -82,3 +81,4 @@
color: $gray-700;
}
}

Loading