From 0bc903b55d1a0593999cf74b8130df90e174a568 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 12 Apr 2019 15:18:20 +0100 Subject: [PATCH 1/3] Merge the block navigation and the document outline in the same popover/panel --- packages/block-editor/README.md | 4 + .../src/components/block-navigation/index.js | 4 - .../components/block-navigation/style.scss | 9 - packages/block-editor/src/components/index.js | 1 + .../components/header/header-toolbar/index.js | 2 - .../src/components/table-of-contents/index.js | 2 +- .../src/components/table-of-contents/panel.js | 163 ++++++++++++------ .../components/table-of-contents/style.scss | 55 ++---- 8 files changed, 134 insertions(+), 106 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index e9ea7ce70d1cc0..896dd15e2c8ab1 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -129,6 +129,10 @@ Undocumented declaration. Undocumented declaration. +# **BlockNavigation** + +Undocumented declaration. + # **BlockNavigationDropdown** Undocumented declaration. diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js index 4d25ffda1bb01e..f1b1b9cc0966ae 100644 --- a/packages/block-editor/src/components/block-navigation/index.js +++ b/packages/block-editor/src/components/block-navigation/index.js @@ -9,7 +9,6 @@ import { noop } from 'lodash'; import { withSelect, withDispatch } from '@wordpress/data'; import { NavigableMenu } from '@wordpress/components'; import { compose } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -36,9 +35,6 @@ function BlockNavigation( { role="presentation" className="block-editor-block-navigation__container" > -

- { __( 'Block navigation' ) } -

{ hasHierarchy && ( - { displayBlockToolbar && (
diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index 46746a70f47198..ab0b138c5818ce 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -14,7 +14,7 @@ import TableOfContentsPanel from './panel'; function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) { return ( ( diff --git a/packages/editor/src/components/table-of-contents/panel.js b/packages/editor/src/components/table-of-contents/panel.js index 355d16c46ccfce..045201f3413338 100644 --- a/packages/editor/src/components/table-of-contents/panel.js +++ b/packages/editor/src/components/table-of-contents/panel.js @@ -3,6 +3,9 @@ */ import { __ } from '@wordpress/i18n'; import { withSelect } from '@wordpress/data'; +import { TabPanel } from '@wordpress/components'; +import { BlockNavigation } from '@wordpress/block-editor'; +import { __experimentalCreateInterpolateElement } from '@wordpress/element'; /** * Internal dependencies @@ -13,62 +16,116 @@ import DocumentOutline from '../document-outline'; function TableOfContentsPanel( { headingCount, paragraphCount, - numberOfBlocks, + blockCount, hasOutlineItemsDisabled, onRequestClose, } ) { return ( - /* - * Disable reason: The `list` ARIA role is redundant but - * Safari+VoiceOver won't announce the list otherwise. - */ - /* eslint-disable jsx-a11y/no-redundant-roles */ - <> -
-
    -
  • - { __( 'Words' ) } - -
    • -
  • - { __( 'Headings' ) } - - { headingCount } - -
    • -
  • - { __( 'Paragraphs' ) } - - { paragraphCount } - -
    • -
  • - { __( 'Blocks' ) } - - { numberOfBlocks } - -
    • -
-
- { headingCount > 0 && ( - <> -
-

- { __( 'Document Outline' ) } -

- - - ) } - - /* eslint-enable jsx-a11y/no-redundant-roles */ + + { ( tab ) => { + if ( tab.name === 'content' ) { + return ( + /* + * Disable reason: The `list` ARIA role is redundant but + * Safari+VoiceOver won't announce the list otherwise. + */ + /* eslint-disable jsx-a11y/no-redundant-roles */ + <> +
+
    +
  • + { __experimentalCreateInterpolateElement( + __( ' words' ), + { + WordCount: ( + + + + ), + } + ) } +
    • +
  • + { __experimentalCreateInterpolateElement( + __( ' headings' ), + { + HeadingCount: ( + + { headingCount } + + ), + } + ) } +
    • +
  • + { __experimentalCreateInterpolateElement( + __( + ' paragraphs' + ), + { + ParagraphCount: ( + + { paragraphCount } + + ), + } + ) } +
    • +
  • + { __experimentalCreateInterpolateElement( + __( ' blocks' ), + { + BlockCount: ( + + { blockCount } + + ), + } + ) } +
    • +
+
+ { headingCount > 0 && ( + <> +

+ { __( 'Document Outline' ) } +

+ + + ) } + + /* eslint-enable jsx-a11y/no-redundant-roles */ + ); + } + + return ; + } } + ); } @@ -77,6 +134,6 @@ export default withSelect( ( select ) => { return { headingCount: getGlobalBlockCount( 'core/heading' ), paragraphCount: getGlobalBlockCount( 'core/paragraph' ), - numberOfBlocks: getGlobalBlockCount(), + blockCount: getGlobalBlockCount(), }; } )( TableOfContentsPanel ); diff --git a/packages/editor/src/components/table-of-contents/style.scss b/packages/editor/src/components/table-of-contents/style.scss index b7a20dc2a3c3e1..f317cf1aff76b4 100644 --- a/packages/editor/src/components/table-of-contents/style.scss +++ b/packages/editor/src/components/table-of-contents/style.scss @@ -1,24 +1,24 @@ -.table-of-contents__popover.components-popover .components-popover__content { - min-width: 380px; +.table-of-contents__tab-panel { + .components-tab-panel__tabs { + border-bottom: 1px solid $light-gray-500; + } + + .components-tab-panel__tab-content { + padding: 16px; + + hr { + margin: 10px -16px 0; + } + } } .components-popover.table-of-contents__popover { z-index: z-index(".components-popover.table-of-contents__popover"); } -.table-of-contents__popover { - .components-popover__content { - padding: $grid-unit-20; - - @include break-small { - max-height: calc(100vh - 120px); - overflow-y: auto; - } - } - - hr { - margin: 10px -16px 0; - } +.table-of-contents__popover .components-popover__content { + padding: 0; + overflow-y: auto; } .table-of-contents__wrapper:focus { @@ -27,33 +27,14 @@ } .table-of-contents__counts { - display: flex; - flex-wrap: wrap; + list-style: none; margin: 0; -} -.table-of-contents__count { - flex-basis: 25%; - display: flex; - flex-direction: column; - font-size: $default-font-size; - color: $dark-gray-300; - padding-right: $grid-unit-10; - margin-bottom: 0; - - &:last-child { - padding-right: 0; + > li:not(:last-child) { + margin-bottom: $grid-unit-20; } } -.table-of-contents__number, -.table-of-contents__popover .word-count { - font-size: 21px; - font-weight: 400; - line-height: 30px; - color: $dark-gray-500; -} - .table-of-contents__title { display: block; margin-top: 20px; From f60c69183d8ebeaa9bcc334988ca02683cf0a3d7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 13 Mar 2020 11:37:13 +0100 Subject: [PATCH 2/3] Fix tests --- .../components/block-navigation/dropdown.js | 79 +------------------ .../specs/editor/blocks/columns.test.js | 2 +- .../block-hierarchy-navigation.test.js | 8 +- .../src/components/table-of-contents/index.js | 56 +++++++++---- storybook/test/__snapshots__/index.js.snap | 36 ++++----- 5 files changed, 65 insertions(+), 116 deletions(-) diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index b230aac4236add..4d0aa9b405b59b 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -1,80 +1,5 @@ -/** - * WordPress dependencies - */ -import { Button, Dropdown, SVG, Path } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { useShortcut } from '@wordpress/keyboard-shortcuts'; -import { useCallback } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import BlockNavigation from './'; - -const MenuIcon = ( - - - -); - -function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) { - useShortcut( - 'core/edit-post/toggle-block-navigation', - useCallback( onToggle, [ onToggle ] ), - { - bindGlobal: true, - isDisabled: ! isEnabled, - } - ); - const shortcut = useSelect( - ( select ) => - select( 'core/keyboard-shortcuts' ).getShortcutRepresentation( - 'core/edit-post/toggle-block-navigation' - ), - [] - ); - - return ( -