Gutenpack: Only load frontend assets as required #10405

enejb · 2018-10-25T21:39:40Z

Requires you to build the blocks via this branch:
Automattic/wp-calypso#28066

This PR implement a new jetpack_register_block() function. Which helps Jetpack have a better understand what blocks are supported and active. Different modules could be disabled. This information could then also be used in the editor to show/hide the blocks there as well.

I only added the tiled-gallery block because for now it is the only block that has frontend assets.

Testing instructions:

URL: JN test

Create a new tile gallery block.
Notice that the tile gallery view.js is only loaded on the page where the block appears.

Proposed changelog entry for your changes:

Only load front end assets as required by the block.

jetpackbot · 2018-10-25T21:42:07Z

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: November 6, 2018.
Scheduled code freeze: October 30, 2018

Generated by 🚫 dangerJS

jeherve

I don't seem to see any tiled gallery on the front end of my site when inserting a gallery via the Gutenberg block. I consequently do not see the gallery assets in the source code either. Maybe that's partly because #10375 has not been merged yet?

I also left a few comments about minor coding standards changes you could make here, so our code editors don't shout at us when we open the file :)

There also seems to be a small issue with how the file is built for RTL sites.

class.jetpack-gutenberg.php

class.jetpack.php

class.jetpack-gutenberg.php

modules/tiled-gallery.php

lezama · 2018-10-26T13:33:04Z

@jeherve thanks for the review!
@enejb I applied linting and added a missing ! now we are enqueuing the assets 🎉

jeherve · 2018-10-26T13:39:24Z

@lezama Thanks! We still have that RTL issue though:
#10405 (comment)

And the missing docblocks. :)

fixed issues.

enejb · 2018-10-26T18:32:21Z

@jeherve Can you elaborate on the RTL issue? I didn't find any issues but I also wasn't able to test it properly since the files are not there.

enejb · 2018-10-26T18:35:05Z

Nevermind good catch on the RTL issue. 🤦‍♂️

jeffersonrabb · 2018-10-26T19:04:23Z

When testing locally (JP docker) I'm getting This block contains unexpected or invalid content. for the Tiled Gallery after saving, and nothing displays in the frontend after publishing the post. The JN link is also failing. However, I do see the tiled-gallery's view.js file loading in the frontend, and I don't see it if the block is removed, so that's looking good.

enejb · 2018-10-26T19:26:51Z

Thanks for testing the PR @jeffersonrabb. I also am running into the same issue. With the tile gallery.
Maybe the tile gallery is not ready yet? Or it needs more changes?
@tyxla and @simison would know more.

simison · 2018-10-26T22:45:33Z

The tiled gallery currently in master isn't very stable indeed (and the new one isn't merged yet Automattic/wp-calypso#27458).

It might make sense to update our testing block hello-dolly to contain some styles and use that for testing... you could probably re-use this PR: Automattic/wp-calypso#27241

class.jetpack-gutenberg.php

tyxla · 2018-10-29T14:48:04Z

class.jetpack-gutenberg.php

+		return (bool) apply_filters( 'jetpack_gutenberg', true );
+	}
+
+	public static function load_assets_as_required( $type ) {


I'm thinking we could use a filter inside this function, allowing us (or a third party) to disable loading of these in the last minute. It would be useful if someone needs a more granular control over what is to be loaded on a per block basis (contrary to jetpack_gutenberg, which applies to all).

True. But do we want those filters right now? I think they can be done in a different PR when they are requested. There is also the previous way of dequeuing the assets. Which is done just before enqueuing them.

tyxla · 2018-10-29T14:50:32Z

class.jetpack-gutenberg.php

 		 */
-		if ( apply_filters( 'jetpack_gutenberg_cdn', false ) ) {


We seem to completely be removing loading of the assets from CDN option. While we don't use it much anymore, I don't see any mention about it in this PR. It would be nice to make sure we remove it properly and we don't rely on it being here anywhere - sounds like material for another PR to me.

No there is still the CDN option but only for the editor assets. I didn't want to remove it since it was already taken care of by a different PR.

class.jetpack-gutenberg.php

tyxla · 2018-10-29T15:05:24Z

class.jetpack.php

@@ -537,7 +537,7 @@ private function __construct() {
 		 * Prepare Gutenberg Editor functionality
 		 */
 		require_once JETPACK__PLUGIN_DIR . 'class.jetpack-gutenberg.php';
-		add_action( 'enqueue_block_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_assets' ) );


Seems like we'll no longer use core Gutenberg's hook enqueue_block_assets to enqueue the assets. Core Gutenberg recommends using that hook, because it assures that its necessary assets will already be loaded. Do we want to use it after all, even if we use init for our business logic?

I think we are fine with not using it. since the current enqueue_block_assets hood also fires on the front end and results in assets being loaded when they don't have to be.

modules/tiled-gallery.php

jeherve · 2018-10-30T16:23:01Z

Rebased and updated to account for #10405 (comment)

It's hard to test with just Tiled Galleries, though.

This Removed the loading of the front end code that comes as a bundle of all the files. And make sure that it loads only the front end code that is needed when the block is going to be displayed.

This lets us register the tiled gallery code to be loaded on the front end only

@gititon

Props @gititon.

We'll rely on those functions a lot in the next few months, the different comments should help us get all the info we need in our IDEs. It also acts as a good example for other folks who may be interested in how Jetpack adds support for its blocks.

@see #10405 (comment)

oskosk

LGTM!

oskosk · 2018-10-30T21:43:29Z

Testing this PR on WordPress 5.0 Beta 2 (Gutenberg in core, not as a plugin) I get this error when attempting to include the Gallery block

react-dom.min.js?ver=5.0-beta2-43845:104 TypeError: Cannot read property 'length' of undefined

jeherve · 2018-10-31T09:14:37Z

Noting that #10491 reverted some of our work here.

enejb requested a review from a team as a code owner October 25, 2018 21:39

enejb self-assigned this Oct 25, 2018

enejb added the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Oct 25, 2018

enejb mentioned this pull request Oct 25, 2018

Jetpack Gutenberg Blocks only load assets as required #10397

Closed

enejb requested review from sirreal, jeffersonrabb, simison and a team October 25, 2018 21:55

enejb added the [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack label Oct 25, 2018

jeherve added this to the 6.7 milestone Oct 26, 2018

jeherve added the [Feature] Tiled Gallery A different way to display image galleries on your site, in different organizations and shapes. label Oct 26, 2018

jeherve previously requested changes Oct 26, 2018

View reviewed changes

jeherve added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Oct 26, 2018

sirreal mentioned this pull request Oct 26, 2018

Gutenberg: Block Availability task list #10198

Closed

4 tasks

jeherve mentioned this pull request Oct 26, 2018

Remove Jetpack blocks CDN #10299

Closed

lezama added the [Status] In Progress label Oct 26, 2018

jeherve mentioned this pull request Oct 29, 2018

Gutenberg: add blocks to Jetpack #10326

Closed

22 tasks

tyxla reviewed Oct 29, 2018

View reviewed changes

simison mentioned this pull request Oct 29, 2018

Gutenpack: Break up the Jetpack preset's view bundle into separate, per-block ones. Automattic/wp-calypso#28066

Merged

enejb force-pushed the update/jetpack-gutenber-only-load-assets-as-required branch from 12ffc7a to 4b8a0eb Compare October 30, 2018 05:51

enejb and others added 12 commits October 30, 2018 10:48

Gutenblock: Add the frontend code only if the block is being called.

b4b023f

This Removed the loading of the front end code that comes as a bundle of all the files. And make sure that it loads only the front end code that is needed when the block is going to be displayed.

Register the tiled-galley code block

37a95d7

This lets us register the tiled gallery code to be loaded on the front end only

Changes applied to #10397 by gititon

e91f237

Props @gititon.

Minor bug fix

bb51c6d

fix linting

4a57e9f

missing !

8dd0858

Added code dock blocks and set the default priority

ba20066

Fixed the RTL issue

2b9aced

Minor doc block fixes

792c595

Language extraction: account for blocks in sub-directories.

755ee39

@see #10405 (comment)

Sanitize the type.

f8098a2

enejb force-pushed the update/jetpack-gutenber-only-load-assets-as-required branch from 54940f3 to f8098a2 Compare October 30, 2018 18:06

Sanitize the type again

751ac61

enejb added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Oct 30, 2018

oskosk approved these changes Oct 30, 2018

View reviewed changes

oskosk added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Oct 30, 2018

enejb merged commit d7bd98b into master Oct 30, 2018

matticbot added the [Status] Needs Changelog label Oct 30, 2018

ghost removed the [Status] Ready to Merge Go ahead, you can push that green button! label Oct 30, 2018

enejb deleted the update/jetpack-gutenber-only-load-assets-as-required branch October 30, 2018 22:08

jeffersonrabb mentioned this pull request Nov 1, 2018

Standalone Block Registration/Block Dependencies #10503

Merged

aninax mentioned this pull request Apr 4, 2024

[Snyk] Upgrade chart.js from 3.7.1 to 3.9.1 aninax/jetpack#5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenpack: Only load frontend assets as required #10405

Gutenpack: Only load frontend assets as required #10405

enejb commented Oct 25, 2018 •

edited by oskosk

Loading

jetpackbot commented Oct 25, 2018 •

edited

Loading

jeherve left a comment •

edited

Loading

lezama commented Oct 26, 2018

jeherve commented Oct 26, 2018

enejb commented Oct 26, 2018

enejb commented Oct 26, 2018

jeffersonrabb commented Oct 26, 2018

enejb commented Oct 26, 2018

simison commented Oct 26, 2018

tyxla Oct 29, 2018

enejb Oct 30, 2018

tyxla Oct 29, 2018

enejb Oct 30, 2018

tyxla Oct 29, 2018

enejb Oct 30, 2018

jeherve commented Oct 30, 2018

oskosk left a comment

oskosk commented Oct 30, 2018

jeherve commented Oct 31, 2018

Gutenpack: Only load frontend assets as required #10405

Gutenpack: Only load frontend assets as required #10405

Conversation

enejb commented Oct 25, 2018 • edited by oskosk Loading

Testing instructions:

Proposed changelog entry for your changes:

jetpackbot commented Oct 25, 2018 • edited Loading

jeherve left a comment • edited Loading

Choose a reason for hiding this comment

lezama commented Oct 26, 2018

jeherve commented Oct 26, 2018

enejb commented Oct 26, 2018

enejb commented Oct 26, 2018

jeffersonrabb commented Oct 26, 2018

enejb commented Oct 26, 2018

simison commented Oct 26, 2018

tyxla Oct 29, 2018

Choose a reason for hiding this comment

enejb Oct 30, 2018

Choose a reason for hiding this comment

tyxla Oct 29, 2018

Choose a reason for hiding this comment

enejb Oct 30, 2018

Choose a reason for hiding this comment

tyxla Oct 29, 2018

Choose a reason for hiding this comment

enejb Oct 30, 2018

Choose a reason for hiding this comment

jeherve commented Oct 30, 2018

oskosk left a comment

Choose a reason for hiding this comment

oskosk commented Oct 30, 2018

jeherve commented Oct 31, 2018

enejb commented Oct 25, 2018 •

edited by oskosk

Loading

jetpackbot commented Oct 25, 2018 •

edited

Loading

jeherve left a comment •

edited

Loading