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.

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

Block Editor: Remove block inserter shortcuts #19045

Merged
merged 1 commit into from
Dec 20, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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