Merge remote-tracking branch 'origin/suggest/inline-wiring' into fix/73411-f18-accept-undo

# Conflicts:
#	packages/editor/CHANGELOG.md
#	test/e2e/specs/editor/various/suggestion-mode-undo.spec.js

Author: adamsilverstein

packages/block-editor/src/components/list-view/block.js

@@ -30,6 +30,7 @@ import { useListViewContext } from './context';
 import {
 	getBlockPositionDescription,
 	getBlockPropertiesDescription,
+	getBlockSuggestionTreatment,
 	focusListItem,
 } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -119,6 +120,7 @@ function ListViewBlock( {
 		positionLabel,
 		isSynced,
 		isLocked,
+		suggestion,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -146,6 +148,7 @@ function ListViewBlock( {
 				positionLabel: getPositionTypeLabel( attributes ),
 				isSynced: isSyncedBlock( clientId ),
 				isLocked: isLockedBlock( clientId ),
+				suggestion: attributes?.metadata?.suggestion,
 			};
 		},
 		[ clientId ]
@@ -556,6 +559,13 @@ function ListViewBlock( {
 		viewportSettings
 	);
 
+	// Pending structural suggestions (insert / remove / move) are shown on the
+	// canvas but were invisible here, so a reviewer navigating by List View —
+	// including anyone reading it with assistive technology — had no way to
+	// tell that a block is proposed for removal. Both halves matter: the class
+	// drives the row treatment, the label joins the row's description.
+	const blockSuggestionTreatment = getBlockSuggestionTreatment( suggestion );
+
 	const hasSiblings = siblingBlockCount > 0;
 	const canShowBlockActions = showBlockActions && ! isDisabled;
 	const hasRenderedMovers = showBlockMovers && hasSiblings && ! isDisabled;
@@ -576,7 +586,7 @@ function ListViewBlock( {
 		colSpan = 3;
 	}
 
-	const classes = clsx( {
+	const classes = clsx( blockSuggestionTreatment?.className, {
 		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
@@ -665,6 +675,7 @@ function ListViewBlock( {
 								blockPositionDescription,
 								blockPropertiesDescription,
 								blockVisibilityDescription,
+								blockSuggestionTreatment?.label,
 							]
 								.filter( Boolean )
 								.join( ' ' ) }

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

@@ -466,6 +466,55 @@
 		}
 	}
 
+	// Pending structural suggestions. On the canvas these read as an outline,
+	// a strikethrough or a "Suggested move" tab; List View showed nothing at
+	// all, which is the surface where structural change is easiest to take in.
+	// Mirror the canvas semantics — strikethrough for a proposed removal,
+	// underline for a proposed insertion, a dashed underline for a proposed
+	// move. Colour never carries this alone: the row's accessible description
+	// says the same thing in words (see `getBlockSuggestionTreatment`).
+	//
+	// The values repeat `block-list/content-suggestion.scss` rather than
+	// sharing with it, because that stylesheet is compiled into the canvas
+	// iframe and List View lives in the editor chrome.
+	&.is-suggestion-pending-insert,
+	&.is-suggestion-pending-remove,
+	&.is-suggestion-pending-move {
+		.block-editor-list-view-block-select-button__title {
+			text-decoration-thickness: 1px;
+			text-underline-offset: 2px;
+		}
+	}
+
+	&.is-suggestion-pending-remove .block-editor-list-view-block-select-button__title {
+		text-decoration-line: line-through;
+	}
+
+	&.is-suggestion-pending-insert .block-editor-list-view-block-select-button__title,
+	&.is-suggestion-pending-move .block-editor-list-view-block-select-button__title {
+		text-decoration-line: underline;
+	}
+
+	&.is-suggestion-pending-move .block-editor-list-view-block-select-button__title {
+		text-decoration-style: dashed;
+	}
+
+	// Tint only when the row isn't selected — a selected row paints its cells
+	// with the admin theme colour and its text white.
+	&:not(.is-selected) {
+		&.is-suggestion-pending-remove .block-editor-list-view-block-select-button__title {
+			color: $alert-red;
+		}
+
+		&.is-suggestion-pending-insert .block-editor-list-view-block-select-button__title {
+			color: #007017;
+		}
+
+		&.is-suggestion-pending-move .block-editor-list-view-block-select-button__title {
+			color: #188038;
+		}
+	}
+
 	&.is-disabled {
 		opacity: 0.2;
 		@media not ( prefers-reduced-motion ) {

packages/block-editor/src/components/list-view/test/utils.js

@@ -1,4 +1,43 @@
-import { getCommonDepthClientIds, getDragDisplacementValues } from '../utils';
+import {
+	getBlockSuggestionTreatment,
+	getCommonDepthClientIds,
+	getDragDisplacementValues,
+} from '../utils';
+
+describe( 'getBlockSuggestionTreatment', () => {
+	it( 'returns nothing for a block with no structural suggestion', () => {
+		expect( getBlockSuggestionTreatment( undefined ) ).toBe( undefined );
+		expect( getBlockSuggestionTreatment( null ) ).toBe( undefined );
+		expect( getBlockSuggestionTreatment( {} ) ).toBe( undefined );
+	} );
+
+	it( 'ignores a marker type it does not recognize rather than inventing a class', () => {
+		expect( getBlockSuggestionTreatment( { type: 'pending-shrug' } ) ).toBe(
+			undefined
+		);
+	} );
+
+	it( 'describes each structural marker with a class and a spoken label', () => {
+		expect(
+			getBlockSuggestionTreatment( { type: 'pending-insert' } )
+		).toEqual( {
+			className: 'is-suggestion-pending-insert',
+			label: 'Suggested insertion.',
+		} );
+		expect(
+			getBlockSuggestionTreatment( { type: 'pending-remove' } )
+		).toEqual( {
+			className: 'is-suggestion-pending-remove',
+			label: 'Suggested removal.',
+		} );
+		expect(
+			getBlockSuggestionTreatment( { type: 'pending-move' } )
+		).toEqual( {
+			className: 'is-suggestion-pending-move',
+			label: 'Suggested move destination.',
+		} );
+	} );
+} );
 
 describe( 'getCommonDepthClientIds', () => {
 	it( 'should return start and end when no depth is provided', () => {

packages/block-editor/src/components/list-view/utils.js

@@ -28,6 +28,50 @@ export const getBlockPropertiesDescription = ( positionLabel, isLocked ) =>
 		.filter( Boolean )
 		.join( ' ' );
 
+/**
+ * Describe a block's pending structural suggestion for List View.
+ *
+ * A structural suggestion lives on the block as `metadata.suggestion` and, on
+ * the canvas, is conveyed entirely by colour and text-decoration: an outline
+ * for an insertion, a strikethrough for a removal, a tab for a move. None of
+ * that reaches List View, which is both the primary way to perceive
+ * *structural* change and a key non-visual navigation surface — so a row whose
+ * block is slated for removal has to carry the same information, in a form
+ * that survives having no sight of the canvas.
+ *
+ * The class names match the canvas treatment on purpose (see
+ * `block-list/content-suggestion.scss`), so the two surfaces stay in step.
+ * Unrecognized marker types return nothing rather than an invented class.
+ *
+ * @param {?Object} suggestion Value of the block's `metadata.suggestion`.
+ * @return {?{className: string, label: string}} Row class and the sentence
+ * appended to the row's accessible description, or undefined when the block
+ * carries no structural suggestion.
+ */
+export const getBlockSuggestionTreatment = ( suggestion ) => {
+	switch ( suggestion?.type ) {
+		case 'pending-insert':
+			return {
+				className: 'is-suggestion-pending-insert',
+				label: __( 'Suggested insertion.' ),
+			};
+		case 'pending-remove':
+			return {
+				className: 'is-suggestion-pending-remove',
+				label: __( 'Suggested removal.' ),
+			};
+		case 'pending-move':
+			return {
+				className: 'is-suggestion-pending-move',
+				// Matches the canvas wording: the block sits at the position it
+				// is proposed to move to, not the one it came from.
+				label: __( 'Suggested move destination.' ),
+			};
+		default:
+			return undefined;
+	}
+};
+
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,
  * or false otherwise.

packages/block-editor/src/components/writing-flow/utils.js

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import {
 	serialize,
@@ -40,16 +41,28 @@ export function setClipboardBlocks( event, blocks, registry ) {
 			const wrapperBlockName = getBlockName( wrapperBlockClientId );
 
 			if ( wrapperBlockName ) {
-				_blocks = createBlock(
-					wrapperBlockName,
-					getBlockAttributes( wrapperBlockClientId ),
-					_blocks
-				);
+				_blocks = [
+					createBlock(
+						wrapperBlockName,
+						getBlockAttributes( wrapperBlockClientId ),
+						_blocks
+					),
+				];
 			}
 		}
 	}
 
-	const serialized = serialize( _blocks );
+	/*
+	 * Last chance for a feature to keep document-scoped data off the
+	 * clipboard. Anything that identifies a block by an id that is only
+	 * meaningful inside this post - a note id, a suggestion marker - is
+	 * meaningless (and actively misleading) once the blocks are pasted
+	 * somewhere else, and the clipboard is the one path out of the editor
+	 * that cannot be intercepted at the far end.
+	 */
+	const serialized = serialize(
+		applyFilters( 'blockEditor.copiedBlocks', _blocks )
+	);
 
 	event.clipboardData.setData( 'text/plain', toPlainText( serialized ) );
 	event.clipboardData.setData( 'text/html', serialized );

packages/core-data/src/utils/crdt.ts

@@ -496,18 +496,25 @@ export function getPostChangesFromCRDTDoc(
 	}
 
 	// When blocks changed but content didn't (the sender internally used a lazy
-	// serializer function), inject a closure that captures the synced blocks
-	// and serializes them on demand. Mirrors what useEntityBlockEditor does
-	// locally. A fresh function on every persistent edit marks the entity
-	// dirty (so the save button reactivates for peers), while serialization
-	// stays lazy (only runs when getEditedPostContent reads it). The closure
-	// captures `capturedBlocks` so the right content is returned even if the
-	// caller later clears `record.blocks` (e.g. the Code Editor re-parsing
-	// from content).
+	// serializer function), inject a closure that serializes the record's
+	// blocks on demand. Mirrors what useEntityBlockEditor does locally. A fresh
+	// function on every persistent edit marks the entity dirty (so the save
+	// button reactivates for peers), while serialization stays lazy (only runs
+	// when getEditedPostContent reads it).
+	//
+	// It reads the record it is handed rather than the synced blocks alone,
+	// because a later edit that writes `blocks` without writing `content` (any
+	// non-persistent block change - withdrawing a pending suggestion, say)
+	// would otherwise stay invisible to getEditedPostContent and to saving,
+	// which would put the stale blocks back on the server. `capturedBlocks` is
+	// the fallback for a caller that clears `record.blocks` (e.g. the Code
+	// Editor re-parsing from content).
 	if ( changes.blocks && ! changes.content ) {
 		const capturedBlocks = changes.blocks;
-		changes.content = () =>
-			__unstableSerializeAndClean( capturedBlocks as WPBlock[] );
+		changes.content = ( record?: { blocks?: Block[] } ) =>
+			__unstableSerializeAndClean(
+				( record?.blocks ?? capturedBlocks ) as WPBlock[]
+			);
 	}
 
 	// Meta changes must be merged with the edited record since not all meta

packages/core-data/src/utils/test/crdt.ts

@@ -1121,7 +1121,7 @@ describe( 'crdt', () => {
 			expect( typeof changes.content ).toBe( 'function' );
 		} );
 
-		it( 'injected content function captures the synced blocks and ignores its caller-supplied argument', () => {
+		it( 'injected content function serializes the record it is handed, falling back to the synced blocks', () => {
 			addBlockToDoc( map, 'block-1', 'Hello world' );
 
 			const editedRecord = {
@@ -1137,21 +1137,27 @@ describe( 'crdt', () => {
 				defaultSyncedProperties
 			);
 
-			// The injected function takes no parameters and serializes the
-			// captured (synced) blocks. This is what makes getEditedPostContent
-			// keep working after the Code Editor clears `record.blocks` to force
-			// a re-parse: the closure already has the right blocks on hand.
-			//
 			// The mocked __unstableSerializeAndClean returns "serialized:<n>"
-			// where n is the length of the blocks it was called with. The
-			// captured blocks have one entry, so both calls below should yield
-			// "serialized:1" (proving the closure ignores its argument and
-			// uses the captured blocks instead).
+			// where n is the length of the blocks it was called with, and the
+			// captured (synced) blocks have one entry.
 			const contentFn = changes.content as ( args?: {
-				blocks: Block[];
+				blocks?: Block[];
 			} ) => string;
+
+			// A record with blocks wins: a later edit that writes `blocks`
+			// without writing `content` (any non-persistent block change) has
+			// to be what getEditedPostContent and saving see.
+			expect( contentFn( { blocks: [ {}, {}, {} ] as Block[] } ) ).toBe(
+				'serialized:3'
+			);
+			// Including an emptied one — no blocks left means no content.
+			expect( contentFn( { blocks: [] } ) ).toBe( 'serialized:0' );
+
+			// No blocks on the record: fall back to the captured ones. This is
+			// what makes getEditedPostContent keep working after the Code
+			// Editor clears `record.blocks` to force a re-parse.
 			expect( contentFn() ).toBe( 'serialized:1' );
-			expect( contentFn( { blocks: [] } ) ).toBe( 'serialized:1' );
+			expect( contentFn( {} ) ).toBe( 'serialized:1' );
 		} );
 
 		it( 'does not inject a content function when content also changed in the doc', () => {

packages/editor/CHANGELOG.md

@@ -9,9 +9,11 @@
 
 ### Bug Fixes
 
+-   Suggest mode: keep a pasted run's bold, italics and links when it becomes a suggestion. A rich-text paste was diffed as plain text, so the marker held the words and none of their formatting and accepting the suggestion destroyed a pasted link. The pasted run is now carried into the marker as rich text, whether it opens a new addition or grows the author's own pending one, with the marker stamped as the outermost format so the proposal stays a single `<mark>` ([#81672](https://github.com/WordPress/gutenberg/pull/81672)).
 -   Suggest mode: keep the code editor closed while the Suggest intent is active and while the post still carries unresolved inline suggestion markers, and identify a marker by its element rather than by a substring of the document ([#81662](https://github.com/WordPress/gutenberg/pull/81662)).
 -   Suggest mode: Announce inline suggestion markers to screen readers. A marker's state was carried entirely by color and text decoration, so a run proposed for deletion was read aloud as ordinary prose. Each marker is now bracketed by an announcement naming the kind of change and the person who proposed it, and add and delete markers carry `role="insertion"` and `role="deletion"`; a formatting suggestion no longer claims to be a deletion. Suggestions over overlapping runs nest, and each is announced and attributed to the person who made it ([#81663](https://github.com/WordPress/gutenberg/pull/81663), [#81957](https://github.com/WordPress/gutenberg/pull/81957)).
 -   Suggest mode: keep a review decision and its note together through undo. Accepting or rejecting a suggestion changes block content and resolves the note, but only the content half is in the undo stack, so undo put the marker back on a note that stayed resolved - a marked-up run with no Accept/Reject on it and no way to clear it. Undoing a decision made in this session now reopens its note along with the marker ([#81669](https://github.com/WordPress/gutenberg/pull/81669)).
+-   Suggest mode: refuse post status changes while suggesting. `editPost` drops the `status` field in the `suggest` intent, the status control and the summary panel show the status without offering to change it, and the publish button is disabled there rather than dropping the status edit and saving the post anyway. A status edit that travels with a companion field - the `password` that visibility changes carry, the `date` that scheduling carries - is refused whole rather than half-applied, a status repeated at the value it already holds is not announced as a refusal, and a status staged before the intent changed is discarded on the way in. The refusal is announced and shown in a snackbar ([#81664](https://github.com/WordPress/gutenberg/pull/81664)).
 -   Register the editor and block editor keyboard shortcuts from the editor provider, so shortcuts work for consumers that mount the editor without rendering `EditorKeyboardShortcutsRegister` themselves ([#81580](https://github.com/WordPress/gutenberg/pull/81580)).
 -   Header: Allow the Back button column to grow when "Show button text labels" is enabled so the label is not obscured by the following controls ([#81701](https://github.com/WordPress/gutenberg/pull/81701)).
 -   Notes: Stop forcing capitalization of the user name in a note byline, so the name is shown as the user set it ([#81788](https://github.com/WordPress/gutenberg/pull/81788)).

packages/editor/src/components/collab-sidebar/floating-container.js

@@ -9,12 +9,42 @@ export function FloatingContainer( {
 	...props
 } ) {
 	const isFloating = !! floating;
+	/*
+	 * The board resolves a thread's `y` from its anchor's measured rect, so
+	 * there is a beat after mount — and after any change that invalidates the
+	 * anchors — where a thread has no position yet. An absolutely positioned
+	 * card with no `top` does not stay put: it falls back to its static
+	 * position, which is the panel's origin, so every unpositioned card piles
+	 * up there on top of whichever card legitimately sits at the top of the
+	 * board and, being later in tree order, wins the hit test and swallows
+	 * clicks meant for it — including a suggestion's Accept button.
+	 *
+	 * Take it out of the hit test until the board has placed it, and fade it
+	 * so the pile never paints. Deliberately not `visibility` or `display`:
+	 * the board's ResizeObserver still has to measure the card's height to
+	 * work out where it goes, and the card still has to be focusable — the
+	 * pending new-note form is focused the moment it mounts.
+	 */
+	const isPlaced = ! isFloating || floating.y !== undefined;
 	return (
 		<Stack
 			direction="column"
 			className={ clsx( className, { 'is-floating': isFloating } ) }
 			ref={ isFloating ? floating.ref : undefined }
-			style={ isFloating ? { top: floating.y, ...style } : style }
+			style={
+				isFloating
+					? {
+							top: floating.y,
+							...( isPlaced
+								? undefined
+								: {
+										opacity: 0,
+										pointerEvents: 'none',
+								  } ),
+							...style,
+					  }
+					: style
+			}
 			{ ...props }
 		>
 			{ children }