@wordpress/block-library 8.20.1 → 8.21.1-next.f8d8eceb.0

package/src/image/style.scss

@@ -154,21 +154,53 @@
 
 .wp-lightbox-container {
 	position: relative;
+	display: flex;
+	flex-direction: column;
+
+	img {
+		cursor: zoom-in;
+	}
+
+	img:hover + button {
+		opacity: 1;
+	}
 
 	button {
+		opacity: 0;
 		border: none;
-		background: none;
+		background: #000;
 		cursor: zoom-in;
-		width: 100%;
-		height: 100%;
+		width: 24px;
+		height: 24px;
 		position: absolute;
 		z-index: 100;
+		top: 10px;
+		right: 10px;
+		text-align: center;
+		padding: 0;
+		border-radius: 10%;
 
 		&:focus-visible {
 			outline: 5px auto #212121;
 			outline: 5px auto -webkit-focus-ring-color;
 			outline-offset: 5px;
 		}
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: #000;
+			border: none;
+		}
 	}
 }
 
@@ -186,11 +218,23 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 20px);
-		right: calc(env(safe-area-inset-right) + 20px);
+		top: calc(env(safe-area-inset-top) + 16px); // equivalent to $grid-unit-20
+		right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
+		min-width: 40px; // equivalent to $button-size-next-default-40px
+		min-height: 40px; // equivalent to $button-size-next-default-40px
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: none;
+			border: none;
+		}
 	}
 
 	.lightbox-image-container {

package/src/image/view.js

@@ -103,9 +103,10 @@ store(
 						context.core.image.lastFocusedElement =
 							window.document.activeElement;
 						context.core.image.scrollDelta = 0;
+						context.core.image.pointerType = event.pointerType;
 
 						context.core.image.lightboxEnabled = true;
-						setStyles( context, event );
+						setStyles( context, context.core.image.imageRef );
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -148,12 +149,15 @@ store(
 									'scroll',
 									scrollCallback
 								);
+								// If we don't delay before changing the focus,
+								// the focus ring will appear on Firefox before
+								// the image has finished animating, which looks broken.
+								context.core.image.lightboxTriggerRef.focus( {
+									preventScroll: true,
+								} );
 							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
-							context.core.image.lastFocusedElement.focus( {
-								preventScroll: true,
-							} );
 						}
 					},
 					handleKeydown: ( { context, actions, event } ) => {
@@ -188,11 +192,12 @@ store(
 							}
 						}
 					},
-					handleLoad: ( { state, context, effects, ref } ) => {
+					// This is fired just by lazily loaded
+					// images on the page, not all images.
+					handleLoad: ( { context, effects, ref } ) => {
 						context.core.image.imageLoaded = true;
 						context.core.image.imageCurrentSrc = ref.currentSrc;
 						effects.core.image.setButtonStyles( {
-							state,
 							context,
 							ref,
 						} );
@@ -227,7 +232,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 +252,7 @@ store(
 					enlargedImgSrc: ( { context } ) => {
 						return context.core.image.initialized
 							? context.core.image.imageUploadedSrc
-							: '';
+							: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
 					},
 				},
 			},
@@ -245,17 +260,18 @@ store(
 		effects: {
 			core: {
 				image: {
-					setCurrentSrc: ( { context, ref } ) => {
+					initOriginImage: ( { context, ref } ) => {
+						context.core.image.imageRef = ref;
+						context.core.image.lightboxTriggerRef =
+							ref.parentElement.querySelector(
+								'.lightbox-trigger'
+							);
 						if ( ref.complete ) {
 							context.core.image.imageLoaded = true;
 							context.core.image.imageCurrentSrc = ref.currentSrc;
 						}
 					},
 					initLightbox: async ( { context, ref } ) => {
-						context.core.image.figureRef =
-							ref.querySelector( 'figure' );
-						context.core.image.imageRef =
-							ref.querySelector( 'img' );
 						if ( context.core.image.lightboxEnabled ) {
 							const focusableElements =
 								ref.querySelectorAll( focusableSelectors );
@@ -266,10 +282,11 @@ store(
 									focusableElements.length - 1
 								];
 
-							ref.querySelector( '.close-button' ).focus();
+							// Move focus to the dialog when opening it.
+							ref.focus();
 						}
 					},
-					setButtonStyles: ( { state, context, ref } ) => {
+					setButtonStyles: ( { context, ref } ) => {
 						const {
 							naturalWidth,
 							naturalHeight,
@@ -278,54 +295,80 @@ store(
 						} = ref;
 
 						// If the image isn't loaded yet, we can't
-						// calculate how big the button should be.
+						// calculate where the button should be.
 						if ( naturalWidth === 0 || naturalHeight === 0 ) {
 							return;
 						}
 
-						// Subscribe to the window dimensions so we can
-						// recalculate the styles if the window is resized.
-						if (
-							( state.core.image.windowWidth ||
-								state.core.image.windowHeight ) &&
-							context.core.image.scaleAttr === 'contain'
-						) {
-							// In the case of an image with object-fit: contain, the
-							// size of the img element can be larger than the image itself,
-							// so we need to calculate the size of the button to match.
+						const figure = ref.parentElement;
+						const figureWidth = ref.parentElement.clientWidth;
+
+						// We need special handling for the height because
+						// a caption will cause the figure to be taller than
+						// the image, which means we need to account for that
+						// when calculating the placement of the button in the
+						// top right corner of the image.
+						let figureHeight = ref.parentElement.clientHeight;
+						const caption = figure.querySelector( 'figcaption' );
+						if ( caption ) {
+							const captionComputedStyle =
+								window.getComputedStyle( caption );
+							figureHeight =
+								figureHeight -
+								caption.offsetHeight -
+								parseFloat( captionComputedStyle.marginTop ) -
+								parseFloat( captionComputedStyle.marginBottom );
+						}
 
+						const buttonOffsetTop = figureHeight - offsetHeight;
+						const buttonOffsetRight = figureWidth - offsetWidth;
+
+						// In the case of an image with object-fit: contain, the
+						// size of the <img> element can be larger than the image itself,
+						// so we need to calculate where to place the button.
+						if ( context.core.image.scaleAttr === 'contain' ) {
 							// Natural ratio of the image.
 							const naturalRatio = naturalWidth / naturalHeight;
 							// Offset ratio of the image.
 							const offsetRatio = offsetWidth / offsetHeight;
 
-							if ( naturalRatio > offsetRatio ) {
+							if ( naturalRatio >= offsetRatio ) {
 								// If it reaches the width first, keep
-								// the width and recalculate the height.
-								context.core.image.imageButtonWidth =
-									offsetWidth;
-								const buttonHeight = offsetWidth / naturalRatio;
-								context.core.image.imageButtonHeight =
-									buttonHeight;
+								// the width and compute the height.
+								const referenceHeight =
+									offsetWidth / naturalRatio;
 								context.core.image.imageButtonTop =
-									( offsetHeight - buttonHeight ) / 2;
+									( offsetHeight - referenceHeight ) / 2 +
+									buttonOffsetTop +
+									10;
+								context.core.image.imageButtonRight =
+									buttonOffsetRight + 10;
 							} else {
 								// If it reaches the height first, keep
-								// the height and recalculate the width.
-								context.core.image.imageButtonHeight =
-									offsetHeight;
-								const buttonWidth = offsetHeight * naturalRatio;
-								context.core.image.imageButtonWidth =
-									buttonWidth;
-								context.core.image.imageButtonLeft =
-									( offsetWidth - buttonWidth ) / 2;
+								// the height and compute the width.
+								const referenceWidth =
+									offsetHeight * naturalRatio;
+								context.core.image.imageButtonTop =
+									buttonOffsetTop + 10;
+								context.core.image.imageButtonRight =
+									( offsetWidth - referenceWidth ) / 2 +
+									buttonOffsetRight +
+									10;
 							}
 						} else {
-							// In all other cases, we can trust that the size of
-							// the image is the right size for the button as well.
-
-							context.core.image.imageButtonWidth = offsetWidth;
-							context.core.image.imageButtonHeight = offsetHeight;
+							context.core.image.imageButtonTop =
+								buttonOffsetTop + 10;
+							context.core.image.imageButtonRight =
+								buttonOffsetRight + 10;
+						}
+					},
+					setStylesOnResize: ( { state, context, ref } ) => {
+						if (
+							context.core.image.lightboxEnabled &&
+							( state.core.image.windowWidth ||
+								state.core.image.windowHeight )
+						) {
+							setStyles( context, ref );
 						}
 					},
 				},
@@ -352,7 +395,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 +403,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/index.js

@@ -48,6 +48,10 @@ import * as cover from './cover';
 import * as details from './details';
 import * as embed from './embed';
 import * as file from './file';
+import * as form from './form';
+import * as formInput from './form-input';
+import * as formSubmitButton from './form-submit-button';
+import * as formSubmissionNotification from './form-submission-notification';
 import * as gallery from './gallery';
 import * as group from './group';
 import * as heading from './heading';
@@ -228,6 +232,12 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
+	if ( window?.__experimentalEnableFormBlocks ) {
+		blocks.push( form );
+		blocks.push( formInput );
+		blocks.push( formSubmitButton );
+		blocks.push( formSubmissionNotification );
+	}
 
 	// When in a WordPress context, conditionally
 	// add the classic block and TinyMCE editor

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/list-item/hooks/use-merge.js

@@ -76,6 +76,24 @@ export default function useMerge( clientId, onMerge ) {
 	}
 
 	return ( forward ) => {
+		function mergeWithNested( clientIdA, clientIdB ) {
+			registry.batch( () => {
+				// When merging a sub list item with a higher next list item, we
+				// also need to move any nested list items. Check if there's a
+				// listed list, and append its nested list items to the current
+				// list.
+				const [ nestedListClientId ] = getBlockOrder( clientIdB );
+				if ( nestedListClientId ) {
+					moveBlocksToPosition(
+						getBlockOrder( nestedListClientId ),
+						nestedListClientId,
+						getBlockRootClientId( clientIdA )
+					);
+				}
+				mergeBlocks( clientIdA, clientIdB );
+			} );
+		}
+
 		if ( forward ) {
 			const nextBlockClientId = getNextId( clientId );
 
@@ -87,14 +105,7 @@ export default function useMerge( clientId, onMerge ) {
 			if ( getParentListItemId( nextBlockClientId ) ) {
 				outdentListItem( nextBlockClientId );
 			} else {
-				registry.batch( () => {
-					moveBlocksToPosition(
-						getBlockOrder( nextBlockClientId ),
-						nextBlockClientId,
-						getPreviousBlockClientId( nextBlockClientId )
-					);
-					mergeBlocks( clientId, nextBlockClientId );
-				} );
+				mergeWithNested( clientId, nextBlockClientId );
 			}
 		} else {
 			// Merging is only done from the top level. For lowel levels, the
@@ -104,21 +115,7 @@ export default function useMerge( clientId, onMerge ) {
 				outdentListItem( clientId );
 			} else if ( previousBlockClientId ) {
 				const trailingId = getTrailingId( previousBlockClientId );
-				registry.batch( () => {
-					// When merging a list item with a previous trailing list
-					// item, we also need to move any nested list items. First,
-					// check if there's a listed list. If there's a nested list,
-					// append its nested list items to the trailing list.
-					const [ nestedListClientId ] = getBlockOrder( clientId );
-					if ( nestedListClientId ) {
-						moveBlocksToPosition(
-							getBlockOrder( nestedListClientId ),
-							nestedListClientId,
-							getBlockRootClientId( trailingId )
-						);
-					}
-					mergeBlocks( trailingId, clientId );
-				} );
+				mergeWithNested( trailingId, clientId );
 			} else {
 				onMerge( forward );
 			}

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
 		'@wordpress/block-library'
 	);