@wordpress/block-library 10.0.1-next.v.202606191442.0 → 10.1.0

package/src/search/edit.js

@@ -35,6 +35,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -47,6 +48,20 @@ import {
 } from './utils.js';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
+// Help text describing each wrapper element option. Kept local to the block
+// because the choices and their guidance are specific to the Search block.
+const TAG_NAME_MESSAGES = {
+	'': __(
+		'Lets the theme decide. Uses the <search> landmark element if the theme opts in, otherwise a <form>.'
+	),
+	search: __(
+		'Wraps the block in a <search> landmark, announced as a search region by assistive technologies.'
+	),
+	form: __(
+		'Uses a <form role="search"> wrapper for backward compatibility with existing theme styles.'
+	),
+};
+
 // Used to calculate border radius adjustment to avoid "fat" corners when
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
@@ -70,6 +85,7 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
+		tagName,
 		style,
 	} = attributes;
 
@@ -477,6 +493,31 @@ export default function SearchEdit( {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<SelectControl
+					__next40pxDefaultSize
+					label={ __( 'HTML element' ) }
+					value={ tagName ?? '' }
+					options={ [
+						{ label: __( 'Default' ), value: '' },
+						{ label: '<search>', value: 'search' },
+						{ label: '<form>', value: 'form' },
+					] }
+					onChange={ ( value ) => {
+						setAttributes( { tagName: value } );
+						// The help text is updated via aria-describedby, which
+						// is not re-announced while focus remains on the select.
+						// Announce the new description so it is not missed.
+						// speak() strips HTML-like tags, which would drop the
+						// element names (e.g. <search>) entirely. Remove only the
+						// angle brackets so the words are retained when spoken.
+						speak(
+							TAG_NAME_MESSAGES[ value ].replace( /[<>]/g, '' )
+						);
+					} }
+					help={ TAG_NAME_MESSAGES[ tagName ?? '' ] }
+				/>
+			</InspectorControls>
 		</>
 	);
 
@@ -559,64 +600,74 @@ export default function SearchEdit( {
 		typographyProps.className
 	);
 
+	// Reflect an explicit <search> choice in the editor markup so wrapper
+	// styles match the front end. The <form> and theme-deferred default keep
+	// the historical <div> to avoid nesting a live <form> in the editor.
+	const Wrapper = 'search' === tagName ? 'search' : 'div';
+
 	return (
-		<div { ...blockProps }>
+		<>
 			{ controls }
-
-			{ showLabel && (
-				<RichText
-					identifier="label"
-					className={ labelClassnames }
-					aria-label={ __( 'Label text' ) }
-					placeholder={ __( 'Add label…' ) }
-					withoutInteractiveFormatting
-					value={ label }
-					onChange={ ( html ) => setAttributes( { label: html } ) }
-					style={ typographyProps.style }
-				/>
-			) }
-
-			<ResizableBox
-				size={ {
-					width:
-						width === undefined
-							? 'auto'
-							: `${ width }${ widthUnit }`,
-					height: 'auto',
-				} }
-				className={ clsx(
-					'wp-block-search__inside-wrapper',
-					isButtonPositionInside ? borderProps.className : undefined
-				) }
-				style={ getWrapperStyles() }
-				minWidth={ MIN_WIDTH }
-				enable={ getResizableSides() }
-				onResizeStart={ ( event, direction, elt ) => {
-					setAttributes( {
-						width: parseInt( elt.offsetWidth, 10 ),
-						widthUnit: 'px',
-					} );
-					toggleSelection( false );
-				} }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					setAttributes( {
-						width: parseInt( width + delta.width, 10 ),
-					} );
-					toggleSelection( true );
-				} }
-				showHandle={ isSelected }
-			>
-				{ ( isButtonPositionInside ||
-					isButtonPositionOutside ||
-					hasOnlyButton ) && (
-					<>
-						{ renderTextField() }
-						{ renderButton() }
-					</>
+			<Wrapper { ...blockProps }>
+				{ showLabel && (
+					<RichText
+						identifier="label"
+						className={ labelClassnames }
+						aria-label={ __( 'Label text' ) }
+						placeholder={ __( 'Add label…' ) }
+						withoutInteractiveFormatting
+						value={ label }
+						onChange={ ( html ) =>
+							setAttributes( { label: html } )
+						}
+						style={ typographyProps.style }
+					/>
 				) }
 
-				{ hasNoButton && renderTextField() }
-			</ResizableBox>
-		</div>
+				<ResizableBox
+					size={ {
+						width:
+							width === undefined
+								? 'auto'
+								: `${ width }${ widthUnit }`,
+						height: 'auto',
+					} }
+					className={ clsx(
+						'wp-block-search__inside-wrapper',
+						isButtonPositionInside
+							? borderProps.className
+							: undefined
+					) }
+					style={ getWrapperStyles() }
+					minWidth={ MIN_WIDTH }
+					enable={ getResizableSides() }
+					onResizeStart={ ( event, direction, elt ) => {
+						setAttributes( {
+							width: parseInt( elt.offsetWidth, 10 ),
+							widthUnit: 'px',
+						} );
+						toggleSelection( false );
+					} }
+					onResizeStop={ ( event, direction, elt, delta ) => {
+						setAttributes( {
+							width: parseInt( width + delta.width, 10 ),
+						} );
+						toggleSelection( true );
+					} }
+					showHandle={ isSelected }
+				>
+					{ ( isButtonPositionInside ||
+						isButtonPositionOutside ||
+						hasOnlyButton ) && (
+						<>
+							{ renderTextField() }
+							{ renderButton() }
+						</>
+					) }
+
+					{ hasNoButton && renderTextField() }
+				</ResizableBox>
+			</Wrapper>
+		</>
 	);
 }

package/src/search/index.php

@@ -191,8 +191,32 @@ function render_block_core_search( $attributes ) {
 		';
 	}
 
+	/*
+	 * The semantic <search> landmark wrapper is opt-in to preserve back
+	 * compatibility with themes targeting <form role="search">. The block
+	 * exposes a per-instance HTML element selector with three values:
+	 *
+	 *   - 'search' forces the <search> wrapper
+	 *   - 'form'   forces the original <form role="search"> markup
+	 *   - empty    defers to the 'search-element' html5 sub-feature
+	 *              ( add_theme_support( 'html5', array( 'search-element' ) ) ),
+	 *              matching the opt-in added to get_search_form() in core
+	 */
+	$tag_name           = $attributes['tagName'] ?? '';
+	$use_search_element = 'search' === $tag_name || ( '' === $tag_name && current_theme_supports( 'html5', 'search-element' ) );
+
+	/*
+	 * Only the wrapper markup differs between the semantic <search> landmark
+	 * and the classic <form role="search">. Positional specifiers keep a
+	 * single argument list usable by both formats, since the action URL
+	 * precedes the wrapper attributes in the <search> variant.
+	 */
+	$format = $use_search_element
+		? '<search %2$s %3$s><form method="get" action="%1$s">%4$s</form></search>'
+		: '<form role="search" method="get" action="%1$s" %2$s %3$s>%4$s</form>';
+
 	return sprintf(
-		'<form role="search" method="get" action="%1$s" %2$s %3$s>%4$s</form>',
+		$format,
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
 		$form_directives,

package/src/site-logo/edit.js

@@ -75,7 +75,8 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const cropButtonRef = useRef();
-	const { toggleSelection } = useDispatch( blockEditorStore );
+	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// Check if we're in contentOnly mode
@@ -108,6 +109,7 @@ const SiteLogo = ( {
 		// fallen out of sync. This can happen if the toggle is saved in the `on` position,
 		// but changes are later made to the site icon in the Customizer.
 		if ( shouldSyncIcon && logoId !== iconId ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { shouldSyncIcon: false } );
 		}
 	}, [] );

package/src/social-link/edit.js

@@ -191,7 +191,6 @@ const SocialLinkEdit = ( {
 						) }
 						renderContent={ () => (
 							<TextControl
-								__next40pxDefaultSize
 								className="wp-block-social-link__toolbar_content_text"
 								label={ __( 'Text' ) }
 								help={ __(
@@ -224,7 +223,6 @@ const SocialLinkEdit = ( {
 						} }
 					>
 						<TextControl
-							__next40pxDefaultSize
 							label={ __( 'Text' ) }
 							help={ __(
 								'The text is visible when enabled from the parent Social Icons block.'
@@ -240,7 +238,6 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Link relation' ) }
 					help={ createInterpolateElement(
 						__(

package/src/tab-list/README.md

@@ -36,7 +36,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
 - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
-  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}`
+  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap"}`
   - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false`
   - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false`
   - [`allowWrap`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowwrap): `false`

package/src/tab-list/block.json

@@ -49,7 +49,8 @@
 		},
 		"layout": {
 			"default": {
-				"type": "flex"
+				"type": "flex",
+				"flexWrap": "nowrap"
 			},
 			"allowVerticalAlignment": false,
 			"allowOrientation": false,
@@ -75,6 +76,5 @@
 			"padding": ".wp-block-tab-list button"
 		}
 	},
-	"editorStyle": "wp-block-tab-list-editor",
 	"style": "wp-block-tab-list"
 }

package/src/tab-list/edit.js

@@ -16,7 +16,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,7 +26,12 @@ import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
 const EMPTY_ARRAY = [];
 
-function Edit( { attributes, clientId, context } ) {
+function Edit( {
+	attributes,
+	clientId,
+	context,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
 
 	const colorProps = useColorProps( attributes );
@@ -52,9 +57,7 @@ function Edit( { attributes, clientId, context } ) {
 		[ clientId ]
 	);
 
-	const effectiveActiveIndex = useMemo( () => {
-		return editorActiveTabIndex ?? activeTabIndex;
-	}, [ editorActiveTabIndex, activeTabIndex ] );
+	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
 	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
@@ -126,6 +129,9 @@ function Edit( { attributes, clientId, context } ) {
 	const blockProps = useBlockProps( {
 		role: 'tablist',
 		ref: menuRef,
+		// Applied manually since this block has no inner blocks for the layout
+		// support to add its container classes to.
+		className: layoutClassNames,
 	} );
 
 	const buttonClassName = clsx( colorProps.className, borderProps.className );
@@ -147,9 +153,9 @@ function Edit( { attributes, clientId, context } ) {
 						<button
 							key={ tab.clientId || index }
 							type="button"
-							className={ clsx( buttonClassName, {
-								'is-active': isActive,
-							} ) }
+							role="tab"
+							aria-selected={ isActive }
+							className={ buttonClassName || undefined }
 							style={ buttonStyle }
 							tabIndex={ -1 }
 							onClick={ ( event ) => {

package/src/tab-list/index.php

@@ -13,7 +13,7 @@
  * tab-specific attributes (id, aria-controls, context) and interactivity
  * directives using data from the tabs-list context.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array     $attributes Block attributes.
  * @param string    $content    Block content (rendered buttons from save.js).
@@ -32,14 +32,12 @@ function block_core_tab_list_render_callback( array $attributes, string $content
 	$tab_index     = 0;
 
 	while ( $tag_processor->next_tag( 'button' ) ) {
-		$tab = $tabs_list[ $tab_index ] ?? null;
+		$tab_id = $tabs_list[ $tab_index ] ?? null;
 
-		if ( null === $tab ) {
+		if ( null === $tab_id ) {
 			break;
 		}
 
-		$tab_id = $tab['id'] ?? 'tab-' . $tab_index;
-
 		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
 		$tag_processor->set_attribute( 'aria-controls', $tab_id );
 		$tag_processor->set_attribute( 'data-wp-on--click', 'actions.handleTabClick' );
@@ -60,7 +58,7 @@ function block_core_tab_list_render_callback( array $attributes, string $content
 /**
  * Registers the `core/tab-list` block on the server.
  *
- * @since 7.0.0
+ * @since 7.1.0
  */
 function register_block_core_tab_list() {
 	register_block_type_from_metadata(

package/src/tab-list/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/tab-list/style.scss

@@ -27,8 +27,7 @@
 	text-transform: inherit;
 	text-align: inherit;
 
-	&[aria-selected="true"]::before,
-	&.is-active::before {
+	&[aria-selected="true"]::before {
 		content: "";
 		position: absolute;
 		border-bottom: 2px solid currentColor;

package/src/tab-panel/edit.js

@@ -8,7 +8,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useRef, useEffect } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,25 +24,12 @@ const TEMPLATE = [
 	],
 ];
 
-const { cancelAnimationFrame } = window;
-
 export default function Edit( { clientId, context, isSelected } ) {
-	const focusRef = useRef();
-
 	// Consume tab indices from context
 	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
 	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
 	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
-	// Clean up animation frames on unmount.
-	useEffect( () => {
-		return () => {
-			if ( focusRef.current ) {
-				cancelAnimationFrame( focusRef.current );
-			}
-		};
-	}, [] );
-
 	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
 		( select ) => {
 			const {

package/src/tab-panel/index.php

@@ -8,7 +8,7 @@
 /**
  * Render callback for core/tab-panel.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array     $attributes Block attributes.
  * @param string    $content    Block content.
@@ -41,31 +41,8 @@ function block_core_tab_panel_render( array $attributes, string $content, \WP_Bl
 		$tag_processor->set_attribute( 'id', $tab_id );
 	}
 
-	/**
-	 * Add interactivity to the tab element.
-	 */
-	$tag_processor->set_attribute(
-		'data-wp-interactive',
-		'core/tabs/private'
-	);
-	$tag_processor->set_attribute(
-		'data-wp-context',
-		wp_json_encode(
-			array(
-				'tab' => array(
-					'id' => $tab_id,
-				),
-			)
-		)
-	);
-
-	/**
-	 * Process accessibility and interactivity attributes.
-	 */
-	$tag_processor->set_attribute( 'role', 'tabpanel' );
 	$tag_processor->set_attribute( 'aria-labelledby', 'tab__' . $tab_id );
 	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
-	$tag_processor->set_attribute( 'tabindex', 0 );
 
 	return (string) $tag_processor->get_updated_html();
 }
@@ -75,7 +52,7 @@ function block_core_tab_panel_render( array $attributes, string $content, \WP_Bl
  *
  * @hook init
  *
- * @since 7.0.0
+ * @since 7.1.0
  */
 function register_block_core_tab_panel() {
 	register_block_type_from_metadata(

package/src/tab-panel/save.js

@@ -6,6 +6,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 export default function save() {
 	const blockProps = useBlockProps.save( {
 		role: 'tabpanel',
+		tabIndex: 0,
 	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 

package/src/tab-panels/block.json

@@ -9,7 +9,6 @@
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
 	"allowedBlocks": [ "core/tab-panel" ],
-	"attributes": {},
 	"supports": {
 		"html": false,
 		"visibility": false,

package/src/tab-panels/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/table/edit.js

@@ -563,7 +563,6 @@ function TableEdit( {
 						onSubmit={ onCreateTable }
 					>
 						<TextControl
-							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Column count' ) }
 							value={ initialColumnCount }
@@ -572,7 +571,6 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<TextControl
-							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Row count' ) }
 							value={ initialRowCount }

package/src/tabs/index.php

@@ -8,12 +8,12 @@
 /**
  * Extract tabs list from tab-panel innerblocks.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array  $innerblocks Parsed inner blocks of tabs block.
  * @param string $tabs_id     Unique ID for the tabs instance, used to generate tab IDs.
  *
- * @return array List of tabs with id, label, index.
+ * @return array List of tab IDs.
  */
 function block_core_tabs_generate_tabs_list( array $innerblocks = array(), string $tabs_id = '' ): array {
 	$tabs_list = array();
@@ -24,8 +24,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 			$tab_index = 0;
 			foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
 				if ( 'core/tab-panel' === ( $tab_block['blockName'] ?? '' ) ) {
-					$attrs     = $tab_block['attrs'] ?? array();
-					$tab_label = $attrs['label'] ?? '';
+					$attrs = $tab_block['attrs'] ?? array();
 
 					$tab_id = ! empty( $attrs['anchor'] )
 						? $attrs['anchor']
@@ -33,11 +32,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 							? $tabs_id . '-tab-' . $tab_index
 							: 'tab-' . $tab_index );
 
-					$tabs_list[] = array(
-						'id'    => esc_attr( $tab_id ),
-						'label' => $tab_label,
-						'index' => $tab_index,
-					);
+					$tabs_list[] = esc_attr( $tab_id );
 					++$tab_index;
 				}
 			}
@@ -53,7 +48,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
  * It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
  * In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array $context      Default block context.
  * @param array $parsed_block The block being rendered.
@@ -63,8 +58,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 function block_core_tabs_provide_context( array $context, array $parsed_block ): array {
 	if ( 'core/tabs' === $parsed_block['blockName'] ) {
 		// Generate a unique ID for the tabs instance first, so it can be used
-		// to derive stable tab IDs. Used for 3rd party extensibility to identify
-		// the tabs instance.
+		// to derive stable tab IDs.
 		$tabs_id                   = $parsed_block['attrs']['anchor'] ?? wp_unique_id( 'tabs_' );
 		$tabs_list                 = block_core_tabs_generate_tabs_list( $parsed_block['innerBlocks'] ?? array(), $tabs_id );
 		$context['core/tabs-list'] = $tabs_list;
@@ -78,7 +72,7 @@ add_filter( 'render_block_context', 'block_core_tabs_provide_context', 10, 2 );
 /**
  * Render callback for core/tabs.
  *
- * @since 7.0.0
+ * @since 7.1.0
  *
  * @param array     $attributes Block attributes.
  * @param string    $content    Block content.
@@ -99,7 +93,7 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
-	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
+	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs' );
 
 	$tag_processor->set_attribute(
 		'data-wp-context',
@@ -116,12 +110,11 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 	$output = $tag_processor->get_updated_html();
 
 	/**
-	 * Builds a client side state for just this tabs instance.
-	 * This allows 3rd party extensibility of tabs while retaining
-	 * client side state management per core/tabs instance, like context.
+	 * Builds a client side state for just this tabs instance, so each
+	 * core/tabs block manages its own state, like context.
 	 */
 	wp_interactivity_state(
-		'core/tabs/private',
+		'core/tabs',
 		array(
 			$tabs_id => $tabs_list,
 		)
@@ -133,7 +126,7 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 /**
  * Registers the `core/tabs` block on the server.
  *
- * @since 7.0.0
+ * @since 7.1.0
  */
 function register_block_core_tabs() {
 	register_block_type_from_metadata(