Skip to content

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

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

Merged
afercia 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 1 commit
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
Prev Previous commit
Pass isTextModeEnabled as prop from parent.
  • Loading branch information
@afercia
afercia committed Feb 25, 2019
commit 76240915efdb721708d558238427e66117bc60c3
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 );
5 changes: 2 additions & 3 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,8 +18,8 @@ const MenuIcon = (
</SVG>
);

function BlockNavigationDropdown( { hasBlocks, isTextModeEnabled } ) {
const isEnabled = hasBlocks && ! isTextModeEnabled;
function BlockNavigationDropdown( { hasBlocks, isDisabled } ) {
const isEnabled = hasBlocks && ! isDisabled;

return (
<Dropdown
Expand Down Expand Up @@ -53,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 );
7 changes: 3 additions & 4 deletions 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, isTextModeEnabled } ) => {
export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupported, hasOutlineItemsDisabled } ) => {
const headings = computeOutlineHeadings( blocks );

if ( headings.length < 1 ) {
Expand Down Expand Up @@ -96,7 +96,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
level={ __( 'Title' ) }
isValid
onClick={ focusTitle }
isDisabled={ isTextModeEnabled }
isDisabled={ hasOutlineItemsDisabled }
>
{ title }
</DocumentOutlineItem>
Expand All @@ -121,7 +121,7 @@ export const DocumentOutline = ( { blocks = [], title, onSelect, isTitleSupporte
isValid={ isValid }
onClick={ () => onSelectHeading( item.clientId ) }
path={ item.path }
isDisabled={ isTextModeEnabled }
isDisabled={ hasOutlineItemsDisabled }
>
{ item.isEmpty ?
emptyHeadingContent :
Expand Down Expand Up @@ -150,7 +150,6 @@ export default compose(
title: getEditedPostAttribute( 'title' ),
blocks: getBlocks(),
isTitleSupported: get( postType, [ 'supports', 'title' ], false ),
isTextModeEnabled: select( 'core/edit-post' ).getEditorMode() === 'text',
};
} ),
withDispatch( ( dispatch ) => {
Expand Down
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