diff --git a/editor/modes/visual-editor/sibling-inserter.js b/editor/modes/visual-editor/sibling-inserter.js index 8965a24335f46..e0b92d51cd1ae 100644 --- a/editor/modes/visual-editor/sibling-inserter.js +++ b/editor/modes/visual-editor/sibling-inserter.js @@ -8,7 +8,6 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { focus } from '@wordpress/utils'; /** * Internal dependencies @@ -23,98 +22,41 @@ class VisualEditorSiblingInserter extends Component { constructor() { super( ...arguments ); - this.bindNode = this.bindNode.bind( this ); - this.focusFirstTabbable = this.focusFirstTabbable.bind( this ); - this.show = this.toggleVisible.bind( this, true ); - this.hide = this.toggleVisible.bind( this, false ); - this.showAndFocus = this.showAndFocus.bind( this ); - this.suspendToggleVisible = this.suspendToggleVisible.bind( this ); + this.forceVisibleWhileInserting = this.forceVisibleWhileInserting.bind( this ); this.state = { - isVisible: false, - isToggleVisibleSuspended: false, + isForcedVisible: false, }; } - componentDidUpdate( prevProps, prevState ) { - const { visibleViaFocus, state } = this; - const { isVisible, isToggleVisibleSuspended } = state; - if ( isVisible && ! prevState.isVisible && visibleViaFocus ) { - this.focusFirstTabbable(); - - // Reset for next toggle visible - this.visibleViaFocus = false; - } - - // If inserter is closed, we must check to see if focus is still within - // the inserter, since it may have been closed by clicking outside. We - // want to retain visible if still focused, or hide otherwise. - if ( ! isToggleVisibleSuspended && prevState.isToggleVisibleSuspended && - ! this.node.contains( document.activeElement ) ) { - this.toggleVisible( false ); - } - } - - bindNode( node ) { - this.node = node; - } - - focusFirstTabbable() { - // Sibling inserter doesn't render its inserter button until after it - // becomes visible by focus or hover. If visible by focus, move focus - // into the now-visible button. - const tabbable = focus.tabbable.find( this.node ); - if ( tabbable.length ) { - tabbable[ 0 ].focus(); - } - } - - toggleVisible( isVisible ) { - if ( ! this.state.isToggleVisibleSuspended ) { - this.setState( { isVisible } ); - } - } - - showAndFocus() { - this.toggleVisible( true ); - this.visibleViaFocus = true; - } - - suspendToggleVisible( isOpen ) { + forceVisibleWhileInserting( isOpen ) { // Prevent mouseout and blur while navigating the open inserter menu // from causing the inserter to be unmounted. - this.setState( { isToggleVisibleSuspended: isOpen } ); + this.setState( { isForcedVisible: isOpen } ); } render() { const { insertIndex, showInsertionPoint } = this.props; - const { isVisible } = this.state; + const { isForcedVisible } = this.state; const classes = classnames( 'editor-visual-editor__sibling-inserter', { - 'is-visible': isVisible || showInsertionPoint, + 'is-forced-visible': isForcedVisible || showInsertionPoint, } ); return (
+ className={ classes }> { showInsertionPoint && (
) } - { isVisible && - - } +
); } diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 8dc799a27991e..af66dc4c249fe 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -445,9 +445,6 @@ position: relative; max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible ) - ( 2 * $block-padding ); margin: 0 auto; - opacity: 0; - transition: opacity 0.25s ease-in-out; - transition-delay: 0.3s; @include break-small { max-width: $visual-editor-max-width - ( 2 * $block-padding ); @@ -457,10 +454,6 @@ top: #{ -1 * ( $block-spacing / 2 ) }; } - &.is-visible { - opacity: 1; - } - &:before { content: ''; position: absolute; @@ -482,6 +475,18 @@ margin: 0; } + .editor-inserter__toggle { + opacity: 0; + transition: opacity 0.25s ease-in-out; + transition-delay: 0.3s; + } + + &.is-forced-visible .editor-inserter__toggle, + &:hover .editor-inserter__toggle, + .editor-inserter__toggle:focus { + opacity: 1; + } + .editor-inserter__toggle.components-button { margin: 0; padding: 4px; diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js index f190dc621efac..350a7900ecc12 100644 --- a/test/e2e/integration/002-adding-blocks.js +++ b/test/e2e/integration/002-adding-blocks.js @@ -20,7 +20,7 @@ describe( 'Adding blocks', () => { cy.get( lastBlockSelector ).type( 'Quote block' ); // Using the regular inserter - cy.get( '.editor-visual-editor [aria-label="Insert block"]' ).click(); + cy.get( '.editor-visual-editor__inserter [aria-label="Insert block"]' ).click(); cy.get( '[placeholder="Search for a block"]' ).type( 'code' ); cy.get( '.editor-inserter__block' ).contains( 'Code' ).click(); cy.get( '[placeholder="Write codeā€¦"]' ).type( 'Code block' );