@wordpress/block-library 8.19.8 → 8.19.10

package/src/image/view.js

@@ -135,7 +135,7 @@ store(
 							false
 						);
 					},
-					hideLightbox: async ( { context, event } ) => {
+					hideLightbox: async ( { context } ) => {
 						context.core.image.hideAnimationEnabled = true;
 						if ( context.core.image.lightboxEnabled ) {
 							// We want to wait until the close animation is completed
@@ -149,19 +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;
-
-							// 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 } ) => {
@@ -266,6 +262,10 @@ store(
 				image: {
 					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;
@@ -282,14 +282,8 @@ store(
 									focusableElements.length - 1
 								];
 
-							// 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();
-							}
+							// Move focus to the dialog when opening it.
+							ref.focus();
 						}
 					},
 					setButtonStyles: ( { context, ref } ) => {

package/src/navigation/index.php

@@ -90,6 +90,13 @@ function block_core_navigation_add_directives_to_submenu( $w, $block_attributes
 		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
 		$w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
 		$w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
+
+		// This is a fix for Safari. Without it, Safari doesn't change the active
+		// element when the user clicks on a button. It can be removed once we add
+		// an overlay to capture the clicks, instead of relying on the focusout
+		// event.
+		$w->set_attribute( 'tabindex', '-1' );
+
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
 			$w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' );
 			$w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' );

package/src/navigation/view.js

@@ -13,10 +13,14 @@ const focusableSelectors = [
 	'[tabindex]:not([tabindex^="-"])',
 ];
 
+// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
+// when the user taps in the body. It can be removed once we add an overlay to
+// capture the clicks, instead of relying on the focusout event.
+document.addEventListener( 'click', () => {} );
+
 const openMenu = ( store, menuOpenedOn ) => {
-	const { context, ref, selectors } = store;
+	const { context, selectors } = store;
 	selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
-	context.core.navigation.previousFocus = ref;
 	if ( context.core.navigation.type === 'overlay' ) {
 		// Add a `has-modal-open` class to the <html> root.
 		document.documentElement.classList.add( 'has-modal-open' );
@@ -33,7 +37,7 @@ const closeMenu = ( store, menuClosedOn ) => {
 				window.document.activeElement
 			)
 		) {
-			context.core.navigation.previousFocus.focus();
+			context.core.navigation.previousFocus?.focus();
 		}
 		context.core.navigation.modal = null;
 		context.core.navigation.previousFocus = null;
@@ -130,6 +134,8 @@ wpStore( {
 					closeMenu( store, 'hover' );
 				},
 				openMenuOnClick( store ) {
+					const { context, ref } = store;
+					context.core.navigation.previousFocus = ref;
 					openMenu( store, 'click' );
 				},
 				closeMenuOnClick( store ) {
@@ -140,13 +146,16 @@ wpStore( {
 					openMenu( store, 'focus' );
 				},
 				toggleMenuOnClick: ( store ) => {
-					const { selectors } = store;
+					const { selectors, context, ref } = store;
+					// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
+					if ( window.document.activeElement !== ref ) ref.focus();
 					const menuOpenedBy =
 						selectors.core.navigation.menuOpenedBy( store );
 					if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 						closeMenu( store, 'click' );
 						closeMenu( store, 'focus' );
 					} else {
+						context.core.navigation.previousFocus = ref;
 						openMenu( store, 'click' );
 					}
 				},
@@ -194,11 +203,14 @@ wpStore( {
 					// event.relatedTarget === The element receiving focus (if any)
 					// When focusout is outsite the document,
 					// `window.document.activeElement` doesn't change.
+
+					// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
 					if (
-						! context.core.navigation.modal?.contains(
+						event.relatedTarget === null ||
+						( ! context.core.navigation.modal?.contains(
 							event.relatedTarget
 						) &&
-						event.target !== window.document.activeElement
+							event.target !== window.document.activeElement )
 					) {
 						closeMenu( store, 'click' );
 						closeMenu( store, 'focus' );

package/src/query/edit/enhanced-pagination-modal.js

@@ -12,10 +12,10 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContainsThirdPartyBlocks } from '../utils';
+import { useUnsupportedBlockList } from '../utils';
 
 const disableEnhancedPaginationDescription = __(
-	'Plugin blocks are not supported yet. For the enhanced pagination to work, remove the plugin block, then re-enable "Enhanced pagination" in the Query Block settings.'
+	'You have added unsupported blocks. For the enhanced pagination to work, remove them, then re-enable "Enhanced pagination" in the Query Block settings.'
 );
 
 const modalDescriptionId =
@@ -28,11 +28,11 @@ export default function EnhancedPaginationModal( {
 } ) {
 	const [ isOpen, setOpen ] = useState( false );
 
-	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
+	const unsupported = useUnsupportedBlockList( clientId );
 
 	useEffect( () => {
-		setOpen( containsThirdPartyBlocks && enhancedPagination );
-	}, [ containsThirdPartyBlocks, enhancedPagination, setOpen ] );
+		setOpen( !! unsupported.length && enhancedPagination );
+	}, [ unsupported.length, enhancedPagination, setOpen ] );
 
 	return (
 		isOpen && (

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -3,22 +3,19 @@
  */
 import { ToggleControl, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { BlockTitle } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useContainsThirdPartyBlocks } from '../../utils';
+import { useUnsupportedBlockList } from '../../utils';
 
 export default function EnhancedPaginationControl( {
 	enhancedPagination,
 	setAttributes,
 	clientId,
 } ) {
-	const enhancedPaginationNotice = __(
-		"Enhanced pagination doesn't support plugin blocks yet. If you want to enable it, you have to remove all plugin blocks from the Query Loop."
-	);
-
-	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
+	const unsupported = useUnsupportedBlockList( clientId );
 
 	return (
 		<>
@@ -28,20 +25,32 @@ export default function EnhancedPaginationControl( {
 					'Browsing between pages won’t require a full page reload.'
 				) }
 				checked={ !! enhancedPagination }
-				disabled={ containsThirdPartyBlocks }
+				disabled={ unsupported.length }
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: !! value,
 					} );
 				} }
 			/>
-			{ containsThirdPartyBlocks && (
+			{ !! unsupported.length && (
 				<Notice
 					status="warning"
 					isDismissible={ false }
 					className="wp-block-query__enhanced-pagination-notice"
 				>
-					{ enhancedPaginationNotice }
+					{ __(
+						"Enhanced pagination doesn't support the following blocks:"
+					) }
+					<ul>
+						{ unsupported.map( ( id ) => (
+							<li key={ id }>
+								<BlockTitle clientId={ id } />
+							</li>
+						) ) }
+					</ul>
+					{ __(
+						'If you want to enable it, you have to remove all unsupported blocks first.'
+					) }
 				</Notice>
 			) }
 		</>

package/src/query/utils.js

@@ -346,21 +346,28 @@ export const usePatterns = ( clientId, name ) => {
 };
 
 /**
- * Hook that returns whether the Query Loop with the given `clientId` contains
- * any third-party block.
+ * Hook that returns a list of unsupported blocks inside the Query Loop with the
+ * given `clientId`.
  *
  * @param {string} clientId The block's client ID.
- * @return {boolean} True if it contains third-party blocks.
+ * @return {string[]} List of block titles.
  */
-export const useContainsThirdPartyBlocks = ( clientId ) => {
+export const useUnsupportedBlockList = ( clientId ) => {
 	return useSelect(
 		( select ) => {
 			const { getClientIdsOfDescendants, getBlockName } =
 				select( blockEditorStore );
 
-			return getClientIdsOfDescendants( clientId ).some(
-				( descendantClientId ) =>
-					! getBlockName( descendantClientId ).startsWith( 'core/' )
+			return getClientIdsOfDescendants( clientId ).filter(
+				( descendantClientId ) => {
+					const blockName = getBlockName( descendantClientId );
+					return (
+						! blockName.startsWith( 'core/' ) ||
+						blockName === 'core/post-content' ||
+						blockName === 'core/template-part' ||
+						blockName === 'core/block'
+					);
+				}
 			);
 		},
 		[ clientId ]

package/src/term-description/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/term-description",
 	"title": "Term Description",
 	"category": "theme",