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/components/secondary-sidebar/list-view-outline.js b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js deleted file mode 100644 index 6d27767bdfd0b..0000000000000 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; -import { - DocumentOutline, - WordCount, - TimeToRead, - CharacterCount, -} from '@wordpress/editor'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { - __experimentalText as Text, - Path, - SVG, - Line, - Rect, -} from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -function EmptyOutlineIllustration() { - return ( - - - - - - - - - - - - - - - - ); -} - -export default function ListViewOutline() { - const { headingCount } = useSelect( ( select ) => { - const { getGlobalBlockCount } = select( blockEditorStore ); - return { - headingCount: getGlobalBlockCount( 'core/heading' ), - }; - }, [] ); - return ( - <> -
-
- { __( 'Characters:' ) } - - - -
-
- { __( 'Words:' ) } - -
-
- { __( 'Time to read:' ) } - -
-
- { headingCount > 0 ? ( - - ) : ( -
- -

- { __( - 'Navigate the structure of your document and address issues like empty or incorrect heading levels.' - ) } -

-
- ) } - - ); -} 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-site/src/style.scss b/packages/edit-site/src/style.scss index 53c4f672ed8c2..c7d0609b4e771 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -21,7 +21,6 @@ @import "./components/sidebar-edit-mode/template-panel/style.scss"; @import "./components/editor/style.scss"; @import "./components/create-template-part-modal/style.scss"; -@import "./components/secondary-sidebar/style.scss"; @import "./components/welcome-guide/style.scss"; @import "./components/start-template-options/style.scss"; @import "./components/keyboard-shortcut-help-modal/style.scss"; diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index cd7c828cb7d3b..bbddf22011540 100644 --- a/packages/editor/src/components/document-outline/index.js +++ b/packages/editor/src/components/document-outline/index.js @@ -7,6 +7,7 @@ import { withSelect, useDispatch } from '@wordpress/data'; import { create, getTextContent } from '@wordpress/rich-text'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; +import { Path, SVG, Line, Rect } from '@wordpress/components'; /** * Internal dependencies @@ -34,6 +35,43 @@ const multipleH1Headings = [ { __( '(Multiple H1 headings are not recommended)' ) } , ]; +function EmptyOutlineIllustration() { + return ( + + + + + + + + + + + + + + + + ); +} /** * Returns an array of heading blocks enhanced with the following properties: @@ -70,7 +108,16 @@ export const DocumentOutline = ( { const headings = computeOutlineHeadings( blocks ); const { selectBlock } = useDispatch( blockEditorStore ); if ( headings.length < 1 ) { - return null; + return ( +
+ +

+ { __( + 'Navigate the structure of your document and address issues like empty or incorrect heading levels.' + ) } +

+
+ ); } let prevHeadingLevel = 1; diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss index 852b40b58eb8f..efd2606b82d39 100644 --- a/packages/editor/src/components/document-outline/style.scss +++ b/packages/editor/src/components/document-outline/style.scss @@ -81,3 +81,15 @@ .document-outline__item-content { padding: 1px 0; } + +.editor-document-outline.has-no-headings { + & > svg { + margin-top: $grid-unit-30 + $grid-unit-05; + } + & > p { + padding-left: $grid-unit-40; + padding-right: $grid-unit-40; + } + text-align: center; + color: $gray-700; +} 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