@wordpress/block-library 9.9.0 → 9.11.0

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/save.js

@@ -45,6 +45,7 @@ export default function save( { attributes } ) {
 		minHeight: minHeightProp,
 		minHeightUnit,
 		tagName: Tag,
+		sizeSlug,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -95,6 +96,7 @@ export default function save( { attributes } ) {
 		'wp-block-cover__image-background',
 		id ? `wp-image-${ id }` : null,
 		{
+			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
 		}

package/src/cover/style.scss

@@ -100,6 +100,12 @@
 		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
+
+		// Reset the z-index to auto when the body has a modal open. So when the
+		// modal is inside the cover, it doesn't create a stacking context.
+		@at-root .has-modal-open & {
+			z-index: auto;
+		}
 	}
 
 	// Position: Top

package/src/cover/test/edit.js

@@ -119,9 +119,7 @@ describe( 'Cover block', () => {
 				'min-height: 100vh;'
 			);
 
-			await userEvent.click(
-				screen.getByLabelText( 'Toggle full height' )
-			);
+			await userEvent.click( screen.getByLabelText( 'Full height' ) );
 
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
 				'min-height: 100vh;'
@@ -190,7 +188,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 +200,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/file/edit.js

@@ -103,8 +103,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );
 		}
-		// Reason: This effect should only run on mount.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// This effect should only run on mount.
 	}, [] );
 
 	function onSelectFile( newMedia ) {

package/src/gallery/constants.js

@@ -1,5 +1,6 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';

package/src/gallery/edit.js

@@ -25,6 +25,7 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
+	useSettings,
 } from '@wordpress/block-editor';
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -38,6 +39,7 @@ import {
 	customLink,
 	image as imageIcon,
 	linkOff,
+	fullscreen,
 } from '@wordpress/icons';
 
 /**
@@ -55,6 +57,7 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_LIGHTBOX,
 } from './constants';
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
@@ -62,7 +65,7 @@ import useGetMedia from './use-get-media';
 import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
-const linkOptions = [
+const LINK_OPTIONS = [
 	{
 		icon: customLink,
 		label: __( 'Link images to attachment pages' ),
@@ -75,6 +78,13 @@ const linkOptions = [
 		value: LINK_DESTINATION_MEDIA,
 		noticeText: __( 'Media Files' ),
 	},
+	{
+		icon: fullscreen,
+		label: __( 'Expand on click' ),
+		value: LINK_DESTINATION_LIGHTBOX,
+		noticeText: __( 'Lightbox effect' ),
+		infoText: __( 'Scale images with a lightbox effect' ),
+	},
 	{
 		icon: linkOff,
 		label: _x( 'None', 'Media item link option' ),
@@ -107,6 +117,14 @@ export default function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
+	const [ lightboxSetting ] = useSettings( 'blocks.core/image.lightbox' );
+
+	const linkOptions = ! lightboxSetting?.allowEditing
+		? LINK_OPTIONS.filter(
+				( option ) => option.value !== LINK_DESTINATION_LIGHTBOX
+		  )
+		: LINK_OPTIONS;
+
 	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
 		attributes;
 
@@ -363,9 +381,13 @@ export default function GalleryEdit( props ) {
 			const image = block.attributes.id
 				? imageData.find( ( { id } ) => id === block.attributes.id )
 				: null;
+
 			changedAttributes[ block.clientId ] = getHrefAndDestination(
 				image,
-				value
+				value,
+				false,
+				block.attributes,
+				lightboxSetting
 			);
 		} );
 		updateBlockAttributes( blocks, changedAttributes, true );
@@ -646,6 +668,7 @@ export default function GalleryEdit( props ) {
 												onClose();
 											} }
 											role="menuitemradio"
+											info={ linkItem.infoText }
 										>
 											{ linkItem.label }
 										</MenuItem>

package/src/gallery/utils.js

@@ -7,6 +7,7 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA_WP_CORE,
 	LINK_DESTINATION_ATTACHMENT_WP_CORE,
+	LINK_DESTINATION_LIGHTBOX,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -20,13 +21,18 @@ import {
  *
  * @param {Object} image              Gallery image.
  * @param {string} galleryDestination Gallery's selected link destination.
- * @param {Object} imageDestination   Image blocks attributes.
+ * @param {Object} imageDestination   Image block link destination attribute.
+ * @param {Object} attributes         Block attributes.
+ * @param {Object} lightboxSetting    Lightbox setting.
+ *
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination(
 	image,
 	galleryDestination,
-	imageDestination
+	imageDestination,
+	attributes,
+	lightboxSetting
 ) {
 	// Gutenberg and WordPress use different constants so if image_default_link_type
 	// option is set we need to map from the WP Core values.
@@ -36,17 +42,32 @@ export function getHrefAndDestination(
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
+				lightbox: lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: false }
+					: undefined,
 			};
 		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,
 				linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT,
+				lightbox: lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: false }
+					: undefined,
+			};
+		case LINK_DESTINATION_LIGHTBOX:
+			return {
+				href: undefined,
+				lightbox: ! lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: true }
+					: undefined,
+				linkDestination: IMAGE_LINK_DESTINATION_NONE,
 			};
 		case LINK_DESTINATION_NONE:
 			return {
 				href: undefined,
 				linkDestination: IMAGE_LINK_DESTINATION_NONE,
+				lightbox: undefined,
 			};
 	}
 

package/src/group/editor.scss

@@ -10,6 +10,18 @@
 	}
 }
 
+// Reset user select, but the next rule should take precedence for nested
+// groups.
+:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group > *) {
+	user-select: initial;
+}
+
+// When we are not multi-selecting, prevent children from capturing the
+// selection, which happens when the group is flex and children inlined.
+:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group) {
+	user-select: none;
+}
+
 // Place block list appender in the same place content will appear.
 [data-type="core/group"].is-selected {
 	.block-list-appender {

package/src/html/edit.js

@@ -7,6 +7,7 @@ import {
 	BlockControls,
 	PlainText,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarButton,
@@ -14,6 +15,7 @@ import {
 	ToolbarGroup,
 	VisuallyHidden,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -27,6 +29,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 
 	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
 
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
+	}, [] );
+
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -58,7 +64,7 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			{ isPreview || isDisabled ? (
+			{ isPreview || isPreviewMode || isDisabled ? (
 				<>
 					<Preview
 						content={ attributes.content }

package/src/html/preview.js

@@ -23,14 +23,15 @@ const DEFAULT_STYLES = `
 
 export default function HTMLEditPreview( { content, isSelected } ) {
 	const settingStyles = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().styles
+		( select ) => select( blockEditorStore ).getSettings().styles,
+		[]
 	);
 
 	const styles = useMemo(
 		() => [
 			DEFAULT_STYLES,
 			...transformStyles(
-				settingStyles.filter( ( style ) => style.css )
+				( settingStyles ?? [] ).filter( ( style ) => style.css )
 			),
 		],
 		[ settingStyles ]

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/image/style.scss

@@ -9,6 +9,7 @@
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
+		width: fit-content;
 
 		@media (prefers-reduced-motion: no-preference) {
 			&.hide {

package/src/latest-posts/edit.js

@@ -155,15 +155,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	// If a user clicks to a link prevent redirection and show a warning.
-	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
-	let noticeId;
+	const { createWarningNotice } = useDispatch( noticeStore );
 	const showRedirectionPreventedNotice = ( event ) => {
 		event.preventDefault();
-		// Remove previous warning if any, to show one at a time per block.
-		removeNotice( noticeId );
-		noticeId = `block-library/core/latest-posts/redirection-prevented/${ instanceId }`;
 		createWarningNotice( __( 'Links are disabled in the editor.' ), {
-			id: noticeId,
+			id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
 			type: 'snackbar',
 		} );
 	};
@@ -593,7 +589,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							{ displayAuthor && currentAuthor && (
 								<div className="wp-block-latest-posts__post-author">
 									{ sprintf(
-										/* translators: byline. %s: current author. */
+										/* translators: byline. %s: author. */
 										__( 'by %s' ),
 										currentAuthor.name
 									) }

package/src/latest-posts/index.php

@@ -123,7 +123,7 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
 			$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
 
-			/* translators: byline. %s: current author. */
+			/* translators: byline. %s: author. */
 			$byline = sprintf( __( 'by %s' ), $author_display_name );
 
 			if ( ! empty( $author_display_name ) ) {

package/src/navigation/edit/index.js

@@ -73,6 +73,33 @@ import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 
+function useResponsiveMenu( navRef ) {
+	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
+		useState( false );
+
+	useEffect( () => {
+		if ( ! navRef.current ) {
+			return;
+		}
+
+		const htmlElement = navRef.current.ownerDocument.documentElement;
+
+		// Add a `has-modal-open` class to the <html> when the responsive
+		// menu is open. This reproduces the same behavior of the frontend.
+		if ( isResponsiveMenuOpen ) {
+			htmlElement.classList.add( 'has-modal-open' );
+		} else {
+			htmlElement.classList.remove( 'has-modal-open' );
+		}
+
+		return () => {
+			htmlElement?.classList.remove( 'has-modal-open' );
+		};
+	}, [ navRef, isResponsiveMenuOpen ] );
+
+	return [ isResponsiveMenuOpen, setResponsiveMenuVisibility ];
+}
+
 function ColorTools( {
 	textColor,
 	setTextColor,
@@ -284,8 +311,10 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
+	const navRef = useRef();
+
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
-		useState( false );
+		useResponsiveMenu( navRef );
 
 	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
 
@@ -367,8 +396,6 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
-	const navRef = useRef();
-
 	// The standard HTML5 tag for the block wrapper.
 	const TagName = 'nav';
 

package/src/navigation/edit/menu-inspector-controls.js

@@ -26,8 +26,8 @@ import LeafMoreMenu from './leaf-more-menu';
 import { updateAttributes } from '../../navigation-link/update-attributes';
 import { LinkUI } from '../../navigation-link/link-ui';
 
-/* translators: %s: The name of a menu. */
-const actionLabel = __( "Switch to '%s'" );
+const actionLabel =
+	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
 	'core/navigation-submenu',

package/src/navigation/edit/navigation-menu-selector.js

@@ -21,7 +21,7 @@ import useNavigationEntities from '../use-navigation-entities';
 
 function buildMenuLabel( title, id, status ) {
 	if ( ! title ) {
-		/* translators: %s is the index of the menu in the list of menus. */
+		/* translators: %s: the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
@@ -30,7 +30,7 @@ function buildMenuLabel( title, id, status ) {
 	}
 
 	return sprintf(
-		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
 		__( '%1$s (%2$s)' ),
 		decodeEntities( title ),
 		status

package/src/navigation/editor.scss

@@ -203,6 +203,7 @@ $color-control-label-height: 20px;
 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
 	background-color: $gray-900;
 	color: $white;
+	height: $button-size-small;
 
 	// This needs specificity to override an inherited padding.
 	// That source padding in turn has high specificity to protect

package/src/paragraph/edit.js

@@ -66,7 +66,7 @@ function DropCapControl( { clientId, attributes, setAttributes } ) {
 	} else if ( dropCap ) {
 		helpText = __( 'Showing large initial letter.' );
 	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
+		helpText = __( 'Show a large initial letter.' );
 	}
 
 	return (