From 0a02528f659ac90b9a209d18b78317b57f6c2052 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Mon, 9 Oct 2017 13:31:41 +0200 Subject: [PATCH] Revert "Block List: Display inserter button after block on hover, focus" (#2929) --- components/dropdown/index.js | 16 ---- editor/actions.js | 26 ------ editor/assets/stylesheets/_z-index.scss | 13 ++- editor/inserter/index.js | 111 +++++++----------------- editor/inserter/menu.js | 22 +++-- editor/modes/visual-editor/block.js | 10 +-- editor/modes/visual-editor/inserter.js | 12 +-- editor/modes/visual-editor/style.scss | 20 ----- editor/reducer.js | 16 +--- editor/selectors.js | 23 +---- editor/test/reducer.js | 60 ++----------- editor/test/selectors.js | 44 +--------- editor/test/store.js | 2 +- 13 files changed, 63 insertions(+), 312 deletions(-) diff --git a/components/dropdown/index.js b/components/dropdown/index.js index f29930ca3f83a..8d932b393d15f 100644 --- 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 index a6af8351e2886..445a91787839a 100644 --- 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 index 6a36ec68b7680..8d43f00a0f173 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -6,10 +6,9 @@ $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, @@ -17,10 +16,10 @@ $z-layers: ( '.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 index e04300bc1a360..c67c8f3ca3bf4 100644 --- a/editor/inserter/index.js +++ b/editor/inserter/index.js @@ -2,7 +2,6 @@ * External dependencies */ import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; /** * WordPress dependencies @@ -10,91 +9,45 @@ import { bindActionCreators } from 'redux'; 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 ( + ( + + { children } + + ) } + 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 ( - ( - - { children } - - ) } - renderContent={ ( { onClose } ) => { - const onInsert = ( name ) => { - onInsertBlock( - name, - insertionPoint - ); - - onClose(); - }; - - return ; - } } - /> - ); - } + return ; + } } + /> + ); } 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 index 785688db1a20e..2389a58a86203 100644 --- 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 (
); + /* eslint-enable jsx-a11y/no-autofocus */ } } diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index d05216d1a2cae..773efc9bdb439 100644 --- 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 { } - { ( showUI || isHovered ) && !! nextBlock && ( - isOpen ? onSelect() : null } - insertIndex={ order + 1 } /> - ) } { !! error && } ); diff --git a/editor/modes/visual-editor/inserter.js b/editor/modes/visual-editor/inserter.js index 97265306e3aa1..db2ea83685e60 100644 --- 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 } > - + { - return { - blockCount: getBlockCount( state ), - }; - }, + null, { onInsertBlock: insertBlock }, )( VisualEditorInserter ); diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 89c5e0b5b6f2b..b3b32fc2fdcb8 100644 --- 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 { diff --git a/editor/reducer.js b/editor/reducer.js index cbeff9579c29f..b761af8502cfc 100644 --- a/editor/reducer.js +++ b/editor/reducer.js @@ -385,20 +385,12 @@ export function hoveredBlock( state = null, action ) { * @param {Object} action Dispatched action * @return {Object} Updated state */ -export function blockInsertionPoint( state = {}, action ) { +export function showInsertionPoint( state = false, action ) { switch ( action.type ) { - case 'SET_BLOCK_INSERTION_POINT': - const { position } = action; - return { ...state, position }; - - case 'CLEAR_BLOCK_INSERTION_POINT': - return { ...state, position: null }; - case 'SHOW_INSERTION_POINT': - return { ...state, visible: true }; - + return true; case 'HIDE_INSERTION_POINT': - return { ...state, visible: false }; + return false; } return state; @@ -538,7 +530,7 @@ export default optimist( combineReducers( { isTyping, blockSelection, hoveredBlock, - blockInsertionPoint, + showInsertionPoint, preferences, panel, saving, diff --git a/editor/selectors.js b/editor/selectors.js index 45f0c469ecba0..bed57fdcd9efc 100644 --- a/editor/selectors.js +++ b/editor/selectors.js @@ -727,11 +727,6 @@ export function getBlockInsertionPoint( state ) { return state.editor.blockOrder.length; } - const position = getBlockSiblingInserterPosition( state ); - if ( null !== position ) { - return position; - } - const lastMultiSelectedBlock = getLastMultiSelectedBlockUid( state ); if ( lastMultiSelectedBlock ) { return getBlockIndex( state, lastMultiSelectedBlock ) + 1; @@ -745,22 +740,6 @@ export function getBlockInsertionPoint( state ) { return state.editor.blockOrder.length; } -/** - * Returns the position at which the block inserter will insert a new adjacent - * sibling block, or null if the inserter is not actively visible. - * - * @param {Object} state Global application state - * @return {?Number} Whether the inserter is currently visible - */ -export function getBlockSiblingInserterPosition( state ) { - const { position } = state.blockInsertionPoint; - if ( ! Number.isInteger( position ) ) { - return null; - } - - return position; -} - /** * Returns true if we should show the block insertion point * @@ -768,7 +747,7 @@ export function getBlockSiblingInserterPosition( state ) { * @return {?Boolean} Whether the insertion point is visible or not */ export function isBlockInsertionPointVisible( state ) { - return !! state.blockInsertionPoint.visible; + return state.showInsertionPoint; } /** diff --git a/editor/test/reducer.js b/editor/test/reducer.js index 5cfe8d90d8c4f..15cc07abfa26c 100644 --- a/editor/test/reducer.js +++ b/editor/test/reducer.js @@ -22,7 +22,7 @@ import { preferences, saving, notices, - blockInsertionPoint, + showInsertionPoint, } from '../reducer'; describe( 'state', () => { @@ -618,69 +618,21 @@ describe( 'state', () => { } ); } ); - describe( 'blockInsertionPoint', () => { - it( 'should default to an empty object', () => { - const state = blockInsertionPoint( undefined, {} ); - - expect( state ).toEqual( {} ); - } ); - - it( 'should set insertion point position', () => { - const state = blockInsertionPoint( undefined, { - type: 'SET_BLOCK_INSERTION_POINT', - position: 5, - } ); - - expect( state ).toEqual( { - position: 5, - } ); - } ); - - it( 'should clear insertion point position', () => { - const original = blockInsertionPoint( undefined, { - type: 'SET_BLOCK_INSERTION_POINT', - position: 5, - } ); - - const state = blockInsertionPoint( deepFreeze( original ), { - type: 'CLEAR_BLOCK_INSERTION_POINT', - } ); - - expect( state ).toEqual( { - position: null, - } ); - } ); - + describe( 'showInsertionPoint', () => { it( 'should show the insertion point', () => { - const state = blockInsertionPoint( undefined, { + const state = showInsertionPoint( undefined, { type: 'SHOW_INSERTION_POINT', } ); - expect( state ).toEqual( { visible: true } ); + expect( state ).toBe( true ); } ); it( 'should clear the insertion point', () => { - const state = blockInsertionPoint( deepFreeze( {} ), { + const state = showInsertionPoint( {}, { type: 'HIDE_INSERTION_POINT', } ); - expect( state ).toEqual( { visible: false } ); - } ); - - it( 'should merge position and visible', () => { - const original = blockInsertionPoint( undefined, { - type: 'SHOW_INSERTION_POINT', - } ); - - const state = blockInsertionPoint( deepFreeze( original ), { - type: 'SET_BLOCK_INSERTION_POINT', - position: 5, - } ); - - expect( state ).toEqual( { - visible: true, - position: 5, - } ); + expect( state ).toBe( false ); } ); } ); diff --git a/editor/test/selectors.js b/editor/test/selectors.js index 955aeac7b7738..bf2df0a1164ff 100644 --- a/editor/test/selectors.js +++ b/editor/test/selectors.js @@ -56,7 +56,6 @@ import { getBlockFocus, isTyping, getBlockInsertionPoint, - getBlockSiblingInserterPosition, isBlockInsertionPointVisible, isSavingPost, didPostSaveRequestSucceed, @@ -1539,22 +1538,6 @@ describe( 'selectors', () => { blockOrder: [ 1, 2, 3 ], edits: {}, }, - blockInsertionPoint: {}, - }; - - expect( getBlockInsertionPoint( state ) ).toBe( 2 ); - } ); - - it( 'should return the assigned insertion point', () => { - const state = { - preferences: { mode: 'visual' }, - blockSelection: {}, - editor: { - blockOrder: [ 1, 2, 3 ], - }, - blockInsertionPoint: { - position: 2, - }, }; expect( getBlockInsertionPoint( state ) ).toBe( 2 ); @@ -1570,7 +1553,6 @@ describe( 'selectors', () => { editor: { blockOrder: [ 1, 2, 3 ], }, - blockInsertionPoint: {}, }; expect( getBlockInsertionPoint( state ) ).toBe( 2 ); @@ -1583,7 +1565,6 @@ describe( 'selectors', () => { editor: { blockOrder: [ 1, 2, 3 ], }, - blockInsertionPoint: {}, }; expect( getBlockInsertionPoint( state ) ).toBe( 3 ); @@ -1596,39 +1577,16 @@ describe( 'selectors', () => { editor: { blockOrder: [ 1, 2, 3 ], }, - blockInsertionPoint: {}, }; expect( getBlockInsertionPoint( state ) ).toBe( 3 ); } ); } ); - describe( 'getBlockSiblingInserterPosition', () => { - it( 'should return null if no sibling insertion point', () => { - const state = { - blockInsertionPoint: {}, - }; - - expect( getBlockSiblingInserterPosition( state ) ).toBe( null ); - } ); - - it( 'should return sibling insertion point', () => { - const state = { - blockInsertionPoint: { - position: 5, - }, - }; - - expect( getBlockSiblingInserterPosition( state ) ).toBe( 5 ); - } ); - } ); - describe( 'isBlockInsertionPointVisible', () => { it( 'should return the value in state', () => { const state = { - blockInsertionPoint: { - visible: true, - }, + showInsertionPoint: true, }; expect( isBlockInsertionPointVisible( state ) ).toBe( true ); diff --git a/editor/test/store.js b/editor/test/store.js index 50fc4e43efb2a..d46d69675d3a8 100644 --- a/editor/test/store.js +++ b/editor/test/store.js @@ -25,7 +25,7 @@ describe( 'store', () => { 'hoveredBlock', 'preferences', 'saving', - 'blockInsertionPoint', + 'showInsertionPoint', 'notices', ] ) ); } );