Merge branch 'WordPress:trunk' into feature/prefetch-lightbox-images

Author: Takshil-Kunadia

.github/workflows/unit-test.yml

@@ -211,7 +211,7 @@ jobs:
             # dependency versions are installed and cached.
             ##
             - name: Set up PHP
-              uses: shivammathur/setup-php@27853eb8b46dc01c33bf9fef67d98df2683c3be2 # v2.34.0
+              uses: shivammathur/setup-php@0f7f1d08e3e32076e51cae65eb0b0c871405b16e # v2.34.1
               with:
                   php-version: '${{ matrix.php }}'
                   ini-file: development
@@ -311,7 +311,7 @@ jobs:
                   persist-credentials: false
 
             - name: Set up PHP
-              uses: shivammathur/setup-php@27853eb8b46dc01c33bf9fef67d98df2683c3be2 # v2.34.0
+              uses: shivammathur/setup-php@0f7f1d08e3e32076e51cae65eb0b0c871405b16e # v2.34.1
               with:
                   php-version: '7.4'
                   coverage: none

docs/reference-guides/block-api/block-transforms.md

@@ -271,7 +271,7 @@ A transformation of type `shortcode` is an object that takes the following param
 -   **type** _(string)_: the value `shortcode`.
 -   **tag** _(string|array)_: the shortcode tag or list of shortcode aliases this transform can work with.
 -   **transform** _(function, optional)_: a callback that receives the shortcode attributes as the first argument and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as the second. It should return a block object or an array of block objects. When this parameter is defined, it will take precedence over the `attributes` parameter.
--   **attributes** _(object, optional)_: object representing where the block attributes should be sourced from, according to the attributes shape defined by the [block configuration object](./block-registration.md). If a particular attribute contains a `shortcode` key, it should be a function that receives the shortcode attributes as the first arguments and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as second, and returns a value for the attribute that will be sourced in the block's comment.
+-   **attributes** _(object, optional)_: object representing where the block attributes should be sourced from, according to the attributes shape defined by the [block configuration object](/docs/reference-guides/block-api/block-registration.md). If a particular attribute contains a `shortcode` key, it should be a function that receives the shortcode attributes as the first arguments and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as second, and returns a value for the attribute that will be sourced in the block's comment.
 -   **isMatch** _(function, optional)_: a callback that receives the shortcode attributes per the [Shortcode API](https://codex.wordpress.org/Shortcode_API) and should return a boolean. Returning `false` from this function will prevent the shortcode to be transformed into this block.
 -   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 

docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md

@@ -175,7 +175,7 @@ store( 'myFruitPlugin', {
 
 The derived state, regardless of whether it derives from the global state, local context, or both, can also be processed on the server by the Server Directive Processing.
 
-_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+_Please, visit the [Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
 
 ### Derived state that can be defined statically
 

docs/reference-guides/interactivity-api/core-concepts/using-typescript.md

@@ -269,7 +269,7 @@ That's it! Now you can access the context properties with the correct types.
 
 The derived state is data that is calculated based on the global state or local context. In the client store definition, it is defined using a getter in the `state` object.
 
-_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+_Please, visit the [Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
 
 Following our previous example, let's create a derived state that is the double of our counter.
 
@@ -471,39 +471,84 @@ type Store = {
 };
 ```
 
-There's something to keep in mind when when using asynchronous actions. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.
+There's something to keep in mind when using asynchronous actions. Just like with the derived state, if an asynchronous action uses `state` within a `yield` expression (for example, by passing `state` to an async function that is then yielded) or if its return value depends on `state`, TypeScript might not be able to infer the types correctly due to a potential circular reference.
 
     ```ts
     const { state, actions } = store( 'myCounterPlugin', {
     	state: {
     		counter: 0,
     	},
     	actions: {
-    		*delayedReturn() {
-    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
-    			return state.counter; // TypeScript can't infer this return type.
+    		*delayedOperation() {
+    			// Example: state.counter is used as part of the yielded logic.
+    			yield fetchCounterData( state.counter );
+
+    			// And/or the final return value depends on state.
+    			return state.counter + 1;
     		},
     	},
     } );
     ```
 
-    In this case, just as we did with the derived state, we must manually type the return value of the generator.
+In such cases, TypeScript might issue a warning about a circular reference or default to `any`. To solve this, you need to manually type the generator function. The Interactivity API provides a helper type, `AsyncAction<ReturnType>`, for this purpose.
 
     ```ts
+    import { store, type AsyncAction } from '@wordpress/interactivity';
+
     const { state, actions } = store( 'myCounterPlugin', {
     	state: {
     		counter: 0,
     	},
     	actions: {
-    		*delayedReturn(): Generator< unknown, number, unknown > {
-    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
-    			return state.counter; // Now this is correctly inferred.
+    		*delayedOperation(): AsyncAction< number > {
+    			// Now, this doesn't cause a circular reference.
+    			yield fetchCounterData( state.counter );
+
+    			// Now, this is correctly typed.
+    			return state.counter + 1;
+    		},
+    	},
+    } );
+    ```
+
+That's it! The `AsyncAction<ReturnType>` helper is defined as `Generator<any, ReturnType, unknown>`. By using `any` for the type of values yielded by the generator, it helps break the circular reference, allowing TypeScript to correctly infer the types when `state` is involved in `yield` expressions or in the final return value. You only need to specify the final `ReturnType` of your asynchronous action.
+
+### Typing yielded values in asynchronous actions
+
+While `AsyncAction<ReturnType>` types the overall generator and its final return value, the value resolved by an individual `yield` expression within that generator might still be typed as `any`.
+
+If you need to ensure the correct type for a value that a `yield` expression resolves to (e.g., the result of a `fetch` call or another async operation), you can use the `TypeYield<T>` helper. This helper takes the type of the asynchronous function/operation being yielded (`T`) and resolves to the type of the value that the promise fulfills with.
+
+Suppose `fetchCounterData` returns a promise that resolves to an object:
+
+    ```ts
+    import { store, type AsyncAction, type TypeYield } from '@wordpress/interactivity';
+
+    // Assume this function is defined elsewhere and fetches specific data.
+    const fetchCounterData = async ( counterValue: number ): Promise< { current: number, next: number } > => {
+        // internal logic...
+    };
+
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*loadCounterData(): AsyncAction< void > {
+    			// Use TypeYield to correctly type the resolved value of the yield.
+    			const data = ( yield fetchCounterData( state.counter ) ) as TypeYield< typeof fetchCounterData >;
+
+    			// Now, `data` is correctly typed as { current: number, next: number }.
+    			console.log( data.current, data.next );
+
+    			// Update state based on the fetched data.
+    			state.counter = data.next;
     		},
     	},
     } );
     ```
 
-    That's it! Remember that the return type of a Generator is the second generic argument: `Generator< unknown, ReturnType, unknown >`.
+In this example, `( yield fetchCounterData( state.counter ) ) as TypeYield< typeof fetchCounterData >` ensures that the `data` constant is correctly typed as `{ current: number, next: number }`, matching the return type of `fetchCounterData`. This allows you to confidently access properties like `data.current` and `data.next` with type safety.
 
 ## Typing stores that are divided into multiple parts
 

lib/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * Interactivity API: Experimental full-page client-side navigation.
+ *
+ * @package    Gutenberg
+ * @subpackage Interactivity API
+ */
+
+if ( ! class_exists( 'Gutenberg_Interactivity_API_Full_Page_Navigation' ) ) {
+
+	/**
+	 * Class Gutenberg_Interactivity_API_Full_Page_Navigation.
+	 */
+	class Gutenberg_Interactivity_API_Full_Page_Navigation {
+
+		private static $instance = null;
+
+		public static function instance() {
+			if ( null === self::$instance ) {
+				self::$instance = new Gutenberg_Interactivity_API_Full_Page_Navigation();
+			}
+			return self::$instance;
+		}
+
+		public function __construct() {
+			add_action( 'wp_head', array( $this, 'buffer_start' ) );
+			add_action( 'wp_footer', array( $this, 'buffer_end' ), 8 );
+			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_script_modules' ) );
+		}
+
+		/**
+		 * Enqueues the required script modules.
+		 */
+		public function enqueue_script_modules() {
+			wp_enqueue_script_module(
+				'@wordpress/interactivity-router/full-page'
+			);
+		}
+
+		/**
+		 * Starts output buffering at the end of the 'wp_head' action, adding the
+		 * required directives for client-side navigation to the BODY tags when the
+		 * buffer is flushed.
+		 */
+		public function buffer_start() {
+			ob_start( array( $this, 'add_directives_to_body' ) );
+		}
+
+		/**
+		 * Flushes the output buffer at the end of the 'wp_footer' action.
+		 */
+		public function buffer_end() {
+			ob_end_flush();
+		}
+
+		/**
+		 * Adds client-side navigation directives to BODY tag in the passed output
+		 * buffer.
+		 *
+		 * Note: This should probably be done per site, not by default when this option
+		 * is enabled.
+		 *
+		 * @param string $buffer Passed output buffer.
+		 *
+		 * @return string The same HTML with modified BODY attributes.
+		 */
+		public function add_directives_to_body( $buffer ) {
+			$p = new WP_HTML_Tag_Processor( $buffer );
+			if ( $p->next_tag( array( 'tag_name' => 'BODY' ) ) ) {
+				$p->set_attribute( 'data-wp-interactive', true );
+				$p->set_attribute( 'data-wp-router-region', 'core/body' );
+				return $p->get_updated_html();
+			} else {
+				return $buffer;
+			}
+		}
+	}
+}

lib/experiments-page.php

@@ -187,6 +187,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-full-page-client-side-navigation',
+		__( 'Interactivity API: Full-page client-side navigation', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enables full-page client-side navigation, powered by the Interactivity API.', 'gutenberg' ),
+			'id'    => 'gutenberg-full-page-client-side-navigation',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

lib/load.php

@@ -156,3 +156,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( gutenberg_is_experiment_enabled( 'gutenberg-media-processing' ) ) {
 	require_once __DIR__ . '/experimental/media/load.php';
 }
+
+// Interactivity API full-page client-side navigation.
+if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+	require __DIR__ . '/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php';
+	Gutenberg_Interactivity_API_Full_Page_Navigation::instance();
+}

package-lock.json

@@ -251,14 +251,6 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
 		attributes: { providerNameSlug: 'reverbnation', responsive: true },
 	},
-	{
-		name: 'screencast',
-		title: getTitle( 'Screencast' ),
-		icon: embedVideoIcon,
-		description: __( 'Embed Screencast content.' ),
-		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
-		attributes: { providerNameSlug: 'screencast', responsive: true },
-	},
 	{
 		name: 'scribd',
 		title: getTitle( 'Scribd' ),

packages/block-library/src/embed/variations.js

@@ -204,6 +204,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)
 	);
+	$p->set_attribute( 'data-wp-key', $unique_image_id );
 
 	// Image.
 	$p->next_tag( 'img' );
@@ -278,12 +279,14 @@ function block_core_image_print_lightbox_overlay() {
 		<div
 			class="wp-lightbox-overlay zoom"
 			data-wp-interactive="core/image"
+			data-wp-router-region='{ "id": "core/image-overlay", "attachTo": "body" }'
+			data-wp-key="wp-lightbox-overlay"
 			data-wp-context='{}'
 			data-wp-bind--role="state.roleAttribute"
 			data-wp-bind--aria-label="state.currentImage.ariaLabel"
 			data-wp-bind--aria-modal="state.ariaModal"
 			data-wp-class--active="state.overlayEnabled"
-			data-wp-class--show-closing-animation="state.showClosingAnimation"
+			data-wp-class--show-closing-animation="state.overlayOpened"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
 			data-wp-on-async--touchstart="actions.handleTouchStart"