@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.1-next.16d95556a.0

package/src/html/test/utils.js

@@ -0,0 +1,234 @@
+/**
+ * Internal dependencies
+ */
+import { parseContent, serializeContent } from '../utils';
+
+describe( 'core/html', () => {
+	describe( 'parseContent()', () => {
+		it( 'should parse empty content', () => {
+			const result = parseContent( '' );
+			expect( result ).toEqual( { html: '', css: '', js: '' } );
+		} );
+
+		it( 'should parse whitespace-only content', () => {
+			const result = parseContent( '   \n\t  ' );
+			expect( result ).toEqual( { html: '', css: '', js: '' } );
+		} );
+
+		it( 'should parse HTML-only content', () => {
+			const content = '<p>Hello World</p>';
+			const result = parseContent( content );
+			expect( result ).toEqual( {
+				html: '<p>Hello World</p>',
+				css: '',
+				js: '',
+			} );
+		} );
+
+		it( 'should parse CSS-only content', () => {
+			const content =
+				'<style data-wp-block-html="css">body { color: red; }</style>';
+			const result = parseContent( content );
+			expect( result ).toEqual( {
+				html: '',
+				css: 'body { color: red; }',
+				js: '',
+			} );
+		} );
+
+		it( 'should parse JavaScript-only content', () => {
+			const content =
+				'<script data-wp-block-html="js">console.log("hello");</script>';
+			const result = parseContent( content );
+			expect( result ).toEqual( {
+				html: '',
+				css: '',
+				js: 'console.log("hello");',
+			} );
+		} );
+
+		it( 'should parse content with all three sections', () => {
+			const content = `<style data-wp-block-html="css">
+body { color: red; }
+</style>
+
+<script data-wp-block-html="js">
+console.log("hello");
+</script>
+
+<p>Hello World</p>`;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'body { color: red; }' );
+			expect( result.js ).toBe( 'console.log("hello");' );
+			expect( result.html ).toBe( '<p>Hello World</p>' );
+		} );
+
+		it( 'should ignore unmarked style tags', () => {
+			const content = `<style>body { color: blue; }</style>
+<style data-wp-block-html="css">body { color: red; }</style>
+<p>Test</p>`;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'body { color: red; }' );
+			expect( result.html ).toContain(
+				'<style>body { color: blue; }</style>'
+			);
+		} );
+
+		it( 'should ignore unmarked script tags', () => {
+			const content = `<script>alert("unmarked");</script>
+<script data-wp-block-html="js">console.log("marked");</script>
+<p>Test</p>`;
+			const result = parseContent( content );
+			expect( result.js ).toBe( 'console.log("marked");' );
+			expect( result.html ).toContain(
+				'<script>alert("unmarked");</script>'
+			);
+		} );
+
+		it( 'should handle multiple marked style tags (takes first)', () => {
+			const content = `<style data-wp-block-html="css">first</style>
+<style data-wp-block-html="css">second</style>`;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'first' );
+			expect( result.html ).toContain( 'second' );
+		} );
+
+		it( 'should handle multiple marked script tags (takes first)', () => {
+			const content = `<script data-wp-block-html="js">first</script>
+<script data-wp-block-html="js">second</script>`;
+			const result = parseContent( content );
+			expect( result.js ).toBe( 'first' );
+			expect( result.html ).toContain( 'second' );
+		} );
+
+		it( 'should trim whitespace from extracted sections', () => {
+			const content = `<style data-wp-block-html="css">
+
+  body { color: red; }
+
+</style>
+
+<script data-wp-block-html="js">
+
+  console.log("test");
+
+</script>
+
+  <p>Test</p>  `;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'body { color: red; }' );
+			expect( result.js ).toBe( 'console.log("test");' );
+			expect( result.html ).toBe( '<p>Test</p>' );
+		} );
+
+		it( 'should handle malformed HTML gracefully', () => {
+			const content = '<p>Unclosed tag<div>Test</p>';
+			const result = parseContent( content );
+			expect( result ).toHaveProperty( 'html' );
+			expect( result ).toHaveProperty( 'css' );
+			expect( result ).toHaveProperty( 'js' );
+		} );
+	} );
+
+	describe( 'serializeContent()', () => {
+		it( 'should serialize empty sections', () => {
+			const result = serializeContent( { html: '', css: '', js: '' } );
+			expect( result ).toBe( '' );
+		} );
+
+		it( 'should serialize HTML-only', () => {
+			const result = serializeContent( {
+				html: '<p>Hello World</p>',
+				css: '',
+				js: '',
+			} );
+			expect( result ).toBe( '<p>Hello World</p>' );
+		} );
+
+		it( 'should serialize CSS-only', () => {
+			const result = serializeContent( {
+				html: '',
+				css: 'body { color: red; }',
+				js: '',
+			} );
+			expect( result ).toBe(
+				'<style data-wp-block-html="css">\nbody { color: red; }\n</style>'
+			);
+		} );
+
+		it( 'should serialize JavaScript-only', () => {
+			const result = serializeContent( {
+				html: '',
+				css: '',
+				js: 'console.log("test");',
+			} );
+			expect( result ).toBe(
+				'<script data-wp-block-html="js">\nconsole.log("test");\n</script>'
+			);
+		} );
+
+		it( 'should serialize all three sections in correct order', () => {
+			const result = serializeContent( {
+				html: '<p>Hello</p>',
+				css: 'body { color: red; }',
+				js: 'console.log("test");',
+			} );
+			expect( result ).toBe(
+				'<style data-wp-block-html="css">\nbody { color: red; }\n</style>\n\n<script data-wp-block-html="js">\nconsole.log("test");\n</script>\n\n<p>Hello</p>'
+			);
+		} );
+
+		it( 'should ignore whitespace-only sections', () => {
+			const result = serializeContent( {
+				html: '<p>Test</p>',
+				css: '   \n  ',
+				js: '\t\t',
+			} );
+			expect( result ).toBe( '<p>Test</p>' );
+		} );
+
+		it( 'should handle missing properties gracefully', () => {
+			const result = serializeContent( {} );
+			expect( result ).toBe( '' );
+		} );
+
+		it( 'should handle undefined values', () => {
+			const result = serializeContent( {
+				html: undefined,
+				css: undefined,
+				js: undefined,
+			} );
+			expect( result ).toBe( '' );
+		} );
+	} );
+
+	describe( 'round-trip serialization', () => {
+		it( 'should maintain HTML-only content', () => {
+			const original = '<p>Hello World</p>';
+			const parsed = parseContent( original );
+			const serialized = serializeContent( parsed );
+			expect( serialized ).toBe( original );
+		} );
+
+		it( 'should maintain content with all sections', () => {
+			const original =
+				'<style data-wp-block-html="css">\nbody { color: red; }\n</style>\n\n<script data-wp-block-html="js">\nconsole.log("test");\n</script>\n\n<p>Hello</p>';
+			const parsed = parseContent( original );
+			const serialized = serializeContent( parsed );
+			expect( serialized ).toBe( original );
+		} );
+
+		it( 'should maintain complex HTML structures', () => {
+			const sections = {
+				html: '<div><h1>Title</h1><p>Paragraph</p></div>',
+				css: 'h1 { font-size: 2em; }',
+				js: 'document.addEventListener("load", () => {});',
+			};
+			const serialized = serializeContent( sections );
+			const parsed = parseContent( serialized );
+			expect( parsed.html ).toBe( sections.html );
+			expect( parsed.css ).toBe( sections.css );
+			expect( parsed.js ).toBe( sections.js );
+		} );
+	} );
+} );

package/src/html/utils.js

@@ -0,0 +1,75 @@
+/**
+ * Parses content string into separate HTML, CSS, and JS sections.
+ *
+ * Extracts CSS from <style data-wp-block-html="css"> tags and
+ * JavaScript from <script data-wp-block-html="js"> tags.
+ * Everything else is treated as HTML.
+ *
+ * @param {string} content - The combined content string
+ * @return {Object} Object with html, css, and js properties
+ */
+export function parseContent( content = '' ) {
+	if ( ! content || ! content.trim() ) {
+		return { html: '', css: '', js: '' };
+	}
+
+	// Create a temporary document to parse HTML safely
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = content;
+
+	// Extract CSS from marked style tag
+	const styleTag = doc.body.querySelector(
+		'style[data-wp-block-html="css"]'
+	);
+	const css = styleTag ? styleTag.textContent.trim() : '';
+	if ( styleTag ) {
+		styleTag.remove();
+	}
+
+	// Extract JS from marked script tag
+	const scriptTag = doc.body.querySelector(
+		'script[data-wp-block-html="js"]'
+	);
+	const js = scriptTag ? scriptTag.textContent.trim() : '';
+	if ( scriptTag ) {
+		scriptTag.remove();
+	}
+
+	// Everything else is HTML
+	const html = doc.body.innerHTML.trim();
+
+	return { html, css, js };
+}
+
+/**
+ * Serializes HTML, CSS, and JS into a single content string.
+ *
+ * Creates marked <style> and <script> tags for CSS and JS sections,
+ * then appends the HTML content.
+ *
+ * @param {Object} sections      Object with html, css, and js properties
+ * @param {string} sections.html HTML content
+ * @param {string} sections.css  CSS content
+ * @param {string} sections.js   JavaScript content
+ * @return {string} Combined content string
+ */
+export function serializeContent( { html = '', css = '', js = '' } ) {
+	const parts = [];
+
+	// Add CSS if present
+	if ( css.trim() ) {
+		parts.push( `<style data-wp-block-html="css">\n${ css }\n</style>` );
+	}
+
+	// Add JS if present
+	if ( js.trim() ) {
+		parts.push( `<script data-wp-block-html="js">\n${ js }\n</script>` );
+	}
+
+	// Add HTML
+	if ( html.trim() ) {
+		parts.push( html );
+	}
+
+	return parts.join( '\n\n' );
+}

package/src/navigation-link/edit.js

@@ -97,21 +97,35 @@ const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	const hasId = Number.isInteger( id );
 	const blockEditingMode = useBlockEditingMode();
 
-	const postStatus = useSelect(
+	const { postStatus, isDeleted } = useSelect(
 		( select ) => {
 			if ( ! isPostType ) {
-				return null;
+				return { postStatus: null, isDeleted: false };
 			}
 
 			// Fetching the posts status is an "expensive" operation. Especially for sites with large navigations.
 			// When the block is rendered in a template or other disabled contexts we can skip this check in order
 			// to avoid all these additional requests that don't really add any value in that mode.
 			if ( blockEditingMode === 'disabled' || ! enabled ) {
-				return null;
+				return { postStatus: null, isDeleted: false };
 			}
 
-			const { getEntityRecord } = select( coreStore );
-			return getEntityRecord( 'postType', type, id )?.status;
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const entityRecord = getEntityRecord( 'postType', type, id );
+			const hasResolved = hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				type,
+				id,
+			] );
+
+			// If resolution has finished and entityRecord is undefined, the entity was deleted.
+			const deleted = hasResolved && entityRecord === undefined;
+
+			return {
+				postStatus: entityRecord?.status,
+				isDeleted: deleted,
+			};
 		},
 		[ isPostType, blockEditingMode, enabled, type, id ]
 	);
@@ -121,11 +135,13 @@ const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	// 2. It has an id.
 	// 3. It's neither null, nor undefined, as valid items might be either of those while loading.
 	// If those conditions are met, check if
-	// 1. The post status is published.
-	// 2. The Navigation Link item has no label.
+	// 1. The post status is trash (trashed).
+	// 2. The entity doesn't exist (deleted).
 	// If either of those is true, invalidate.
 	const isInvalid =
-		isPostType && hasId && postStatus && 'trash' === postStatus;
+		isPostType &&
+		hasId &&
+		( isDeleted || ( postStatus && 'trash' === postStatus ) );
 	const isDraft = 'draft' === postStatus;
 
 	return [ isInvalid, isDraft ];
@@ -248,7 +264,12 @@ export default function NavigationLinkEdit( {
 	const { getBlocks } = useSelect( blockEditorStore );
 
 	// URL binding logic
-	const { clearBinding, createBinding } = useEntityBinding( {
+	const {
+		clearBinding,
+		createBinding,
+		hasUrlBinding,
+		isBoundEntityAvailable,
+	} = useEntityBinding( {
 		clientId,
 		attributes,
 	} );
@@ -405,14 +426,23 @@ export default function NavigationLinkEdit( {
 		}
 	);
 
-	if ( ! url || isInvalid || isDraft ) {
+	if (
+		! url ||
+		isInvalid ||
+		isDraft ||
+		( hasUrlBinding && ! isBoundEntityAvailable )
+	) {
 		blockProps.onClick = () => {
 			setIsLinkOpen( true );
 		};
 	}
 
 	const classes = clsx( 'wp-block-navigation-item__content', {
-		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
+		'wp-block-navigation-link__placeholder':
+			! url ||
+			isInvalid ||
+			isDraft ||
+			( hasUrlBinding && ! isBoundEntityAvailable ),
 	} );
 
 	const missingText = getMissingText( type );
@@ -531,9 +561,10 @@ export default function NavigationLinkEdit( {
 							link={ attributes }
 							onClose={ () => {
 								setIsLinkOpen( false );
-								// If there is no link then remove the auto-inserted block.
+								// If there is no link and no binding, remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
-								if ( ! url ) {
+								// Don't remove if binding exists (even if entity is unavailable) so user can fix it.
+								if ( ! url && ! hasUrlBinding ) {
 									onReplace( [] );
 								} else if ( isNewLink.current ) {
 									// If we just created a new link, select it

package/src/navigation-link/editor.scss

@@ -143,3 +143,10 @@
 		text-transform: uppercase;
 	}
 }
+
+/**
+ * Error text styling for missing entity help text.
+ */
+.navigation-link-control__error-text {
+	color: $alert-red;
+}

package/src/navigation-link/index.php

@@ -312,11 +312,50 @@ function build_variation_for_navigation_link( $entity, $kind ) {
 	$title       = '';
 	$description = '';
 
+	// Get default labels based on entity type
+	$default_labels = null;
+	if ( $entity instanceof WP_Post_Type ) {
+		$default_labels = WP_Post_Type::get_default_labels();
+	} elseif ( $entity instanceof WP_Taxonomy ) {
+		$default_labels = WP_Taxonomy::get_default_labels();
+	}
+
+	// Get title and check if it's default
+	$is_default_title = false;
 	if ( property_exists( $entity->labels, 'item_link' ) ) {
 		$title = $entity->labels->item_link;
+		if ( isset( $default_labels['item_link'] ) ) {
+			$is_default_title = in_array( $title, $default_labels['item_link'], true );
+		}
 	}
+
+	// Get description and check if it's default
+	$is_default_description = false;
 	if ( property_exists( $entity->labels, 'item_link_description' ) ) {
 		$description = $entity->labels->item_link_description;
+		if ( isset( $default_labels['item_link_description'] ) ) {
+			$is_default_description = in_array( $description, $default_labels['item_link_description'], true );
+		}
+	}
+
+	// Calculate singular name once (used for both title and description)
+	$singular = isset( $entity->labels->singular_name ) ? $entity->labels->singular_name : ucfirst( $entity->name );
+
+	// Set default title if needed
+	if ( $is_default_title || '' === $title ) {
+		/* translators: %s: Singular label of the entity. */
+		$title = sprintf( __( '%s link' ), $singular );
+	}
+
+	// Default description if needed.
+	// Use a single space character instead of an empty string to prevent fallback to the
+	// block.json default description ("Add a page, link, or another item to your navigation.").
+	// An empty string would be treated as missing and trigger the fallback, while a single
+	// space appears blank in the UI but prevents the fallback behavior.
+	// We avoid generating descriptions like "A link to a %s" to prevent grammatical errors
+	// (e.g., "A link to a event" should be "A link to an event").
+	if ( $is_default_description || '' === $description ) {
+		$description = ' ';
 	}
 
 	$variation = array(
@@ -368,6 +407,7 @@ function build_variation_for_navigation_link( $entity, $kind ) {
  *
  * @param array         $variations Array of registered variations for a block type.
  * @param WP_Block_Type $block_type The full block type object.
+ * @return array Numerically indexed array of block variations.
  */
 function block_core_navigation_link_filter_variations( $variations, $block_type ) {
 	if ( 'core/navigation-link' !== $block_type->name ) {
@@ -375,7 +415,28 @@ function block_core_navigation_link_filter_variations( $variations, $block_type
 	}
 
 	$generated_variations = block_core_navigation_link_build_variations();
-	return array_merge( $variations, $generated_variations );
+
+	/*
+	 * IMPORTANT: Order matters for deduplication.
+	 *
+	 * The variations returned from this filter are bootstrapped to JavaScript and
+	 * processed by the block variations reducer. The reducer uses `getUniqueItemsByName()`
+	 * (packages/blocks/src/store/reducer.js:51-57) which keeps the FIRST variation with
+	 * a given 'name' and discards later duplicates when processing the array in order.
+	 *
+	 * By placing generated variations first in `array_merge()`, the improved
+	 * labels (e.g., "Product link" instead of generic "Post Link") are processed first
+	 * and preserved. The generic incoming variations are then discarded as duplicates.
+	 *
+	 * Why `array_merge()` instead of manual deduplication?
+	 * - Both arrays use numeric indices (0, 1, 2...), so `array_merge()` concatenates
+	 *   and re-indexes them sequentially, preserving order
+	 * - The reducer handles deduplication, so it is not needed here
+	 * - This keeps the PHP code simple and relies on the established JavaScript behavior
+	 *
+	 * See: https://github.com/WordPress/gutenberg/pull/72517
+	 */
+	return array_merge( $generated_variations, $variations );
 }
 
 /**
@@ -419,7 +480,9 @@ function block_core_navigation_link_build_variations() {
 		}
 	}
 
-	return array_merge( $built_ins, $variations );
+	$all_variations = array_merge( $built_ins, $variations );
+
+	return $all_variations;
 }
 
 /**

package/src/navigation-link/link-ui/index.js

@@ -26,6 +26,7 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { LinkUIPageCreator } from './page-creator';
 import LinkUIBlockInserter from './block-inserter';
+import { useEntityBinding } from '../shared/use-entity-binding';
 
 /**
  * Given the Link block's type attribute, return the query params to give to
@@ -66,7 +67,8 @@ export function getSuggestionsQuery( type, kind ) {
 }
 
 function UnforwardedLinkUI( props, ref ) {
-	const { label, url, opensInNewTab, type, kind, id, metadata } = props.link;
+	const { label, url, opensInNewTab, type, kind, id } = props.link;
+	const { clientId } = props;
 	const postType = type || 'page';
 
 	const [ addingBlock, setAddingBlock ] = useState( false );
@@ -78,12 +80,11 @@ function UnforwardedLinkUI( props, ref ) {
 		name: postType,
 	} );
 
-	// Check if there's a URL binding with the new binding sources
-	// Only enable handleEntities when there's actually a binding present
-	const hasUrlBinding =
-		( metadata?.bindings?.url?.source === 'core/post-data' ||
-			metadata?.bindings?.url?.source === 'core/term-data' ) &&
-		!! id;
+	// Use the entity binding hook to get binding status
+	const { isBoundEntityAvailable } = useEntityBinding( {
+		clientId,
+		attributes: props.link,
+	} );
 
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
@@ -152,7 +153,7 @@ function UnforwardedLinkUI( props, ref ) {
 						onChange={ props.onChange }
 						onRemove={ props.onRemove }
 						onCancel={ props.onCancel }
-						handleEntities={ hasUrlBinding }
+						handleEntities={ isBoundEntityAvailable }
 						renderControlBottom={ () => {
 							// Don't show the tools when there is submitted link (preview state).
 							if ( link?.url?.length ) {