diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 0e88d46040f134..5c281509b8cfed 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -6,6 +6,10 @@ ## 6.2.1 (2018-11-09) +### New Features + +- In `NavigableToolbar`, a property focusOnMount was added, if true, the toolbar will get focus as soon as it mounted. Defaults to false. + ### Polish - Reactive block styles. diff --git a/packages/editor/src/components/block-list/block-contextual-toolbar.js b/packages/editor/src/components/block-list/block-contextual-toolbar.js index 2b054851fb34e7..7efe23aaea989c 100644 --- a/packages/editor/src/components/block-list/block-contextual-toolbar.js +++ b/packages/editor/src/components/block-list/block-contextual-toolbar.js @@ -9,9 +9,10 @@ import { __ } from '@wordpress/i18n'; import NavigableToolbar from '../navigable-toolbar'; import { BlockToolbar } from '../'; -function BlockContextualToolbar() { +function BlockContextualToolbar( { focusOnMount } ) { return ( diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index cf505245b9f5a1..4e689a93960285 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -22,7 +22,7 @@ import { isUnmodifiedDefaultBlock, getUnregisteredTypeHandlerName, } from '@wordpress/blocks'; -import { withFilters } from '@wordpress/components'; +import { KeyboardShortcuts, withFilters } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; @@ -57,6 +57,7 @@ export class BlockListBlock extends Component { this.bindBlockNode = this.bindBlockNode.bind( this ); this.setAttributes = this.setAttributes.bind( this ); this.maybeHover = this.maybeHover.bind( this ); + this.forceFocusedContextualToolbar = this.forceFocusedContextualToolbar.bind( this ); this.hideHoverEffects = this.hideHoverEffects.bind( this ); this.mergeBlocks = this.mergeBlocks.bind( this ); this.insertBlocksAfter = this.insertBlocksAfter.bind( this ); @@ -78,6 +79,7 @@ export class BlockListBlock extends Component { dragging: false, isHovered: false, }; + this.isForcingContextualToolbar = false; } componentDidMount() { @@ -87,6 +89,11 @@ export class BlockListBlock extends Component { } componentDidUpdate( prevProps ) { + if ( this.isForcingContextualToolbar ) { + // The forcing of contextual toolbar should only be true during one update, + // after the first update normal conditions should apply. + this.isForcingContextualToolbar = false; + } if ( this.props.isTypingWithinBlock || this.props.isSelected ) { this.hideHoverEffects(); } @@ -372,6 +379,12 @@ export class BlockListBlock extends Component { } } + forceFocusedContextualToolbar() { + this.isForcingContextualToolbar = true; + // trigger a re-render + this.setState( () => ( {} ) ); + } + render() { return ( @@ -540,7 +553,30 @@ export class BlockListBlock extends Component { isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' } /> ) } - { shouldShowContextualToolbar && } + { ( + shouldShowContextualToolbar || + this.isForcingContextualToolbar + ) && ( + + ) } + { ( + ! shouldShowContextualToolbar && + isSelected && + ! hasFixedToolbar && + ! isEmptyDefaultBlock + ) && ( + + ) } { // until starting to type within it. await page.keyboard.type( 'Example' ); - // [TEMPORARY]: With non-unified toolbar, the toolbar will not - // be visible since the user has entered a "typing" mode. - // Future iterations should ensure Alt+F10 works in a block - // to focus the toolbar regardless of whether it is presently - // visible. - await page.keyboard.press( 'Escape' ); - // Upward await pressWithModifier( 'Alt', 'F10' ); expect( await isInBlockToolbar() ).toBe( true );