Step 1: Add e2e regression test for font round-trip without focus (#84645)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Misplon

tests/e2e/wb-form-field-block-editor.test.js

@@ -208,6 +208,114 @@ const setIframeImageFieldValue = async ( page, clientId, attachmentId ) => {
 	);
 };
 
+// Set the headline section's font <select> value WITHOUT focusing it, mirroring
+// setIframeImageFieldValue. On first insert the select holds only the PHP-rendered
+// <option value="default">, so the target option must be injected before .value is
+// set; otherwise .value = 'Arial' would not stick. Setting .value directly and
+// dispatching a bubbling 'change' event deliberately avoids the lazy .one('focus',...)
+// population path that the #84645 regression test must exercise.
+const setIframeFontFieldValue = async ( page, clientId, fontValue ) => {
+	return page.evaluate(
+		( { blockClientId, value } ) => {
+			const iframe = document.querySelector( 'iframe[name="editor-canvas"], .edit-site-visual-editor__editor-canvas' );
+			const frameWindow = iframe && iframe.contentWindow ? iframe.contentWindow : window;
+			const frameDocument = frameWindow.document;
+			const form = frameDocument
+				.querySelector( `[data-block="${ blockClientId }"] .siteorigin-widget-form.siteorigin-widget-form-main` );
+
+			if ( ! form ) {
+				return null;
+			}
+
+			const fontSelect = Array.from(
+				form.querySelectorAll( 'select.siteorigin-widget-input' )
+			).find( ( select ) => /\[headline\]\[font\]$/.test( select.name ) );
+
+			if ( ! fontSelect ) {
+				return null;
+			}
+
+			// Inject the target option if it is not already present, since the
+			// select initially holds only the default option (full list is lazy).
+			const hasOption = Array.from( fontSelect.options ).some( ( option ) => option.value === value );
+			if ( ! hasOption ) {
+				const option = frameDocument.createElement( 'option' );
+				option.value = value;
+				option.textContent = value;
+				fontSelect.appendChild( option );
+			}
+
+			// Set the value directly and dispatch a bubbling change event. No focus.
+			fontSelect.value = value;
+			fontSelect.dispatchEvent( new frameWindow.Event( 'change', { bubbles: true } ) );
+
+			return fontSelect.value;
+		},
+		{
+			blockClientId: clientId,
+			value: fontValue,
+		}
+	);
+};
+
+// Read the headline font <select> DOM state WITHOUT focusing it: how many options
+// are currently checked, the checked value, how many options match the target font,
+// and how many still carry the data-sow-saved-option marker.
+const getIframeFontFieldReport = async ( page, clientId, fontValue ) => {
+	return page.evaluate(
+		( { blockClientId, value } ) => {
+			const iframe = document.querySelector( 'iframe[name="editor-canvas"], .edit-site-visual-editor__editor-canvas' );
+			const frameWindow = iframe && iframe.contentWindow ? iframe.contentWindow : window;
+			const frameDocument = frameWindow.document;
+			const form = frameDocument
+				.querySelector( `[data-block="${ blockClientId }"] .siteorigin-widget-form.siteorigin-widget-form-main` );
+
+			if ( ! form ) {
+				return null;
+			}
+
+			const fontSelect = Array.from(
+				form.querySelectorAll( 'select.siteorigin-widget-input' )
+			).find( ( select ) => /\[headline\]\[font\]$/.test( select.name ) );
+
+			if ( ! fontSelect ) {
+				return null;
+			}
+
+			const checked = fontSelect.querySelector( 'option:checked' );
+
+			return {
+				optionCount: fontSelect.options.length,
+				checkedCount: fontSelect.querySelectorAll( 'option:checked' ).length,
+				checkedValue: checked ? checked.value : null,
+				matchingCount: Array.from( fontSelect.options ).filter( ( option ) => option.value === value ).length,
+				savedMarkerCount: fontSelect.querySelectorAll( 'option[data-sow-saved-option]' ).length,
+			};
+		},
+		{
+			blockClientId: clientId,
+			value: fontValue,
+		}
+	);
+};
+
+// Focus the headline font <select> via a Playwright locator to trigger the lazy
+// .one('focus',...) population, then wait for the full fontList to have been
+// appended (more than the default + saved options).
+const focusIframeFontFieldAndWaitForList = async ( page, admin, blockName ) => {
+	const widget = getWidgetBlock( admin, blockName );
+	const fontSelect = widget.locator( 'select.siteorigin-widget-input[name$="[headline][font]"]' );
+
+	await fontSelect.focus();
+
+	await expect
+		.poll(
+			async () => fontSelect.evaluate( ( select ) => select.options.length ),
+			{ timeout: 20000 }
+		)
+		.toBeGreaterThan( 2 );
+};
+
 const attachBlockDiagnostics = async ( testInfo, name, state ) => {
 	await testInfo.attach( name, {
 		body: JSON.stringify( state, null, 2 ),
@@ -944,3 +1052,93 @@ test(
 		}
 	}
 );
+
+// ---------------------------------------------------------------------------
+// Regression — #84645 font round-trip
+// A saved, non-default font on a never-focused font <select> must survive the
+// save/reopen round-trip (the field is read back via getWidgetFormValues without
+// the user ever focusing it) and must not regress to a duplicate option once the
+// full font list lazily loads on focus. This locks in both Slice-1 commits:
+// the PHP pre-rendered, marked saved <option> and the JS marker strip in
+// setupFontField.
+// ---------------------------------------------------------------------------
+
+test(
+	'Headline widget saved font survives save and reopen without focusing the field, with no duplicate option after focus.',
+	async ( { page }, testInfo ) => {
+		const blockName = 'sowb/siteorigin-widget-headline-widget';
+		const fontValue = 'Arial';
+		const {
+			admin,
+			post,
+			requestUtils,
+		} = await setupPublishedPostEditor( page, 'WB headline font round-trip' );
+
+		try {
+			// B. Insert the widget and set the font to Arial WITHOUT focusing the select.
+			const widget = await insertDirectWidgetBlock( admin, blockName );
+			const clientId = await widget.getAttribute( 'data-block' );
+			expect( clientId ).toBeTruthy();
+
+			const setFontValue = await setIframeFontFieldValue( page, clientId, fontValue );
+			expect( setFontValue ).toBe( fontValue );
+
+			// Dirty the post so Save is enabled (mirrors the image widget test).
+			await page.evaluate( () => {
+				window.wp.data.dispatch( 'core/editor' ).editPost( {
+					title: 'WB headline font round-trip updated',
+				} );
+			} );
+
+			// C. Pre-save in-editor assertion: the data path before save reads Arial.
+			const formSnapshot = await getIframeWidgetFormValues( page, clientId );
+			expect( formSnapshot.formCount ).toBeGreaterThan( 0 );
+			expect( formSnapshot.values.headline.font ).toBe( fontValue );
+
+			// D. Save and capture content.
+			const savedContent = await clickSaveAndCaptureContent( page, post.id );
+			expect( savedContent ).toContain( '"font":"Arial"' );
+
+			const postSaveBlockState = await findDirectBlockState( page, blockName );
+			expect( postSaveBlockState.attributes.widgetData.headline.font ).toBe( fontValue );
+			await attachBlockDiagnostics( testInfo, 'headline-font-attrs.json', postSaveBlockState );
+
+			// E. Reopen the post and the saved widget form — Slice-1's PHP pre-render
+			// is under test from here on.
+			await admin.editPost( post.id );
+			await reopenSavedWidgetForm( page, admin, blockName );
+			const reloadedBlockState = await findDirectBlockState( page, blockName );
+
+			// F. Assertion (1) — BEFORE focusing the font select, the DOM has exactly
+			// one selected option and it is Arial.
+			const preFocusReport = await getIframeFontFieldReport( page, reloadedBlockState.clientId, fontValue );
+			expect( preFocusReport ).not.toBeNull();
+			expect( preFocusReport.checkedCount ).toBe( 1 );
+			expect( preFocusReport.checkedValue ).toBe( fontValue );
+
+			// G. Assertion (2) — the data round-trip that regressed: getWidgetFormValues
+			// returns Arial WITHOUT focusing the field.
+			const reloadedSnapshot = await getIframeWidgetFormValues( page, reloadedBlockState.clientId );
+			expect( reloadedSnapshot.values.headline.font ).toBe( fontValue );
+			expect( reloadedSnapshot.values.headline.font ).not.toBe( 'default' );
+
+			// H. Assertion (3) — AFTER focusing the reopened select, still exactly one
+			// selected, still Arial, no duplicate Arial option, marker stripped.
+			await focusIframeFontFieldAndWaitForList( page, admin, blockName );
+
+			const postFocusReport = await getIframeFontFieldReport( page, reloadedBlockState.clientId, fontValue );
+			expect( postFocusReport ).not.toBeNull();
+			expect( postFocusReport.checkedCount ).toBe( 1 );
+			expect( postFocusReport.checkedValue ).toBe( fontValue );
+			expect( postFocusReport.matchingCount ).toBe( 1 );
+			expect( postFocusReport.savedMarkerCount ).toBe( 0 );
+			await attachBlockDiagnostics( testInfo, 'headline-font-after-focus.json', postFocusReport );
+		} finally {
+			await requestUtils.rest( {
+				method: 'DELETE',
+				path: `/wp/v2/posts/${ post.id }`,
+				params: { force: true },
+			} ).catch( () => {} );
+		}
+	}
+);