Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable block navigation and document outline items in text mode #14081

Merged
merged 5 commits into from
Feb 25, 2019
Merged

Disable block navigation and document outline items in text mode #14081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
62f373e
Use aria-disabled instead of disabled.
afercia Feb 25, 2019
f23e8a8
Fix unrecognized prop warning.
afercia Feb 25, 2019
57fcae7
Disable Document Outline items in text mode.
afercia Feb 25, 2019
8c278e6
Improve buttons alignment.
afercia Feb 25, 2019
7624091
Pass isTextModeEnabled as prop from parent.
afercia Feb 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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