fix(bulk-editor): resolve post type default template when SEO title/description is empty

css/src/bulk-editor-page.css

@@ -1,3 +1,6 @@
+@import "@draft-js-plugins/mention/lib/plugin.css";
+@import "draft-js/dist/Draft.css";
+
 .seo_page_wpseo_page_bulk_edit {
 	@apply yst-bg-slate-100;
 
@@ -167,6 +170,7 @@
 }
 
 .yst-root .yst-bulk-editor-textarea-field textarea {
+	@apply yst-min-h-16;
 	field-sizing: content;
 }
 
@@ -197,3 +201,45 @@
 	border-inline-start: 14px solid transparent !important;
 	border-inline-end: 14px solid white !important;
 }
+
+.yst-root .yst-replacevar__editor {
+	@apply
+	yst-w-full
+	yst-min-h-16
+	yst-py-2
+	yst-px-3
+	yst-border
+	yst-border-slate-300
+	yst-rounded-md
+	yst-shadow-sm
+	yst-bg-white
+	yst-text-sm
+	yst-leading-5
+	yst-text-slate-800
+	yst-placeholder-slate-500
+	focus-within:yst-outline-none
+	focus-within:yst-ring-primary-500
+	focus-within:yst-border-primary-500
+	focus-within:yst-ring-2
+	focus-within:yst-border-opacity-0;
+}
+
+.yst-root .yst-replacevar__editor span.yst-replacevar__mention {
+	@apply yst-text-sm;
+}
+
+.yst-root .yst-replacevar {
+	@apply yst-m-0;
+}
+
+.yst-root .yst-replacevar__label {
+	@apply yst-sr-only;
+}
+
+.yst-root .yst-replacevar__buttons {
+	display: none;
+}
+
+.yst-root .DraftEditor-editorContainer {
+	@apply yst-leading-6;
+}

packages/js/src/bulk-editor/components/table/focus-keyphrase-editable-field-cell.js → packages/js/src/bulk-editor/components/table/focus-keyphrase-field.js

@@ -1,6 +1,5 @@
 import { __ } from "@wordpress/i18n";
 import { TextareaField } from "@yoast/ui-library";
-import { EditableFieldCell } from "./table-cells";
 
 /**
  * Focus keyphrase editable field cell.
@@ -10,7 +9,7 @@ import { EditableFieldCell } from "./table-cells";
  *
  * @returns {JSX.Element} The cell.
  */
-export const FocusKeyphraseEditableFieldCell = ( { value, ...props } ) => {
+export const FocusKeyphraseField = ( { value, ...props } ) => {
 	const warnings = [
 		( /<[^>]*>/u ).test( value ) && __( "Your keyphrase contains HTML tags that will be stripped on save.", "wordpress-seo" ),
 		value.length === 191 && __( "You reached the maximum limit of 191 characters.", "wordpress-seo" ),
@@ -27,12 +26,13 @@ export const FocusKeyphraseEditableFieldCell = ( { value, ...props } ) => {
 		: null;
 
 	return (
-		<EditableFieldCell
-			as={ TextareaField }
-			{ ...props }
-			value={ value }
+		<TextareaField
+			className="yst-bulk-editor-textarea-field"
 			validation={ validation }
 			maxLength={ 191 }
+			rows={ 2 }
+			{ ...props }
+			value={ value }
 		/>
 	);
 };

packages/js/src/bulk-editor/components/table/preview-editable-field-cell.js

@@ -0,0 +1,44 @@
+import { Table } from "@yoast/ui-library";
+import { ReplacementVariableEditorStandalone } from "@yoast/replacement-variable-editor";
+import { noop } from "lodash";
+import { sprintf, __ } from "@wordpress/i18n";
+import { FOCUS_KEYPHRASE_KEY } from "../../constants";
+
+/**
+ *
+ * @param {object} props The component props.
+ * @param {object} props.field The field to render.
+ * @param {object} props.item The content item to render.
+ * @param {Array}  props.replacementVariables The replacement variables for this content type.
+ * @param {Array}  props.recommendedReplacementVariables The recommended replacement variables for this content type.
+ * @returns {JSX.Element} The cell.
+ */
+export const PreviewEditableFieldCell = ( { field, item, replacementVariables, recommendedReplacementVariables } ) => {
+	if ( field.key === FOCUS_KEYPHRASE_KEY ) {
+		return (
+			<Table.Cell key={ field.key } className="yst-bulk-editor-cell-value">
+				{ item[ field.key ] }
+			</Table.Cell>
+		);
+	}
+
+	return (
+		<Table.Cell key={ field.key } className="yst-bulk-editor-cell-value">
+			<span id={ `bulk-editor-preview-${ field.key }-${ item.id }` } className="yst-sr-only">
+				{ sprintf(
+					/* translators: %1$s expands to the field label, %2$s to the content item title. */
+					__( "%1$s for %2$s", "wordpress-seo" ), field.label, item.title ) }
+			</span>
+			<ReplacementVariableEditorStandalone
+				content={ item[ field.key ] || item[ `${ field.key }Fallback` ] || "" }
+				onChange={ noop }
+				type={ field.type }
+				isDisabled={ true }
+				replacementVariables={ replacementVariables }
+				recommendedReplacementVariables={ recommendedReplacementVariables }
+				ariaLabelledBy={ `bulk-editor-preview-${ field.key }-${ item.id }` }
+				fieldId={ `bulk-editor-${ field.key }-${ item.id }` }
+			/>
+		</Table.Cell>
+	);
+};

packages/js/src/bulk-editor/components/table/table-cells.js

@@ -1,10 +1,12 @@
 import { Slot } from "@wordpress/components";
-import { useCallback, useEffect, useState } from "@wordpress/element";
+import { useCallback, useEffect, useMemo, useState } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
-import { Table, Textarea } from "@yoast/ui-library";
-import { TABLE_ROW_INDICATOR_SLOT } from "../../constants";
+import { ReplacementVariableEditor } from "@yoast/replacement-variable-editor";
+import { Table } from "@yoast/ui-library";
+import { TABLE_ROW_INDICATOR_SLOT, FOCUS_KEYPHRASE_KEY } from "../../constants";
 import { getStatusLabel } from "./table-helpers";
 import AnimateHeight from "react-animate-height";
+import { FocusKeyphraseField } from "./focus-keyphrase-field";
 
 /**
  * The title cell (the row header).
@@ -49,51 +51,84 @@ export const TitleCell = ( { item, fieldSetId } ) => {
 };
 
 /**
- * An open field cell: an editable textarea. The row's Save and Cancel actions save or
- * discard all of the row's open fields at once.
+ * An open field cell: an editable replacement-variable editor or textarea. The row's Save and
+ * Cancel actions save or discard all of the row's open fields at once.
  *
- * @param {Object}        props           The props.
- * @param {FieldSetField} props.field     The field this cell edits.
- * @param {number}        props.itemId    The item id, to keep the input id unique across rows.
- * @param {string}        props.itemTitle The item title, for the accessible name.
- * @param {string}        props.value     The current draft value.
- * @param {boolean}       props.isSaving  Whether the row is being saved (disables the input).
- * @param {Function}      props.onChange  Called with { key, value } when the value changes.
+ * @param {Object}        props                              The props.
+ * @param {FieldSetField} props.field                        The field this cell edits.
+ * @param {number}        props.itemId                       The item id, to keep the input id unique across rows.
+ * @param {string}        props.itemTitle                    The item title, for the accessible name.
+ * @param {string}        props.value                        The current draft value.
+ * @param {boolean}       props.isSaving                     Whether the row is being saved (disables the input).
+ * @param {Function}      props.onChange                     Called with { key, value } when the value changes.
+ * @param {Array}         props.replacementVariables         The replacement variables available for this content type.
+ * @param {Array}         props.recommendedReplacementVariables The recommended replacement variables for this content type.
  * @param {string}        props.fieldSetId  The active field set's id, scopes the input id across tabs.
  *
  * @returns {JSX.Element} The cell.
  */
 export const EditableFieldCell = ( {
-	as: Component = Textarea,
 	field,
 	itemId,
 	itemTitle,
 	value,
 	isSaving,
 	onChange,
+	replacementVariables,
+	recommendedReplacementVariables,
 	fieldSetId,
-	...props } ) => {
-	const handleChange = useCallback( ( event ) => onChange( { key: field.key, value: event.target.value } ), [ onChange, field.key ] );
-
+} ) => {
 	// Row expand/collapse animation helper.
 	const [ height, setHeight ] = useState( 0 );
 	useEffect( () => setHeight( "auto" ), [] );
 
-	return (
-		<Table.Cell>
-			<AnimateHeight easing="ease-out" duration={ 100 } height={ height } animateOpacity={ true }>
-				<Component
-					id={ `bulk-editor-edit-${ itemId }-${ fieldSetId }-${ field.key }` }
-					className="yst-bulk-editor-textarea-field"
-					{ ...props }
-					rows={ 2 }
-					value={ value }
-					onChange={ handleChange }
-					disabled={ isSaving }
-					/* translators: %1$s expands to the field label, %2$s to the content item title. */
-					aria-label={ sprintf( __( "%1$s for %2$s", "wordpress-seo" ), field.label, itemTitle ) }
-				/>
-			</AnimateHeight>
-		</Table.Cell>
-	);
+	// Hooks must be called unconditionally; each handler is used by its respective branch below.
+	const handleReplaceVarChange = useCallback( ( newValue ) => onChange( { key: field.key, value: newValue } ), [ onChange, field.key ] );
+	const handleTextareaChange = useCallback( ( event ) => onChange( { key: field.key, value: event.target.value } ), [ onChange, field.key ] );
+
+	/*
+	 * Preemptively add a trailing space when the value ends with a complete %%var%% token.
+	 * The replacement variable editor auto-adds a space after inserting a variable; if our
+	 * initial content already ends with one and we don't mirror that, the editor sees a
+	 * mismatch on first render and triggers a spurious onChange → save prompt.
+	 */
+	const editorContent = useMemo( () => ( value?.match( /%%\w+%%$/ ) ? `${ value } ` : value ) || "", [ value ] );
+
+	const id = `bulk-editor-edit-${ itemId }-${ fieldSetId }-${ field.key }`;
+	const label = sprintf(
+		/* translators: %1$s expands to the field label, %2$s to the content item title. */
+		__( "%1$s for %2$s", "wordpress-seo" ), field.label, itemTitle );
+
+	if ( field.key === FOCUS_KEYPHRASE_KEY ) {
+		return (
+			<Table.Cell>
+				<AnimateHeight easing="ease-out" duration={ 100 } height={ height } animateOpacity={ true }>
+					<FocusKeyphraseField
+						id={ id }
+						aria-label={ label }
+						value={ value }
+						disabled={ isSaving }
+						onChange={ handleTextareaChange }
+						rows={ 2 }
+					/>
+				</AnimateHeight>
+			</Table.Cell>
+		);
+	}
+
+	return ( <Table.Cell>
+		<AnimateHeight easing="ease-out" duration={ 100 } height={ height } animateOpacity={ true }>
+			<ReplacementVariableEditor
+				content={ editorContent }
+				onChange={ handleReplaceVarChange }
+				type={ field.type }
+				isDisabled={ isSaving }
+				fieldId={ id }
+				replacementVariables={ replacementVariables }
+				recommendedReplacementVariables={ recommendedReplacementVariables }
+				/* translators: %1$s expands to the field label, %2$s to the content item title. */
+				label={ label }
+			/>
+		</AnimateHeight>
+	</Table.Cell> );
 };

packages/js/src/bulk-editor/components/table/table-row.js

@@ -1,11 +1,12 @@
 import { Slot, __experimentalUseSlotFills as useSlotFills } from "@wordpress/components";
 import { Fragment, useCallback } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
 import { __, sprintf } from "@wordpress/i18n";
 import { Button, Checkbox, Table } from "@yoast/ui-library";
-import { TABLE_CELL_FIELD_SLOT, FOCUS_KEYPHRASE_KEY } from "../../constants";
+import { STORE_NAME, TABLE_CELL_FIELD_SLOT } from "../../constants";
 import { EditableFieldCell, TitleCell } from "./table-cells";
-import { FocusKeyphraseEditableFieldCell } from "./focus-keyphrase-editable-field-cell";
 import { getRowEditState, isRowEditDisabled } from "./table-helpers";
+import { PreviewEditableFieldCell } from "./preview-editable-field-cell";
 
 /**
  * A content row. Each field-set cell renders as plain text, or — when the row is in edit mode and the field is
@@ -39,6 +40,13 @@ export const BulkEditorRow = ( {
 } ) => {
 	const { isEditing, openFields, draft, savingFields } = getRowEditState( edit );
 	const { onStartEdit, onChangeField, onApplyField, onApplyRow, onCancelEdit, onDiscardField, onFieldApplied, isApplyingAll } = editing;
+	const { replacementVariables, recommendedReplacementVariables } = useSelect( ( select ) => {
+		const activeContentType = select( STORE_NAME ).selectActiveContentTypeName();
+		return {
+			replacementVariables: select( STORE_NAME ).selectReplacementVariablesFor( activeContentType, "custom_post_type" ),
+			recommendedReplacementVariables: select( STORE_NAME ).selectRecommendedReplacementVariablesFor( activeContentType, "custom_post_type" ),
+		};
+	}, [] );
 	// Treat a batch "Save edits" as saving this row too, so its inputs and Save/Cancel lock and a per-field save can't race the batch.
 	const isSaving = Object.keys( savingFields ).length > 0 || isApplyingAll;
 	const fillsSeoTitles = useSlotFills( `${ TABLE_CELL_FIELD_SLOT }/seoTitle/${item.id}` );
@@ -104,25 +112,15 @@ export const BulkEditorRow = ( {
 
 								if ( ! openFields.includes( field.key ) ) {
 									return (
-										<Table.Cell key={ field.key } className="yst-bulk-editor-cell-value">
-											{ item[ field.key ] }
-										</Table.Cell>
+										<PreviewEditableFieldCell
+											field={ field }
+											item={ item }
+											replacementVariables={ replacementVariables }
+											recommendedReplacementVariables={ recommendedReplacementVariables }
+										/>
 									);
 								}
 
-								if ( field.key === FOCUS_KEYPHRASE_KEY ) {
-									// The focus keyphrase has more warnings.
-									return <FocusKeyphraseEditableFieldCell
-										field={ field }
-										itemId={ item.id }
-										fieldSetId={ fieldSetId }
-										itemTitle={ item.title }
-										value={ draft[ field.key ] ?? "" }
-										isSaving={ isSaving }
-										onChange={ handleChangeField }
-									/>;
-								}
-
 								return <EditableFieldCell
 									field={ field }
 									itemId={ item.id }
@@ -131,6 +129,8 @@ export const BulkEditorRow = ( {
 									isSaving={ isSaving }
 									fieldSetId={ fieldSetId }
 									onChange={ handleChangeField }
+									replacementVariables={ replacementVariables }
+									recommendedReplacementVariables={ recommendedReplacementVariables }
 								/>;
 							} }
 						</Slot>

packages/js/src/bulk-editor/field-sets.js

@@ -25,12 +25,13 @@ import { FIELD_SET_SEARCH, FIELD_SET_SOCIAL, FOCUS_KEYPHRASE_KEY } from "./const
  * One editable column within a field set.
  *
  * @typedef {Object} FieldSetField
- * @property {string}  key       The {@link BulkEditorItem} property this column edits.
- * @property {string}  label     The column header label.
- * @property {string}  param     The request parameter name the save endpoint expects for this field.
- * @property {string} width      The column width.
- * @property {string} [endpoint] A data-provider endpoint key that saves this field, overriding the field set's
- *                               default endpoint.
+ * @property {string}  key        The {@link BulkEditorItem} property this column edits.
+ * @property {string}  label      The column header label.
+ * @property {string}  param      The request parameter name the save endpoint expects for this field.
+ * @property {string}  width      The column width.
+ * @property {string}  [type]     "title" or "description" for replacement-variable fields; absent for plain text fields.
+ * @property {string}  [endpoint] A data-provider endpoint key that saves this field, overriding the field set's
+ *                                default endpoint.
  */
 
 /**
@@ -65,8 +66,8 @@ export const getFieldSets = () => {
 			endpoint: "update_search",
 			fields: [
 				focusKeyphrase,
-				{ key: "seoTitle", label: __( "SEO title", "wordpress-seo" ), param: "seo_title", width: "sm:yst-w-[19%]" },
-				{ key: "metaDescription", label: __( "Meta description", "wordpress-seo" ), param: "meta_description", width: "sm:yst-w-[33%]" },
+				{ key: "seoTitle", label: __( "SEO title", "wordpress-seo" ), param: "seo_title", width: "sm:yst-w-[19%]", type: "title" },
+				{ key: "metaDescription", label: __( "Meta description", "wordpress-seo" ), param: "meta_description", width: "sm:yst-w-[33%]", type: "description" },
 			],
 		},
 		[ FIELD_SET_SOCIAL ]: {
@@ -75,8 +76,8 @@ export const getFieldSets = () => {
 			endpoint: "update_social",
 			fields: [
 				focusKeyphrase,
-				{ key: "socialTitle", label: __( "Social title", "wordpress-seo" ), param: "social_title", width: "sm:yst-w-[19%]" },
-				{ key: "socialDescription", label: __( "Social description", "wordpress-seo" ), param: "social_description", width: "sm:yst-w-[33%]" },
+				{ key: "socialTitle", label: __( "Social title", "wordpress-seo" ), param: "social_title", width: "sm:yst-w-[19%]", type: "title" },
+				{ key: "socialDescription", label: __( "Social description", "wordpress-seo" ), param: "social_description", width: "sm:yst-w-[33%]", type: "description" },
 			],
 		},
 	};