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

Visual Editor: Hide sibling inserter by CSS #3503

Merged
merged 1 commit into from Nov 21, 2017
Merged

Visual Editor: Hide sibling inserter by CSS #3503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
84 changes: 13 additions & 71 deletions editor/components/block-list/sibling-inserter.js
View file
Open in desktop
Expand Up @@ -8,7 +8,6 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { focus } from '@wordpress/utils';

/**
* Internal dependencies
Expand All @@ -25,67 +24,17 @@ class BlockListSiblingInserter 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() {
Expand All @@ -94,33 +43,26 @@ class BlockListSiblingInserter extends Component {
}

const { insertIndex, showInsertionPoint } = this.props;
const { isVisible } = this.state;
const { isForcedVisible } = this.state;

const classes = classnames( 'editor-block-list__sibling-inserter', {
'is-visible': isVisible || showInsertionPoint,
'is-forced-visible': isForcedVisible || showInsertionPoint,
} );

return (
<div
ref={ this.bindNode }
data-insert-index={ insertIndex }
className={ classes }
onFocus={ this.showAndFocus }
onBlur={ this.hide }
onMouseEnter={ this.show }
onMouseLeave={ this.hide }
tabIndex={ isVisible ? -1 : 0 }>
className={ classes }>
{ showInsertionPoint && (
<div className="editor-block-list__insertion-point" />
) }
{ isVisible &&
<Inserter
key="inserter"
position="bottom"
insertIndex={ insertIndex }
onToggle={ this.suspendToggleVisible }
/>
}
<Inserter
key="inserter"
position="bottom"
insertIndex={ insertIndex }
onToggle={ this.forceVisibleWhileInserting }
/>
</div>
);
}
Expand Down
19 changes: 12 additions & 7 deletions editor/components/block-list/style.scss
View file
Open in desktop
Expand Up @@ -388,9 +388,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 );
Expand All @@ -400,10 +397,6 @@
top: #{ -1 * ( $block-spacing / 2 ) };
}

&.is-visible {
opacity: 1;
}

&:before {
content: '';
position: absolute;
Expand All @@ -425,6 +418,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;
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/integration/002-adding-blocks.js
View file
Open in desktop
Expand Up @@ -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' );
Expand Down