@wordpress/block-library 9.9.0 → 9.10.0

package/build-style/style.css

@@ -337,6 +337,10 @@
   font-family: inherit;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  /*!rtl:begin:ignore*/
+  direction: ltr;
+  text-align: initial;
+  /*!rtl:end:ignore*/
 }
 
 .wp-block-columns {
@@ -2923,10 +2927,8 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-left: 0.5em;
 }
 
-.wp-block-post-content::after {
-  content: "";
-  display: table;
-  clear: both;
+.wp-block-post-content {
+  display: flow-root;
 }
 
 .wp-block-post-date {
@@ -4281,7 +4283,6 @@ a[data-fn].fn::after {
 
 .screen-reader-text {
   border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -4294,7 +4295,6 @@ a[data-fn].fn::after {
 
 .screen-reader-text:focus {
   background-color: #ddd;
-  clip: auto !important;
   clip-path: none;
   color: #444;
   display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.9.0",
+	"version": "9.10.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,40 +38,40 @@
 		"./search/view": "./build-module/search/view.js"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.9.0",
-		"@wordpress/api-fetch": "^7.9.0",
-		"@wordpress/autop": "^4.9.0",
-		"@wordpress/blob": "^4.9.0",
-		"@wordpress/block-editor": "^14.4.0",
-		"@wordpress/blocks": "^13.9.0",
-		"@wordpress/components": "^28.9.0",
-		"@wordpress/compose": "^7.9.0",
-		"@wordpress/core-data": "^7.9.0",
-		"@wordpress/data": "^10.9.0",
-		"@wordpress/date": "^5.9.0",
-		"@wordpress/deprecated": "^4.9.0",
-		"@wordpress/dom": "^4.9.0",
-		"@wordpress/element": "^6.9.0",
-		"@wordpress/escape-html": "^3.9.0",
-		"@wordpress/hooks": "^4.9.0",
-		"@wordpress/html-entities": "^4.9.0",
-		"@wordpress/i18n": "^5.9.0",
-		"@wordpress/icons": "^10.9.0",
-		"@wordpress/interactivity": "^6.9.0",
-		"@wordpress/interactivity-router": "^2.9.0",
-		"@wordpress/keyboard-shortcuts": "^5.9.0",
-		"@wordpress/keycodes": "^4.9.0",
-		"@wordpress/notices": "^5.9.0",
-		"@wordpress/patterns": "^2.9.0",
-		"@wordpress/primitives": "^4.9.0",
-		"@wordpress/private-apis": "^1.9.0",
-		"@wordpress/reusable-blocks": "^5.9.0",
-		"@wordpress/rich-text": "^7.9.0",
-		"@wordpress/server-side-render": "^5.9.0",
-		"@wordpress/url": "^4.9.0",
-		"@wordpress/viewport": "^6.9.0",
-		"@wordpress/wordcount": "^4.9.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "^4.10.0",
+		"@wordpress/api-fetch": "^7.10.0",
+		"@wordpress/autop": "^4.10.0",
+		"@wordpress/blob": "^4.10.0",
+		"@wordpress/block-editor": "^14.5.0",
+		"@wordpress/blocks": "^13.10.0",
+		"@wordpress/components": "^28.10.0",
+		"@wordpress/compose": "^7.10.0",
+		"@wordpress/core-data": "^7.10.0",
+		"@wordpress/data": "^10.10.0",
+		"@wordpress/date": "^5.10.0",
+		"@wordpress/deprecated": "^4.10.0",
+		"@wordpress/dom": "^4.10.0",
+		"@wordpress/element": "^6.10.0",
+		"@wordpress/escape-html": "^3.10.0",
+		"@wordpress/hooks": "^4.10.0",
+		"@wordpress/html-entities": "^4.10.0",
+		"@wordpress/i18n": "^5.10.0",
+		"@wordpress/icons": "^10.10.0",
+		"@wordpress/interactivity": "^6.10.0",
+		"@wordpress/interactivity-router": "^2.10.0",
+		"@wordpress/keyboard-shortcuts": "^5.10.0",
+		"@wordpress/keycodes": "^4.10.0",
+		"@wordpress/notices": "^5.10.0",
+		"@wordpress/patterns": "^2.10.0",
+		"@wordpress/primitives": "^4.10.0",
+		"@wordpress/private-apis": "^1.10.0",
+		"@wordpress/reusable-blocks": "^5.10.0",
+		"@wordpress/rich-text": "^7.10.0",
+		"@wordpress/server-side-render": "^5.10.0",
+		"@wordpress/url": "^4.10.0",
+		"@wordpress/viewport": "^6.10.0",
+		"@wordpress/wordcount": "^4.10.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -89,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
+	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
 }

package/src/code/style.scss

@@ -9,5 +9,10 @@
 		font-family: inherit;
 		overflow-wrap: break-word;
 		white-space: pre-wrap;
+		// Set direction and avoid inheriting alignment from a parent element.
+		/*!rtl:begin:ignore*/
+		direction: ltr;
+		text-align: initial;
+		/*!rtl:end:ignore*/
 	}
 }

package/src/common.scss

@@ -75,8 +75,6 @@
 
 .screen-reader-text {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;
@@ -89,7 +87,6 @@
 
 .screen-reader-text:focus {
 	background-color: $gray-300;
-	clip: auto !important;
 	clip-path: none;
 	color: #444;
 	display: block;

package/src/cover/edit/inspector-controls.js

@@ -5,12 +5,12 @@ import { useMemo } from '@wordpress/element';
 import {
 	ExternalLink,
 	FocalPointPicker,
-	PanelBody,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -31,6 +31,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
@@ -160,72 +161,130 @@ export default function CoverInspectorControls( {
 		),
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
 				{ !! url && (
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								hasParallax: false,
+								focalPoint: undefined,
+								isRepeated: false,
+								alt: '',
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isImageBackground && (
 							<>
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+									isShownByDefault
+									hasValue={ () => hasParallax }
+									onDeselect={ () =>
+										setAttributes( {
+											hasParallax: false,
+											focalPoint: undefined,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Fixed background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								</ToolsPanelItem>
 
-								<ToggleControl
-									__nextHasNoMarginBottom
+								<ToolsPanelItem
 									label={ __( 'Repeated background' ) }
-									checked={ isRepeated }
-									onChange={ toggleIsRepeated }
-								/>
+									isShownByDefault
+									hasValue={ () => isRepeated }
+									onDeselect={ () =>
+										setAttributes( {
+											isRepeated: false,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Repeated background' ) }
+										checked={ isRepeated }
+										onChange={ toggleIsRepeated }
+									/>
+								</ToolsPanelItem>
 							</>
 						) }
 						{ showFocalPointPicker && (
-							<FocalPointPicker
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Focal point' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
+								isShownByDefault
+								hasValue={ () => !! focalPoint }
+								onDeselect={ () =>
 									setAttributes( {
-										focalPoint: newFocalPoint,
+										focalPoint: undefined,
 									} )
 								}
-							/>
+							>
+								<FocalPointPicker
+									__nextHasNoMarginBottom
+									label={ __( 'Focal point' ) }
+									url={ url }
+									value={ focalPoint }
+									onDragStart={ imperativeFocalPointPreview }
+									onDrag={ imperativeFocalPointPreview }
+									onChange={ ( newFocalPoint ) =>
+										setAttributes( {
+											focalPoint: newFocalPoint,
+										} )
+									}
+								/>
+							</ToolsPanelItem>
 						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
-							<TextareaControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
-								value={ alt }
-								onChange={ ( newAlt ) =>
-									setAttributes( { alt: newAlt } )
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: '' } )
 								}
-								help={
-									<>
-										<ExternalLink
-											href={
-												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-												__(
-													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-												)
-											}
-										>
+							>
+								<TextareaControl
+									__nextHasNoMarginBottom
+									label={ __( 'Alternative text' ) }
+									value={ alt }
+									onChange={ ( newAlt ) =>
+										setAttributes( { alt: newAlt } )
+									}
+									help={
+										<>
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
+												{ __(
+													'Describe the purpose of the image.'
+												) }
+											</ExternalLink>
+											<br />
 											{ __(
-												'Describe the purpose of the image.'
+												'Leave empty if decorative.'
 											) }
-										</ExternalLink>
-										<br />
-										{ __( 'Leave empty if decorative.' ) }
-									</>
-								}
-							/>
+										</>
+									}
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (

package/src/cover/index.php

@@ -20,29 +20,22 @@ function render_block_core_cover( $attributes, $content ) {
 		return $content;
 	}
 
+	$object_position = isset( $attributes['focalPoint'] )
+		? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'
+		: null;
+
 	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {
 		$attr = array(
 			'class'           => 'wp-block-cover__image-background',
 			'data-object-fit' => 'cover',
 		);
 
-		if ( isset( $attributes['focalPoint'] ) ) {
-			$object_position              = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+		if ( $object_position ) {
 			$attr['data-object-position'] = $object_position;
-			$attr['style']                = 'object-position: ' . $object_position;
+			$attr['style']                = 'object-position:' . $object_position . ';';
 		}
 
 		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
-
-		/*
-		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
-		 * and removes eventual whitespace characters between the two (typically introduced at template level)
-		 */
-		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
-		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
-			$offset  = $matches[0][1];
-			$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
-		}
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
@@ -52,15 +45,41 @@ function render_block_core_cover( $attributes, $content ) {
 			return $content;
 		}
 
-		$processor = new WP_HTML_Tag_Processor( $content );
+		$current_thumbnail_id = get_post_thumbnail_id();
+
+		$processor = new WP_HTML_Tag_Processor( '<div></div>' );
 		$processor->next_tag();
 
-		$styles         = $processor->get_attribute( 'style' );
-		$merged_styles  = ! empty( $styles ) ? $styles . ';' : '';
-		$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+		$current_alt = trim( strip_tags( get_post_meta( $current_thumbnail_id, '_wp_attachment_image_alt', true ) ) );
+		if ( $current_alt ) {
+			$processor->set_attribute( 'role', 'img' );
+			$processor->set_attribute( 'aria-label', $current_alt );
+		}
+
+		$processor->add_class( 'wp-block-cover__image-background' );
+		$processor->add_class( 'wp-image-' . $current_thumbnail_id );
+		if ( $attributes['hasParallax'] ) {
+			$processor->add_class( 'has-parallax' );
+		}
+		if ( $attributes['isRepeated'] ) {
+			$processor->add_class( 'is-repeated' );
+		}
+
+		$styles  = 'background-position:' . ( $object_position ?? '50% 50%' ) . ';';
+		$styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+		$processor->set_attribute( 'style', $styles );
+
+		$image = $processor->get_updated_html();
+	}
 
-		$processor->set_attribute( 'style', $merged_styles );
-		$content = $processor->get_updated_html();
+	/*
+	 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+	 * and removes eventual whitespace characters between the two (typically introduced at template level)
+	 */
+	$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+	if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+		$offset  = $matches[0][1];
+		$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
 	}
 
 	return $content;

package/src/cover/test/edit.js

@@ -190,7 +190,7 @@ describe( 'Cover block', () => {
 			test( 'does not display media settings panel if url is not set', async () => {
 				await setup();
 				expect(
-					screen.queryByRole( 'button', {
+					screen.queryByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).not.toBeInTheDocument();
@@ -202,7 +202,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'button', {
+					screen.getByRole( 'heading', {
 						name: 'Settings',
 					} )
 				).toBeInTheDocument();

package/src/embed/edit.js

@@ -30,6 +30,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
 import { getAuthority } from '@wordpress/url';
+import { Caption } from '../utils/caption';
 
 const EmbedEdit = ( props ) => {
 	const {
@@ -261,7 +262,15 @@ const EmbedEdit = ( props ) => {
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>
-			<View { ...blockProps }>
+			<figure
+				{ ...blockProps }
+				className={ clsx( blockProps.className, className, {
+					[ `is-type-${ type }` ]: type,
+					[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+					[ `wp-block-embed-${ providerNameSlug }` ]:
+						providerNameSlug,
+				} ) }
+			>
 				<EmbedPreview
 					preview={ preview }
 					previewable={ previewable }
@@ -279,7 +288,15 @@ const EmbedEdit = ( props ) => {
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 				/>
-			</View>
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
+			</figure>
 		</>
 	);
 };

package/src/embed/embed-preview.js

@@ -21,7 +21,6 @@ import { getAuthority } from '@wordpress/url';
  * Internal dependencies
  */
 import WpEmbedPreview from './wp-embed-preview';
-import { Caption } from '../utils/caption';
 
 export default function EmbedPreview( {
 	preview,
@@ -32,9 +31,6 @@ export default function EmbedPreview( {
 	className,
 	icon,
 	label,
-	insertBlocksAfter,
-	attributes,
-	setAttributes,
 } ) {
 	const [ interactive, setInteractive ] = useState( false );
 
@@ -96,11 +92,7 @@ export default function EmbedPreview( {
 	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
 	return (
-		<figure
-			className={ clsx( className, 'wp-block-embed', {
-				'is-type-video': 'video' === type,
-			} ) }
-		>
+		<>
 			{ previewable ? (
 				embedWrapper
 			) : (
@@ -122,14 +114,6 @@ export default function EmbedPreview( {
 					</p>
 				</Placeholder>
 			) }
-			<Caption
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSelected={ isSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				label={ __( 'Embed caption text' ) }
-				showToolbarButton={ isSelected }
-			/>
-		</figure>
+		</>
 	);
 }

package/src/image/index.php

@@ -24,7 +24,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 
 	$p = new WP_HTML_Tag_Processor( $content );
 
-	if ( ! $p->next_tag( 'img' ) || null === $p->get_attribute( 'src' ) ) {
+	if ( ! $p->next_tag( 'img' ) || ! $p->get_attribute( 'src' ) ) {
 		return '';
 	}
 

package/src/post-content/edit.js

@@ -8,19 +8,24 @@ import {
 	RecursionProvider,
 	useHasRecursion,
 	Warning,
+	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
+import { parse } from '@wordpress/blocks';
 import {
 	useEntityProp,
 	useEntityBlockEditor,
 	store as coreStore,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
 function ReadOnlyContent( {
+	parentLayout,
 	layoutClassNames,
 	userCanEdit,
 	postType,
@@ -33,7 +38,28 @@ function ReadOnlyContent( {
 		postId
 	);
 	const blockProps = useBlockProps( { className: layoutClassNames } );
-	return content?.protected && ! userCanEdit ? (
+	const blocks = useMemo( () => {
+		return content?.raw ? parse( content.raw ) : [];
+	}, [ content?.raw ] );
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+		props: blockProps,
+		layout: parentLayout,
+	} );
+
+	if ( userCanEdit ) {
+		/*
+		 * Rendering the block preview using the raw content blocks allows for
+		 * block support styles to be generated and applied by the editor.
+		 *
+		 * The preview using the raw blocks can only be presented to users with
+		 * edit permissions for the post to prevent potential exposure of private
+		 * block content.
+		 */
+		return <div { ...blockPreviewProps }></div>;
+	}
+
+	return content?.protected ? (
 		<div { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
 		</div>
@@ -96,6 +122,7 @@ function Content( props ) {
 		<EditableContent { ...props } />
 	) : (
 		<ReadOnlyContent
+			parentLayout={ props.parentLayout }
 			layoutClassNames={ layoutClassNames }
 			userCanEdit={ userCanEdit }
 			postType={ postType }
@@ -141,6 +168,7 @@ function RecursionError() {
 export default function PostContentEdit( {
 	context,
 	__unstableLayoutClassNames: layoutClassNames,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -154,6 +182,7 @@ export default function PostContentEdit( {
 			{ contextPostId && contextPostType ? (
 				<Content
 					context={ context }
+					parentLayout={ parentLayout }
 					layoutClassNames={ layoutClassNames }
 				/>
 			) : (

package/src/post-content/style.scss

@@ -1,5 +1,3 @@
-.wp-block-post-content::after {
-	content: "";
-	display: table;
-	clear: both;
+.wp-block-post-content {
+	display: flow-root;
 }

package/src/post-terms/index.php

@@ -24,11 +24,6 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_terms = get_the_terms( $block->context['postId'], $attributes['term'] );
-	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
-		return '';
-	}
-
 	$classes = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
@@ -51,13 +46,19 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$suffix = '<span class="wp-block-post-terms__suffix">' . $attributes['suffix'] . '</span>' . $suffix;
 	}
 
-	return get_the_term_list(
+	$post_terms = get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
 		wp_kses_post( $prefix ),
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
 		wp_kses_post( $suffix )
 	);
+
+	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
+		return '';
+	}
+
+	return $post_terms;
 }
 
 /**