@wordpress/block-library 8.23.0 → 8.24.0

package/src/navigation/index.php

@@ -101,11 +101,11 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		)
 	) ) {
 		// Add directives to the parent `<li>`.
-		$tags->set_attribute( 'data-wp-interactive', true );
-		$tags->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "submenuOpenedBy": {}, "type": "submenu" } } }' );
-		$tags->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
-		$tags->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' );
-		$tags->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$tags->set_attribute( 'data-wp-interactive', '{ "namespace": "core/navigation" }' );
+		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": {}, "type": "submenu" }' );
+		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
+		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on--keydown', 'actions.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
@@ -114,8 +114,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'tabindex', '-1' );
 
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
-			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.
@@ -125,8 +125,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' );
-			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' );
+			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
 		// Add directives to the submenu.
@@ -136,7 +136,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation__submenu-container',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on--focus', 'actions.core.navigation.openMenuOnFocus' );
+			$tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' );
 		}
 
 		// Iterate through subitems if exist.
@@ -426,6 +426,15 @@ function register_block_core_navigation() {
 			'render_callback' => 'render_block_core_navigation',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/navigation-block',
+			gutenberg_url( '/build/interactivity/navigation.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 
 add_action( 'init', 'register_block_core_navigation' );

package/src/navigation/view.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store as wpStore } from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',
@@ -18,205 +18,172 @@ const focusableSelectors = [
 // capture the clicks, instead of relying on the focusout event.
 document.addEventListener( 'click', () => {} );
 
-const openMenu = ( store, menuOpenedOn ) => {
-	const { context, selectors } = store;
-	selectors.core.navigation.menuOpenedBy( store )[ menuOpenedOn ] = true;
-	if ( context.core.navigation.type === 'overlay' ) {
-		// Add a `has-modal-open` class to the <html> root.
-		document.documentElement.classList.add( 'has-modal-open' );
-	}
-};
-
-const closeMenu = ( store, menuClosedOn ) => {
-	const { context, selectors } = store;
-	selectors.core.navigation.menuOpenedBy( store )[ menuClosedOn ] = false;
-	// Check if the menu is still open or not.
-	if ( ! selectors.core.navigation.isMenuOpen( store ) ) {
-		if (
-			context.core.navigation.modal?.contains(
-				window.document.activeElement
-			)
-		) {
-			context.core.navigation.previousFocus?.focus();
-		}
-		context.core.navigation.modal = null;
-		context.core.navigation.previousFocus = null;
-		if ( context.core.navigation.type === 'overlay' ) {
-			document.documentElement.classList.remove( 'has-modal-open' );
-		}
-	}
-};
-
-wpStore( {
-	effects: {
-		core: {
-			navigation: {
-				initMenu: ( store ) => {
-					const { context, selectors, ref } = store;
-					if ( selectors.core.navigation.isMenuOpen( store ) ) {
-						const focusableElements =
-							ref.querySelectorAll( focusableSelectors );
-						context.core.navigation.modal = ref;
-						context.core.navigation.firstFocusableElement =
-							focusableElements[ 0 ];
-						context.core.navigation.lastFocusableElement =
-							focusableElements[ focusableElements.length - 1 ];
-					}
-				},
-				focusFirstElement: ( store ) => {
-					const { selectors, ref } = store;
-					if ( selectors.core.navigation.isMenuOpen( store ) ) {
-						ref.querySelector(
-							'.wp-block-navigation-item > *:first-child'
-						).focus();
-					}
-				},
-			},
+const { state, actions } = store( 'core/navigation', {
+	state: {
+		get roleAttribute() {
+			const ctx = getContext();
+			return ctx.type === 'overlay' && state.isMenuOpen ? 'dialog' : null;
 		},
-	},
-	selectors: {
-		core: {
-			navigation: {
-				roleAttribute: ( store ) => {
-					const { context, selectors } = store;
-					return context.core.navigation.type === 'overlay' &&
-						selectors.core.navigation.isMenuOpen( store )
-						? 'dialog'
-						: null;
-				},
-				ariaModal: ( store ) => {
-					const { context, selectors } = store;
-					return context.core.navigation.type === 'overlay' &&
-						selectors.core.navigation.isMenuOpen( store )
-						? '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(
-						context.core.navigation[
-							context.core.navigation.type === 'overlay'
-								? 'overlayOpenedBy'
-								: 'submenuOpenedBy'
-						]
-					).filter( Boolean ).length > 0,
-				menuOpenedBy: ( { context } ) =>
-					context.core.navigation[
-						context.core.navigation.type === 'overlay'
-							? 'overlayOpenedBy'
-							: 'submenuOpenedBy'
-					],
-			},
+		get ariaModal() {
+			const ctx = getContext();
+			return ctx.type === 'overlay' && state.isMenuOpen ? 'true' : null;
+		},
+		get ariaLabel() {
+			const ctx = getContext();
+			return ctx.type === 'overlay' && state.isMenuOpen
+				? ctx.ariaLabel
+				: null;
+		},
+		get isMenuOpen() {
+			// The menu is opened if either `click`, `hover` or `focus` is true.
+			return (
+				Object.values( state.menuOpenedBy ).filter( Boolean ).length > 0
+			);
+		},
+		get menuOpenedBy() {
+			const ctx = getContext();
+			return ctx.type === 'overlay'
+				? ctx.overlayOpenedBy
+				: ctx.submenuOpenedBy;
 		},
 	},
 	actions: {
-		core: {
-			navigation: {
-				openMenuOnHover( store ) {
-					const { navigation } = store.context.core;
-					if (
-						navigation.type === 'submenu' &&
-						// Only open on hover if the overlay is closed.
-						Object.values(
-							navigation.overlayOpenedBy || {}
-						).filter( Boolean ).length === 0
-					)
-						openMenu( store, 'hover' );
-				},
-				closeMenuOnHover( store ) {
-					closeMenu( store, 'hover' );
-				},
-				openMenuOnClick( store ) {
-					const { context, ref } = store;
-					context.core.navigation.previousFocus = ref;
-					openMenu( store, 'click' );
-				},
-				closeMenuOnClick( store ) {
-					closeMenu( store, 'click' );
-					closeMenu( store, 'focus' );
-				},
-				openMenuOnFocus( store ) {
-					openMenu( store, 'focus' );
-				},
-				toggleMenuOnClick: ( 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' );
-					}
-				},
-				handleMenuKeydown: ( store ) => {
-					const { context, selectors, event } = store;
-					if (
-						selectors.core.navigation.menuOpenedBy( store ).click
-					) {
-						// If Escape close the menu.
-						if ( event?.key === 'Escape' ) {
-							closeMenu( store, 'click' );
-							closeMenu( store, 'focus' );
-							return;
-						}
-
-						// Trap focus if it is an overlay (main menu).
-						if (
-							context.core.navigation.type === 'overlay' &&
-							event.key === 'Tab'
-						) {
-							// If shift + tab it change the direction.
-							if (
-								event.shiftKey &&
-								window.document.activeElement ===
-									context.core.navigation
-										.firstFocusableElement
-							) {
-								event.preventDefault();
-								context.core.navigation.lastFocusableElement.focus();
-							} else if (
-								! event.shiftKey &&
-								window.document.activeElement ===
-									context.core.navigation.lastFocusableElement
-							) {
-								event.preventDefault();
-								context.core.navigation.firstFocusableElement.focus();
-							}
-						}
-					}
-				},
-				handleMenuFocusout: ( store ) => {
-					const { context, event } = store;
-					// If focus is outside modal, and in the document, close menu
-					// event.target === The element losing focus
-					// event.relatedTarget === The element receiving focus (if any)
-					// When focusout is outsite the document,
-					// `window.document.activeElement` doesn't change.
+		openMenuOnHover() {
+			const { type, overlayOpenedBy } = getContext();
+			if (
+				type === 'submenu' &&
+				// Only open on hover if the overlay is closed.
+				Object.values( overlayOpenedBy || {} ).filter( Boolean )
+					.length === 0
+			)
+				actions.openMenu( 'hover' );
+		},
+		closeMenuOnHover() {
+			actions.closeMenu( 'hover' );
+		},
+		openMenuOnClick() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			ctx.previousFocus = ref;
+			actions.openMenu( 'click' );
+		},
+		closeMenuOnClick() {
+			actions.closeMenu( 'click' );
+			actions.closeMenu( 'focus' );
+		},
+		openMenuOnFocus() {
+			actions.openMenu( 'focus' );
+		},
+		toggleMenuOnClick() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			// 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 } = state;
+			if ( menuOpenedBy.click || menuOpenedBy.focus ) {
+				actions.closeMenu( 'click' );
+				actions.closeMenu( 'focus' );
+			} else {
+				ctx.previousFocus = ref;
+				actions.openMenu( 'click' );
+			}
+		},
+		handleMenuKeydown( event ) {
+			const { type, firstFocusableElement, lastFocusableElement } =
+				getContext();
+			if ( state.menuOpenedBy.click ) {
+				// If Escape close the menu.
+				if ( event?.key === 'Escape' ) {
+					actions.closeMenu( 'click' );
+					actions.closeMenu( 'focus' );
+					return;
+				}
 
-					// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
+				// Trap focus if it is an overlay (main menu).
+				if ( type === 'overlay' && event.key === 'Tab' ) {
+					// If shift + tab it change the direction.
 					if (
-						event.relatedTarget === null ||
-						( ! context.core.navigation.modal?.contains(
-							event.relatedTarget
-						) &&
-							event.target !== window.document.activeElement )
+						event.shiftKey &&
+						window.document.activeElement === firstFocusableElement
 					) {
-						closeMenu( store, 'click' );
-						closeMenu( store, 'focus' );
+						event.preventDefault();
+						lastFocusableElement.focus();
+					} else if (
+						! event.shiftKey &&
+						window.document.activeElement === lastFocusableElement
+					) {
+						event.preventDefault();
+						firstFocusableElement.focus();
 					}
-				},
-			},
+				}
+			}
+		},
+		handleMenuFocusout( event ) {
+			const { modal } = getContext();
+			// If focus is outside modal, and in the document, close menu
+			// event.target === The element losing focus
+			// 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 (
+				event.relatedTarget === null ||
+				( ! modal?.contains( event.relatedTarget ) &&
+					event.target !== window.document.activeElement )
+			) {
+				actions.closeMenu( 'click' );
+				actions.closeMenu( 'focus' );
+			}
+		},
+
+		openMenu( menuOpenedOn = 'click' ) {
+			const { type } = getContext();
+			state.menuOpenedBy[ menuOpenedOn ] = true;
+			if ( type === 'overlay' ) {
+				// Add a `has-modal-open` class to the <html> root.
+				document.documentElement.classList.add( 'has-modal-open' );
+			}
+		},
+
+		closeMenu( menuClosedOn = 'click' ) {
+			const ctx = getContext();
+			state.menuOpenedBy[ menuClosedOn ] = false;
+			// Check if the menu is still open or not.
+			if ( ! state.isMenuOpen ) {
+				if ( ctx.modal?.contains( window.document.activeElement ) ) {
+					ctx.previousFocus?.focus();
+				}
+				ctx.modal = null;
+				ctx.previousFocus = null;
+				if ( ctx.type === 'overlay' ) {
+					document.documentElement.classList.remove(
+						'has-modal-open'
+					);
+				}
+			}
+		},
+	},
+	callbacks: {
+		initMenu() {
+			const ctx = getContext();
+			const { ref } = getElement();
+			if ( state.isMenuOpen ) {
+				const focusableElements =
+					ref.querySelectorAll( focusableSelectors );
+				ctx.modal = ref;
+				ctx.firstFocusableElement = focusableElements[ 0 ];
+				ctx.lastFocusableElement =
+					focusableElements[ focusableElements.length - 1 ];
+			}
+		},
+		focusFirstElement() {
+			const { ref } = getElement();
+			if ( state.isMenuOpen ) {
+				ref.querySelector(
+					'.wp-block-navigation-item > *:first-child'
+				).focus();
+			}
 		},
 	},
 } );

package/src/navigation-link/block.json

@@ -71,7 +71,8 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
-		}
+		},
+		"renaming": false
 	},
 	"editorStyle": "wp-block-navigation-link-editor",
 	"style": "wp-block-navigation-link"

package/src/paragraph/test/edit.native.js

@@ -17,11 +17,12 @@ import {
 	waitForElementToBeRemoved,
 } from 'test/helpers';
 import Clipboard from '@react-native-clipboard/clipboard';
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
 
 /**
  * WordPress dependencies
  */
-import { ENTER } from '@wordpress/keycodes';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -685,4 +686,39 @@ describe( 'Paragraph block', () => {
 		<!-- /wp:paragraph -->"
 	` );
 	} );
+
+	it( 'should focus on the previous Paragraph block when backspacing in an empty Paragraph block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, 'A quick brown fox jumps' );
+
+		await addBlock( screen, 'Paragraph' );
+		const secondParagraphBlock = getBlock( screen, 'Paragraph', {
+			rowIndex: 2,
+		} );
+		fireEvent.press( secondParagraphBlock );
+
+		// Clear mock history
+		TextInputState.focusTextInput.mockClear();
+
+		const secondParagraphTextInput =
+			within( secondParagraphBlock ).getByPlaceholderText(
+				'Start writing…'
+			);
+		fireEvent( secondParagraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( TextInputState.focusTextInput ).toHaveBeenCalled();
+	} );
 } );

package/src/pattern/edit.js

@@ -24,9 +24,11 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		[]
 	);
 
-	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-	const { setBlockEditingMode } = useDispatch( blockEditorStore );
+	const {
+		replaceBlocks,
+		setBlockEditingMode,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 	const { getBlockRootClientId, getBlockEditingMode } =
 		useSelect( blockEditorStore );
 

package/src/post-template/edit.js

@@ -123,7 +123,7 @@ export default function PostTemplateEdit( {
 					slug: templateSlug.replace( 'category-', '' ),
 				} );
 			const query = {
-				offset: perPage ? perPage + offset : 0,
+				offset: offset || 0,
 				order,
 				orderby: orderBy,
 			};

package/src/query/index.php

@@ -21,19 +21,15 @@ function render_block_core_query( $attributes, $content, $block ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
 			// Add the necessary directives.
-			$p->set_attribute( 'data-wp-interactive', true );
+			$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
 			$p->set_attribute( 'data-wp-navigation-id', 'query-' . $attributes['queryId'] );
 			// Use context to send translated strings.
 			$p->set_attribute(
 				'data-wp-context',
 				wp_json_encode(
 					array(
-						'core' => array(
-							'query' => array(
-								'loadingText' => __( 'Loading page, please wait.' ),
-								'loadedText'  => __( 'Page Loaded.' ),
-							),
-						),
+						'loadingText' => __( 'Loading page, please wait.' ),
+						'loadedText'  => __( 'Page Loaded.' ),
 					),
 					JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
 				)
@@ -54,12 +50,12 @@ function render_block_core_query( $attributes, $content, $block ) {
 				'<div
 					class="screen-reader-text"
 					aria-live="polite"
-					data-wp-text="context.core.query.message"
+					data-wp-text="context.message"
 				></div>
 				<div
 					class="wp-block-query__enhanced-pagination-animation"
-					data-wp-class--start-animation="selectors.core.query.startAnimation"
-					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
+					data-wp-class--start-animation="state.startAnimation"
+					data-wp-class--finish-animation="state.finishAnimation"
 				></div>',
 				$last_tag_position,
 				0
@@ -67,19 +63,28 @@ function render_block_core_query( $attributes, $content, $block ) {
 		}
 	}
 
-	$view_asset = 'wp-block-query-view';
-	if ( ! wp_script_is( $view_asset ) ) {
-		$script_handles = $block->block_type->view_script_handles;
-		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if (
-			( ! $attributes['enhancedPagination'] || ! isset( $attributes['queryId'] ) )
-			&& in_array( $view_asset, $script_handles, true )
-		) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+	$is_gutenberg_plugin     = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
+	$should_load_view_script = $attributes['enhancedPagination'] && isset( $attributes['queryId'] );
+	$view_asset              = 'wp-block-query-view';
+	$script_handles          = $block->block_type->view_script_handles;
+
+	if ( $is_gutenberg_plugin ) {
+		if ( $should_load_view_script ) {
+			gutenberg_enqueue_module( '@wordpress/block-library/query' );
 		}
-		// If the script is needed, but it was previously removed, add it again.
-		if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) && ! in_array( $view_asset, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
+		// Remove the view script because we are using the module.
+		$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+	} else {
+		if ( ! wp_script_is( $view_asset ) ) {
+			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+			if ( ! $should_load_view_script && in_array( $view_asset, $script_handles, true )
+			) {
+				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_asset ) );
+			}
+			// If the script is needed, but it was previously removed, add it again.
+			if ( $should_load_view_script && ! in_array( $view_asset, $script_handles, true ) ) {
+				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_asset ) );
+			}
 		}
 	}
 
@@ -131,6 +136,15 @@ function register_block_core_query() {
 			'render_callback' => 'render_block_core_query',
 		)
 	);
+
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/query',
+			'/wp-content/plugins/gutenberg/build/interactivity/query.min.js',
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
+	}
 }
 add_action( 'init', 'register_block_core_query' );