search

WordPress / wporg-showcase-2022

The official theme of the WordPress.org showcase.
https://wordpress.org/showcase/
20 stars 5 forks source link

Site Screenshot block: Update to support latest Interactivity API #268

Closed ryelle closed 10 months ago

ryelle commented 10 months ago

Merge alongside https://github.com/WordPress/wporg-mu-plugins/pull/561, so that production has current Gutenberg version.

Update the dependencies so that we can use the viewModule block.json entry, which wp-scripts will correctly build as a module (required by the interactivity API script).

The updated wp-scripts requires a more modern node version, so I've also updated the version for this project to 20 (see https://github.com/WordPress/wporg-parent-2021/issues/122, we'll want to do this across all projects). I've pushed the package and node version updates to main, so this PR only contains the Interactivity API updates.

The changes for the Interactivity API are mostly following the changelog recommendations. The exception is the change to how the screenshots are rendered. Rather than directly manipulating the DOM, the new method uses a combination of directives and state values to show/hide the image once it's loaded. This is more in line with expected behavior from the Interactivity API.

Fixes #267.

To test

  1. Update composer packages so you have the latest Gutenberg: composer update
  2. Update node: nvm install
  3. Update yarn deps: yarn
  4. Build the theme: yarn build:theme
  5. Start the env: yarn wp-env start
  6. Click through the site, all the screenshots should show up correctly— if no local image is attached, there should be a loading spinner, and then load in the mshots image.