@wordpress/block-library 8.23.0 → 8.24.0

package/src/query/view.js

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { store, navigate, prefetch } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	navigate,
+	prefetch,
+} from '@wordpress/interactivity';
 
 const isValidLink = ( ref ) =>
 	ref &&
@@ -18,83 +24,70 @@ const isValidEvent = ( event ) =>
 	! event.shiftKey &&
 	! event.defaultPrevented;
 
-store( {
-	selectors: {
-		core: {
-			query: {
-				startAnimation: ( { context } ) =>
-					context.core.query.animation === 'start',
-				finishAnimation: ( { context } ) =>
-					context.core.query.animation === 'finish',
-			},
+store( 'core/query', {
+	state: {
+		get startAnimation() {
+			return getContext().animation === 'start';
+		},
+		get finishAnimation() {
+			return getContext().animation === 'finish';
 		},
 	},
 	actions: {
-		core: {
-			query: {
-				navigate: async ( { event, ref, context } ) => {
-					const isDisabled = ref.closest( '[data-wp-navigation-id]' )
-						?.dataset.wpNavigationDisabled;
+		*navigate( event ) {
+			const ctx = getContext();
+			const { ref } = getElement();
+			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
+				.wpNavigationDisabled;
 
-					if (
-						isValidLink( ref ) &&
-						isValidEvent( event ) &&
-						! isDisabled
-					) {
-						event.preventDefault();
+			if ( isValidLink( ref ) && isValidEvent( event ) && ! isDisabled ) {
+				event.preventDefault();
 
-						const id = ref.closest( '[data-wp-navigation-id]' )
-							.dataset.wpNavigationId;
+				const id = ref.closest( '[data-wp-navigation-id]' ).dataset
+					.wpNavigationId;
 
-						// Don't announce the navigation immediately, wait 400 ms.
-						const timeout = setTimeout( () => {
-							context.core.query.message =
-								context.core.query.loadingText;
-							context.core.query.animation = 'start';
-						}, 400 );
+				// Don't announce the navigation immediately, wait 400 ms.
+				const timeout = setTimeout( () => {
+					ctx.message = ctx.loadingText;
+					ctx.animation = 'start';
+				}, 400 );
 
-						await navigate( ref.href );
+				yield navigate( ref.href );
 
-						// Dismiss loading message if it hasn't been added yet.
-						clearTimeout( timeout );
+				// Dismiss loading message if it hasn't been added yet.
+				clearTimeout( timeout );
 
-						// Announce that the page has been loaded. If the message is the
-						// same, we use a no-break space similar to the @wordpress/a11y
-						// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
-						context.core.query.message =
-							context.core.query.loadedText +
-							( context.core.query.message ===
-							context.core.query.loadedText
-								? '\u00A0'
-								: '' );
+				// Announce that the page has been loaded. If the message is the
+				// same, we use a no-break space similar to the @wordpress/a11y
+				// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
+				ctx.message =
+					ctx.loadedText +
+					( ctx.message === ctx.loadedText ? '\u00A0' : '' );
 
-						context.core.query.animation = 'finish';
-						context.core.query.url = ref.href;
+				ctx.animation = 'finish';
+				ctx.url = ref.href;
 
-						// Focus the first anchor of the Query block.
-						const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
-						document.querySelector( firstAnchor )?.focus();
-					}
-				},
-				prefetch: async ( { ref } ) => {
-					const isDisabled = ref.closest( '[data-wp-navigation-id]' )
-						?.dataset.wpNavigationDisabled;
-					if ( isValidLink( ref ) && ! isDisabled ) {
-						await prefetch( ref.href );
-					}
-				},
-			},
+				// Focus the first anchor of the Query block.
+				const firstAnchor = `[data-wp-navigation-id=${ id }] .wp-block-post-template a[href]`;
+				document.querySelector( firstAnchor )?.focus();
+			}
+		},
+		*prefetch() {
+			const { ref } = getElement();
+			const isDisabled = ref.closest( '[data-wp-navigation-id]' )?.dataset
+				.wpNavigationDisabled;
+			if ( isValidLink( ref ) && ! isDisabled ) {
+				yield prefetch( ref.href );
+			}
 		},
 	},
-	effects: {
-		core: {
-			query: {
-				prefetch: async ( { ref, context } ) => {
-					if ( context.core.query.url && isValidLink( ref ) ) {
-						await prefetch( ref.href );
-					}
-				},
-			},
+	callbacks: {
+		*prefetch() {
+			const { url } = getContext();
+			const { ref } = getElement();
+			if ( url && isValidLink( ref ) ) {
+				yield prefetch( ref.href );
+			}
 		},
 	},
 } );

package/src/query-pagination-next/index.php

@@ -72,9 +72,9 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 			)
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
-			$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
-			$p->set_attribute( 'data-wp-on--mouseenter', 'actions.core.query.prefetch' );
-			$p->set_attribute( 'data-wp-effect', 'effects.core.query.prefetch' );
+			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}
 	}

package/src/query-pagination-numbers/index.php

@@ -98,7 +98,7 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 				'class_name' => 'page-numbers',
 			)
 		) ) {
-			$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
+			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
 		}
 		$content = $p->get_updated_html();
 	}

package/src/query-pagination-previous/index.php

@@ -60,9 +60,9 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 			)
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
-			$p->set_attribute( 'data-wp-on--click', 'actions.core.query.navigate' );
-			$p->set_attribute( 'data-wp-on--mouseenter', 'actions.core.query.prefetch' );
-			$p->set_attribute( 'data-wp-effect', 'effects.core.query.prefetch' );
+			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}
 	}

package/src/search/index.php

@@ -80,25 +80,35 @@ function render_block_core_search( $attributes, $content, $block ) {
 
 		$is_expandable_searchfield = 'button-only' === $button_position && 'expand-searchfield' === $button_behavior;
 		if ( $is_expandable_searchfield ) {
-			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.core.search.isSearchInputVisible' );
-			$input->set_attribute( 'data-wp-bind--tabindex', 'selectors.core.search.tabindex' );
+			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
+			$input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
 			// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
 			$input->set_attribute( 'aria-hidden', 'true' );
 			$input->set_attribute( 'tabindex', '-1' );
 		}
 
-		// If the script already exists, there is no point in removing it from viewScript.
-		$view_js_file = 'wp-block-search-view';
-		if ( ! wp_script_is( $view_js_file ) ) {
-			$script_handles = $block->block_type->view_script_handles;
+		$is_gutenberg_plugin = defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN;
+		$script_handles      = $block->block_type->view_script_handles;
+		$view_js_file        = 'wp-block-search-view';
 
-			// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-			if ( ! $is_expandable_searchfield && in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		if ( $is_gutenberg_plugin ) {
+			if ( $is_expandable_searchfield ) {
+				gutenberg_enqueue_module( '@wordpress/block-library/search-block' );
 			}
-			// If the script is needed, but it was previously removed, add it again.
-			if ( $is_expandable_searchfield && ! in_array( $view_js_file, $script_handles, true ) ) {
-				$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+			// Remove the view script because we are using the module.
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		} else {
+			// If the script already exists, there is no point in removing it from viewScript.
+			if ( ! wp_script_is( $view_js_file ) ) {
+
+				// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+				if ( ! $is_expandable_searchfield && in_array( $view_js_file, $script_handles, true ) ) {
+					$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+				}
+				// If the script is needed, but it was previously removed, add it again.
+				if ( $is_expandable_searchfield && ! in_array( $view_js_file, $script_handles, true ) ) {
+					$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+				}
 			}
 		}
 	}
@@ -145,11 +155,11 @@ function render_block_core_search( $attributes, $content, $block ) {
 		if ( $button->next_tag() ) {
 			$button->add_class( implode( ' ', $button_classes ) );
 			if ( 'expand-searchfield' === $attributes['buttonBehavior'] && 'button-only' === $attributes['buttonPosition'] ) {
-				$button->set_attribute( 'data-wp-bind--aria-label', 'selectors.core.search.ariaLabel' );
-				$button->set_attribute( 'data-wp-bind--aria-controls', 'selectors.core.search.ariaControls' );
-				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.core.search.isSearchInputVisible' );
-				$button->set_attribute( 'data-wp-bind--type', 'selectors.core.search.type' );
-				$button->set_attribute( 'data-wp-on--click', 'actions.core.search.openSearchInput' );
+				$button->set_attribute( 'data-wp-bind--aria-label', 'state.ariaLabel' );
+				$button->set_attribute( 'data-wp-bind--aria-controls', 'state.ariaControls' );
+				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.isSearchInputVisible' );
+				$button->set_attribute( 'data-wp-bind--type', 'state.type' );
+				$button->set_attribute( 'data-wp-on--click', 'actions.openSearchInput' );
 				// Adding these attributes manually is needed until the Interactivity API SSR logic is added to core.
 				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
 				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
@@ -176,11 +186,11 @@ function render_block_core_search( $attributes, $content, $block ) {
 		$aria_label_expanded  = __( 'Submit Search' );
 		$aria_label_collapsed = __( 'Expand search field' );
 		$form_directives      = '
-			data-wp-interactive
-			data-wp-context=\'{ "core": { "search": { "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '", "ariaLabelExpanded": "' . $aria_label_expanded . '", "ariaLabelCollapsed": "' . $aria_label_collapsed . '" } } }\'
-			data-wp-class--wp-block-search__searchfield-hidden="!context.core.search.isSearchInputVisible"
-			data-wp-on--keydown="actions.core.search.handleSearchKeydown"
-			data-wp-on--focusout="actions.core.search.handleSearchFocusout"
+			data-wp-interactive=\'{ "namespace": "core/search" }\'
+			data-wp-context=\'{ "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '", "ariaLabelExpanded": "' . $aria_label_expanded . '", "ariaLabelCollapsed": "' . $aria_label_collapsed . '" }\'
+			data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
+			data-wp-on--keydown="actions.handleSearchKeydown"
+			data-wp-on--focusout="actions.handleSearchFocusout"
 		';
 	}
 
@@ -203,27 +213,17 @@ function register_block_core_search() {
 			'render_callback' => 'render_block_core_search',
 		)
 	);
-}
-add_action( 'init', 'register_block_core_search' );
 
-/**
- * Ensure that the view script has the `wp-interactivity` dependency.
- *
- * @since 6.4.0
- *
- * @global WP_Scripts $wp_scripts
- */
-function block_core_search_ensure_interactivity_dependency() {
-	global $wp_scripts;
-	if (
-		isset( $wp_scripts->registered['wp-block-search-view'] ) &&
-		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-search-view']->deps, true )
-	) {
-		$wp_scripts->registered['wp-block-search-view']->deps[] = 'wp-interactivity';
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		gutenberg_register_module(
+			'@wordpress/block-library/search-block',
+			gutenberg_url( '/build/interactivity/search.min.js' ),
+			array( '@wordpress/interactivity' ),
+			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+		);
 	}
 }
-
-add_action( 'wp_print_scripts', 'block_core_search_ensure_interactivity_dependency' );
+add_action( 'init', 'register_block_core_search' );
 
 /**
  * Builds the correct top level classnames for the 'core/search' block.

package/src/search/view.js

@@ -1,73 +1,68 @@
 /**
  * WordPress dependencies
  */
-import { store as wpStore } from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
-wpStore( {
-	selectors: {
-		core: {
-			search: {
-				ariaLabel: ( { context } ) => {
-					const { ariaLabelCollapsed, ariaLabelExpanded } =
-						context.core.search;
-					return context.core.search.isSearchInputVisible
-						? ariaLabelExpanded
-						: ariaLabelCollapsed;
-				},
-				ariaControls: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? null
-						: context.core.search.inputId;
-				},
-				type: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? 'submit'
-						: 'button';
-				},
-				tabindex: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? '0'
-						: '-1';
-				},
-			},
+const { actions } = store( 'core/search', {
+	state: {
+		get ariaLabel() {
+			const {
+				isSearchInputVisible,
+				ariaLabelCollapsed,
+				ariaLabelExpanded,
+			} = getContext();
+			return isSearchInputVisible
+				? ariaLabelExpanded
+				: ariaLabelCollapsed;
+		},
+		get ariaControls() {
+			const { isSearchInputVisible, inputId } = getContext();
+			return isSearchInputVisible ? null : inputId;
+		},
+		get type() {
+			const { isSearchInputVisible } = getContext();
+			return isSearchInputVisible ? 'submit' : 'button';
+		},
+		get tabindex() {
+			const { isSearchInputVisible } = getContext();
+			return isSearchInputVisible ? '0' : '-1';
 		},
 	},
 	actions: {
-		core: {
-			search: {
-				openSearchInput: ( { context, event, ref } ) => {
-					if ( ! context.core.search.isSearchInputVisible ) {
-						event.preventDefault();
-						context.core.search.isSearchInputVisible = true;
-						ref.parentElement.querySelector( 'input' ).focus();
-					}
-				},
-				closeSearchInput: ( { context } ) => {
-					context.core.search.isSearchInputVisible = false;
-				},
-				handleSearchKeydown: ( store ) => {
-					const { actions, event, ref } = store;
-					// If Escape close the menu.
-					if ( event?.key === 'Escape' ) {
-						actions.core.search.closeSearchInput( store );
-						ref.querySelector( 'button' ).focus();
-					}
-				},
-				handleSearchFocusout: ( store ) => {
-					const { actions, event, ref } = store;
-					// If focus is outside search form, and in the document, close menu
-					// event.target === The element losing focus
-					// event.relatedTarget === The element receiving focus (if any)
-					// When focusout is outside the document,
-					// `window.document.activeElement` doesn't change.
-					if (
-						! ref.contains( event.relatedTarget ) &&
-						event.target !== window.document.activeElement
-					) {
-						actions.core.search.closeSearchInput( store );
-					}
-				},
-			},
+		openSearchInput( event ) {
+			const ctx = getContext();
+			const { ref } = getElement();
+			if ( ! ctx.isSearchInputVisible ) {
+				event.preventDefault();
+				ctx.isSearchInputVisible = true;
+				ref.parentElement.querySelector( 'input' ).focus();
+			}
+		},
+		closeSearchInput() {
+			const ctx = getContext();
+			ctx.isSearchInputVisible = false;
+		},
+		handleSearchKeydown( event ) {
+			const { ref } = getElement();
+			// If Escape close the menu.
+			if ( event?.key === 'Escape' ) {
+				actions.closeSearchInput();
+				ref.querySelector( 'button' ).focus();
+			}
+		},
+		handleSearchFocusout( event ) {
+			const { ref } = getElement();
+			// If focus is outside search form, and in the document, close menu
+			// event.target === The element losing focus
+			// event.relatedTarget === The element receiving focus (if any)
+			// When focusout is outside the document,
+			// `window.document.activeElement` doesn't change.
+			if (
+				! ref.contains( event.relatedTarget ) &&
+				event.target !== window.document.activeElement
+			) {
+				actions.closeSearchInput();
+			}
 		},
 	},
 } );

package/src/utils/remove-anchor-tag.js

@@ -0,0 +1,10 @@
+/**
+ * Removes anchor tags from a string.
+ *
+ * @param {string} value The value to remove anchor tags from.
+ *
+ * @return {string} The value with anchor tags removed.
+ */
+export default function removeAnchorTag( value ) {
+	return value.replace( /<\/?a[^>]*>/g, '' );
+}

package/tsconfig.json

@@ -26,6 +26,7 @@
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../interactivity" },
 		{ "path": "../notices" },
 		{ "path": "../keycodes" },
 		{ "path": "../primitives" },