Restore the empty paragraph inserter (#45542)

* Restore the empty paragraph inserter * Try fixing failing e2e tests * Fix pointer events Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
WordPress · Nov 10, 2022 · 54ebc9f · 54ebc9f
1 parent 001f9ad
commit 54ebc9f
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 34 deletions.
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
@@ -21,7 +21,7 @@
 	}
 
 	// Enable pointer events for the toolbar's content.
-	&:not(.block-editor-block-popover__inbetween) .components-popover__content {
+	&:not(.block-editor-block-popover__inbetween, .block-editor-block-list__block-side-inserter-popover) .components-popover__content {
 		* {
 			pointer-events: all;
 		}

diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -21,6 +21,7 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
 
 function selector( select ) {
 	const {
@@ -120,45 +121,85 @@ function SelectedBlockPopover( {
 		clientId,
 	} );
 
-	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
+	if (
+		! shouldShowBreadcrumb &&
+		! shouldShowContextualToolbar &&
+		! showEmptyBlockSideInserter
+	) {
 		return null;
 	}
 
 	return (
-		<BlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ classnames( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			__unstablePopoverSlot={ __unstablePopoverSlot }
-			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			{ shouldShowContextualToolbar && (
-				<BlockContextualToolbar
-					// If the toolbar is being shown because of being forced
-					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
-					__experimentalInitialIndex={
-						initialToolbarItemIndexRef.current
-					}
-					__experimentalOnIndexChange={ ( index ) => {
-						initialToolbarItemIndexRef.current = index;
-					} }
-					// Resets the index whenever the active block changes so
-					// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-					key={ clientId }
-				/>
+		<>
+			{ showEmptyBlockSideInserter && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					__unstableCoverTarget
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-side-inserter-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					shift={ false }
+					{ ...popoverProps }
+				>
+					<div className="block-editor-block-list__empty-block-inserter">
+						<Inserter
+							position="bottom right"
+							rootClientId={ rootClientId }
+							clientId={ clientId }
+							__experimentalIsQuick
+						/>
+					</div>
+				</BlockPopover>
 			) }
-			{ shouldShowBreadcrumb && (
-				<BlockSelectionButton
-					clientId={ clientId }
-					rootClientId={ rootClientId }
-				/>
+			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
+				<BlockPopover
+					clientId={ capturingClientId || clientId }
+					bottomClientId={ lastClientId }
+					className={ classnames(
+						'block-editor-block-list__block-popover',
+						{
+							'is-insertion-point-visible':
+								isInsertionPointVisible,
+						}
+					) }
+					__unstablePopoverSlot={ __unstablePopoverSlot }
+					__unstableContentRef={ __unstableContentRef }
+					resize={ false }
+					{ ...popoverProps }
+				>
+					{ shouldShowContextualToolbar && (
+						<BlockContextualToolbar
+							// If the toolbar is being shown because of being forced
+							// it should focus the toolbar right after the mount.
+							focusOnMount={ isToolbarForced.current }
+							__experimentalInitialIndex={
+								initialToolbarItemIndexRef.current
+							}
+							__experimentalOnIndexChange={ ( index ) => {
+								initialToolbarItemIndexRef.current = index;
+							} }
+							// Resets the index whenever the active block changes so
+							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+							key={ clientId }
+						/>
+					) }
+					{ shouldShowBreadcrumb && (
+						<BlockSelectionButton
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+						/>
+					) }
+				</BlockPopover>
 			) }
-		</BlockPopover>
+		</>
 	);
 }
 

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -42,7 +42,16 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
+.block-editor-block-list__block-side-inserter-popover .components-popover__content > div {
+	pointer-events: none;
+
+	> * {
+		pointer-events: all;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
+.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {

diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -34,6 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;