wordpress / wp-movies-demo

Demo of the Interactivity API

Interactivity API Demo - WP Movies

🎥 Live demo: wpmovies.dev

Interactivity.API.-.WP.Movies.demo.mp4

What is this?

This is a demo plugin which shows the features of the Interactivity API.

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.

• /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 is available in WordPress 6.5.

Setup

1. Install the required plugins:

   • If you use wp-env, run npx wp-env start to install the plugins automatically and run a local WP instance.

   • Otherwise, install the following plugins:

     • Gutenberg

     • Movies Demo Plugin (this repo)

2. Install the dependencies and build the plugin:

   npm install && composer install
   npm run build

   If you plan on tinkering with the frontend code, start the webpack server which automatically rebuilds the files when you make any changes:

   npm start

3. Install & activate the theme:

   You need to install and activate the Movies Demo Theme (/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:

     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:

   1. Go to Tools > Import > WordPress and click on Run Importer.
   2. Select the wp_sampledata_movies.xml file.
   3. Select the Download and import file attachments and click on the Upload file and import.
   4. Repeat the process for the wp_sampledata_actors.xml file.
   5. Repeat the process for the wp_sampledata_media.xml file. This one can take up to five minutes.

   If you are using wp-env, you can run the following commands:

     npx wp-env run cli "import wp-content/plugins/wp-movies-demo/wp_sampledata_movies.xml --authors=create"
     npx wp-env run cli "import wp-content/plugins/wp-movies-demo/wp_sampledata_media.xml  --authors=create"
     npx wp-env run cli "import wp-content/plugins/wp-movies-demo/wp_sampledata_actors.xml --authors=create"

   If you run into any problems you can run npx wp-env clean all and start this step over again.

5. Set the permalinks to use the Post name in Settings > Permalinks.

   If you are using wp-env you can just run this command:

   npx wp-env run cli "wp rewrite structure '/%postname%/'"

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 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.

Add to favourites

When you add a movie to favourites notice how the number of movie likes is preserved when navigating to another page. In addition to client-side navigations, the Interactivity API uses a smart DOM diffing algorithm. This allows the interactive state of blocks on the current page to be preserved!

Instant search

Try searching for movies or actors. The search results are rendered dynamically on the server!

Remove the Search template

Try opening the site editor and removing the "Search" template. You'll notice that the Search experience keeps working but that now the Search results look different. That's because in the absence of the Search template, the Archive template is being used. The Interactivity API is designed to work with the server-rendered markup and Full-site editing.

Play the movie trailers

When you navigate to the page for a movie, you can play its trailer. If you have the client-side navigations enabled, you'll notice that the trailer will keep playing as you keep navigating around the site!

Credits

Powered by WordPress and TMDb.

wp-movies-demo's Issues

“Your Name.” cast shows 2,404 pages of actors

Visiting https://wpmovies.dev/movies/your-name-2/ under “Cast” shows 2,404 pages, which is a lot :-)

Installing locally, I couldn't reproduce the issue, as the database is different.

I suspect it has something to do with https://wpmovies.dev/movies/your-name/, which is a different-ish movie, but the slugs generated from a title are probably the same.

Declare required plugins as required plugins

Plugins should be declared as dependencies in composer.json, not links in a readme to zip files. This would allow them to be auto-installed, eliminating at least 3 setup steps

Tracking Issue 🎨

This is a tracking issue for all the tasks that are related to the development of the WP Movies Demo that shows off the features of the Interactivity API

Done

• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/17
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/9
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/8
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/7
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/4
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/3
• Keep the Interactivity API updated with latest changes in the https://github.com/WordPress/block-hydration-experiments~: https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/12
• Add a "Movie Search" block to show off how we can load server-rendered content dynamically: https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/13
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/14
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/11
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/15
  • Make sure that the demo works fine when the client-side navigations are disabled. Currently, liking the posts does not work.

In progress

• In that same PR - Replace all the mentions of client-side transitions with client-side navigation
• https://github.com/c4rl0sbr4v0/wp-movies-demo/pull/19

To Do

• Look into making the page transitions when paginaging less jarring. Currently, there are no View Transitions like in https://wpmoviesdemo.wpcomstaging.com/. We could create custom directives that use the View Transitions API.
• Host the demo on a production environment
• Move the repository to the https://github.com/WordPress/block-hydration-experiments

Flashes of stale content and inconsistent routing

As I browse the demo site if I don't click slowly I get flashes of stale content that gets replaced several seconds later as the page updates. There are no loading or spinner type interactions during loading.

Likewise if I click on a button, say to visit a genre nothing happens until the new page is loaded, during which I can click on more buttons under the false assumption it failed or wasn't clickable. Then the new genre loads, only to be replaced momentarily with one of the pages I clicked on while I was waiting

README instructions lead to Fatal PHP Error: Cannot declare class WP_Directive_Context

When using either installation method described in the README, I get this error and the environment setup fails:

Fatal error: Cannot declare class WP_Directive_Context, because the name is already in use in /var/www/html/wp-content/plugins/block-interactivity-experiments/src/directives/class-wp-directive-context.php on line 27

Search breaks and redirects to "/" when site is served from a subdirectory

This happens on Multisite installations et al.

https://github.com/WordPress/wp-movies-demo/blob/main/src/blocks/interactive/movie-search/view.js
await navigate('/${url.search}${url.hash}') and await navigate('/') should include the actual Site URL.

Link to block interactivity repo

The plugin is required but the only link is a direct link to a zip file, there's no way to get there from this repo without copy pasting and manually editing the URL and hoping that it works.

If this repo is aimed at developers/engineers make it easy to discover and add a link to the readme

Unable to import dummy data

Hello, thank you for providing this amazing test theme. I attempted to import test data, but unfortunately, it failed.

WP version 6.5