@wordpress/block-library 8.22.0 → 8.24.0

package/src/post-featured-image/editor.scss

@@ -96,6 +96,25 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	// When the Post Featured Image block is linked,
+	// it's wrapped with a disabled <a /> tag.
+	// Restore cursor style so it doesn't appear 'clickable'.
+	> a {
+		cursor: default;
+	}
+
+	// When the Post Featured Image block is linked,
+	// and wrapped with a disabled <a /> tag
+	// ensure that the placeholder items are visible when selected.
+	&.is-selected .components-placeholder.has-illustration {
+		.components-button,
+		.components-placeholder__instructions,
+		.components-placeholder__label {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
 }
 
 div[data-type="core/post-featured-image"] {

package/src/post-template/block.json

@@ -10,7 +10,6 @@
 	"usesContext": [
 		"queryId",
 		"query",
-		"queryContext",
 		"displayLayout",
 		"templateSlug",
 		"previewPostType",

package/src/post-template/edit.js

@@ -96,7 +96,6 @@ export default function PostTemplateEdit( {
 			// REST API or be handled by custom REST filters like `rest_{$this->post_type}_query`.
 			...restQueryArgs
 		} = {},
-		queryContext = [ { page: 1 } ],
 		templateSlug,
 		previewPostType,
 	},
@@ -104,8 +103,6 @@ export default function PostTemplateEdit( {
 	__unstableLayoutClassNames,
 } ) {
 	const { type: layoutType, columnCount = 3 } = layout || {};
-
-	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -126,7 +123,7 @@ export default function PostTemplateEdit( {
 					slug: templateSlug.replace( 'category-', '' ),
 				} );
 			const query = {
-				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
+				offset: offset || 0,
 				order,
 				orderby: orderBy,
 			};
@@ -194,7 +191,6 @@ export default function PostTemplateEdit( {
 		},
 		[
 			perPage,
-			page,
 			offset,
 			order,
 			orderBy,

package/src/post-terms/edit.js

@@ -97,7 +97,6 @@ export default function PostTermsEdit( {
 					<RichText
 						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__prefix"
-						multiline={ false }
 						aria-label={ __( 'Prefix' ) }
 						placeholder={ __( 'Prefix' ) + ' ' }
 						value={ prefix }
@@ -141,7 +140,6 @@ export default function PostTermsEdit( {
 					<RichText
 						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__suffix"
-						multiline={ false }
 						aria-label={ __( 'Suffix' ) }
 						placeholder={ ' ' + __( 'Suffix' ) }
 						value={ suffix }

package/src/preformatted/transforms.js

@@ -34,10 +34,7 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				createBlock( 'core/paragraph', {
-					...attributes,
-					content: attributes.content.replace( /\n/g, '<br>' ),
-				} ),
+				createBlock( 'core/paragraph', attributes ),
 		},
 		{
 			type: 'block',

package/src/query/edit/query-content.js

@@ -131,6 +131,7 @@ export default function QueryContent( {
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },

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
 				)
@@ -44,38 +40,51 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$block->block_type->supports['interactivity'] = true;
 
 			// Add a div to announce messages using `aria-live`.
-			$last_div_position = strripos( $content, '</div>' );
+			$html_tag = 'div';
+			if ( ! empty( $attributes['tagName'] ) ) {
+				$html_tag = esc_attr( $attributes['tagName'] );
+			}
+			$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
 			$content           = substr_replace(
 				$content,
 				'<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_div_position,
+				$last_tag_position,
 				0
 			);
 		}
 	}
 
-	$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 ) );
+			}
 		}
 	}
 
@@ -127,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' );
 

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/quote/block.json

@@ -54,6 +54,12 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"layout": {
+			"allowEditing": false
+		},
+		"spacing": {
+			"blockGap": true
 		}
 	},
 	"styles": [

package/src/quote/style.scss

@@ -18,5 +18,9 @@
 			font-size: 1.125em;
 			text-align: right;
 		}
+
+	}
+	> cite {
+		display: block;
 	}
 }

package/src/read-more/style.scss

@@ -1,7 +1,7 @@
 .wp-block-read-more {
 	display: block;
 	width: fit-content;
-	&:not([style*="text-decoration"]) {
+	&:where(:not([style*="text-decoration"])) {
 		text-decoration: none;
 
 		&:focus,

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.