Modules API: Fix Interactivity not working on Classic Themes. #57396

cbravobernal · 2023-12-27T10:54:55Z

What?

Fixes #57370 and Automattic/wp-calypso#85638

Why?

As @t-hamano spotted in #56143 (comment). In classic themes, blocks are rendered on the_content.

If we move the import map and the enqueued modules to the footer. Lightbox is working again.
This can be a temporary workaround before moving to WordPress Core.

Testing Instructions

Add Lightbox to any image.
Check that the Lightbox is working on both Classic (Twenty Sixteen i.e.) and Block Themes (Twenty Twenty Four).

github-actions · 2023-12-27T10:56:02Z

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/experimental/modules/class-gutenberg-modules.php

sirreal

I installed twentyseventeen and was able to reproduce the issue with Gutenberg 17.3. With this PR, the lightbox works again with twentyseventeen.

sirreal · 2023-12-27T12:36:50Z

lib/experimental/modules/class-gutenberg-modules.php

+// Prints the preloaded modules in the head tag in block themes.
 add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_module_preloads' ) );


I'm not well versed in the modules code now, but it seems like this may be an issue. Won't all the module loading rely on import maps? In that case, wouldn't we need to move all the module loading (including the "preload" modules) to the footer?

Let's prevent it by moving all scripts to the footer.

sirreal

It seems safer to move all the modules to the footer 👍

I'm doing some testing locally to better understand the issue and the implications, but I think this is OK to merge now.

t-hamano · 2023-12-27T12:59:15Z

Does modulepreload have any effect even if it is loaded ~~with a footer~~ inside the body tag? I'm not familiar with module imports, but in the case of classic themes, is it better not to do the enqueue itself?

sirreal · 2023-12-27T13:08:43Z

I was able to confirm that before moving preloads to the footer, this would cause an issue with preloaded modules. If I check out f13a53a and add module preloads, I get the following errors in my browser console and interactivity is broken:

An import map is added after module script load was triggered.
Uncaught TypeError: Failed to resolve module specifier "@wordpress/interactivity". Relative references must start with either "/", "./", or "../".
Uncaught TypeError: Failed to resolve module specifier "@wordpress/interactivity". Relative references must start with either "/", "./", or "../".

sirreal · 2023-12-27T13:17:04Z

Does modulepreload have any effect even if it is loaded ~~with a footer~~ inside the body tag? I'm not familiar with module imports…

That's a good question… I suspect it depends on a lot of different things and I don't have the expertise to explore them all. This is only a hint to help performance. I would be surprised if this were harmful, at worst I think we're providing a performance hint that's irrelevant. Maybe we could skip printing preload modules altogether if they're in the footer, but that can be revisited.

@sgomes wrote the post on this, so maybe has more insight to share 🙂

but in the case of classic themes, is it better not to do the enqueue itself?

Modules still have to be enqueued, so nothing changes there regarding preload. The preload is only a hint to the browser saying "we'll need this, so fetch it so we've got it cached."

cbravobernal · 2023-12-27T13:27:43Z

Maybe we could skip printing preload modules

I added a conditional to make the preload only in block themes, where the modules are in the head. Classic themes will have worse performance, but is still a fix for an experimental feature that we can improve in future Gutenberg versions / WordPress Core implementation.

t-hamano

I confirmed that it works correctly with TwentyTwenty-One.

This theme injects a few scripts with the wp_footer hook, but the scripts related to the interactivity API are output in the expected order.

<!doctype html>
<html lang="en-US" >
<head><head>
<body>
	<!-- ... -->
	<script type="importmap">{"imports":{"@wordpress\/interactivity":"http:\/\/localhost:8888\/wp-content\/plugins\/gutenberg\/build\/interactivity\/index.min.js?ver=6.4.2"}}</script>
	<script type="module" src="http://localhost:8888/wp-content/plugins/gutenberg/build/interactivity/image.min.js?ver=6.4.2" id="@wordpress/block-library/image"></script>
	<script>document.body.classList.remove("no-js");</script>
	<script>
	if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
		document.body.classList.add( 'is-IE' );
	}
	</script>
	<script src="http://localhost:8888/wp-content/plugins/gutenberg/build/modules/importmap-polyfill.min.js" defer></script>

	<!-- ... -->
</body>
</html>

I think we can ship this approach for now and explore better approaches in the future.

This reverts commit 3edb69f.

cbravobernal · 2023-12-27T13:59:41Z

Sorry for all the changes, but, let's the browser fetch the module earlier, it doesn't need to parse the other script to find the dependency, so should give some perf improvement at best, and not really hurt at worst.

Again, it fixes the issue on the next Gutenberg release, and can be iterated in next releases.

github-actions · 2023-12-27T14:00:58Z

Flaky tests detected in f77a1e9.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7338977851
📝 Reported issues:

[Flaky Test] should be disabled when post is being saved #35641 in /test/e2e/specs/editor/various/publish-button.spec.js

t-hamano · 2023-12-27T14:24:55Z

let's the browser fetch the module earlier

I see. I confirmed that it continues to work with the classic theme 👍

cbravobernal added 2 commits December 27, 2023 11:45

Move modules scripts to footer on classic themes

52553b2

Move only required modules

f13a53a

cbravobernal added [Type] Bug An existing feature does not function as intended [Feature] Script Modules API Related to the Script Modules API that adds support for native ES modules and import maps labels Dec 27, 2023

cbravobernal self-assigned this Dec 27, 2023

cbravobernal requested a review from spacedmonkey as a code owner December 27, 2023 10:54

cbravobernal requested review from sirreal, luisherranz and t-hamano December 27, 2023 10:55

sirreal approved these changes Dec 27, 2023

View reviewed changes

sirreal reviewed Dec 27, 2023

View reviewed changes

Move also the module preloads

7c97c8e

cbravobernal requested a review from sirreal December 27, 2023 12:51

sirreal approved these changes Dec 27, 2023

View reviewed changes

Make preload only for block themes at head

3edb69f

t-hamano approved these changes Dec 27, 2023

View reviewed changes

Revert "Make preload only for block themes at head"

f77a1e9

This reverts commit 3edb69f.

cbravobernal enabled auto-merge (squash) December 27, 2023 14:25

cbravobernal merged commit 1129dcf into trunk Dec 27, 2023
55 checks passed

cbravobernal deleted the fix/import_module_maps branch December 27, 2023 14:25

github-actions bot added this to the Gutenberg 17.4 milestone Dec 27, 2023

sirreal mentioned this pull request Dec 27, 2023

The 'Expand on Click' functionality of the image block is not working on websites that use the classic theme (not the block theme). Automattic/wp-calypso#85638

Closed

luisherranz mentioned this pull request Dec 28, 2023

Interactivity API: Use modules instead of scripts in the frontend #56143

Merged

2 tasks

This was referenced Dec 28, 2023

Navigation Block: Overlay Menu toggle not working on Classic Themes #57428

Closed

File Block: PDF preview not working on Classic Themes #57419

Closed

This was referenced Jan 3, 2024

Navigation Block: Overlay Menu toggle not opening on Classic Themes Automattic/wp-calypso#85826

Closed

Navigation Block Overlay menu non-functional in Classic themes in Gutenberg 17.2+ Automattic/wp-calypso#85441

Closed

luisherranz mentioned this pull request Jan 5, 2024

Script Modules API WordPress/wordpress-develop#5818

Closed

getdave added the Needs PHP backport Needs PHP backport to Core label Jan 15, 2024

getdave mentioned this pull request Jan 18, 2024

Plugin: Synchronize PHP changes for WordPress 6.5 release #57959

Closed

draganescu mentioned this pull request Jan 22, 2024

Navigation Block Overlay non-functional in Classic Themes #57189

Closed

liviopv mentioned this pull request Jan 25, 2024

PDF Embeds Not Working on Classic Themes Automattic/wp-calypso#85244

Closed

youknowriad added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Needs PHP backport Needs PHP backport to Core labels Feb 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modules API: Fix Interactivity not working on Classic Themes. #57396

Modules API: Fix Interactivity not working on Classic Themes. #57396

cbravobernal commented Dec 27, 2023 •

edited

Loading

github-actions bot commented Dec 27, 2023

sirreal left a comment

sirreal Dec 27, 2023

cbravobernal Dec 27, 2023

sirreal left a comment

t-hamano commented Dec 27, 2023 •

edited

Loading

sirreal commented Dec 27, 2023

sirreal commented Dec 27, 2023

cbravobernal commented Dec 27, 2023

t-hamano left a comment

cbravobernal commented Dec 27, 2023

github-actions bot commented Dec 27, 2023 •

edited

Loading

t-hamano commented Dec 27, 2023

		// Prints the preloaded modules in the head tag in block themes.
		add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_module_preloads' ) );

Modules API: Fix Interactivity not working on Classic Themes. #57396

Modules API: Fix Interactivity not working on Classic Themes. #57396

Conversation

cbravobernal commented Dec 27, 2023 • edited Loading

What?

Why?

Testing Instructions

github-actions bot commented Dec 27, 2023

sirreal left a comment

Choose a reason for hiding this comment

sirreal Dec 27, 2023

Choose a reason for hiding this comment

cbravobernal Dec 27, 2023

Choose a reason for hiding this comment

sirreal left a comment

Choose a reason for hiding this comment

t-hamano commented Dec 27, 2023 • edited Loading

sirreal commented Dec 27, 2023

sirreal commented Dec 27, 2023

cbravobernal commented Dec 27, 2023

t-hamano left a comment

Choose a reason for hiding this comment

cbravobernal commented Dec 27, 2023

github-actions bot commented Dec 27, 2023 • edited Loading

t-hamano commented Dec 27, 2023

cbravobernal commented Dec 27, 2023 •

edited

Loading

t-hamano commented Dec 27, 2023 •

edited

Loading

github-actions bot commented Dec 27, 2023 •

edited

Loading