Revert "Block List: Display inserter button after block on hover, foc…

…us" (#2929)
WordPress · Oct 9, 2017 · 0a02528 · 0a02528
1 parent b6480da
commit 0a02528
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 312 deletions.
diff --git a/components/dropdown/index.js b/components/dropdown/index.js
@@ -20,22 +20,6 @@ class Dropdown extends Component {
 		};
 	}
 
-	componentWillUnmount() {
-		const { isOpen } = this.state;
-		const { onToggle } = this.props;
-		if ( isOpen && onToggle ) {
-			onToggle( false );
-		}
-	}
-
-	componentWillUpdate( nextProps, nextState ) {
-		const { isOpen } = nextState;
-		const { onToggle } = nextProps;
-		if ( this.state.isOpen !== isOpen && onToggle ) {
-			onToggle( isOpen );
-		}
-	}
-
 	bindContainer( ref ) {
 		this.container = ref;
 	}

diff --git a/editor/actions.js b/editor/actions.js
@@ -158,32 +158,6 @@ export function hideInsertionPoint() {
 	};
 }
 
-/**
- * Returns an action object used in signalling that block insertion should
- * occur at the specified block index position.
- *
- * @param  {Number} position Position at which to insert
- * @return {Object}          Action object
- */
-export function setBlockInsertionPoint( position ) {
-	return {
-		type: 'SET_BLOCK_INSERTION_POINT',
-		position,
-	};
-}
-
-/**
- * Returns an action object used in signalling that the block insertion point
- * should be reset.
- *
- * @return {Object} Action object
- */
-export function clearBlockInsertionPoint() {
-	return {
-		type: 'CLEAR_BLOCK_INSERTION_POINT',
-	};
-}
-
 export function editPost( edits ) {
 	return {
 		type: 'EDIT_POST',

diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -6,21 +6,20 @@ $z-layers: (
 	'.editor-block-switcher__arrow': 1,
 	'.editor-visual-editor__block:before': -1,
 	'.editor-visual-editor__block .wp-block-more:before': -1,
-	'.editor-visual-editor__block {core/image aligned left or right}': 20,
-	'.editor-block-toolbar': 10,
+	'.editor-visual-editor__block {core/image aligned left or right}': 10,
+	'.editor-block-toolbar': 1,
 	'.editor-visual-editor__block-warning': 1,
-	'.editor-visual-editor .editor-visual-editor__block .editor-inserter': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-format-list__menu': 1,
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
 	'.blocks-format-toolbar__link-modal': 1,
 	'.editor-block-switcher__menu': 2,
-	'.editor-block-mover': 20,
-	'.blocks-gallery-image__inline-menu': 20,
-	'.editor-header': 30,
-	'.editor-text-editor__formatting': 30,
+	'.editor-block-mover': 10,
+	'.blocks-gallery-image__inline-menu': 10,
+	'.editor-header': 20,
+	'.editor-text-editor__formatting': 20,
 
 	// Show drop zone above most standard content, but below any overlays
 	'.components-drop-zone': 100,

diff --git a/editor/inserter/index.js b/editor/inserter/index.js
@@ -2,99 +2,52 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Dropdown, IconButton } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InserterMenu from './menu';
 import { getBlockInsertionPoint, getEditorMode } from '../selectors';
-import {
-	insertBlock,
-	setBlockInsertionPoint,
-	clearBlockInsertionPoint,
-	hideInsertionPoint,
-} from '../actions';
+import { insertBlock, hideInsertionPoint } from '../actions';
 
-class Inserter extends Component {
-	constructor() {
-		super( ...arguments );
+function Inserter( { position, children, onInsertBlock, insertionPoint } ) {
+	return (
+		<Dropdown
+			className="editor-inserter"
+			position={ position }
+			renderToggle={ ( { onToggle, isOpen } ) => (
+				<IconButton
+					icon="insert"
+					label={ __( 'Insert block' ) }
+					onClick={ onToggle }
+					className="editor-inserter__toggle"
+					aria-haspopup="true"
+					aria-expanded={ isOpen }
+				>
+					{ children }
+				</IconButton>
+			) }
+			renderContent={ ( { onClose } ) => {
+				const onInsert = ( name ) => {
+					onInsertBlock(
+						name,
+						insertionPoint
+					);
 
-		this.onToggle = this.onToggle.bind( this );
-	}
+					onClose();
+				};
 
-	onToggle( isOpen ) {
-		const {
-			insertIndex,
-			setInsertionPoint,
-			clearInsertionPoint,
-			onToggle,
-		} = this.props;
-
-		// When inserting at specific index, assign as insertion point when
-		// the inserter is opened, clearing on close.
-		if ( insertIndex !== undefined ) {
-			if ( isOpen ) {
-				setInsertionPoint( insertIndex );
-			} else {
-				clearInsertionPoint();
-			}
-		}
-
-		// Surface toggle callback to parent component
-		if ( onToggle ) {
-			onToggle( isOpen );
-		}
-	}
-
-	render() {
-		const {
-			position,
-			children,
-			onInsertBlock,
-			insertionPoint,
-		} = this.props;
-
-		return (
-			<Dropdown
-				className="editor-inserter"
-				position={ position }
-				onToggle={ this.onToggle }
-				renderToggle={ ( { onToggle, isOpen } ) => (
-					<IconButton
-						icon="insert"
-						label={ __( 'Insert block' ) }
-						onClick={ onToggle }
-						className="editor-inserter__toggle"
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-					>
-						{ children }
-					</IconButton>
-				) }
-				renderContent={ ( { onClose } ) => {
-					const onInsert = ( name ) => {
-						onInsertBlock(
-							name,
-							insertionPoint
-						);
-
-						onClose();
-					};
-
-					return <InserterMenu onSelect={ onInsert } />;
-				} }
-			/>
-		);
-	}
+				return <InserterMenu onSelect={ onInsert } />;
+			} }
+		/>
+	);
 }
 
 export default connect(
@@ -112,9 +65,5 @@ export default connect(
 				position
 			) );
 		},
-		...bindActionCreators( {
-			setInsertionPoint: setBlockInsertionPoint,
-			clearInsertionPoint: clearBlockInsertionPoint,
-		}, dispatch ),
 	} )
 )( Inserter );
diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js
@@ -51,11 +51,11 @@ export class InserterMenu extends Component {
 	}
 
 	componentDidMount() {
-		document.addEventListener( 'keydown', this.onKeyDown, true );
+		document.addEventListener( 'keydown', this.onKeyDown );
 	}
 
 	componentWillUnmount() {
-		document.removeEventListener( 'keydown', this.onKeyDown, true );
+		document.removeEventListener( 'keydown', this.onKeyDown );
 	}
 
 	componentDidUpdate( prevProps, prevState ) {
@@ -239,32 +239,28 @@ export class InserterMenu extends Component {
 					return;
 				}
 				this.focusPrevious( this );
-				break;
 
+				break;
 			case UP:
 				keydown.preventDefault();
 				this.focusPrevious( this );
-				break;
 
+				break;
 			case RIGHT:
 				if ( this.state.currentFocus === 'search' ) {
 					return;
 				}
 				this.focusNext( this );
-				break;
 
+				break;
 			case DOWN:
 				keydown.preventDefault();
 				this.focusNext( this );
-				break;
 
-			default:
-				return;
+				break;
+			default :
+				break;
 		}
-
-		// Since unhandled key will return in the default case, we can assume
-		// having reached this point implies that the key is handled.
-		keydown.stopImmediatePropagation();
 	}
 
 	changeMenuSelection( refName ) {
@@ -349,6 +345,7 @@ export class InserterMenu extends Component {
 		const isShowingEmbeds = ! isSearching && 'embeds' === this.state.tab;
 		const isShowingRecent = ! isSearching && 'recent' === this.state.tab;
 
+		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
 			<div className="editor-inserter__menu">
 				<label htmlFor={ `editor-inserter__search-${ instanceId }` } className="screen-reader-text">
@@ -393,6 +390,7 @@ export class InserterMenu extends Component {
 				}
 			</div>
 		);
+		/* eslint-enable jsx-a11y/no-autofocus */
 	}
 }
 

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -23,7 +23,6 @@ import BlockDropZone from './block-drop-zone';
 import BlockMover from '../../block-mover';
 import BlockRightMenu from '../../block-settings-menu';
 import BlockToolbar from '../../block-toolbar';
-import Inserter from '../../inserter';
 import {
 	clearSelectedBlock,
 	editPost,
@@ -279,7 +278,7 @@ class VisualEditorBlock extends Component {
 	}
 
 	render() {
-		const { block, multiSelectedBlockUids, order, nextBlock } = this.props;
+		const { block, multiSelectedBlockUids, order } = this.props;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -311,7 +310,7 @@ class VisualEditorBlock extends Component {
 			'is-hovered': isHovered,
 		} );
 
-		const { onMouseLeave, onSelect, onFocus, onReplace } = this.props;
+		const { onMouseLeave, onFocus, onReplace } = this.props;
 
 		// Determine whether the block has props to apply to the wrapper.
 		let wrapperProps;
@@ -382,11 +381,6 @@ class VisualEditorBlock extends Component {
 						}
 					</BlockCrashBoundary>
 				</div>
-				{ ( showUI || isHovered ) && !! nextBlock && (
-					<Inserter
-						onToggle={ ( isOpen ) => isOpen ? onSelect() : null }
-						insertIndex={ order + 1 } />
-				) }
 				{ !! error && <BlockCrashWarning /> }
 			</div>
 		);

diff --git a/editor/modes/visual-editor/inserter.js b/editor/modes/visual-editor/inserter.js
@@ -17,7 +17,6 @@ import { createBlock } from '@wordpress/blocks';
  */
 import Inserter from '../../inserter';
 import { insertBlock } from '../../actions';
-import { getBlockCount } from '../../selectors';
 
 export class VisualEditorInserter extends Component {
 	constructor() {
@@ -43,7 +42,6 @@ export class VisualEditorInserter extends Component {
 	}
 
 	render() {
-		const { blockCount } = this.props;
 		const { isShowingControls } = this.state;
 		const classes = classnames( 'editor-visual-editor__inserter', {
 			'is-showing-controls': isShowingControls,
@@ -55,9 +53,7 @@ export class VisualEditorInserter extends Component {
 				onFocus={ this.showControls }
 				onBlur={ this.hideControls }
 			>
-				<Inserter
-					insertIndex={ blockCount }
-					position="top right" />
+				<Inserter position="top right" />
 				<IconButton
 					icon="editor-paragraph"
 					className="editor-inserter__block"
@@ -80,10 +76,6 @@ export class VisualEditorInserter extends Component {
 }
 
 export default connect(
-	( state ) => {
-		return {
-			blockCount: getBlockCount( state ),
-		};
-	},
+	null,
 	{ onInsertBlock: insertBlock },
 )( VisualEditorInserter );
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -281,26 +281,6 @@
 			border-bottom: 3px solid $blue-medium-500;
 		}
 	}
-
-	.editor-visual-editor & .editor-inserter {
-		position: absolute;
-		left: $block-padding + $block-mover-padding-visible;
-		top: 100%;
-		transform: translate( -50%, -50% );
-		margin-top: 0;
-		margin-bottom: 0;
-		z-index: z-index( '.editor-visual-editor .editor-visual-editor__block .editor-inserter' );
-	}
-
-	.editor-visual-editor & .editor-inserter__toggle {
-		padding: 4px;
-		background-color: white;
-
-		&,
-		& .dashicon {
-			display: block;
-		}
-	}
 }
 
 .editor-visual-editor .editor-inserter {