Skip to content

Commit

Permalink
Disable block navigation and document outline items in text mode (#14081
Browse files Browse the repository at this point in the history
)

* 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.
  • Loading branch information
afercia authored Feb 25, 2019
1 parent 1919f83 commit c8c1381
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) :
Expand All @@ -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 />
Expand All @@ -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 );
11 changes: 6 additions & 5 deletions packages/editor/src/components/block-navigation/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
) }
Expand All @@ -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 );
3 changes: 1 addition & 2 deletions packages/editor/src/components/block-navigation/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
4 changes: 3 additions & 1 deletion packages/editor/src/components/document-outline/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -96,6 +96,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
level={ __( 'Title' ) }
isValid
onClick={ focusTitle }
isDisabled={ hasOutlineItemsDisabled }
>
{ title }
</DocumentOutlineItem>
Expand All @@ -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 :
Expand Down
6 changes: 4 additions & 2 deletions packages/editor/src/components/document-outline/item.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const TableOfContentsItem = ( {
isValid,
level,
onClick,
isDisabled,
path = [],
} ) => (
<li
Expand All @@ -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>
{
Expand All @@ -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>
);
Expand Down
10 changes: 10 additions & 0 deletions packages/editor/src/components/document-outline/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -63,3 +69,7 @@
background: $alert-yellow;
}
}

.document-outline__item-content {
padding: 1px 0;
}
4 changes: 2 additions & 2 deletions packages/editor/src/components/table-of-contents/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { withSelect } from '@wordpress/data';
*/
import TableOfContentsPanel from './panel';

function TableOfContents( { hasBlocks } ) {
function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) {
return (
<Dropdown
position="bottom"
Expand All @@ -26,7 +26,7 @@ function TableOfContents( { hasBlocks } ) {
aria-disabled={ ! hasBlocks }
/>
) }
renderContent={ () => <TableOfContentsPanel /> }
renderContent={ () => <TableOfContentsPanel hasOutlineItemsDisabled={ hasOutlineItemsDisabled } /> }
/>
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/components/table-of-contents/panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -49,7 +49,7 @@ function TableOfContentsPanel( { headingCount, paragraphCount, numberOfBlocks }
<span className="table-of-contents__title">
{ __( 'Document Outline' ) }
</span>
<DocumentOutline />
<DocumentOutline hasOutlineItemsDisabled={ hasOutlineItemsDisabled } />
</Fragment>
) }
</Fragment>
Expand Down

0 comments on commit c8c1381

Please sign in to comment.