@wordpress/block-library 9.26.1-next.719a03cbe.0 → 9.27.0

package/src/navigation-link/update-attributes.js

@@ -2,7 +2,89 @@
  * WordPress dependencies
  */
 import { escapeHTML } from '@wordpress/escape-html';
-import { safeDecodeURI } from '@wordpress/url';
+import { safeDecodeURI, getPath } from '@wordpress/url';
+
+/**
+ * Determines if an entity link should be severed based on URL changes.
+ *
+ * @param {string} originalUrl - The original URL
+ * @param {string} newUrl      - The new URL
+ * @return {boolean} True if the entity link should be severed
+ */
+const shouldSeverEntityLink = ( originalUrl, newUrl ) => {
+	if ( ! originalUrl || ! newUrl ) {
+		return false;
+	}
+
+	const normalizePath = ( path ) => {
+		if ( ! path ) {
+			return '';
+		}
+		return path.replace( /\/+$/, '' ); // Remove trailing slashes
+	};
+
+	// Helper function to create URL objects with proper base handling
+	const createUrlObject = ( url, baseUrl = null ) => {
+		try {
+			// Always provide a base URL - it will be ignored for absolute URLs
+			// Use window.location.origin in browser, fallback for Node/tests
+			const base =
+				baseUrl ||
+				( typeof window !== 'undefined'
+					? window.location.origin
+					: 'https://wordpress.org' );
+			return new URL( url, base );
+		} catch ( error ) {
+			// If URL construction still fails, it's likely an invalid URL
+			// and we should sever the entity link
+			return null;
+		}
+	};
+
+	const originalUrlObj = createUrlObject( originalUrl );
+	if ( ! originalUrlObj ) {
+		return true;
+	}
+
+	const newUrlObj = createUrlObject( newUrl, originalUrl );
+	if ( ! newUrlObj ) {
+		return true;
+	}
+
+	// Move these declarations here, after the null checks
+	const originalHostname = originalUrlObj.hostname;
+	const newHostname = newUrlObj.hostname;
+	const originalPath = normalizePath( getPath( originalUrlObj.toString() ) );
+	const newPath = normalizePath( getPath( newUrlObj.toString() ) );
+
+	// If hostname or path changed, sever the entity link
+	if ( originalHostname !== newHostname || originalPath !== newPath ) {
+		return true;
+	}
+
+	// Special handling for plain permalinks (query string post IDs)
+	const originalP = originalUrlObj.searchParams.get( 'p' );
+	const newP = newUrlObj.searchParams.get( 'p' );
+
+	// If both are plain permalinks (with ?p= or ?page_id=), compare the IDs
+	if ( originalP && newP && originalP !== newP ) {
+		return true;
+	}
+
+	const originalPageId = originalUrlObj.searchParams.get( 'page_id' );
+	const newPageId = newUrlObj.searchParams.get( 'page_id' );
+
+	if ( originalPageId && newPageId && originalPageId !== newPageId ) {
+		return true;
+	}
+	// If switching between ?p= and ?page_id=, or one is missing, sever
+	if ( ( originalP && newPageId ) || ( originalPageId && newP ) ) {
+		return true;
+	}
+
+	// If only query string or fragment changed, preserve the entity link
+	return false;
+};
 
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
@@ -42,19 +124,23 @@ export const updateAttributes = (
 
 	const {
 		title: newLabel = '', // the title of any provided Post.
-		url: newUrl = '',
+		label: newLabelFromLabel = '', // alternative to title
+		url: newUrl,
 		opensInNewTab,
-		id,
+		id: newID,
 		kind: newKind = originalKind,
 		type: newType = originalType,
 	} = updatedValue;
 
-	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
-	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+	// Use title if provided, otherwise fall back to label
+	const finalNewLabel = newLabel || newLabelFromLabel;
+
+	const newLabelWithoutHttp = finalNewLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl?.replace( /http(s?):\/\//gi, '' ) ?? '';
 
 	const useNewLabel =
-		newLabel &&
-		newLabel !== originalLabel &&
+		finalNewLabel &&
+		finalNewLabel !== originalLabel &&
 		// LinkControl without the title field relies
 		// on the check below. Specifically, it assumes that
 		// the URL is the same as a title.
@@ -73,7 +159,7 @@ export const updateAttributes = (
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = useNewLabel
-		? escapeHTML( newLabel )
+		? escapeHTML( finalNewLabel )
 		: originalLabel || escapeHTML( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
@@ -86,13 +172,40 @@ export const updateAttributes = (
 		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
 	const kind = isCustomLink ? 'custom' : newKind;
 
-	setAttributes( {
+	const attributes = {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...( newUrl !== undefined
+			? { url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl }
+			: {} ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
-		...( id && Number.isInteger( id ) && { id } ),
 		...( kind && { kind } ),
 		...( type && type !== 'URL' && { type } ),
-	} );
+	};
+
+	// If the block's id is set then the menu item is linking to an entity.
+	// Therefore, if the URL is set but a new ID is not provided, check if
+	// the entity link should be severed based on URL changes.
+	if ( newUrl && ! newID && blockAttributes.id ) {
+		const shouldSever = shouldSeverEntityLink(
+			blockAttributes.url,
+			newUrl
+		);
+
+		if ( shouldSever ) {
+			attributes.id = undefined; // explicitly "unset" the ID.
+			// When URL is manually changed in a way that severs the entity link,
+			// update kind and type to "custom" to indicate this is now a custom link.
+			attributes.kind = 'custom';
+			attributes.type = 'custom';
+		}
+	} else if ( newID && Number.isInteger( newID ) ) {
+		attributes.id = newID;
+	} else if ( blockAttributes.id ) {
+		// If we have an existing ID and no URL change, ensure kind and type are preserved
+		attributes.kind = kind;
+		attributes.type = type;
+	}
+
+	setAttributes( attributes );
 };

package/src/navigation-submenu/edit.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	CheckboxControl,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
@@ -134,7 +135,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description, rel } = attributes;
+	const { label, url, description, rel, opensInNewTab } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -392,6 +393,7 @@ export default function NavigationSubmenuEdit( {
 							url: '',
 							description: '',
 							rel: '',
+							opensInNewTab: false,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -433,6 +435,24 @@ export default function NavigationSubmenuEdit( {
 						/>
 					</ToolsPanelItem>
 
+					<ToolsPanelItem
+						hasValue={ () => !! opensInNewTab }
+						label={ __( 'Open in new tab' ) }
+						onDeselect={ () =>
+							setAttributes( { opensInNewTab: false } )
+						}
+						isShownByDefault
+					>
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							checked={ opensInNewTab }
+							onChange={ ( value ) =>
+								setAttributes( { opensInNewTab: value } )
+							}
+						/>
+					</ToolsPanelItem>
+
 					<ToolsPanelItem
 						label={ __( 'Description' ) }
 						isShownByDefault

package/src/post-content/block.json

@@ -7,6 +7,12 @@
 	"description": "Displays the contents of a post or page.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"attributes": {
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		}
+	},
 	"example": {
 		"viewportWidth": 350
 	},

package/src/post-content/edit.js

@@ -3,11 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
 	RecursionProvider,
 	useHasRecursion,
 	Warning,
+	privateApis as blockEditorPrivateApis,
 	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
 import { parse } from '@wordpress/blocks';
@@ -23,6 +25,9 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 function ReadOnlyContent( {
 	parentLayout,
@@ -30,6 +35,7 @@ function ReadOnlyContent( {
 	userCanEdit,
 	postType,
 	postId,
+	tagName: TagName = 'div',
 } ) {
 	const [ , , content ] = useEntityProp(
 		'postType',
@@ -60,18 +66,18 @@ function ReadOnlyContent( {
 	}
 
 	return content?.protected ? (
-		<div { ...blockProps }>
+		<TagName { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
-		</div>
+		</TagName>
 	) : (
-		<div
+		<TagName
 			{ ...blockProps }
 			dangerouslySetInnerHTML={ { __html: content?.rendered } }
-		></div>
+		></TagName>
 	);
 }
 
-function EditableContent( { context = {} } ) {
+function EditableContent( { context = {}, tagName: TagName = 'div' } ) {
 	const { postType, postId } = context;
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
@@ -104,12 +110,15 @@ function EditableContent( { context = {} } ) {
 			template: ! hasInnerBlocks ? initialInnerBlocks : undefined,
 		}
 	);
-	return <div { ...props } />;
+	return <TagName { ...props } />;
 }
 
 function Content( props ) {
-	const { context: { queryId, postType, postId } = {}, layoutClassNames } =
-		props;
+	const {
+		context: { queryId, postType, postId } = {},
+		layoutClassNames,
+		tagName,
+	} = props;
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	if ( userCanEdit === undefined ) {
 		return null;
@@ -127,6 +136,7 @@ function Content( props ) {
 			userCanEdit={ userCanEdit }
 			postType={ postType }
 			postId={ postId }
+			tagName={ tagName }
 		/>
 	);
 }
@@ -165,8 +175,39 @@ function RecursionError() {
 	);
 }
 
+/**
+ * Render inspector controls for the PostContent block.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string}   props.tagName         The HTML tag name.
+ * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ * @param {string}   props.clientId        The client ID of the current block.
+ *
+ * @return {JSX.Element}                The control group.
+ */
+function PostContentEditControls( { tagName, onSelectTagName, clientId } ) {
+	return (
+		<InspectorControls group="advanced">
+			<HTMLElementControl
+				tagName={ tagName }
+				onChange={ onSelectTagName }
+				clientId={ clientId }
+				options={ [
+					{ label: __( 'Default (<div>)' ), value: 'div' },
+					{ label: '<main>', value: 'main' },
+					{ label: '<section>', value: 'section' },
+					{ label: '<article>', value: 'article' },
+				] }
+			/>
+		</InspectorControls>
+	);
+}
+
 export default function PostContentEdit( {
 	context,
+	attributes: { tagName = 'div' },
+	setAttributes,
+	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
 	__unstableParentLayout: parentLayout,
 } ) {
@@ -177,17 +218,28 @@ export default function PostContentEdit( {
 		return <RecursionError />;
 	}
 
+	const handleSelectTagName = ( value ) => {
+		setAttributes( { tagName: value } );
+	};
+
 	return (
-		<RecursionProvider uniqueId={ contextPostId }>
-			{ contextPostId && contextPostType ? (
-				<Content
-					context={ context }
-					parentLayout={ parentLayout }
-					layoutClassNames={ layoutClassNames }
-				/>
-			) : (
-				<Placeholder layoutClassNames={ layoutClassNames } />
-			) }
-		</RecursionProvider>
+		<>
+			<PostContentEditControls
+				tagName={ tagName }
+				onSelectTagName={ handleSelectTagName }
+				clientId={ clientId }
+			/>
+			<RecursionProvider uniqueId={ contextPostId }>
+				{ contextPostId && contextPostType ? (
+					<Content
+						context={ context }
+						parentLayout={ parentLayout }
+						layoutClassNames={ layoutClassNames }
+					/>
+				) : (
+					<Placeholder layoutClassNames={ layoutClassNames } />
+				) }
+			</RecursionProvider>
+		</>
 	);
 }

package/src/post-content/index.php

@@ -54,12 +54,19 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$tag_name = 'div';
+
+	if ( ! empty( $attributes['tagName'] ) && tag_escape( $attributes['tagName'] ) === $attributes['tagName'] ) {
+		$tag_name = $attributes['tagName'];
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'entry-content' ) );
 
-	return (
-		'<div ' . $wrapper_attributes . '>' .
-			$content .
-		'</div>'
+	return sprintf(
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$content
 	);
 }
 

package/src/post-featured-image/index.php

@@ -27,8 +27,9 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		if ( get_the_title( $post_ID ) ) {
-			$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
+		$title = get_the_title( $post_ID );
+		if ( $title ) {
+			$attr['alt'] = trim( strip_tags( $title ) );
 		} else {
 			$attr['alt'] = sprintf(
 				// translators: %d is the post ID.

package/src/separator/edit.js

@@ -7,26 +7,18 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	HorizontalRule,
-	SelectControl,
-	PanelBody,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	useBlockProps,
 	getColorClassName,
-	__experimentalUseColorProps as useColorProps,
 	InspectorControls,
+	useBlockProps,
+	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
-import { Platform } from '@wordpress/element';
+import { HorizontalRule, SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const HtmlElementControl = ( { tagName, setAttributes } ) => {
 	return (
@@ -58,7 +50,6 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
 	const hasCustomColor = !! style?.color?.background;
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	useDeprecatedOpacity( opacity, currentColor, setAttributes );
 
@@ -84,37 +75,11 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 
 	return (
 		<>
-			<InspectorControls>
-				{ Platform.isNative ? (
-					<PanelBody title={ __( 'Settings' ) }>
-						<HtmlElementControl
-							tagName={ tagName }
-							setAttributes={ setAttributes }
-						/>
-					</PanelBody>
-				) : (
-					<ToolsPanel
-						label={ __( 'Settings' ) }
-						resetAll={ () => {
-							setAttributes( { tagName: 'hr' } );
-						} }
-						dropdownMenuProps={ dropdownMenuProps }
-					>
-						<ToolsPanelItem
-							hasValue={ () => tagName !== 'hr' }
-							label={ __( 'HTML element' ) }
-							onDeselect={ () =>
-								setAttributes( { tagName: 'hr' } )
-							}
-							isShownByDefault
-						>
-							<HtmlElementControl
-								tagName={ tagName }
-								setAttributes={ setAttributes }
-							/>
-						</ToolsPanelItem>
-					</ToolsPanel>
-				) }
+			<InspectorControls group="advanced">
+				<HtmlElementControl
+					tagName={ tagName }
+					setAttributes={ setAttributes }
+				/>
 			</InspectorControls>
 			<Wrapper
 				{ ...useBlockProps( {

package/src/site-tagline/block.json

@@ -4,7 +4,7 @@
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
-	"description": "Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it’s not displayed in the theme design.",
+	"description": "Describe in a few words what this site is about. This is important for search results, sharing on social media, and gives overall clarity to visitors.",
 	"keywords": [ "description" ],
 	"textdomain": "default",
 	"attributes": {

package/src/video/edit.js

@@ -23,7 +23,6 @@ import {
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { video as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -52,7 +51,6 @@ function VideoEdit( {
 	insertBlocksAfter,
 	onReplace,
 } ) {
-	const instanceId = useInstanceId( VideoEdit );
 	const videoPlayer = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
@@ -210,7 +208,7 @@ function VideoEdit( {
 							muted: false,
 							playsInline: false,
 							preload: 'metadata',
-							poster: '',
+							poster: undefined,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -222,7 +220,6 @@ function VideoEdit( {
 					<PosterImage
 						poster={ poster }
 						setAttributes={ setAttributes }
-						instanceId={ instanceId }
 					/>
 				</ToolsPanel>
 			</InspectorControls>

package/src/video/editor.scss

@@ -19,12 +19,6 @@
 	}
 }
 
-.editor-video-poster-control {
-	.components-button {
-		margin-right: $grid-unit-10;
-	}
-}
-
 .block-library-video-tracks-editor {
 	z-index: z-index("{core/video track editor popover}");
 }

package/src/video/poster-image.js

@@ -5,16 +5,21 @@ import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import {
 	Button,
 	BaseControl,
+	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
-function PosterImage( { poster, setAttributes, instanceId } ) {
-	const posterImageButton = useRef();
-	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
+function PosterImage( { poster, setAttributes } ) {
+	const posterButtonRef = useRef();
+	const descriptionId = useInstanceId(
+		PosterImage,
+		'video-block__poster-image-description'
+	);
 
 	function onSelectPoster( image ) {
 		setAttributes( { poster: image.url } );
@@ -24,23 +29,23 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 		setAttributes( { poster: undefined } );
 
 		// Move focus back to the Media Upload button.
-		posterImageButton.current.focus();
+		posterButtonRef.current.focus();
 	}
 
 	return (
-		<ToolsPanelItem
-			label={ __( 'Poster image' ) }
-			isShownByDefault
-			hasValue={ () => !! poster }
-			onDeselect={ () => {
-				setAttributes( { poster: '' } );
-			} }
-		>
-			<MediaUploadCheck>
-				<div className="editor-video-poster-control">
-					<BaseControl.VisualLabel>
-						{ __( 'Poster image' ) }
-					</BaseControl.VisualLabel>
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				label={ __( 'Poster image' ) }
+				isShownByDefault
+				hasValue={ () => !! poster }
+				onDeselect={ () => {
+					setAttributes( { poster: undefined } );
+				} }
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Poster image' ) }
+				</BaseControl.VisualLabel>
+				<HStack justify="flex-start">
 					<MediaUpload
 						title={ __( 'Select poster image' ) }
 						onSelect={ onSelectPoster }
@@ -50,14 +55,14 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 								__next40pxDefaultSize
 								variant="primary"
 								onClick={ open }
-								ref={ posterImageButton }
-								aria-describedby={ videoPosterDescription }
+								ref={ posterButtonRef }
+								aria-describedby={ descriptionId }
 							>
 								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
 							</Button>
 						) }
 					/>
-					<p id={ videoPosterDescription } hidden>
+					<p id={ descriptionId } hidden>
 						{ poster
 							? sprintf(
 									/* translators: %s: poster image URL. */
@@ -77,9 +82,9 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 							{ __( 'Remove' ) }
 						</Button>
 					) }
-				</div>
-			</MediaUploadCheck>
-		</ToolsPanelItem>
+				</HStack>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
 	);
 }