Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Feb 1, 2024

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Jan 24, 2024

Merge alongside WordPress/wporg-mu-plugins#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 WordPress/wporg-parent-2021#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.

@ryelle ryelle force-pushed the update/interactivity-api-screenshots branch from ef9a51b to 79ea588 Compare January 31, 2024 20:44
All items will be on the page, and hidden/visible based on loading state.
@ryelle ryelle force-pushed the update/interactivity-api-screenshots branch from 79ea588 to 8b0ae7e Compare January 31, 2024 20:45
@ryelle ryelle marked this pull request as ready for review January 31, 2024 20:55
Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me, and changes LGTM :shipit:

@ryelle ryelle merged commit 9cd94c9 into main Feb 1, 2024
1 check passed
@ryelle ryelle deleted the update/interactivity-api-screenshots branch February 1, 2024 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site Screenshots break with GB 17.2+ (interactivity API updates)
2 participants