Skip to content

Commit

Permalink
Block Editor: Remove block inserter shortcuts (#19045)
Browse files Browse the repository at this point in the history
  • Loading branch information
aduth authored Dec 20, 2019
1 parent 9ca5687 commit 14401e0
Show file tree
Hide file tree
Showing 9 changed files with 3 additions and 169 deletions.
1 change: 0 additions & 1 deletion packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 0 additions & 11 deletions packages/block-editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -644,15 +642,6 @@ function BlockListBlock( {
{ !! hasError && <BlockCrashWarning /> }
</IgnoreNestedEvents>
</div>
{ showInserterShortcuts && (
<div className="block-editor-block-list__side-inserter">
<InserterWithShortcuts
clientId={ clientId }
rootClientId={ rootClientId }
onToggle={ selectOnOpen }
/>
</div>
) }
{ showEmptyBlockSideInserter && (
<div className="block-editor-block-list__empty-block-inserter">
<Inserter
Expand Down
15 changes: 0 additions & 15 deletions packages/block-editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -282,16 +282,6 @@
}
}

// Appender.
&.is-typing .block-editor-block-list__side-inserter {
opacity: 0;
animation: none;
}

.block-editor-block-list__side-inserter {
@include edit-post__fade-in-animation;
}

// Reusable blocks.
&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
border-left-color: transparent;
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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( {
Expand All @@ -26,8 +25,6 @@ export function DefaultBlockAppender( {
showPrompt,
placeholder,
rootClientId,
hovered,
setState,
} ) {
if ( isLocked || ! isVisible ) {
return null;
Expand All @@ -54,8 +51,6 @@ export function DefaultBlockAppender( {
<div
data-root-client-id={ rootClientId || '' }
className="wp-block block-editor-default-block-appender"
onMouseEnter={ () => setState( { hovered: true } ) }
onMouseLeave={ () => setState( { hovered: false } ) }
>
<BlockDropZone rootClientId={ rootClientId } />
<TextareaAutosize
Expand All @@ -66,13 +61,11 @@ export function DefaultBlockAppender( {
onFocus={ onAppend }
value={ showPrompt ? value : '' }
/>
{ hovered && <InserterWithShortcuts rootClientId={ rootClientId } /> }
<Inserter rootClientId={ rootClientId } position="top right" isAppender />
</div>
);
}
export default compose(
withState( { hovered: false } ),
withSelect( ( select, ownProps ) => {
const { getBlockCount, getBlockName, isBlockValid, getSettings, getTemplateLock } = select( 'core/block-editor' );

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,6 @@
}
}

&:hover {
.block-editor-inserter-with-shortcuts {
@include edit-post__fade-in-animation;
}
}

// Dropzone.
.components-drop-zone__content-icon {
display: none;
Expand All @@ -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;

Expand All @@ -73,10 +66,6 @@
padding: 0;
}

.block-editor-block-icon {
margin: auto;
}

.components-icon-button svg {
display: block;
margin: auto;
Expand Down Expand Up @@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
<div
className="wp-block block-editor-default-block-appender"
data-root-client-id=""
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
<TextareaAutosize
Expand Down Expand Up @@ -40,8 +38,6 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
<div
className="wp-block block-editor-default-block-appender"
data-root-client-id=""
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
<TextareaAutosize
Expand All @@ -64,8 +60,6 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
<div
className="wp-block block-editor-default-block-appender"
data-root-client-id=""
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
<TextareaAutosize
Expand Down

This file was deleted.

This file was deleted.

1 change: 0 additions & 1 deletion packages/block-editor/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

0 comments on commit 14401e0

Please sign in to comment.