@wordpress/block-library 9.48.1 → 10.0.0

package/src/pullquote/deprecated.js

@@ -19,6 +19,7 @@ import { select } from '@wordpress/data';
  * Internal dependencies
  */
 import { SOLID_COLOR_CLASS } from './shared';
+import migrateTextAlignAttributeToBlockSupport from '../utils/migrate-text-align';
 
 const blockAttributes = {
 	value: {
@@ -68,6 +69,117 @@ function multilineToInline( value ) {
 	return values.join( '<br>' );
 }
 
+const v6 = {
+	attributes: {
+		value: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'p',
+			role: 'content',
+		},
+		citation: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'cite',
+			role: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'left', 'right', 'wide', 'full' ],
+		background: {
+			backgroundImage: true,
+			backgroundSize: true,
+			__experimentalDefaultControls: {
+				backgroundImage: true,
+			},
+		},
+		color: {
+			gradients: true,
+			background: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalStyle: {
+			typography: {
+				fontSize: '1.5em',
+				lineHeight: '1.6',
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes } ) {
+		const { textAlign, citation, value } = attributes;
+		const shouldShowCitation = ! RichText.isEmpty( citation );
+
+		return (
+			<figure
+				{ ...useBlockProps.save( {
+					className: clsx( {
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+					} ),
+				} ) }
+			>
+				<blockquote>
+					<RichText.Content tagName="p" value={ value } />
+					{ shouldShowCitation && (
+						<RichText.Content tagName="cite" value={ citation } />
+					) }
+				</blockquote>
+			</figure>
+		);
+	},
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+	migrate: migrateTextAlignAttributeToBlockSupport,
+};
+
 // Version 5 created in #43210 / c4b2ca7f3f. Supports match block.json at the time.
 const v5 = {
 	attributes: {
@@ -156,10 +268,10 @@ const v5 = {
 		);
 	},
 	migrate( { value, ...attributes } ) {
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			...attributes,
-		};
+		} );
 	},
 };
 
@@ -291,7 +403,7 @@ const v4 = {
 			};
 		}
 
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			className,
 			backgroundColor: isSolidColorStyle ? mainColor : undefined,
@@ -299,7 +411,7 @@ const v4 = {
 			textAlign: isSolidColorStyle ? 'left' : undefined,
 			...attributes,
 			style,
-		};
+		} );
 	},
 };
 
@@ -448,7 +560,7 @@ const v3 = {
 				};
 			}
 		}
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			className,
 			backgroundColor: isSolidColorStyle ? mainColor : undefined,
@@ -456,7 +568,7 @@ const v3 = {
 			textAlign: isSolidColorStyle ? 'left' : undefined,
 			...attributes,
 			style,
-		};
+		} );
 	},
 };
 
@@ -566,7 +678,7 @@ const v2 = {
 			};
 		}
 
-		return {
+		return migrateTextAlignAttributeToBlockSupport( {
 			value: multilineToInline( value ),
 			className,
 			backgroundColor: isSolidColorStyle ? mainColor : undefined,
@@ -574,7 +686,7 @@ const v2 = {
 			textAlign: isSolidColorStyle ? 'left' : undefined,
 			...attributes,
 			style,
-		};
+		} );
 	},
 };
 
@@ -643,4 +755,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v5, v4, v3, v2, v1, v0 ];
+export default [ v6, v5, v4, v3, v2, v1, v0 ];

package/src/pullquote/edit.js

@@ -1,18 +1,8 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	AlignmentControl,
-	BlockControls,
-	RichText,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
@@ -20,31 +10,17 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import { Figure } from './figure';
 import { BlockQuote } from './blockquote';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-function PullQuoteEdit( {
-	attributes,
-	setAttributes,
-	isSelected,
-	insertBlocksAfter,
-} ) {
-	const { textAlign, citation, value } = attributes;
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+function PullQuoteEdit( props ) {
+	const { attributes, setAttributes, isSelected, insertBlocksAfter } = props;
+	useDeprecatedTextAlign( props );
+	const { citation, value } = attributes;
+	const blockProps = useBlockProps();
 	const shouldShowCitation = ! RichText.isEmpty( citation ) || isSelected;
 
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
 			<Figure { ...blockProps }>
 				<BlockQuote>
 					<RichText

package/src/pullquote/save.js

@@ -1,25 +1,14 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { textAlign, citation, value } = attributes;
+	const { citation, value } = attributes;
 	const shouldShowCitation = ! RichText.isEmpty( citation );
 
 	return (
-		<figure
-			{ ...useBlockProps.save( {
-				className: clsx( {
-					[ `has-text-align-${ textAlign }` ]: textAlign,
-				} ),
-			} ) }
-		>
+		<figure { ...useBlockProps.save() }>
 			<blockquote>
 				<RichText.Content tagName="p" value={ value } />
 				{ shouldShowCitation && (

package/src/query/edit/enhanced-pagination-modal.js

@@ -8,6 +8,8 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -24,13 +26,21 @@ export default function EnhancedPaginationModal( {
 } ) {
 	const [ isOpen, setOpen ] = useState( false );
 	const hasUnsupportedBlocks = useUnsupportedBlocks( clientId );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		if ( enhancedPagination && hasUnsupportedBlocks ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { enhancedPagination: false } );
 			setOpen( true );
 		}
-	}, [ enhancedPagination, hasUnsupportedBlocks, setAttributes ] );
+	}, [
+		enhancedPagination,
+		hasUnsupportedBlocks,
+		setAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
 
 	const closeModal = () => {
 		setOpen( false );

package/src/query/edit/inspector-controls/index.js

@@ -432,7 +432,6 @@ export default function QueryInspectorControls( props ) {
 							} }
 						>
 							<TextControl
-								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
 								value={ querySearch }
 								onChange={ ( newQuerySearch ) => {

package/src/rss/edit.js

@@ -289,7 +289,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Link relation' ) }
 					help={ createInterpolateElement(
 						__(

package/src/search/README.md

@@ -24,6 +24,7 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `buttonPosition` | `string` | `"button-outside"` | — |
 | `buttonUseIcon` | `boolean` | `false` | — |
 | `query` | `object` | `{}` | — |
+| `tagName` | `string` | `""` | — |
 
 ## Supports
 

package/src/search/block.json

@@ -42,6 +42,10 @@
 		"query": {
 			"type": "object",
 			"default": {}
+		},
+		"tagName": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"supports": {

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="%1s" %2s %3s>%4s</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/style.scss

@@ -74,9 +74,8 @@
 @use "./social-links/style.scss" as *;
 @use "./spacer/style.scss" as *;
 @use "./tag-cloud/style.scss" as *;
-@use "./tab/style.scss" as *;
+@use "./tab-list/style.scss" as *;
 @use "./tab-panel/style.scss" as *;
-@use "./tab-panels/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
 @use "./tabs/style.scss" as *;