feat: Add functionality to insert a block alongside existing blocks

dhananjaykuber · Jan 22, 2025 · bdc13fa · bdc13fa
1 parent 5b7f7ec
commit bdc13fa
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -6,6 +6,7 @@ import {
 	hasBlockSupport,
 	switchToBlockType,
 	store as blocksStore,
+	createBlock,
 } from '@wordpress/blocks';
 
 /**
@@ -94,6 +95,44 @@ export default function BlockActions( {
 		onInsertAfter() {
 			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
+		onAddAlongside() {
+			if ( ! clientIds.length ) {
+				return;
+			}
+
+			const originalBlock = getBlocksByClientId( clientIds )[ 0 ];
+
+			if ( ! originalBlock ) {
+				return;
+			}
+
+			const groupingBlockName = getGroupingBlockName();
+
+			// Create the new block to go alongside
+			const newBlock = createBlock( getDefaultBlockName() );
+
+			// Create the row/group block with flex layout
+			const rowBlock = createBlock(
+				groupingBlockName,
+				{
+					layout: {
+						type: 'flex',
+						orientation: 'horizontal',
+						justifyContent: 'left',
+					},
+				},
+				[
+					createBlock(
+						originalBlock.name,
+						originalBlock.attributes,
+						originalBlock.innerBlocks
+					),
+					newBlock,
+				]
+			);
+
+			replaceBlocks( clientIds, rowBlock, 0, 0 );
+		},
 		onGroup() {
 			if ( ! clientIds.length ) {
 				return;

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -214,6 +214,7 @@ export function BlockSettingsDropdown( {
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
+				onAddAlongside,
 				onInsertBefore,
 				onRemove,
 				onCopy,
@@ -306,6 +307,14 @@ export function BlockSettingsDropdown( {
 											>
 												{ __( 'Add after' ) }
 											</MenuItem>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onAddAlongside
+												) }
+											>
+												{ __( 'Add alongside' ) }
+											</MenuItem>
 										</>
 									) }
 									<CommentIconSlotFill.Slot