Merge pull request #63 from WordPress/fix/update-movies-code-to-latest

Update plugin code to use latest standard version of the API.

.wp-env.json

@@ -2,7 +2,6 @@
 	"plugins": [
 		"https://downloads.wordpress.org/plugin/gutenberg.latest-stable.zip",
 		"https://downloads.wordpress.org/plugin/wordpress-importer.latest-stable.zip",
-		"https://github.com/WordPress/block-interactivity-experiments/releases/latest/download/block-interactivity-experiments.zip",
 		"."
 	],
 	"themes": ["./wp-movies-theme"],

README.md

@@ -2,76 +2,74 @@
 
 🎥 Live demo: [wpmovies.dev](https://wpmovies.dev)
 
-
 https://user-images.githubusercontent.com/5417266/228688653-4af8bbae-0360-468e-a662-1a3998e62cb6.mp4
 
-## WARNING - CODE IS CURRENTLY BROKEN (see below, Setup)
-
 ## What is this?
 
-This is a demo plugin which shows the features of the [Interactivity API](https://github.com/WordPress/block-interactivity-experiments) for
-WordPress proposed in [this post in Make WordPress Core blog](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/).
+This is a demo plugin which shows the features of the [Interactivity API](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/).
 
 The plugin is split into:
 
--   `/src/blocks/interactive` - **Start here to understand how to build interactive blocks with the
-    Interactivity API**. The folder contains all the custom interactive blocks used in the
-    demo.
-
--   `/lib` - The code that contains the runtime and internals of the Interactivity
-    API and the configuration needed to run the demo.
+-   `/src/blocks/interactive` - **Start here to understand how to build
+    interactive blocks with the Interactivity API**. The folder contains all the
+    custom interactive blocks used in the demo.
 
 -   `/wp-movies-theme` - The custom theme used in the demo. Contains some custom
     styling and the templates for the header & footer as well as the movie &
     actors pages.
 
+-   `/lib` - Helpers and support code for this demo. It's not relevant for
+    understanding the Interactivity API.
+
 ## When will I be able to use the Interactivity API?
 
-The [Interactivity API](https://github.com/WordPress/block-interactivity-experiments) is an **experimental feature** and not ready for adoption yet.
-It is under active development and its final public API is **very likely going to change before an official release**.
+The Interactivity API is [available in WordPress 6.5](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/).
 
 ## Setup
 
-> ⚠️ **WARNING**: These instructions don't work anymore because there's a conflict between the Interactivity API shipped in the Block Interactivity Experiments plugin and the Interactivity API shipped now in Gutenberg. We'll migrate this repo to use only Gutenberg, but in the meantime, please use this [Getting Started guide](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md) if you want to test the Interactivity API. If you have questions, you can open a discussion in the [Interactivity API category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) of GitHub.
-
 1. Install the required plugins:
 
-   - If you use [`wp-env`]([url](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/)), run `npx wp-env start` to install the plugins automatically and run a local WP instance.
-
-   - Otherwise, install the following plugins:
+    - If you use [`wp-env`](<[url](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/)>), run `npx wp-env start` to install the plugins automatically and run a local WP instance.
 
-     - [Gutenberg](https://github.com/WordPress/gutenberg/releases/latest/download/gutenberg.zip)
+    - Otherwise, install the following plugins:
 
-     - [Block Interactivity Experiments](https://github.com/WordPress/block-interactivity-experiments/releases/latest/download/block-interactivity-experiments.zip). This one requires Gutenberg to work.
+        - [Gutenberg](https://github.com/WordPress/gutenberg/releases/latest/download/gutenberg.zip)
 
-     - [Movies Demo Plugin](https://github.com/WordPress/wp-movies-demo/releases/latest/download/wp-movies-plugin.zip). This one requires the Block Interactivity Experiments to work.
+        - [Movies Demo
+          Plugin](https://github.com/WordPress/wp-movies-demo/releases/latest/download/wp-movies-plugin.zip)
+          (this repo)
 
+2. Install the dependencies and build the plugin:
 
-2.  Install the dependencies and build the plugin:
-
     ```sh
     npm install && composer install
     npm run build
     ```
-    
+
     If you plan on tinkering with the frontend code, start the webpack
-    server which automatically rebuild the files when you make any changes:
-    
-    ```
+    server which automatically rebuilds the files when you make any changes:
+
+    ```sh
     npm start
     ```
 
-3. Install the theme:
+3. Install & activate the theme:
 
     You need to install and activate the [Movies Demo
-    Theme](https://github.com/WordPress/wp-movies-demo/releases/latest/download/wp-movies-theme.zip).
-    Again, if you are using `wp-env`, it is already installed by default and you
+    Theme](https://github.com/WordPress/wp-movies-demo/releases/latest/download/wp-movies-theme.zip)
+    (`/wp-movies-theme` in this repo). If you are using `wp-env`, it is already installed by default and you
     just have to activate it. You can run:
 
     ```sh
       npx wp-env run cli "wp theme activate wp-movies-theme"
     ```
 
+> [!NOTE]  
+> When running `wp-env` commands like the one above, it is assumed that the
+> Docker container is called `cli` on your local machine. If you had
+> previously used `wp-env` to run other WordPress sites, this name might be
+> different, e.g. `cli-1` in which case the full command would be `npx wp-env run cli-1 "wp theme activate wp-movies-theme"`.
+
 4. Add the movie and actor data to the WordPress database:
 
     You can import the data manually:
@@ -101,16 +99,15 @@ It is under active development and its final public API is **very likely going t
     npx wp-env run cli "wp rewrite structure '/%postname%/'"
     ```
 
-6. Change settings to show `8` posts and RSS items per page in **Settings > Reading**
-7. Enable the **Client Side Navigations** in the **Settings > WP Directives**.
+6. Enable the **Full client-side navigation** in the **Gutenberg > Experiments**.
 
 ## Things to try
 
 ### Client-side Navigations and pagination
 
 When enabled, the lists of movies and actors will paginate without doing a full
 page refresh. You can enable this behavior in your WordPress admin page in
-**Settings > WP Directives**. Click around to the next/previous
+**Gutenberg > Experiments**. Click around to the next/previous
 page of the movies or actors. You the list is loaded without a delay. This is
 because the HTML for that page is prefetched ahead of time, and only the
 nodes that are different between the current page and the next page are updated.

composer.json

@@ -22,7 +22,8 @@
 		},
 		"allow-plugins": {
 			"dealerdirect/phpcodesniffer-composer-installer": true,
-			"composer/installers": true
+			"composer/installers": true,
+			"php-http/discovery": true
 		}
 	},
 	"require-dev": {