@wordpress/block-library 9.41.0 → 9.41.1-next.v.202603161435.0

package/src/navigation-link/shared/use-link-preview.js

@@ -26,6 +26,41 @@ function capitalize( str ) {
 	return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
 }
 
+/**
+ * Check if a URL points to the site homepage.
+ * Handles protocol (http/https) and trailing slash variations.
+ * Does not match subdomains unless they are the site URL.
+ *
+ * @param {string} url     - The URL to check
+ * @param {string} homeUrl - The WordPress site URL
+ * @return {boolean} True if url is the homepage
+ */
+export function isHomepage( url, homeUrl ) {
+	if ( url === '/' ) {
+		return true;
+	}
+	if ( ! url || ! homeUrl ) {
+		return false;
+	}
+	try {
+		const urlParsed = new URL( url, homeUrl );
+		const homeParsed = new URL( homeUrl );
+
+		// Same host, i.e. sub.homepage.com or homepage.com
+		if ( urlParsed.hostname !== homeParsed.hostname ) {
+			return false;
+		}
+
+		// Path must match site root (normalize trailing slash)
+		const urlPath = urlParsed.pathname.replace( /\/$/, '' );
+		const homePath = homeParsed.pathname.replace( /\/$/, '' );
+
+		return urlPath === homePath;
+	} catch {
+		return false;
+	}
+}
+
 /**
  * Compute display URL - strips site URL if internal, shows full URL if external.
  *
@@ -79,6 +114,7 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
  *
  * @param {Object}  options                   - Options object
  * @param {string}  options.url               - Link URL
+ * @param {string}  options.homeUrl           - WordPress site URL (for homepage detection)
  * @param {string}  options.type              - Entity type (page, post, etc.)
  * @param {boolean} options.isExternal        - Whether link is external
  * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)
@@ -88,6 +124,7 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
  */
 export function computeBadges( {
 	url,
+	homeUrl,
 	type,
 	isExternal,
 	entityStatus,
@@ -95,7 +132,6 @@ export function computeBadges( {
 	isEntityAvailable,
 } ) {
 	const badges = [];
-
 	// Kind badge
 	if ( url ) {
 		if ( isExternal ) {
@@ -110,6 +146,11 @@ export function computeBadges( {
 				label: __( 'Internal link' ),
 				intent: 'default',
 			} );
+		} else if ( isHomepage( url, homeUrl ) ) {
+			badges.push( {
+				label: __( 'Homepage' ),
+				intent: 'default',
+			} );
 		} else if ( type && type !== 'custom' ) {
 			// Show entity type badge (page, post, category, etc.)
 			// but not 'custom' since that's just a manual link
@@ -226,6 +267,7 @@ export function useLinkPreview( {
 	// Compute badges
 	const badges = computeBadges( {
 		url,
+		homeUrl,
 		type,
 		isExternal,
 		entityStatus: entityRecord?.status,

package/src/navigation-overlay-close/style.scss

@@ -3,7 +3,7 @@
 	align-items: center;
 	justify-content: center;
 	gap: 0.5em;
-	padding: 0.5em;
+	padding: 0;
 	border: none;
 	background: transparent;
 	cursor: pointer;
@@ -14,8 +14,8 @@
 	}
 
 	svg {
-		width: 1.5em;
-		height: 1.5em;
+		width: 24px;
+		height: 24px;
 		fill: currentColor;
 		display: block;
 		flex-shrink: 0;

package/src/navigation-submenu/index.php

@@ -5,6 +5,9 @@
  * @package WordPress
  */
 
+require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
+require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
+
 /**
  * Returns the submenu visibility value with backward compatibility
  * for the deprecated openSubmenusOnClick attribute.
@@ -46,15 +49,6 @@ function block_core_navigation_submenu_get_submenu_visibility( $context ) {
 	return $submenu_visibility ?? 'hover';
 }
 
-// Path differs between source and build: '../navigation-link/shared/' in source, './navigation-link/shared/' in build.
-if ( file_exists( __DIR__ . '/../navigation-link/shared/item-should-render.php' ) ) {
-	require_once __DIR__ . '/../navigation-link/shared/item-should-render.php';
-	require_once __DIR__ . '/../navigation-link/shared/render-submenu-icon.php';
-} else {
-	require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
-	require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
-}
-
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
@@ -240,7 +234,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		if ( $show_submenu_indicators && $has_submenu ) {
 			// The submenu icon is rendered in a button here
 			// so that there's a clickable element to open the submenu.
-			$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_render_submenu_icon() . '</button>';
+			$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+				$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
+			} else {
+				$html .= block_core_shared_navigation_render_submenu_icon();
+			}
+			$html .= '</button>';
 		}
 	} else {
 		$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
@@ -262,7 +262,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '</button>';
 
 		if ( $has_submenu ) {
-			$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_render_submenu_icon() . '</span>';
+			$html .= '<span class="wp-block-navigation__submenu-icon">';
+			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+				$html .= gutenberg_block_core_shared_navigation_render_submenu_icon();
+			} else {
+				$html .= block_core_shared_navigation_render_submenu_icon();
+			}
+			$html .= '</span>';
 		}
 	}
 

package/src/nextpage/block.json

@@ -9,7 +9,6 @@
 	"parent": [ "core/post-content" ],
 	"textdomain": "default",
 	"supports": {
-		"anchor": true,
 		"customClassName": false,
 		"className": false,
 		"html": false,

package/src/paragraph/edit.js

@@ -21,7 +21,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { getBlockSupport } from '@wordpress/blocks';
-import { formatLtr } from '@wordpress/icons';
+import { formatLTR } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -32,7 +32,7 @@ function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
 		isRTL() && (
 			<ToolbarButton
-				icon={ formatLtr }
+				icon={ formatLTR }
 				title={ _x( 'Left to right', 'editor button' ) }
 				isActive={ direction === 'ltr' }
 				onClick={ () => {

package/src/playlist/edit.js

@@ -38,42 +38,10 @@ import { createBlock } from '@wordpress/blocks';
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { WaveformPlayer } from '../utils/waveform-player';
+import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
-/**
- * Transform media library data into track block attributes.
- *
- * @param {Object} media - Media object from the media library.
- * @return {Object} Track attributes for the playlist-track block.
- */
-function getTrackAttributes( media ) {
-	return {
-		id: media.id || media.url, // Attachment ID or URL.
-		uniqueId: uuid(), // Unique ID for the track.
-		src: media.url,
-		title: media.title,
-		artist:
-			media.artist ||
-			media?.meta?.artist ||
-			media?.media_details?.artist ||
-			__( 'Unknown artist' ),
-		album:
-			media.album ||
-			media?.meta?.album ||
-			media?.media_details?.album ||
-			__( 'Unknown album' ),
-		length: media?.fileLength || media?.media_details?.length_formatted,
-		// Prevent using the default media attachment icon as the track image.
-		// Note: Image is not available when a new track is uploaded.
-		image:
-			media?.image?.src &&
-			media?.image?.src.endsWith( '/images/media/audio.svg' )
-				? ''
-				: media?.image?.src,
-	};
-}
-
 const PlaylistEdit = ( {
 	attributes,
 	setAttributes,
@@ -434,4 +402,3 @@ const PlaylistEdit = ( {
 };
 
 export default PlaylistEdit;
-export { getTrackAttributes };

package/src/playlist/style.scss

@@ -4,6 +4,11 @@
 $waveform-player-height: 100px;
 
 .wp-block-playlist {
+	// Clip content to respect border-radius.
+	// `overflow: hidden` is a fallback for browsers that don't support `overflow: clip`.
+	overflow: hidden;
+	overflow: clip;
+
 	// Main waveform player container.
 	.wp-block-playlist__waveform-player {
 		width: 100%;

package/src/playlist/test/edit.js

@@ -5,7 +5,7 @@
 /**
  * Internal dependencies
  */
-import { getTrackAttributes } from '../edit';
+import { getTrackAttributes } from '../utils';
 
 // Mock uuid to return predictable values.
 jest.mock( 'uuid', () => ( {

package/src/playlist/utils.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Transform media library data into track block attributes.
+ *
+ * @param {Object} media - Media object from the media library.
+ * @return {Object} Track attributes for the playlist-track block.
+ */
+export function getTrackAttributes( media ) {
+	return {
+		id: media.id || media.url, // Attachment ID or URL.
+		uniqueId: uuid(), // Unique ID for the track.
+		src: media.url,
+		title: media.title,
+		artist:
+			media.artist ||
+			media?.meta?.artist ||
+			media?.media_details?.artist ||
+			__( 'Unknown artist' ),
+		album:
+			media.album ||
+			media?.meta?.album ||
+			media?.media_details?.album ||
+			__( 'Unknown album' ),
+		length: media?.fileLength || media?.media_details?.length_formatted,
+		// Prevent using the default media attachment icon as the track image.
+		// Note: Image is not available when a new track is uploaded.
+		image:
+			media?.image?.src &&
+			media?.image?.src.endsWith( '/images/media/audio.svg' )
+				? ''
+				: media?.image?.src,
+	};
+}

package/src/post-excerpt/block.json

@@ -7,9 +7,6 @@
 	"description": "Display the excerpt.",
 	"textdomain": "default",
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"moreText": {
 			"type": "string",
 			"role": "content"
@@ -46,6 +43,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"textColumns": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,

package/src/post-excerpt/deprecated.js

@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		moreText: {
+			type: 'string',
+			role: 'content',
+		},
+		showMoreOnNewLine: {
+			type: 'boolean',
+			default: true,
+		},
+		excerptLength: {
+			type: 'number',
+			default: 55,
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			textColumns: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+};
+
+export default [ v1 ];

package/src/post-excerpt/edit.js

@@ -9,13 +9,10 @@ import clsx from 'clsx';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
-	AlignmentToolbar,
-	BlockControls,
 	InspectorControls,
 	RichText,
 	Warning,
 	useBlockProps,
-	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -33,17 +30,19 @@ import {
 	useCanEditEntity,
 	useToolsPanelDropdownMenuProps,
 } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
 const ELLIPSIS = '…';
 
-export default function PostExcerptEditor( {
-	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
-	setAttributes,
-	isSelected,
-	context: { postId, postType, queryId },
-} ) {
-	const blockEditingMode = useBlockEditingMode();
-	const showControls = blockEditingMode === 'default';
+export default function PostExcerptEditor( props ) {
+	const {
+		attributes: { moreText, showMoreOnNewLine, excerptLength },
+		setAttributes,
+		isSelected,
+		context: { postId, postType, queryId },
+	} = props;
+	useDeprecatedTextAlign( props );
+
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [
@@ -83,11 +82,7 @@ export default function PostExcerptEditor( {
 	const isEditable =
 		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
 
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 
 	/**
 	 * translators: If your word count is based on single characters (e.g. East Asian characters),
@@ -114,19 +109,9 @@ export default function PostExcerptEditor( {
 
 	if ( ! postType || ! postId ) {
 		return (
-			<>
-				<BlockControls>
-					<AlignmentToolbar
-						value={ textAlign }
-						onChange={ ( newAlign ) =>
-							setAttributes( { textAlign: newAlign } )
-						}
-					/>
-				</BlockControls>
-				<div { ...blockProps }>
-					<p>{ __( 'This block will display the excerpt.' ) }</p>
-				</div>
-			</>
+			<div { ...blockProps }>
+				<p>{ __( 'This block will display the excerpt.' ) }</p>
+			</div>
 		);
 	}
 	if ( isProtected && ! userCanEdit ) {
@@ -225,16 +210,6 @@ export default function PostExcerptEditor( {
 	);
 	return (
 		<>
-			{ showControls && (
-				<BlockControls>
-					<AlignmentToolbar
-						value={ textAlign }
-						onChange={ ( newAlign ) =>
-							setAttributes( { textAlign: newAlign } )
-						}
-					/>
-				</BlockControls>
-			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/post-excerpt/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	transforms,
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/private-apis.js

@@ -3,6 +3,7 @@
  */
 import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from './navigation/constants';
+import { NavigationLinkUI } from './navigation/edit/navigation-link-ui';
 import { lock } from './lock-unlock';
 
 /**
@@ -12,4 +13,5 @@ export const privateApis = {};
 lock( privateApis, {
 	BlockKeyboardShortcuts,
 	NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,
+	NavigationLinkUI,
 } );

package/src/shortcode/block.json

@@ -17,7 +17,8 @@
 		"className": false,
 		"customClassName": false,
 		"html": false,
-		"customCSS": false
+		"customCSS": false,
+		"visibility": false
 	},
 	"editorStyle": "wp-block-shortcode-editor"
 }

package/src/site-logo/edit.js

@@ -620,7 +620,6 @@ export default function LogoEdit( {
 					>
 						<MediaControlPreview
 							url={ mediaItemData?.source_url }
-							alt={ mediaItemData?.alt_text }
 							filename={
 								mediaItemData?.media_details?.sizes?.full
 									?.file || mediaItemData?.slug
@@ -642,7 +641,6 @@ export default function LogoEdit( {
 						<MediaControl
 							mediaId={ siteLogoId }
 							mediaUrl={ logoUrl }
-							alt={ mediaItemData?.alt_text }
 							filename={
 								mediaItemData?.media_details?.sizes?.full
 									?.file || mediaItemData?.slug
@@ -652,7 +650,7 @@ export default function LogoEdit( {
 							onError={ onUploadError }
 							onReset={ onRemoveLogo }
 							isUploading={ !! temporaryURL }
-							emptyLabel={ __( 'Choose logo' ) }
+							emptyLabel={ __( 'Logo' ) }
 						/>
 					</ToolsPanelItem>
 				) }

package/src/tab/add-tab-toolbar-control.js

@@ -12,7 +12,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Add tab" button in the block toolbar for the tab block.
- * Inserts new tabs into the tab-panel block.
+ * Inserts a new core/tab into the tab-panel and a new core/tabs-menu-item
+ * into the tabs-menu, keeping both in sync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
@@ -21,39 +22,63 @@ import { useDispatch, useSelect } from '@wordpress/data';
 export default function AddTabToolbarControl( { tabsClientId } ) {
 	const { insertBlock } = useDispatch( blockEditorStore );
 
-	// Find the tab-panel block within the tabs block
-	const { tabPanelClientId, nextTabIndex } = useSelect(
-		( select ) => {
-			if ( ! tabsClientId ) {
+	const { tabPanelClientId, tabsMenuClientId, tabCount, existingAnchors } =
+		useSelect(
+			( select ) => {
+				if ( ! tabsClientId ) {
+					return {
+						tabPanelClientId: null,
+						tabsMenuClientId: null,
+						existingAnchors: [],
+					};
+				}
+				const { getBlocks } = select( blockEditorStore );
+				const innerBlocks = getBlocks( tabsClientId );
+				const tabPanel = innerBlocks.find(
+					( block ) => block.name === 'core/tab-panel'
+				);
+				const tabsMenu = innerBlocks.find(
+					( block ) => block.name === 'core/tabs-menu'
+				);
 				return {
-					tabPanelClientId: null,
-					nextTabIndex: 0,
+					tabPanelClientId: tabPanel?.clientId || null,
+					tabsMenuClientId: tabsMenu?.clientId || null,
+					tabCount: tabPanel?.innerBlocks?.length || 0,
+					existingAnchors: ( tabPanel?.innerBlocks || [] )
+						.map( ( block ) => block.attributes.anchor )
+						.filter( Boolean ),
 				};
-			}
-			const { getBlocks } = select( blockEditorStore );
-			const innerBlocks = getBlocks( tabsClientId );
-			const tabPanel = innerBlocks.find(
-				( block ) => block.name === 'core/tab-panel'
-			);
-			return {
-				tabPanelClientId: tabPanel?.clientId || null,
-				nextTabIndex: ( tabPanel?.innerBlocks.length || 0 ) + 1,
-			};
-		},
-		[ tabsClientId ]
-	);
+			},
+			[ tabsClientId ]
+		);
 
 	const addTab = () => {
 		if ( ! tabPanelClientId ) {
 			return;
 		}
+
+		// Start from count + 1 so the label stays sequential, then increment
+		// until the anchor slot is free.
+		const existingAnchorSet = new Set( existingAnchors );
+		let tabNumber = tabCount + 1;
+		while ( existingAnchorSet.has( `tab-${ tabNumber }` ) ) {
+			tabNumber++;
+		}
+
 		const newTabBlock = createBlock( 'core/tab', {
-			anchor: 'tab-' + nextTabIndex,
+			anchor: `tab-${ tabNumber }`,
 			/* translators: %d: tab number */
-			label: sprintf( __( 'Tab %d' ), nextTabIndex ),
+			label: sprintf( __( 'Tab %d' ), tabNumber ),
 		} );
 		insertBlock( newTabBlock, undefined, tabPanelClientId );
-		// @TODO: Possible select and focus the tabs-menu-item active tab RichText editor?
+
+		// Insert a corresponding menu item into the tabs-menu.
+		if ( tabsMenuClientId ) {
+			const newMenuItemBlock = createBlock( 'core/tabs-menu-item', {
+				anchor: `tab-${ tabNumber }-button`,
+			} );
+			insertBlock( newMenuItemBlock, undefined, tabsMenuClientId );
+		}
 	};
 
 	return (