From 870e98ef4db6fa81339d5e41bcce7d05c6f480bd Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 1 Jan 2024 11:34:12 +0100 Subject: [PATCH 1/4] Editor: Unify the list view sidebar between the post and site editors --- .../edit-post/src/components/layout/index.js | 3 +- packages/edit-post/src/style.scss | 1 - .../edit-site/src/components/editor/index.js | 8 +- .../secondary-sidebar/list-view-sidebar.js | 121 ------------------ .../components/secondary-sidebar/style.scss | 43 ------- .../components/list-view-sidebar/index.js} | 16 +-- .../list-view-sidebar}/list-view-outline.js | 18 +-- .../components/list-view-sidebar}/style.scss | 55 ++++---- packages/editor/src/private-apis.js | 4 +- packages/editor/src/style.scss | 1 + 10 files changed, 53 insertions(+), 217 deletions(-) delete mode 100644 packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js delete mode 100644 packages/edit-site/src/components/secondary-sidebar/style.scss rename packages/{edit-post/src/components/secondary-sidebar/list-view-sidebar.js => editor/src/components/list-view-sidebar/index.js} (90%) rename packages/{edit-post/src/components/secondary-sidebar => editor/src/components/list-view-sidebar}/list-view-outline.js (93%) rename packages/{edit-post/src/components/secondary-sidebar => editor/src/components/list-view-sidebar}/style.scss (75%) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 2f6325842290b..2b48764443bf2 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -52,7 +52,6 @@ import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal'; import EditPostPreferencesModal from '../preferences-modal'; import BrowserURL from '../browser-url'; import Header from '../header'; -import ListViewSidebar from '../secondary-sidebar/list-view-sidebar'; import SettingsSidebar from '../sidebar/settings-sidebar'; import MetaBoxes from '../meta-boxes'; import WelcomeGuide from '../welcome-guide'; @@ -65,7 +64,7 @@ import useCommonCommands from '../../hooks/commands/use-common-commands'; const { getLayoutStyles } = unlock( blockEditorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); const { useCommandContext } = unlock( commandsPrivateApis ); -const { InserterSidebar } = unlock( editorPrivateApis ); +const { InserterSidebar, ListViewSidebar } = unlock( editorPrivateApis ); const interfaceLabels = { /* translators: accessibility text for the editor top bar landmark region. */ diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 0be26baf923bf..adfd7218c4c12 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -5,7 +5,6 @@ @import "./components/layout/style.scss"; @import "./components/block-manager/style.scss"; @import "./components/meta-boxes/meta-boxes-area/style.scss"; -@import "./components/secondary-sidebar/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/post-format/style.scss"; @import "./components/sidebar/post-slug/style.scss"; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 7d3be437d21f8..ee6f502877c53 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -42,7 +42,6 @@ import { } from '../sidebar-edit-mode'; import CodeEditor from '../code-editor'; import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode'; -import ListViewSidebar from '../secondary-sidebar/list-view-sidebar'; import WelcomeGuide from '../welcome-guide'; import StartTemplateOptions from '../start-template-options'; import { store as editSiteStore } from '../../store'; @@ -58,8 +57,11 @@ import TemplatePartConverter from '../template-part-converter'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis ); -const { ExperimentalEditorProvider: EditorProvider, InserterSidebar } = - unlock( editorPrivateApis ); +const { + ExperimentalEditorProvider: EditorProvider, + InserterSidebar, + ListViewSidebar, +} = unlock( editorPrivateApis ); const interfaceLabels = { /* translators: accessibility text for the editor content landmark region. */ diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js deleted file mode 100644 index d18abd0083f07..0000000000000 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ /dev/null @@ -1,121 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { Button } from '@wordpress/components'; -import { useFocusOnMount, useMergeRefs } from '@wordpress/compose'; -import { useDispatch, useSelect } from '@wordpress/data'; -import { useCallback, useRef, useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { closeSmall } from '@wordpress/icons'; -import { ESCAPE } from '@wordpress/keycodes'; -import { focus } from '@wordpress/dom'; -import { useShortcut } from '@wordpress/keyboard-shortcuts'; -import { store as editorStore } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -const { PrivateListView } = unlock( blockEditorPrivateApis ); - -export default function ListViewSidebar() { - const { setIsListViewOpened } = useDispatch( editorStore ); - const { getListViewToggleRef } = unlock( useSelect( editorStore ) ); - - // This hook handles focus when the sidebar first renders. - const focusOnMountRef = useFocusOnMount( 'firstElement' ); - - // When closing the list view, focus should return to the toggle button. - const closeListView = useCallback( () => { - setIsListViewOpened( false ); - getListViewToggleRef().current?.focus(); - }, [ getListViewToggleRef, setIsListViewOpened ] ); - - const closeOnEscape = useCallback( - ( event ) => { - if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { - event.preventDefault(); - closeListView(); - } - }, - [ closeListView ] - ); - - // Use internal state instead of a ref to make sure that the component - // re-renders when the dropZoneElement updates. - const [ dropZoneElement, setDropZoneElement ] = useState( null ); - - // This ref refers to the sidebar as a whole. - const sidebarRef = useRef(); - // This ref refers to the close button. - const sidebarCloseButtonRef = useRef(); - // This ref refers to the list view application area. - const listViewRef = useRef(); - - /* - * Callback function to handle list view or close button focus. - * - * @return void - */ - function handleSidebarFocus() { - // Either focus the list view or the sidebar close button. Must have a fallback because the list view does not render when there are no blocks. - const listViewApplicationFocus = focus.tabbable.find( - listViewRef.current - )[ 0 ]; - const listViewFocusArea = sidebarRef.current.contains( - listViewApplicationFocus - ) - ? listViewApplicationFocus - : sidebarCloseButtonRef.current; - listViewFocusArea.focus(); - } - - const handleToggleListViewShortcut = useCallback( () => { - // If the sidebar has focus, it is safe to close. - if ( - sidebarRef.current.contains( - sidebarRef.current.ownerDocument.activeElement - ) - ) { - closeListView(); - } else { - // If the list view or close button does not have focus, focus should be moved to it. - handleSidebarFocus(); - } - }, [ closeListView ] ); - - // This only fires when the sidebar is open because of the conditional rendering. - // 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 ); - - return ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions -
-
- { __( 'List View' ) } -
-
- -
-
- ); -} diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss deleted file mode 100644 index 7b0fbc3d60198..0000000000000 --- a/packages/edit-site/src/components/secondary-sidebar/style.scss +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Note that this CSS file should be in sync with its counterpart in the other editor: - * packages/edit-post/src/components/secondary-sidebar/style.scss - */ - -.edit-site-editor__list-view-panel { - height: 100%; - display: flex; - flex-direction: column; - - @include break-medium() { - // Same width as the Inserter. - // @see packages/block-editor/src/components/inserter/style.scss - width: 350px; - } -} - -.edit-site-editor__list-view-panel-header { - align-items: center; - border-bottom: $border-width solid $gray-300; - display: flex; - justify-content: space-between; - height: $grid-unit-60; - padding-left: $grid-unit-20; - padding-right: $grid-unit-05; -} - -.edit-site-editor__list-view-panel-content { - // Leave space for the close button - height: calc(100% - #{$button-size} - #{$grid-unit-10}); - - // Include custom scrollbars, invisible until hovered. - @include custom-scrollbars-on-hover(transparent, $gray-600); - overflow: auto; - - // Only reserve space for scrollbars when there is content to scroll. - // This allows items in the list view to have equidistant padding left and right - // right up until a scrollbar is present. - scrollbar-gutter: auto; - - // The table cells use an extra pixels of space left and right. We compensate for that here. - padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); -} diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/editor/src/components/list-view-sidebar/index.js similarity index 90% rename from packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js rename to packages/editor/src/components/list-view-sidebar/index.js index c1b4512454b15..c369dea673497 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/editor/src/components/list-view-sidebar/index.js @@ -11,13 +11,13 @@ import { __, _x } from '@wordpress/i18n'; import { closeSmall } from '@wordpress/icons'; import { useShortcut } from '@wordpress/keyboard-shortcuts'; import { ESCAPE } from '@wordpress/keycodes'; -import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies */ import ListViewOutline from './list-view-outline'; import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; export default function ListViewSidebar() { const { setIsListViewOpened } = useDispatch( editorStore ); @@ -116,7 +116,7 @@ export default function ListViewSidebar() { function renderTabContent( tabName ) { if ( tabName === 'list-view' ) { return ( -
+
); @@ -127,18 +127,18 @@ export default function ListViewSidebar() { return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions