@wordpress/block-library 8.19.6 → 8.20.1

package/src/latest-posts/edit.js

@@ -483,18 +483,12 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.split( ' ', excerptLength )
 								.join( ' ' ) }
 							{ createInterpolateElement(
-								sprintf(
-									/* translators: 1: Hidden accessibility text: Post title */
-									__(
-										'… <a>Read more<span>: %1$s</span></a>'
-									),
-									titleTrimmed || __( '(no title)' )
-								),
+								/* translators: excerpt truncation character, default …  */
+								__( ' … <a>Read more</a>' ),
 								{
 									a: (
 										// eslint-disable-next-line jsx-a11y/anchor-has-content
 										<a
-											className="wp-block-latest-posts__read-more"
 											href={ post.link }
 											rel="noopener noreferrer"
 											onClick={
@@ -502,9 +496,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 											}
 										/>
 									),
-									span: (
-										<span className="screen-reader-text" />
-									),
 								}
 							) }
 						</>

package/src/latest-posts/index.php

@@ -48,6 +48,14 @@ function render_block_core_latest_posts( $attributes ) {
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
 	add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
+	$filter_latest_posts_excerpt_more = static function ( $more ) use ( $attributes ) {
+		$use_excerpt = 'excerpt' === $attributes['displayPostContentRadio'];
+		/* translators: %1$s is a URL to a post, excerpt truncation character, default … */
+		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>' ), esc_url( get_permalink() ) ) : $more;
+	};
+
+	add_filter( 'excerpt_more', $filter_latest_posts_excerpt_more );
+
 	if ( ! empty( $attributes['categories'] ) ) {
 		$args['category__in'] = array_column( $attributes['categories'], 'id' );
 	}
@@ -143,23 +151,6 @@ function render_block_core_latest_posts( $attributes ) {
 
 			$trimmed_excerpt = get_the_excerpt( $post );
 
-			/*
-			 * Adds a "Read more" link with screen reader text.
-			 * [&hellip;] is the default excerpt ending from wp_trim_excerpt() in Core.
-			 */
-			if ( str_ends_with( $trimmed_excerpt, ' [&hellip;]' ) ) {
-				$excerpt_length = (int) apply_filters( 'excerpt_length', $block_core_latest_posts_excerpt_length );
-				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
-					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
-					$trimmed_excerpt .= sprintf(
-						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
-						__( '… <a href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
-						esc_url( $post_link ),
-						esc_html( $title )
-					);
-				}
-			}
-
 			if ( post_password_required( $post ) ) {
 				$trimmed_excerpt = __( 'This content is password protected.' );
 			}

package/src/list-item/hooks/use-merge.js

@@ -76,24 +76,6 @@ export default function useMerge( clientId, onMerge ) {
 	}
 
 	return ( forward ) => {
-		function mergeWithNested( clientIdA, clientIdB ) {
-			registry.batch( () => {
-				// When merging a sub list item with a higher next list item, we
-				// also need to move any nested list items. Check if there's a
-				// listed list, and append its nested list items to the current
-				// list.
-				const [ nestedListClientId ] = getBlockOrder( clientIdB );
-				if ( nestedListClientId ) {
-					moveBlocksToPosition(
-						getBlockOrder( nestedListClientId ),
-						nestedListClientId,
-						getBlockRootClientId( clientIdA )
-					);
-				}
-				mergeBlocks( clientIdA, clientIdB );
-			} );
-		}
-
 		if ( forward ) {
 			const nextBlockClientId = getNextId( clientId );
 
@@ -105,7 +87,14 @@ export default function useMerge( clientId, onMerge ) {
 			if ( getParentListItemId( nextBlockClientId ) ) {
 				outdentListItem( nextBlockClientId );
 			} else {
-				mergeWithNested( clientId, nextBlockClientId );
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( nextBlockClientId ),
+						nextBlockClientId,
+						getPreviousBlockClientId( nextBlockClientId )
+					);
+					mergeBlocks( clientId, nextBlockClientId );
+				} );
 			}
 		} else {
 			// Merging is only done from the top level. For lowel levels, the
@@ -115,7 +104,21 @@ export default function useMerge( clientId, onMerge ) {
 				outdentListItem( clientId );
 			} else if ( previousBlockClientId ) {
 				const trailingId = getTrailingId( previousBlockClientId );
-				mergeWithNested( trailingId, clientId );
+				registry.batch( () => {
+					// When merging a list item with a previous trailing list
+					// item, we also need to move any nested list items. First,
+					// check if there's a listed list. If there's a nested list,
+					// append its nested list items to the trailing list.
+					const [ nestedListClientId ] = getBlockOrder( clientId );
+					if ( nestedListClientId ) {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( trailingId )
+						);
+					}
+					mergeBlocks( trailingId, clientId );
+				} );
 			} else {
 				onMerge( forward );
 			}

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
 		'@wordpress/block-library'
 	);

package/src/loginout/block.json

@@ -19,6 +19,14 @@
 	},
 	"supports": {
 		"className": true,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/navigation/edit/index.js

@@ -884,6 +884,7 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
+							label={ __( 'Menu' ) }
 							hasIcon={ hasIcon }
 							icon={ icon }
 							isOpen={ isResponsiveMenuOpen }

package/src/navigation/index.php

@@ -696,22 +696,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$responsive_dialog_directives    = '';
 	$close_button_directives         = '';
 	if ( $should_load_view_script ) {
-		$nav_element_context             = wp_json_encode(
-			array(
-				'core' => array(
-					'navigation' => array(
-						'overlayOpenedBy' => array(),
-						'type'            => 'overlay',
-						'roleAttribute'   => '',
-						'ariaLabel'       => __( 'Menu' ),
-					),
-				),
-			),
-			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
-		);
 		$nav_element_directives          = '
 			data-wp-interactive
-			data-wp-context=\'' . $nav_element_context . '\'
+			data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
 		';
 		$open_button_directives          = '
 			data-wp-on--click="actions.core.navigation.openMenuOnClick"
@@ -727,7 +714,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		';
 		$responsive_dialog_directives    = '
 			data-wp-bind--aria-modal="selectors.core.navigation.ariaModal"
-			data-wp-bind--aria-label="selectors.core.navigation.ariaLabel"
 			data-wp-bind--role="selectors.core.navigation.roleAttribute"
 			data-wp-effect="effects.core.navigation.focusFirstElement"
 		';
@@ -737,11 +723,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" %10$s>%8$s</button>
-			<div class="%5$s" style="%7$s" id="%1$s" %11$s>
+		'<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s" %12$s>
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
-					<div class="wp-block-navigation__responsive-dialog" %12$s>
-							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
+					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -755,6 +741,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
 		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
+		__( 'Menu' ),
 		$toggle_button_content,
 		$toggle_close_button_content,
 		$open_button_directives,

package/src/navigation/view.js

@@ -87,13 +87,6 @@ wpStore( {
 						? 'true'
 						: null;
 				},
-				ariaLabel: ( store ) => {
-					const { context, selectors } = store;
-					return context.core.navigation.type === 'overlay' &&
-						selectors.core.navigation.isMenuOpen( store )
-						? context.core.navigation.ariaLabel
-						: null;
-				},
 				isMenuOpen: ( { context } ) =>
 					// The menu is opened if either `click`, `hover` or `focus` is true.
 					Object.values(

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

@@ -44,7 +44,15 @@ export function getSuggestionsQuery( type, kind ) {
 			if ( kind === 'post-type' ) {
 				return { type: 'post', subtype: type };
 			}
-			return {};
+			return {
+				// for custom link which has no type
+				// always show pages as initial suggestions
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+				},
+			};
 	}
 }
 

package/src/pattern/index.php

@@ -7,6 +7,8 @@
 
 /**
  *  Registers the `core/pattern` block on the server.
+ *
+ * @return void
  */
 function register_block_core_pattern() {
 	register_block_type_from_metadata(
@@ -44,6 +46,7 @@ function render_block_core_pattern( $attributes ) {
 	// Backward compatibility for handling Block Hooks and injecting the theme attribute in the Gutenberg plugin.
 	// This can be removed when the minimum supported WordPress is >= 6.4.
 	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && ! function_exists( 'traverse_and_serialize_blocks' ) ) {
+		$content = _inject_theme_attribute_in_block_template_content( $content );
 		$blocks  = parse_blocks( $content );
 		$content = gutenberg_serialize_blocks( $blocks );
 	}

package/src/post-title/index.php

@@ -38,7 +38,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $block->context['postId'] ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', esc_url( get_the_permalink( $block->context['postId'] ) ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 
 	$classes = array();

package/src/query/index.php

@@ -34,8 +34,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 								'loadedText'  => __( 'Page Loaded.' ),
 							),
 						),
-					),
-					JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
+					)
 				)
 			);
 			$content = $p->get_updated_html();

package/src/query/view.js

@@ -11,10 +11,10 @@ const isValidLink = ( ref ) =>
 	ref.origin === window.location.origin;
 
 const isValidEvent = ( event ) =>
-	event.button === 0 && // left clicks only
-	! event.metaKey && // open in new tab (mac)
-	! event.ctrlKey && // open in new tab (windows)
-	! event.altKey && // download
+	event.button === 0 && // Left clicks only.
+	! event.metaKey && // Open in new tab (Mac).
+	! event.ctrlKey && // Open in new tab (Windows).
+	! event.altKey && // Download.
 	! event.shiftKey &&
 	! event.defaultPrevented;
 
@@ -39,7 +39,7 @@ store( {
 						const id = ref.closest( '[data-wp-navigation-id]' )
 							.dataset.wpNavigationId;
 
-						// Don't announce the navigation immediately, wait 300 ms.
+						// Don't announce the navigation immediately, wait 400 ms.
 						const timeout = setTimeout( () => {
 							context.core.query.message =
 								context.core.query.loadingText;

package/src/rss/edit.js

@@ -69,7 +69,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					>
 						<HStack wrap>
 							<InputControl
-								__next36pxDefaultSize
+								__next40pxDefaultSize
 								placeholder={ __( 'Enter URL here…' ) }
 								value={ feedURL }
 								onChange={ ( value ) =>
@@ -77,7 +77,11 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 								}
 								className="wp-block-rss__placeholder-input"
 							/>
-							<Button variant="primary" type="submit">
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								type="submit"
+							>
 								{ __( 'Use URL' ) }
 							</Button>
 						</HStack>

package/src/search/editor.scss

@@ -13,6 +13,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		text-align: center;
 	}
 
 	&__components-button-group {

package/src/search/index.php

@@ -281,6 +281,8 @@ function classnames_for_block_core_search( $attributes ) {
  * @param array  $wrapper_styles Current collection of wrapper styles.
  * @param array  $button_styles  Current collection of button styles.
  * @param array  $input_styles   Current collection of input styles.
+ *
+ * @return void
  */
 function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
 	$is_button_inside = isset( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition'];
@@ -325,6 +327,8 @@ function apply_block_core_search_border_style( $attributes, $property, $side, &$
  * @param array  $wrapper_styles Current collection of wrapper styles.
  * @param array  $button_styles  Current collection of button styles.
  * @param array  $input_styles   Current collection of input styles.
+ *
+ * @return void
  */
 function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
 	apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );

package/src/search/style.scss

@@ -55,7 +55,11 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 		margin-left: 0;
 		// Prevent unintended text wrapping.
 		flex-shrink: 0;
-		// Ensure minimum input field width in small viewports.
+		max-width: 100%;
+	}
+
+	// Ensure minimum input field width in small viewports.
+	.wp-block-search__button[aria-expanded="true"] {
 		max-width: calc(100% - 100px);
 	}
 }

package/src/social-link/social-list.js

@@ -14,7 +14,7 @@ import { ChainIcon } from './icons';
  *
  * @param {string} name key for a social service (lowercase slug)
  *
- * @return {WPComponent} Icon component for social service.
+ * @return {Component} Icon component for social service.
  */
 export const getIconBySite = ( name ) => {
 	const variation = variations.find( ( v ) => v.name === name );

package/src/table-of-contents/edit.js

@@ -19,6 +19,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -40,7 +42,7 @@ import { useObserveHeadings } from './hooks';
  * @param {string}                       props.clientId
  * @param {(attributes: Object) => void} props.setAttributes
  *
- * @return {WPComponent} The component.
+ * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
 	attributes: { headings = [], onlyIncludeCurrentPage },
@@ -50,6 +52,24 @@ export default function TableOfContentsEdit( {
 	useObserveHeadings( clientId );
 
 	const blockProps = useBlockProps();
+	const instanceId = useInstanceId(
+		TableOfContentsEdit,
+		'table-of-contents'
+	);
+
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+	let noticeId;
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		// Remove previous warning if any, to show one at a time per block.
+		removeNotice( noticeId );
+		noticeId = `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`;
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: noticeId,
+			type: 'snackbar',
+		} );
+	};
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -137,8 +157,12 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol inert="true">
-					<TableOfContentsList nestedHeadingList={ headingTree } />
+				<ol>
+					<TableOfContentsList
+						nestedHeadingList={ headingTree }
+						disableLinkActivation={ true }
+						onClick={ showRedirectionPreventedNotice }
+					/>
 				</ol>
 			</nav>
 			{ toolbarControls }

package/src/table-of-contents/list.tsx

@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import type { WPElement } from '@wordpress/element';
+import type { MouseEvent, ReactElement } from 'react';
 
 /**
  * Internal dependencies
@@ -12,16 +12,30 @@ const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';
 
 export default function TableOfContentsList( {
 	nestedHeadingList,
+	disableLinkActivation,
+	onClick,
 }: {
 	nestedHeadingList: NestedHeadingData[];
-} ): WPElement {
+	disableLinkActivation?: boolean;
+	onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
+} ): ReactElement {
 	return (
 		<>
 			{ nestedHeadingList.map( ( node, index ) => {
 				const { content, link } = node.heading;
 
 				const entry = link ? (
-					<a className={ ENTRY_CLASS_NAME } href={ link }>
+					<a
+						className={ ENTRY_CLASS_NAME }
+						href={ link }
+						aria-disabled={ disableLinkActivation || undefined }
+						onClick={
+							disableLinkActivation &&
+							'function' === typeof onClick
+								? onClick
+								: undefined
+						}
+					>
 						{ content }
 					</a>
 				) : (
@@ -35,6 +49,15 @@ export default function TableOfContentsList( {
 							<ol>
 								<TableOfContentsList
 									nestedHeadingList={ node.children }
+									disableLinkActivation={
+										disableLinkActivation
+									}
+									onClick={
+										disableLinkActivation &&
+										'function' === typeof onClick
+											? onClick
+											: undefined
+									}
 								/>
 							</ol>
 						) : null }

package/src/template-part/edit/import-controls.js

@@ -147,7 +147,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 						options={ options }
 						onChange={ ( value ) => setSelectedSidebar( value ) }
 						disabled={ ! options.length }
-						__next36pxDefaultSize
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 					/>
 				</FlexBlock>
@@ -158,6 +158,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 					} }
 				>
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						isBusy={ isBusy }

package/src/template-part/index.php

@@ -18,10 +18,13 @@ function render_block_core_template_part( $attributes ) {
 	$template_part_id = null;
 	$content          = null;
 	$area             = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
-	$theme            = isset( $attributes['theme'] ) ? $attributes['theme'] : get_stylesheet();
 
-	if ( isset( $attributes['slug'] ) && get_stylesheet() === $theme ) {
-		$template_part_id    = $theme . '//' . $attributes['slug'];
+	if (
+		isset( $attributes['slug'] ) &&
+		isset( $attributes['theme'] ) &&
+		get_stylesheet() === $attributes['theme']
+	) {
+		$template_part_id    = $attributes['theme'] . '//' . $attributes['slug'];
 		$template_part_query = new WP_Query(
 			array(
 				'post_type'           => 'wp_template_part',
@@ -31,7 +34,7 @@ function render_block_core_template_part( $attributes ) {
 					array(
 						'taxonomy' => 'wp_theme',
 						'field'    => 'name',
-						'terms'    => $theme,
+						'terms'    => $attributes['theme'],
 					),
 				),
 				'posts_per_page'      => 1,

package/src/video/edit.native.js

@@ -162,7 +162,7 @@ class VideoEdit extends Component {
 	onSelectURL( url ) {
 		const { createErrorNotice, onReplace, setAttributes } = this.props;
 
-		if ( isURL( url ) ) {
+		if ( isURL( url ) && /^https?:/.test( getProtocol( url ) ) ) {
 			// Check if there's an embed block that handles this URL.
 			const embedBlock = createUpgradedEmbedBlock( {
 				attributes: { url },

package/src/video/test/edit.native.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	dismissModal,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/video' ] );
+
+describe( 'Video block', () => {
+	it( 'should gracefully handle invalid URLs', async () => {
+		await initializeEditor();
+
+		await addBlock( screen, 'Video' );
+		fireEvent.press( screen.getByText( 'Insert from URL' ) );
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Type a URL' ),
+			'h://wordpress.org/video.mp4'
+		);
+		dismissModal( screen.getByTestId( 'bottom-sheet' ) );
+
+		expect( screen.getByText( 'Invalid URL.' ) ).toBeVisible();
+	} );
+} );