From 6b0e2202aaf5cb36225705a7074605804dbda9d1 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 25 Feb 2019 16:15:02 +0100 Subject: [PATCH] Disable block navigation and document outline items in text mode (#14081) * Use aria-disabled instead of disabled. * Fix unrecognized prop warning. * Disable Document Outline items in text mode. * Improve buttons alignment. * Pass isTextModeEnabled as prop from parent. --- .../src/components/header/header-toolbar/index.js | 7 ++++--- .../src/components/block-navigation/dropdown.js | 11 ++++++----- .../editor/src/components/block-navigation/index.js | 3 +-- .../editor/src/components/document-outline/index.js | 4 +++- .../editor/src/components/document-outline/item.js | 6 ++++-- .../editor/src/components/document-outline/style.scss | 10 ++++++++++ .../editor/src/components/table-of-contents/index.js | 4 ++-- .../editor/src/components/table-of-contents/panel.js | 4 ++-- 8 files changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 87a24a85e2a8a3..7740b3b157a993 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -21,7 +21,7 @@ import { */ import FullscreenModeClose from '../fullscreen-mode-close'; -function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter } ) { +function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isTextModeEnabled } ) { const toolbarAriaLabel = hasFixedToolbar ? /* translators: accessibility text for the editor toolbar when Top Toolbar is on */ __( 'Document and block tools' ) : @@ -42,8 +42,8 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter } ) { - - + + { hasFixedToolbar && isLargeViewport && (
@@ -58,6 +58,7 @@ export default compose( [ hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), // This setting (richEditingEnabled) should not live in the block editor's setting. showInserter: select( 'core/edit-post' ).getEditorMode() === 'visual' && select( 'core/block-editor' ).getEditorSettings().richEditingEnabled, + isTextModeEnabled: select( 'core/edit-post' ).getEditorMode() === 'text', } ) ), withViewportMatch( { isLargeViewport: 'medium' } ), ] )( HeaderToolbar ); diff --git a/packages/editor/src/components/block-navigation/dropdown.js b/packages/editor/src/components/block-navigation/dropdown.js index 104279fc877b1c..35db5d9b2d1f27 100644 --- a/packages/editor/src/components/block-navigation/dropdown.js +++ b/packages/editor/src/components/block-navigation/dropdown.js @@ -18,12 +18,14 @@ const MenuIcon = ( ); -function BlockNavigationDropdown( { hasBlocks, isTextModeEnabled } ) { +function BlockNavigationDropdown( { hasBlocks, isDisabled } ) { + const isEnabled = hasBlocks && ! isDisabled; + return ( ( - { hasBlocks && ! isTextModeEnabled && ) } @@ -51,6 +53,5 @@ function BlockNavigationDropdown( { hasBlocks, isTextModeEnabled } ) { export default withSelect( ( select ) => { return { hasBlocks: !! select( 'core/block-editor' ).getBlockCount(), - isTextModeEnabled: select( 'core/edit-post' ).getEditorMode() === 'text', }; } )( BlockNavigationDropdown ); diff --git a/packages/editor/src/components/block-navigation/index.js b/packages/editor/src/components/block-navigation/index.js index a3f67764fa36a2..be7206d6cac0e3 100644 --- a/packages/editor/src/components/block-navigation/index.js +++ b/packages/editor/src/components/block-navigation/index.js @@ -40,10 +40,9 @@ function BlockNavigationList( {
); diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss index 336f53d196687f..53008b91e6b3d8 100644 --- a/packages/editor/src/components/document-outline/style.scss +++ b/packages/editor/src/components/document-outline/style.scss @@ -43,9 +43,15 @@ border: none; display: flex; align-items: flex-start; + margin: 0 0 0 -1px; + padding: 2px 5px 2px 1px; color: $dark-gray-800; text-align: left; + &:disabled { + cursor: default; + } + &:focus { @include button-style__focus-active; } @@ -63,3 +69,7 @@ background: $alert-yellow; } } + +.document-outline__item-content { + padding: 1px 0; +} diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index af398e060085c3..767f51dc6c1afa 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -10,7 +10,7 @@ import { withSelect } from '@wordpress/data'; */ import TableOfContentsPanel from './panel'; -function TableOfContents( { hasBlocks } ) { +function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) { return ( ) } - renderContent={ () => } + renderContent={ () => } /> ); } diff --git a/packages/editor/src/components/table-of-contents/panel.js b/packages/editor/src/components/table-of-contents/panel.js index 00489ccaf1e1d3..a1a2a4b4130557 100644 --- a/packages/editor/src/components/table-of-contents/panel.js +++ b/packages/editor/src/components/table-of-contents/panel.js @@ -11,7 +11,7 @@ import { withSelect } from '@wordpress/data'; import WordCount from '../word-count'; import DocumentOutline from '../document-outline'; -function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks } ) { +function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks, hasOutlineItemsDisabled } ) { return (
{ __( 'Document Outline' ) } - + ) }