From 7f5ff7420cd430454742b8922fa2dd93af3cf07e Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 10 Dec 2019 11:40:01 -0500 Subject: [PATCH] Block Editor: Remove block inserter shortcuts --- packages/base-styles/_z-index.scss | 1 - .../src/components/block-list/block.js | 11 --- .../src/components/block-list/style.scss | 15 ---- .../default-block-appender/index.js | 9 +-- .../default-block-appender/style.scss | 31 +------- .../test/__snapshots__/index.js.snap | 6 -- .../inserter-with-shortcuts/index.js | 72 ------------------- .../inserter-with-shortcuts/style.scss | 26 ------- packages/block-editor/src/style.scss | 1 - 9 files changed, 3 insertions(+), 169 deletions(-) delete mode 100644 packages/block-editor/src/components/inserter-with-shortcuts/index.js delete mode 100644 packages/block-editor/src/components/inserter-with-shortcuts/style.scss diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 7092510aab7317..fc8c72660ab3e2 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -20,7 +20,6 @@ $z-layers: ( ".edit-post-meta-boxes-area .spinner": 5, ".components-popover__close": 5, ".block-editor-block-list__insertion-point": 6, - ".block-editor-inserter-with-shortcuts": 5, ".block-editor-warning": 5, ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 4d876593faa02a..294cb91e60b9e8 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -47,7 +47,6 @@ import BlockContextualToolbar from './block-contextual-toolbar'; import BlockMultiControls from './multi-controls'; import BlockInsertionPoint from './insertion-point'; import IgnoreNestedEvents from '../ignore-nested-events'; -import InserterWithShortcuts from '../inserter-with-shortcuts'; import Inserter from '../inserter'; import { isInsideRootBlock } from '../../utils/dom'; import useMovingAnimation from './moving-animation'; @@ -411,7 +410,6 @@ function BlockListBlock( { // If the block is selected and we're typing the block should not appear. // Empty paragraph blocks should always show up as unselected. - const showInserterShortcuts = ! isNavigationMode && ( isSelected || isHovered ) && isEmptyDefaultBlock && isValid; const showEmptyBlockSideInserter = ! isNavigationMode && ( isSelected || isHovered || isLast ) && isEmptyDefaultBlock && isValid; const shouldAppearSelected = ! isFocusMode && @@ -644,15 +642,6 @@ function BlockListBlock( { { !! hasError && } - { showInserterShortcuts && ( -
- -
- ) } { showEmptyBlockSideInserter && (
.block-editor-block-list__block-edit::before { border-left-color: transparent; @@ -517,14 +507,9 @@ margin: 0 $block-padding; } - // Hide appender shortcuts in nested blocks. // This essentially duplicates the mobile styles for the appender component. // It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec .block-editor-block-list__layout { - .block-editor-inserter-with-shortcuts { - display: none; - } - .block-editor-block-list__empty-block-inserter, .block-editor-default-block-appender .block-editor-inserter { left: auto; diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js index 3bc12849b69793..ec07093b849a9a 100644 --- a/packages/block-editor/src/components/default-block-appender/index.js +++ b/packages/block-editor/src/components/default-block-appender/index.js @@ -7,7 +7,7 @@ import TextareaAutosize from 'react-autosize-textarea'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose, withState } from '@wordpress/compose'; +import { compose } from '@wordpress/compose'; import { getDefaultBlockName } from '@wordpress/blocks'; import { decodeEntities } from '@wordpress/html-entities'; import { withSelect, withDispatch } from '@wordpress/data'; @@ -16,7 +16,6 @@ import { withSelect, withDispatch } from '@wordpress/data'; * Internal dependencies */ import BlockDropZone from '../block-drop-zone'; -import InserterWithShortcuts from '../inserter-with-shortcuts'; import Inserter from '../inserter'; export function DefaultBlockAppender( { @@ -26,8 +25,6 @@ export function DefaultBlockAppender( { showPrompt, placeholder, rootClientId, - hovered, - setState, } ) { if ( isLocked || ! isVisible ) { return null; @@ -54,8 +51,6 @@ export function DefaultBlockAppender( {
setState( { hovered: true } ) } - onMouseLeave={ () => setState( { hovered: false } ) } > - { hovered && }
); } export default compose( - withState( { hovered: false } ), withSelect( ( select, ownProps ) => { const { getBlockCount, getBlockName, isBlockValid, getSettings, getTemplateLock } = select( 'core/block-editor' ); diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss index 5dff610a1c61ad..500f7656d348d5 100644 --- a/packages/block-editor/src/components/default-block-appender/style.scss +++ b/packages/block-editor/src/components/default-block-appender/style.scss @@ -40,12 +40,6 @@ } } - &:hover { - .block-editor-inserter-with-shortcuts { - @include edit-post__fade-in-animation; - } - } - // Dropzone. .components-drop-zone__content-icon { display: none; @@ -58,10 +52,9 @@ line-height: $editor-line-height; } -// Quick shortcuts, left and right. +// Empty / default block side inserter. .block-editor-block-list__empty-block-inserter, // Empty paragraph -.block-editor-default-block-appender .block-editor-inserter, // Empty appender -.block-editor-inserter-with-shortcuts { // Right side quick shortcuts +.block-editor-default-block-appender .block-editor-inserter { // Empty appender position: absolute; top: 0; @@ -73,10 +66,6 @@ padding: 0; } - .block-editor-block-icon { - margin: auto; - } - .components-icon-button svg { display: block; margin: auto; @@ -125,19 +114,3 @@ } } } - -// Quick block insertion icons on the right side. -// Needs specificity to styles from the component itself. -.block-editor-block-list__side-inserter .block-editor-inserter-with-shortcuts, -.block-editor-default-block-appender .block-editor-inserter-with-shortcuts { - right: $block-padding; - display: none; // Don't show on mobile. - z-index: z-index(".block-editor-inserter-with-shortcuts"); // Elevate above the sibling inserter. - - @include break-small { - display: flex; - align-items: center; - height: 100%; - right: 0; - } -} diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap index dd34877baec562..d9a8e74b5994a7 100644 --- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap @@ -4,8 +4,6 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
{ - return ! item.isDisabled && ( - item.name !== getDefaultBlockName() || - ! isEmpty( item.initialAttributes ) - ); - } ).slice( 0, 3 ); - - return ( -
- { itemsWithoutDefaultBlock.map( ( item ) => ( - onInsert( item ) } - // translators: %s: block title/name to be added - label={ sprintf( __( 'Add %s' ), item.title ) } - icon={ ( - - ) } - /> - ) ) } -
- ); -} - -export default compose( - withSelect( ( select, { rootClientId } ) => { - const { getInserterItems, getTemplateLock } = select( 'core/block-editor' ); - return { - items: getInserterItems( rootClientId ), - isLocked: !! getTemplateLock( rootClientId ), - }; - } ), - withDispatch( ( dispatch, ownProps ) => { - const { clientId, rootClientId } = ownProps; - - return { - onInsert( { name, initialAttributes } ) { - const block = createBlock( name, initialAttributes ); - if ( clientId ) { - dispatch( 'core/block-editor' ).replaceBlocks( clientId, block ); - } else { - dispatch( 'core/block-editor' ).insertBlock( block, undefined, rootClientId ); - } - }, - }; - } ), -)( InserterWithShortcuts ); diff --git a/packages/block-editor/src/components/inserter-with-shortcuts/style.scss b/packages/block-editor/src/components/inserter-with-shortcuts/style.scss deleted file mode 100644 index ef2d9e82ccebe5..00000000000000 --- a/packages/block-editor/src/components/inserter-with-shortcuts/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.block-editor-inserter-with-shortcuts { - display: flex; - align-items: center; - - .components-icon-button { - border-radius: $radius-round-rectangle; - - svg:not(.dashicon) { - height: 24px; - width: 24px; - } - } -} - -.block-editor-inserter-with-shortcuts__block { - margin-right: $block-spacing; - width: $icon-button-size; - height: $icon-button-size; - padding-top: 8px; - - // Use opacity to work in various editor styles. - color: $dark-opacity-500; - .is-dark-theme & { - color: $light-opacity-500; - } -} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index e25e05c4824b58..079002c74a5452 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -22,7 +22,6 @@ @import "./components/default-block-appender/style.scss"; @import "./components/link-control/style.scss"; @import "./components/inner-blocks/style.scss"; -@import "./components/inserter-with-shortcuts/style.scss"; @import "./components/inserter/style.scss"; @import "./components/inserter-list-item/style.scss"; @import "./components/media-replace-flow/style.scss";