Suggestions: Render block-insert-after pending state in canvas and sidebar

Brings the visual treatment for block-insert-after suggestions:

- style.scss adds the pending-insert treatment: 70% opacity plus a
  dashed green outline. The dashed style distinguishes it from the
  solid bracket used by pending attribute edits — both treatments can
  apply to the same block when a user inserts and then immediately
  edits its attributes.

- suggestion-summary.js adds an "Insert block: <name>" line via the
  same friendlyBlockName helper that handles block-remove. Falls
  back to "block" when the op carries no name.

- suggestion-diff.js adds BlockInsertDiff, which renders the captured
  block snapshot's text via collectBlockText with <ins> styling. When
  the inserted block has no text yet (an empty paragraph), falls back
  to a "New block: <name>" label so the sidebar isn't blank.

Refs #77434.

Author: adamsilverstein

packages/editor/src/components/suggestion-mode/style.scss

@@ -57,6 +57,20 @@ $suggestion-color: #007017;
 	}
 }
 
+// Pending-insert: the block was inserted in Suggest mode but isn't yet
+// "real" — the marker indicates it's proposed but not committed. A
+// dashed green outline distinguishes it from the solid bracket used by
+// pending attribute edits, and reduced opacity de-emphasizes the
+// content without hiding it. Apply clears the marker; Reject runs
+// removeBlock to undo the insert.
+.block-editor-block-list__block.is-suggestion-pending-insert {
+	position: relative;
+	opacity: 0.7;
+	outline: 2px dashed $suggestion-color;
+	outline-offset: 2px;
+	border-radius: $radius-small;
+}
+
 .editor-collab-sidebar-panel__suggestion-summary {
 	em {
 		font-style: italic;

packages/editor/src/components/suggestion-mode/suggestion-diff.js

@@ -166,6 +166,9 @@ function DiffForOperation( { operation } ) {
 	if ( operation.type === 'block-remove' ) {
 		return <BlockRemoveDiff operation={ operation } />;
 	}
+	if ( operation.type === 'block-insert-after' ) {
+		return <BlockInsertDiff operation={ operation } />;
+	}
 	if (
 		operation.type === 'attribute-set' &&
 		isTextValue( operation.before ) &&
@@ -262,6 +265,37 @@ function BlockRemoveDiff( { operation } ) {
 	);
 }
 
+/**
+ * Render a `block-insert-after` op as an underlined inserted-block preview.
+ * The captured snapshot (`op.block`) carries the proposed block as it was
+ * at insertion time; `collectBlockText` walks its content and innerBlocks
+ * to produce a textual preview.
+ *
+ * Falls back to "Insert block: <name>" when the op carries no usable text
+ * (an inserted block with no content yet, e.g. an empty paragraph).
+ *
+ * @param {{ operation: { blockName?: string, block?: Object } }} props
+ */
+function BlockInsertDiff( { operation } ) {
+	const blockName = operation.blockName ?? operation.block?.name ?? '';
+	const innerText = collectBlockText( operation.block );
+	const fallbackLabel = blockName
+		? // translators: %s: block name (e.g. "core/paragraph").
+		  __( 'New block: %s' ).replace( '%s', blockName )
+		: __( 'New block proposed.' );
+	return (
+		<WCText
+			size="13px"
+			className="editor-collab-sidebar-panel__suggestion-text-diff"
+		>
+			<ins>
+				<VisuallyHidden>{ __( 'Inserted:' ) }</VisuallyHidden>
+				{ innerText || fallbackLabel }
+			</ins>
+		</WCText>
+	);
+}
+
 /**
  * Concatenate the text content of a serialized block snapshot for use in
  * the sidebar diff preview. Walks `attributes.content` (RichText-backed

packages/editor/src/components/suggestion-mode/suggestion-summary.js

@@ -250,6 +250,13 @@ export function summarizeOperations( operations ) {
 			} );
 			continue;
 		}
+		if ( op.type === 'block-insert-after' ) {
+			lines.push( {
+				label: __( 'Insert block:' ),
+				value: friendlyBlockName( op.blockName ),
+			} );
+			continue;
+		}
 		if ( op.type !== 'attribute-set' ) {
 			attributeLabels.push( op.attribute );
 			continue;

packages/editor/src/components/suggestion-mode/test/suggestion-summary.js

@@ -234,4 +234,19 @@ describe( 'summarizeOperations', () => {
 			{ label: 'Remove block:', value: 'custom-block' },
 		] );
 	} );
+
+	it( 'summarizes a block-insert-after op as "Insert block: <name>"', () => {
+		const lines = summarizeOperations( [
+			{
+				type: 'block-insert-after',
+				clientId: 'abc',
+				blockName: 'core/paragraph',
+				anchorClientId: null,
+				parentClientId: null,
+			},
+		] );
+		expect( lines ).toEqual( [
+			{ label: 'Insert block:', value: 'paragraph' },
+		] );
+	} );
 } );