@wordpress/block-library 8.20.0 → 8.21.0

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 ||
@@ -134,7 +135,7 @@ store(
 							false
 						);
 					},
-					hideLightbox: async ( { context } ) => {
+					hideLightbox: async ( { context, event } ) => {
 						context.core.image.hideAnimationEnabled = true;
 						if ( context.core.image.lightboxEnabled ) {
 							// We want to wait until the close animation is completed
@@ -151,9 +152,16 @@ store(
 							}, 450 );
 
 							context.core.image.lightboxEnabled = false;
-							context.core.image.lastFocusedElement.focus( {
-								preventScroll: true,
-							} );
+
+							// We want to avoid drawing attention to the button
+							// after the lightbox closes for mouse and touch users.
+							// Note that the `event.pointerType` property returns
+							// as an empty string if a keyboard fired the event.
+							if ( event.pointerType === '' ) {
+								context.core.image.lastFocusedElement.focus( {
+									preventScroll: true,
+								} );
+							}
 						}
 					},
 					handleKeydown: ( { context, actions, event } ) => {
@@ -188,11 +196,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 +236,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 +256,7 @@ store(
 					enlargedImgSrc: ( { context } ) => {
 						return context.core.image.initialized
 							? context.core.image.imageUploadedSrc
-							: '';
+							: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
 					},
 				},
 			},
@@ -245,17 +264,14 @@ store(
 		effects: {
 			core: {
 				image: {
-					setCurrentSrc: ( { context, ref } ) => {
+					initOriginImage: ( { context, ref } ) => {
+						context.core.image.imageRef = ref;
 						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,17 @@ store(
 									focusableElements.length - 1
 								];
 
-							ref.querySelector( '.close-button' ).focus();
+							// We want to avoid drawing unnecessary attention to the close
+							// button for mouse and touch users. Note that even if opening
+							// the lightbox via keyboard, the event fired is of type
+							// `pointerEvent`, so we need to rely on the `event.pointerType`
+							// property, which returns an empty string for keyboard events.
+							if ( context.core.image.pointerType === '' ) {
+								ref.querySelector( '.close-button' ).focus();
+							}
 						}
 					},
-					setButtonStyles: ( { state, context, ref } ) => {
+					setButtonStyles: ( { context, ref } ) => {
 						const {
 							naturalWidth,
 							naturalHeight,
@@ -278,54 +301,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 +401,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 +409,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'
 	);

package/src/missing/edit.native.js

@@ -11,12 +11,7 @@ import {
 /**
  * WordPress dependencies
  */
-import {
-	requestUnsupportedBlockFallback,
-	sendActionButtonPressedAction,
-	actionButtons,
-} from '@wordpress/react-native-bridge';
-import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
@@ -25,7 +20,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { help, plugins } from '@wordpress/icons';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	UnsupportedBlockDetails,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -121,122 +119,26 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	renderSheet( blockTitle, blockName ) {
-		const {
-			getStylesFromColorScheme,
-			attributes,
-			clientId,
-			isUnsupportedBlockEditorSupported,
-			canEnableUnsupportedBlockEditor,
-			isEditableInUnsupportedBlockEditor,
-		} = this.props;
-		const infoTextStyle = getStylesFromColorScheme(
-			styles.infoText,
-			styles.infoTextDark
-		);
-		const infoTitleStyle = getStylesFromColorScheme(
-			styles.infoTitle,
-			styles.infoTitleDark
-		);
-		const infoDescriptionStyle = getStylesFromColorScheme(
-			styles.infoDescription,
-			styles.infoDescriptionDark
-		);
-		const infoSheetIconStyle = getStylesFromColorScheme(
-			styles.infoSheetIcon,
-			styles.infoSheetIconDark
-		);
-
+		const { clientId } = this.props;
+		const { showHelp } = this.state;
 		/* translators: Missing block alert title. %s: The localized block name */
 		const titleFormat = __( "'%s' is not fully-supported" );
-		const infoTitle = sprintf( titleFormat, blockTitle );
-		const missingBlockDetail = applyFilters(
+		const title = sprintf( titleFormat, blockTitle );
+		const description = applyFilters(
 			'native.missing_block_detail',
 			__( 'We are working hard to add more blocks with each release.' ),
 			blockName
 		);
-		const missingBlockActionButton = applyFilters(
-			'native.missing_block_action_button',
-			__( 'Edit using web editor' )
-		);
-
-		const actionButtonStyle = getStylesFromColorScheme(
-			styles.actionButton,
-			styles.actionButtonDark
-		);
 
 		return (
-			<BottomSheet
-				isVisible={ this.state.showHelp }
-				hideHeader
-				onClose={ this.closeSheet }
-				onModalHide={ () => {
-					if ( this.state.sendFallbackMessage ) {
-						// On iOS, onModalHide is called when the controller is still part of the hierarchy.
-						// A small delay will ensure that the controller has already been removed.
-						this.timeout = setTimeout( () => {
-							// For the Classic block, the content is kept in the `content` attribute.
-							const content =
-								blockName === 'core/freeform'
-									? attributes.content
-									: attributes.originalContent;
-							requestUnsupportedBlockFallback(
-								content,
-								clientId,
-								blockName,
-								blockTitle
-							);
-						}, 100 );
-						this.setState( { sendFallbackMessage: false } );
-					} else if ( this.state.sendButtonPressMessage ) {
-						this.timeout = setTimeout( () => {
-							sendActionButtonPressedAction(
-								actionButtons.missingBlockAlertActionButton
-							);
-						}, 100 );
-						this.setState( { sendButtonPressMessage: false } );
-					}
-				} }
-			>
-				<View style={ styles.infoContainer }>
-					<Icon
-						icon={ help }
-						color={ infoSheetIconStyle.color }
-						size={ styles.infoSheetIcon.size }
-					/>
-					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
-						{ infoTitle }
-					</Text>
-					{ isEditableInUnsupportedBlockEditor &&
-						missingBlockDetail && (
-							<Text
-								style={ [
-									infoTextStyle,
-									infoDescriptionStyle,
-								] }
-							>
-								{ missingBlockDetail }
-							</Text>
-						) }
-				</View>
-				{ ( isUnsupportedBlockEditorSupported ||
-					canEnableUnsupportedBlockEditor ) &&
-					isEditableInUnsupportedBlockEditor && (
-						<>
-							<TextControl
-								label={ missingBlockActionButton }
-								separatorType="topFullWidth"
-								onPress={ this.requestFallback }
-								labelStyle={ actionButtonStyle }
-							/>
-							<TextControl
-								label={ __( 'Dismiss' ) }
-								separatorType="topFullWidth"
-								onPress={ this.toggleSheet }
-								labelStyle={ actionButtonStyle }
-							/>
-						</>
-					) }
-			</BottomSheet>
+			<UnsupportedBlockDetails
+				clientId={ clientId }
+				showSheet={ showHelp }
+				onCloseSheet={ this.closeSheet }
+				customBlockTitle={ blockTitle }
+				title={ title }
+				description={ description }
+			/>
 		);
 	}
 

package/src/missing/style.native.scss

@@ -1,13 +1,3 @@
-/** @format */
-.content {
-	padding-top: 8;
-	padding-bottom: 0;
-	padding-left: 24;
-	padding-right: 24;
-	align-items: center;
-	justify-content: space-evenly;
-}
-
 .helpIconContainer {
 	position: absolute;
 	top: 0;
@@ -20,12 +10,6 @@
 	align-items: flex-end;
 }
 
-.infoContainer {
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-}
-
 .infoIcon {
 	size: 36;
 	height: 36;
@@ -38,49 +22,6 @@
 	color: $dark-tertiary;
 }
 
-.infoSheetIcon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $gray;
-}
-
-.infoSheetIconDark {
-	color: $gray-20;
-}
-
-.infoText {
-	text-align: center;
-	color: $gray-dark;
-}
-
-.infoTextDark {
-	color: $white;
-}
-
-.infoTitle {
-	padding-top: 8;
-	padding-bottom: 12;
-	font-size: 20;
-	font-weight: bold;
-	color: $gray-dark;
-}
-
-.infoTitleDark {
-	color: $white;
-}
-
-.infoDescription {
-	padding-bottom: 24;
-	font-size: 16;
-	color: $gray-darken-20;
-}
-
-.infoDescriptionDark {
-	color: $gray-20;
-}
-
 .unsupportedBlock {
 	height: 142;
 	background-color: #e0e0e0; // $light-dim
@@ -136,11 +77,3 @@
 .unsupportedBlockSubtitleDark {
 	color: $gray-20;
 }
-
-.actionButton {
-	color: $blue-50;
-}
-
-.actionButtonDark {
-	color: $blue-30;
-}