From b4b023fc0bbeef59961eb684885d3ff4d060dff7 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Thu, 25 Oct 2018 09:56:01 -0700 Subject: [PATCH 01/13] Gutenblock: Add the frontend code only if the block is being called. 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. --- class.jetpack-gutenberg.php | 102 +++++++++++++++--------------------- class.jetpack.php | 2 +- 2 files changed, 43 insertions(+), 61 deletions(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 3fa8e7e6a98a1..b04f70463f9b0 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -1,9 +1,51 @@ $args ) { + register_block_type( + 'jetpack/' . $type, + $args + ); + } + } + + public static function load_assets_as_required( $type ) { + // Enqueue styles + $style_relative_path = '_inc/blocks/'. $type .'/view.'. ( is_rtl() ? '.rtl' : '' ) .'css'; + if ( file_exists( JETPACK__PLUGIN_DIR . $style_relative_path ) ) { + $style_version = Jetpack::is_development_version() + ? filemtime( JETPACK__PLUGIN_DIR . $style_relative_path ) + : JETPACK__VERSION; + $view_style = plugins_url( $style_relative_path, JETPACK__PLUGIN_FILE ); + wp_enqueue_style( 'jetpack-block-' . $type, $view_style, array(), $style_version ); + } + // Enqueue script + $script_relative_path = '_inc/blocks/'. $type .'/view.js'; + if ( file_exists( JETPACK__PLUGIN_DIR . $script_relative_path ) ) { + $script_version = Jetpack::is_development_version() + ? filemtime( JETPACK__PLUGIN_DIR . $script_relative_path ) + : JETPACK__VERSION; + $view_script = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE ); + wp_enqueue_script( 'jetpack-block-' . $type, $view_script, array(), $script_version ); + } + } + /** * Check if Gutenberg editor is available * @@ -15,66 +57,6 @@ public static function is_gutenberg_available() { return function_exists( 'register_block_type' ); } - /** - * Load Gutenberg assets - * - * @since 6.7.0 - * - * @return void - */ - public static function enqueue_block_assets() { - if ( ! self::should_load_blocks() ) { - return; - } - - $rtl = is_rtl() ? '.rtl' : ''; - - /** - * Filter to enable serving blocks via CDN - * - * CDN cache is busted once a day or when Jetpack version changes. To customize it: - * add_filter( 'jetpack_gutenberg_cdn_cache_buster', function( $version ) { return time(); }, 10, 1 ); - * - * @since 6.5.0 - * - * @param bool false Whether to load Gutenberg blocks from CDN - */ - if ( apply_filters( 'jetpack_gutenberg_cdn', false ) ) { - $cdn_base = 'https://s0.wp.com/wp-content/mu-plugins/jetpack/_inc/blocks'; - $view_script = "$cdn_base/view.js"; - $view_style = "$cdn_base/view$rtl.css"; - - /** - * Filter to modify cache busting for Gutenberg block assets loaded from CDN - * - * @since 6.5.0 - * - * @param string - */ - $version = apply_filters( 'jetpack_gutenberg_cdn_cache_buster', sprintf( '%s-%s', gmdate( 'd-m-Y' ), JETPACK__VERSION ) ); - } else { - $view_script = plugins_url( '_inc/blocks/view.js', JETPACK__PLUGIN_FILE ); - $view_style = plugins_url( "_inc/blocks/view$rtl.css", JETPACK__PLUGIN_FILE ); - $version = Jetpack::is_development_version() && file_exists( JETPACK__PLUGIN_DIR . '_inc/blocks/view.js' ) - ? filemtime( JETPACK__PLUGIN_DIR . '_inc/blocks/view.js' ) - : JETPACK__VERSION; - } - - wp_enqueue_script( - 'jetpack-blocks-view', - $view_script, - array( - 'wp-element', - 'wp-i18n', - ), - $version - ); - - Jetpack::setup_wp_i18n_locale_data(); - - wp_enqueue_style( 'jetpack-blocks-view', $view_style, array(), $version ); - } - /** * Load Gutenberg editor assets * diff --git a/class.jetpack.php b/class.jetpack.php index c2705f3b2ad8e..52ca662e87162 100644 --- a/class.jetpack.php +++ b/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' ) ); + add_action( 'init', array( 'Jetpack_Gutenberg', 'load_all_blocks' ), 1000 ); add_action( 'enqueue_block_editor_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_editor_assets' ) ); add_action( 'set_user_role', array( $this, 'maybe_clear_other_linked_admins_transient' ), 10, 3 ); From 37a95d762480b5ec6da03a77b493371080925694 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Thu, 25 Oct 2018 09:58:26 -0700 Subject: [PATCH 02/13] Register the tiled-galley code block This lets us register the tiled gallery code to be loaded on the front end only --- modules/tiled-gallery.php | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/modules/tiled-gallery.php b/modules/tiled-gallery.php index 36b95f1ee2915..fd437ff00f275 100644 --- a/modules/tiled-gallery.php +++ b/modules/tiled-gallery.php @@ -30,3 +30,12 @@ function jetpack_tiled_gallery_configuration_load() { } jetpack_load_tiled_gallery(); + +// Tile-gallery block definition can be found in wp-calypso repo +jetpack_register_block( 'tiled-gallery', array( + 'render_callback' => 'jetpack_tiled_gallery_load_assets' +) ); +function jetpack_tiled_gallery_load_assets( $attr, $content ) { + Jetpack_Gutenberg::load_assets_as_required( 'tiled-gallery' ); + return $content; +} From e91f237364d6596abf372bc42b7d025732c9c05b Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Thu, 25 Oct 2018 14:47:10 -0700 Subject: [PATCH 03/13] Changes applied to #10397 by gititon Props @gititon. --- class.jetpack-gutenberg.php | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index b04f70463f9b0..38b226bc10ebb 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -8,16 +8,20 @@ function jetpack_register_block( $type, $args = array() ) { */ class Jetpack_Gutenberg { - public static $all_blocks = array(); + public static $blocks = array(); public static function add_block( $type, $args ) { - self::$all_blocks[ $type ] = $args; + self::$blocks[ $type ] = $args; } - public static function load_all_blocks() { + public static function load_blocks() { if ( ! self::is_gutenberg_available() ) { return; } - foreach ( self::$all_blocks as $type => $args ) { + + if ( self::should_load_blocks() ) { + return; + } + foreach ( self::$blocks as $type => $args ) { register_block_type( 'jetpack/' . $type, $args @@ -28,24 +32,31 @@ public static function load_all_blocks() { public static function load_assets_as_required( $type ) { // Enqueue styles $style_relative_path = '_inc/blocks/'. $type .'/view.'. ( is_rtl() ? '.rtl' : '' ) .'css'; - if ( file_exists( JETPACK__PLUGIN_DIR . $style_relative_path ) ) { - $style_version = Jetpack::is_development_version() - ? filemtime( JETPACK__PLUGIN_DIR . $style_relative_path ) - : JETPACK__VERSION; + if ( self::block_has_asset( $style_relative_path ) ) { + $style_version = self::get_asset_version( $style_relative_path ); $view_style = plugins_url( $style_relative_path, JETPACK__PLUGIN_FILE ); wp_enqueue_style( 'jetpack-block-' . $type, $view_style, array(), $style_version ); } + // Enqueue script $script_relative_path = '_inc/blocks/'. $type .'/view.js'; - if ( file_exists( JETPACK__PLUGIN_DIR . $script_relative_path ) ) { - $script_version = Jetpack::is_development_version() - ? filemtime( JETPACK__PLUGIN_DIR . $script_relative_path ) - : JETPACK__VERSION; + if ( self::block_has_asset( $script_relative_path ) ) { + $script_version = self::get_asset_version( $script_relative_path ); $view_script = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE ); wp_enqueue_script( 'jetpack-block-' . $type, $view_script, array(), $script_version ); } } + public function block_has_asset( $file ) { + return file_exists( JETPACK__PLUGIN_DIR . $file ); + } + + public static function get_asset_version( $file ) { + return Jetpack::is_development_version() && self::block_has_asset( $file ) + ? filemtime( JETPACK__PLUGIN_DIR . $file ) + : JETPACK__VERSION; + } + /** * Check if Gutenberg editor is available * From bb51c6d9659835a0cb96b9426ac38e59f3cee634 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Thu, 25 Oct 2018 14:58:25 -0700 Subject: [PATCH 04/13] Minor bug fix --- class.jetpack.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/class.jetpack.php b/class.jetpack.php index 52ca662e87162..1c00ec91d0db7 100644 --- a/class.jetpack.php +++ b/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( 'init', array( 'Jetpack_Gutenberg', 'load_all_blocks' ), 1000 ); + add_action( 'init', array( 'Jetpack_Gutenberg', 'load_blocks' ), 1000 ); add_action( 'enqueue_block_editor_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_editor_assets' ) ); add_action( 'set_user_role', array( $this, 'maybe_clear_other_linked_admins_transient' ), 10, 3 ); From 4a57e9f284c5341ce0abbf2ed0e11aac6e081c47 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Fri, 26 Oct 2018 10:26:53 -0300 Subject: [PATCH 05/13] fix linting --- class.jetpack-gutenberg.php | 85 +++++++++++++++++++------------------ 1 file changed, 44 insertions(+), 41 deletions(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 38b226bc10ebb..151a9dfe7a69c 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -9,6 +9,7 @@ function jetpack_register_block( $type, $args = array() ) { class Jetpack_Gutenberg { public static $blocks = array(); + public static function add_block( $type, $args ) { self::$blocks[ $type ] = $args; } @@ -21,6 +22,7 @@ public static function load_blocks() { if ( self::should_load_blocks() ) { return; } + foreach ( self::$blocks as $type => $args ) { register_block_type( 'jetpack/' . $type, @@ -29,20 +31,56 @@ public static function load_blocks() { } } + /** + * Check if Gutenberg editor is available + * + * @since 6.7.0 + * + * @return bool + */ + public static function is_gutenberg_available() { + return function_exists( 'register_block_type' ); + } + + /** + * Check whether conditions indicate Gutenberg blocks should be loaded + * + * Loading blocks is enabled by default and may be disabled via filter: + * add_filter( 'jetpack_gutenberg', '__return_false' ); + * + * @since 6.7.0 + * + * @return bool + */ + public static function should_load_blocks() { + if ( ! Jetpack::is_active() ) { + return false; + } + + /** + * Filter to disable Gutenberg blocks + * + * @since 6.5.0 + * + * @param bool true Whether to load Gutenberg blocks + */ + return (bool) apply_filters( 'jetpack_gutenberg', true ); + } + public static function load_assets_as_required( $type ) { // Enqueue styles - $style_relative_path = '_inc/blocks/'. $type .'/view.'. ( is_rtl() ? '.rtl' : '' ) .'css'; + $style_relative_path = '_inc/blocks/' . $type . '/view.' . ( is_rtl() ? '.rtl' : '' ) . 'css'; if ( self::block_has_asset( $style_relative_path ) ) { - $style_version = self::get_asset_version( $style_relative_path ); - $view_style = plugins_url( $style_relative_path, JETPACK__PLUGIN_FILE ); + $style_version = self::get_asset_version( $style_relative_path ); + $view_style = plugins_url( $style_relative_path, JETPACK__PLUGIN_FILE ); wp_enqueue_style( 'jetpack-block-' . $type, $view_style, array(), $style_version ); } // Enqueue script - $script_relative_path = '_inc/blocks/'. $type .'/view.js'; + $script_relative_path = '_inc/blocks/' . $type . '/view.js'; if ( self::block_has_asset( $script_relative_path ) ) { - $script_version = self::get_asset_version( $script_relative_path ); - $view_script = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE ); + $script_version = self::get_asset_version( $script_relative_path ); + $view_script = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE ); wp_enqueue_script( 'jetpack-block-' . $type, $view_script, array(), $script_version ); } } @@ -57,17 +95,6 @@ public static function get_asset_version( $file ) { : JETPACK__VERSION; } - /** - * Check if Gutenberg editor is available - * - * @since 6.7.0 - * - * @return bool - */ - public static function is_gutenberg_available() { - return function_exists( 'register_block_type' ); - } - /** * Load Gutenberg editor assets * @@ -139,28 +166,4 @@ public static function enqueue_block_editor_assets() { wp_enqueue_style( 'jetpack-blocks-editor', $editor_style, array(), $version ); } - - /** - * Check whether conditions indicate Gutenberg blocks should be loaded - * - * Loading blocks is enabled by default and may be disabled via filter: - * add_filter( 'jetpack_gutenberg', '__return_false' ); - * - * @since 6.7.0 - * - * @return bool - */ - public static function should_load_blocks() { - if ( ! Jetpack::is_active() ) { - return false; - } - /** - * Filter to disable Gutenberg blocks - * - * @since 6.5.0 - * - * @param bool true Whether to load Gutenberg blocks - */ - return (bool) apply_filters( 'jetpack_gutenberg', true ); - } } From 8dd0858130a562d000fac2555ea788f217481c36 Mon Sep 17 00:00:00 2001 From: Miguel Lezama Date: Fri, 26 Oct 2018 10:27:20 -0300 Subject: [PATCH 06/13] missing ! --- class.jetpack-gutenberg.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 151a9dfe7a69c..f5ed441c2a3e2 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -19,7 +19,7 @@ public static function load_blocks() { return; } - if ( self::should_load_blocks() ) { + if ( ! self::should_load_blocks() ) { return; } @@ -85,7 +85,7 @@ public static function load_assets_as_required( $type ) { } } - public function block_has_asset( $file ) { + public static function block_has_asset( $file ) { return file_exists( JETPACK__PLUGIN_DIR . $file ); } From ba20066ff0549cf2830333af17c746593b5a4dec Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Fri, 26 Oct 2018 10:54:21 -0700 Subject: [PATCH 07/13] Added code dock blocks and set the default priority --- class.jetpack-gutenberg.php | 11 +++++++++++ class.jetpack.php | 2 +- modules/tiled-gallery.php | 9 +++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index f5ed441c2a3e2..74e6f543380e0 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -1,5 +1,16 @@ 'jetpack_tiled_gallery_load_assets' ) ); + +/** + * Renders the tiled gallery dynamically to the user + * + * @param $attr array - array of attributes + * @param $content string - content block + * + * @return mixed + */ function jetpack_tiled_gallery_load_assets( $attr, $content ) { Jetpack_Gutenberg::load_assets_as_required( 'tiled-gallery' ); return $content; From 2b9aced20977a434fe9fcdad4e8730b4f40a0a55 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Fri, 26 Oct 2018 11:33:52 -0700 Subject: [PATCH 08/13] Fixed the RTL issue --- class.jetpack-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 74e6f543380e0..20f0757e6b289 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -80,7 +80,7 @@ public static function should_load_blocks() { public static function load_assets_as_required( $type ) { // Enqueue styles - $style_relative_path = '_inc/blocks/' . $type . '/view.' . ( is_rtl() ? '.rtl' : '' ) . 'css'; + $style_relative_path = '_inc/blocks/' . $type . '/view' . ( is_rtl() ? '.rtl' : '' ) . '.css'; if ( self::block_has_asset( $style_relative_path ) ) { $style_version = self::get_asset_version( $style_relative_path ); $view_style = plugins_url( $style_relative_path, JETPACK__PLUGIN_FILE ); From 792c595128e5aa7c2c9dac9fe952ffae7af15acf Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 29 Oct 2018 22:49:46 -0700 Subject: [PATCH 09/13] Minor doc block fixes --- class.jetpack-gutenberg.php | 4 +++- modules/tiled-gallery.php | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 20f0757e6b289..4be3788214840 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -2,9 +2,11 @@ /** * Helper function to register a Jetpack Gutenberg block * - * @params $type sting The type will be prefixed with jetpack/ + * @param $type string The type will be prefixed with jetpack/ * @param $args array Arguments that are passed into the register_block_type * + * @see register_block_type + * * @since 6.7.0 * * @return void diff --git a/modules/tiled-gallery.php b/modules/tiled-gallery.php index 6bc9cf55d3449..aec26646c8a79 100644 --- a/modules/tiled-gallery.php +++ b/modules/tiled-gallery.php @@ -33,16 +33,17 @@ function jetpack_tiled_gallery_configuration_load() { // Tile-gallery block definition can be found in wp-calypso repo jetpack_register_block( 'tiled-gallery', array( - 'render_callback' => 'jetpack_tiled_gallery_load_assets' + 'render_callback' => 'jetpack_tiled_gallery_load_assets' // This is needed to enqueue front end assets as we request them instead of always ) ); /** * Renders the tiled gallery dynamically to the user + * Currently we use the render_callback to include only load the front end assets when they are required. * * @param $attr array - array of attributes * @param $content string - content block * - * @return mixed + * @return string */ function jetpack_tiled_gallery_load_assets( $attr, $content ) { Jetpack_Gutenberg::load_assets_as_required( 'tiled-gallery' ); From 08c6ea20aa4ad798cedd49feeffd5e3eb9b29eb7 Mon Sep 17 00:00:00 2001 From: Jeremy Herve Date: Tue, 30 Oct 2018 10:09:45 +0100 Subject: [PATCH 10/13] Gutenberg: fix all linter errors in file. 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. --- class.jetpack-gutenberg.php | 56 +++++++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 4be3788214840..09f472560aacb 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -1,9 +1,15 @@ Date: Tue, 30 Oct 2018 17:21:23 +0100 Subject: [PATCH 11/13] Language extraction: account for blocks in sub-directories. @see https://github.com/Automattic/jetpack/pull/10405#discussion_r229280595 --- gulpfile.babel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 735aed4e0d6e5..f7daec8c36fce 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -255,7 +255,8 @@ gulp.task( 'languages:extract', function( done ) { gulp.src( [ '_inc/client/**/*.js', '_inc/client/**/*.jsx', - '_inc/blocks/*.js' + '_inc/blocks/*.js', + '_inc/blocks/**/*.js' ] ) .pipe( tap( function( file ) { paths.push( file.path ); From f8098a2b69d73a80787018f456d3d00694c241c9 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Tue, 30 Oct 2018 11:05:51 -0700 Subject: [PATCH 12/13] Sanitize the type. --- class.jetpack-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 09f472560aacb..4b46f6b5e4daa 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -18,7 +18,7 @@ * @return void */ function jetpack_register_block( $type, $args = array() ) { - + $type = sanitize_title_with_dashes( $type ); Jetpack_Gutenberg::add_block( $type, $args ); } From 751ac61e0b3ee0d0c4f37ee982380d9de503b995 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Tue, 30 Oct 2018 11:08:22 -0700 Subject: [PATCH 13/13] Sanitize the type again --- class.jetpack-gutenberg.php | 1 + 1 file changed, 1 insertion(+) diff --git a/class.jetpack-gutenberg.php b/class.jetpack-gutenberg.php index 4b46f6b5e4daa..1abd862888120 100644 --- a/class.jetpack-gutenberg.php +++ b/class.jetpack-gutenberg.php @@ -110,6 +110,7 @@ public static function should_load_blocks() { * @return void */ public static function load_assets_as_required( $type ) { + $type = sanitize_title_with_dashes( $type ); // Enqueue styles. $style_relative_path = '_inc/blocks/' . $type . '/view' . ( is_rtl() ? '.rtl' : '' ) . '.css'; if ( self::block_has_asset( $style_relative_path ) ) {