@wordpress/block-library 8.19.3 → 8.19.5

package/src/image/view.js

@@ -105,7 +105,10 @@ store(
 						context.core.image.scrollDelta = 0;
 
 						context.core.image.lightboxEnabled = true;
-						setStyles( context, event );
+						setStyles(
+							context,
+							event.target.previousElementSibling
+						);
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -227,7 +230,17 @@ store(
 					roleAttribute: ( { context } ) => {
 						return context.core.image.lightboxEnabled
 							? 'dialog'
-							: '';
+							: null;
+					},
+					ariaModal: ( { context } ) => {
+						return context.core.image.lightboxEnabled
+							? 'true'
+							: null;
+					},
+					dialogLabel: ( { context } ) => {
+						return context.core.image.lightboxEnabled
+							? context.core.image.dialogLabel
+							: null;
 					},
 					lightboxObjectFit: ( { context } ) => {
 						if ( context.core.image.initialized ) {
@@ -237,7 +250,7 @@ store(
 					enlargedImgSrc: ( { context } ) => {
 						return context.core.image.initialized
 							? context.core.image.imageUploadedSrc
-							: '';
+							: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
 					},
 				},
 			},
@@ -328,6 +341,15 @@ store(
 							context.core.image.imageButtonHeight = offsetHeight;
 						}
 					},
+					setStylesOnResize: ( { state, context, ref } ) => {
+						if (
+							context.core.image.lightboxEnabled &&
+							( state.core.image.windowWidth ||
+								state.core.image.windowHeight )
+						) {
+							setStyles( context, ref );
+						}
+					},
 				},
 			},
 		},
@@ -352,7 +374,7 @@ store(
  * @param {Object} context - An Interactivity API context
  * @param {Object} event - A triggering event
  */
-function setStyles( context, event ) {
+function setStyles( context, ref ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
 	let {
@@ -360,9 +382,8 @@ function setStyles( context, event ) {
 		naturalHeight,
 		offsetWidth: originalWidth,
 		offsetHeight: originalHeight,
-	} = event.target.nextElementSibling;
-	let { x: screenPosX, y: screenPosY } =
-		event.target.nextElementSibling.getBoundingClientRect();
+	} = ref;
+	let { x: screenPosX, y: screenPosY } = ref.getBoundingClientRect();
 
 	// Natural ratio of the image clicked to open the lightbox.
 	const naturalRatio = naturalWidth / naturalHeight;

package/src/latest-posts/edit.js

@@ -483,12 +483,18 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.split( ' ', excerptLength )
 								.join( ' ' ) }
 							{ createInterpolateElement(
-								/* translators: excerpt truncation character, default …  */
-								__( ' … <a>Read more</a>' ),
+								sprintf(
+									/* translators: 1: Hidden accessibility text: Post title */
+									__(
+										'… <a>Read more<span>: %1$s</span></a>'
+									),
+									titleTrimmed || __( '(no title)' )
+								),
 								{
 									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={
@@ -496,6 +502,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 											}
 										/>
 									),
+									span: (
+										<span className="screen-reader-text" />
+									),
 								}
 							) }
 						</>

package/src/latest-posts/index.php

@@ -48,14 +48,6 @@ 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' );
 	}
@@ -151,6 +143,23 @@ 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/media-text/edit.js

@@ -244,7 +244,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ __( 'Crop image to fill entire column' ) }
-					checked={ imageFill }
+					checked={ !! imageFill }
 					onChange={ () =>
 						setAttributes( {
 							imageFill: ! imageFill,

package/src/navigation/edit/deleted-navigation-warning.js

@@ -4,14 +4,19 @@
 import { Warning } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
 
 function DeletedNavigationWarning( { onCreateNew } ) {
 	return (
 		<Warning>
-			{ __( 'Navigation menu has been deleted or is unavailable. ' ) }
-			<Button onClick={ onCreateNew } variant="link">
-				{ __( 'Create a new menu?' ) }
-			</Button>
+			{ createInterpolateElement(
+				__(
+					'Navigation menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+				),
+				{
+					button: <Button onClick={ onCreateNew } variant="link" />,
+				}
+			) }
 		</Warning>
 	);
 }

package/src/navigation/edit/index.js

@@ -93,6 +93,7 @@ function Navigation( {
 	// navigation block settings.
 	hasSubmenuIndicatorSetting = true,
 	customPlaceholder: CustomPlaceholder = null,
+	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	const {
 		openSubmenusOnClick,
@@ -293,23 +294,31 @@ function Navigation( {
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
-		className: classnames( className, {
-			'items-justified-right': justifyContent === 'right',
-			'items-justified-space-between': justifyContent === 'space-between',
-			'items-justified-left': justifyContent === 'left',
-			'items-justified-center': justifyContent === 'center',
-			'is-vertical': orientation === 'vertical',
-			'no-wrap': flexWrap === 'nowrap',
-			'is-responsive': isResponsive,
-			'has-text-color': !! textColor.color || !! textColor?.class,
-			[ getColorClassName( 'color', textColor?.slug ) ]:
-				!! textColor?.slug,
-			'has-background': !! backgroundColor.color || backgroundColor.class,
-			[ getColorClassName( 'background-color', backgroundColor?.slug ) ]:
-				!! backgroundColor?.slug,
-			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
-			'block-editor-block-content-overlay': hasBlockOverlay,
-		} ),
+		className: classnames(
+			className,
+			{
+				'items-justified-right': justifyContent === 'right',
+				'items-justified-space-between':
+					justifyContent === 'space-between',
+				'items-justified-left': justifyContent === 'left',
+				'items-justified-center': justifyContent === 'center',
+				'is-vertical': orientation === 'vertical',
+				'no-wrap': flexWrap === 'nowrap',
+				'is-responsive': isResponsive,
+				'has-text-color': !! textColor.color || !! textColor?.class,
+				[ getColorClassName( 'color', textColor?.slug ) ]:
+					!! textColor?.slug,
+				'has-background':
+					!! backgroundColor.color || backgroundColor.class,
+				[ getColorClassName(
+					'background-color',
+					backgroundColor?.slug
+				) ]: !! backgroundColor?.slug,
+				[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
+				'block-editor-block-content-overlay': hasBlockOverlay,
+			},
+			layoutClassNames
+		),
 		style: {
 			color: ! textColor?.slug && textColor?.color,
 			backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,
@@ -875,7 +884,6 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
-							label={ __( 'Menu' ) }
 							hasIcon={ hasIcon }
 							icon={ icon }
 							isOpen={ isResponsiveMenuOpen }

package/src/navigation/edit/inner-blocks.js

@@ -118,6 +118,7 @@ export default function NavigationInnerBlocks( {
 					: false,
 			placeholder: showPlaceholder ? placeholder : undefined,
 			__experimentalCaptureToolbars: true,
+			__unstableDisableLayoutClassNames: true,
 		}
 	);
 

package/src/navigation/index.php

@@ -696,9 +696,22 @@ 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=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\'
+			data-wp-context=\'' . $nav_element_context . '\'
 		';
 		$open_button_directives          = '
 			data-wp-on--click="actions.core.navigation.openMenuOnClick"
@@ -714,6 +727,7 @@ 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"
 		';
@@ -723,11 +737,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	}
 
 	$responsive_container_markup = sprintf(
-		'<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>
+		'<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>
 				<div class="wp-block-navigation__responsive-close" tabindex="-1">
-					<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-dialog" %12$s>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -741,7 +755,6 @@ 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,6 +87,13 @@ 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/post-featured-image/style.scss

@@ -39,4 +39,8 @@
 			}
 		}
 	}
+
+	&:where(.alignleft, .alignright) {
+		width: 100%;
+	}
 }

package/src/post-template/style.scss

@@ -37,3 +37,23 @@
 		grid-template-columns: 1fr;
 	}
 }
+
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+	float: right;
+	margin-inline-start: 2em;
+	margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+	float: left;
+	margin-inline-start: 0;
+	margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+	margin-inline-start: auto;
+	margin-inline-end: auto;
+}

package/src/query/index.php

@@ -34,7 +34,8 @@ 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();