Block Editor: Remove block inserter shortcuts

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,

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 && <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

packages/block-editor/src/components/block-list/style.scss

@@ -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;
@@ -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;

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( {
 		<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
@@ -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' );
 

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;
-	}
-}

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
 <div
   className="wp-block block-editor-default-block-appender"
   data-root-client-id=""
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
 >
   <WithDispatch(WithSelect(WithFilters(BlockDropZone))) />
   <TextareaAutosize
@@ -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
@@ -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

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";