Navigation Link: Fix "[object Object]" in link preview for untitled entities

For a page with an empty title the entity record's title is
`{ raw: '', rendered: '' }`, so `entityRecord?.title?.rendered` is an empty
string and the link preview's title computation fell through to
`entityRecord?.title` -- the title object itself -- which renders as
"[object Object]".

Only fall back to `entityRecord.title` when it is a plain string (some entity
types expose it that way) so the object is never surfaced.

Treat a link with a binding or a resolved record as a known entity: skip the
rich URL data fetch for it (including while a bound entity is still resolving)
and ignore rich data in the title fallback, so a title scraped for a prior URL
can't leak after switching the link to an untitled entity. An empty entity
title is valid data, not a cue to scrape the page.

Before WordPress#77170 this rendered an object as a React child and crashed the block
("This block has encountered an error and cannot be previewed"). WordPress#77170
wrapped the preview title in stripHTML, which coerced the object to the
harmless "[object Object]" string; this addresses the underlying cause.

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

Author: taipeicoder

packages/block-library/src/navigation-link/shared/test/use-link-preview.test.js

@@ -500,6 +500,79 @@ describe( 'useLinkPreview', () => {
 			expect( result.current.title ).toBe( 'Test Category' );
 		} );
 
+		it( 'should not surface the title object for an empty title', () => {
+			const { result } = renderHook( () =>
+				useLinkPreview( {
+					url: 'https://example.com/page',
+					// Untitled page: an empty `title.rendered` object.
+					entityRecord: { title: { raw: '', rendered: '' } },
+					type: 'page',
+					hasBinding: false,
+					isEntityAvailable: true,
+				} )
+			);
+
+			// Falls back to the URL, not the title object (or "[object Object]").
+			expect( result.current.title ).toBe( 'https://example.com/page' );
+			// A known entity is not scraped for a title.
+			expect( mockUseRemoteUrlData ).toHaveBeenCalledWith( null );
+		} );
+
+		it( 'should not fetch rich URL data while a bound entity is resolving', () => {
+			const { result } = renderHook( () =>
+				useLinkPreview( {
+					url: 'https://example.com/page',
+					entityRecord: null,
+					type: 'page',
+					hasBinding: true,
+					isEntityAvailable: true,
+				} )
+			);
+
+			expect( result.current.title ).toBe( 'https://example.com/page' );
+			expect( mockUseRemoteUrlData ).toHaveBeenCalledWith( null );
+		} );
+
+		it( 'should not leak stale rich data when a link switches from a URL to an entity', () => {
+			// Model useRemoteUrlData retaining its last result when later called
+			// with a disabled (null) URL.
+			let retained = null;
+			mockUseRemoteUrlData.mockImplementation( ( fetchUrl ) => {
+				if ( fetchUrl ) {
+					retained = { title: 'External Site Title' };
+				}
+				return { richData: retained };
+			} );
+
+			const { result, rerender } = renderHook(
+				( props ) => useLinkPreview( props ),
+				{
+					initialProps: {
+						url: 'https://example.com/page',
+						entityRecord: null,
+						type: 'custom',
+						hasBinding: false,
+						isEntityAvailable: false,
+					},
+				}
+			);
+
+			// A custom/external link uses the scraped title.
+			expect( result.current.title ).toBe( 'External Site Title' );
+
+			// Switch the same link to an untitled bound entity.
+			rerender( {
+				url: 'https://example.com/page',
+				entityRecord: { title: { raw: '', rendered: '' } },
+				type: 'page',
+				hasBinding: true,
+				isEntityAvailable: true,
+			} );
+
+			// The retained scraped title must not leak; fall back to the URL.
+			expect( result.current.title ).toBe( 'https://example.com/page' );
+		} );
+
 		it( 'should use entityRecord.name for taxonomy terms', () => {
 			const { result } = renderHook( () =>
 				useLinkPreview( {

packages/block-library/src/navigation-link/shared/use-link-preview.js

@@ -225,11 +225,19 @@ export function useLinkPreview( {
 
 	const title =
 		entityRecord?.title?.rendered ||
-		entityRecord?.title ||
+		// Only use a string `title`, so an empty `title.rendered` doesn't
+		// surface the { raw, rendered } object ("[object Object]").
+		( typeof entityRecord?.title === 'string' && entityRecord.title ) ||
 		entityRecord?.name;
 
-	// Fetch rich URL data if we don't have a title. Internal links should have passed a title.
-	const { richData } = useRemoteUrlData( title ? null : url );
+	// A link with a binding or a resolved record is a known entity, whose
+	// (possibly empty) title is authoritative. `hasBinding` is truthy from the
+	// first render, so this also covers a bound entity that is still resolving.
+	const isEntityLink = !! ( entityRecord || hasBinding );
+
+	// Fetch rich URL data only for links without a title or a known entity; an
+	// empty entity title is valid data, not a cue to scrape the page for one.
+	const { richData } = useRemoteUrlData( title || isEntityLink ? null : url );
 
 	// Compute display URL and external flag
 	const { displayUrl, isExternal } = computeDisplayUrl( {
@@ -275,9 +283,11 @@ export function useLinkPreview( {
 		isEntityAvailable,
 	} );
 
-	// Get display title - use provided title, fallback to rich data, or URL
+	// Get display title - use provided title, fallback to rich data, or URL.
+	// Ignore rich data for entity links (it may be stale from a prior URL) so
+	// their fallback is the URL, not a scraped title.
 	const displayTitle = url
-		? title || richData?.title || safeDecodeURI( url )
+		? title || ( ! isEntityLink && richData?.title ) || safeDecodeURI( url )
 		: __( 'Add link' );
 
 	return {