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.
WordPress · Feb 25, 2019 · c8c1381 · c8c1381
1 parent 1919f83
commit c8c1381
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 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
@@ -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 } ) {
 			</div>
 			<EditorHistoryUndo />
 			<EditorHistoryRedo />
-			<TableOfContents />
-			<BlockNavigationDropdown />
+			<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
+			<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
 			{ hasFixedToolbar && isLargeViewport && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar />
@@ -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
@@ -18,12 +18,14 @@ const MenuIcon = (
 	</SVG>
 );
 
-function BlockNavigationDropdown( { hasBlocks, isTextModeEnabled } ) {
+function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
+	const isEnabled = hasBlocks && ! isDisabled;
+
 	return	(
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Fragment>
-					{ hasBlocks && ! isTextModeEnabled && <KeyboardShortcuts
+					{ isEnabled && <KeyboardShortcuts
 						bindGlobal
 						shortcuts={ {
 							[ rawShortcut.access( 'o' ) ]: onToggle,
@@ -33,11 +35,11 @@ function BlockNavigationDropdown( { hasBlocks, isTextModeEnabled } ) {
 					<IconButton
 						icon={ MenuIcon }
 						aria-expanded={ isOpen }
-						onClick={ hasBlocks ? onToggle : undefined }
+						onClick={ isEnabled ? onToggle : undefined }
 						label={ __( 'Block Navigation' ) }
 						className="editor-block-navigation"
 						shortcut={ displayShortcut.access( 'o' ) }
-						disabled={ ! hasBlocks || isTextModeEnabled }
+						aria-disabled={ ! isEnabled }
 					/>
 				</Fragment>
 			) }
@@ -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
@@ -40,10 +40,9 @@ function BlockNavigationList( {
 						<div className="editor-block-navigation__item">
 							<Button
 								className={ classnames( 'editor-block-navigation__item-button', {
-									'is-selected': block.clientId === selectedBlockClientId,
+									'is-selected': isSelected,
 								} ) }
 								onClick={ () => selectBlock( block.clientId ) }
-								isSelected={ isSelected }
 							>
 								<BlockIcon icon={ blockType.icon } showColors />
 								{ blockType.title }

diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
@@ -64,7 +64,7 @@ const computeOutlineHeadings = ( blocks = [], path = [] ) => {
 
 const isEmptyHeading = ( heading ) => ! heading.attributes.content || heading.attributes.content.length === 0;
 
-export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupported } ) => {
+export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupported, hasOutlineItemsDisabled } ) => {
 	const headings = computeOutlineHeadings( blocks );
 
 	if ( headings.length < 1 ) {
@@ -96,6 +96,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 						level={ __( 'Title' ) }
 						isValid
 						onClick={ focusTitle }
+						isDisabled={ hasOutlineItemsDisabled }
 					>
 						{ title }
 					</DocumentOutlineItem>
@@ -120,6 +121,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
 							isValid={ isValid }
 							onClick={ () => onSelectHeading( item.clientId ) }
 							path={ item.path }
+							isDisabled={ hasOutlineItemsDisabled }
 						>
 							{ item.isEmpty ?
 								emptyHeadingContent :

diff --git a/packages/editor/src/components/document-outline/item.js b/packages/editor/src/components/document-outline/item.js
@@ -18,6 +18,7 @@ const TableOfContentsItem = ( {
 	isValid,
 	level,
 	onClick,
+	isDisabled,
 	path = [],
 } ) => (
 	<li
@@ -31,7 +32,8 @@ const TableOfContentsItem = ( {
 	>
 		<button
 			className="document-outline__button"
-			onClick={ onClick }
+			onClick={ isDisabled ? undefined : onClick }
+			disabled={ isDisabled }
 		>
 			<span className="document-outline__emdash" aria-hidden="true"></span>
 			{
@@ -49,7 +51,7 @@ const TableOfContentsItem = ( {
 			<span className="document-outline__item-content">
 				{ children }
 			</span>
-			<span className="screen-reader-text">{ __( '(Click to focus this heading)' ) }</span>
+			{ ! isDisabled && <span className="screen-reader-text">{ __( '(Click to focus this heading)' ) }</span> }
 		</button>
 	</li>
 );

diff --git 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
@@ -10,7 +10,7 @@ import { withSelect } from '@wordpress/data';
  */
 import TableOfContentsPanel from './panel';
 
-function TableOfContents( { hasBlocks } ) {
+function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) {
 	return (
 		<Dropdown
 			position="bottom"
@@ -26,7 +26,7 @@ function TableOfContents( { hasBlocks } ) {
 					aria-disabled={ ! hasBlocks }
 				/>
 			) }
-			renderContent={ () => <TableOfContentsPanel /> }
+			renderContent={ () => <TableOfContentsPanel hasOutlineItemsDisabled={ hasOutlineItemsDisabled } /> }
 		/>
 	);
 }

diff --git 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 (
 		<Fragment>
 			<div
@@ -49,7 +49,7 @@ function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks }
 					<span className="table-of-contents__title">
 						{ __( 'Document Outline' ) }
 					</span>
-					<DocumentOutline />
+					<DocumentOutline hasOutlineItemsDisabled={ hasOutlineItemsDisabled } />
 				</Fragment>
 			) }
 		</Fragment>