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.

Sign up for GitHub

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

Jump to bottom

Experiment: A simple Modules API with no server dependency graph #56092

Closed
wants to merge 14 commits into from
Closed

Experiment: A simple Modules API with no server dependency graph #56092

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1f3f99d
Bundle `@wordpress/interactivity` as an ES module
luisherranz Nov 9, 2023
8fe36f9
Add the class with a basic API
luisherranz Nov 13, 2023
68692d1
Make it work with the Navigation block
luisherranz Nov 13, 2023
0215330
Add versions
luisherranz Nov 13, 2023
9c5ea5d
Register `@wordpress/interactivity` module
luisherranz Nov 13, 2023
3ffc77c
Add query and image blocks
luisherranz Nov 13, 2023
7cc08c8
Add id with module identifier to the enqueued modules
luisherranz Nov 13, 2023
11b4e1b
Add requried $usage for admin/frontend
luisherranz Nov 14, 2023
c080fa7
Avoid the use of enqueue to register modules
luisherranz Nov 14, 2023
bd0a881
Refactor versions
luisherranz Nov 14, 2023
e0201ce
Switch from `both` to `['admin', 'frontend']`
luisherranz Nov 14, 2023
89f6be0
Improve comments
luisherranz Nov 14, 2023
c5b2c83
Add the file and search blocks
luisherranz Nov 14, 2023
68cd6c0
Add polyfill
luisherranz Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion lib/experimental/interactivity-api/modules.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
function gutenberg_register_interactivity_module() {
gutenberg_register_module(
'@wordpress/interactivity',
'/wp-content/plugins/gutenberg/build/interactivity/index.min.js'
'/wp-content/plugins/gutenberg/build/interactivity/index.min.js',
'frontend'
);
}

Expand Down
50 changes: 36 additions & 14 deletions lib/experimental/modules/class-gutenberg-modules.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class Gutenberg_Modules {
*
* @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map.
* @param string $src Full URL of the module, or path of the script relative to the WordPress root directory.
* @param string $usage Specifies where the module would be used. Can be 'admin', 'frontend', or 'both'.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think the same script can be probably be used in both frontend and backend. I also wonder if we'd have more "usage" in the future. Do you think a string is enough or should it be an array? I'm not very opinionated, just asking the question I guess.

Copy link
Member Author

Choose a reason for hiding this comment

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

Makes sense. I changed it so now it accepts a string or an array of strings: e0201ce

* @param array $args {
* Optional array of arguments.
*
Expand All @@ -38,13 +39,14 @@ class Gutenberg_Modules {
* is set to true, it uses the timestamp instead.
* }
*/
public static function register( $module_identifier, $src, $args = array() ) {
public static function register( $module_identifier, $src, $usage, $args = array() ) {
// Register the module if it's not already registered.
if ( ! isset( self::$registered[ $module_identifier ] ) ) {
self::$registered[ $module_identifier ] = array(
'src' => $src,
'args' => $args,
);
self::$registered[ $module_identifier ] = array(
'src' => $src,
'usage' => $usage,
'args' => $args,
);
}
}

Expand Down Expand Up @@ -85,9 +87,10 @@ public static function get_import_map() {
);

foreach ( self::$registered as $module_identifier => $module_data ) {
$version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module_data['args']['version'] || '';

$import_map['imports'][ $module_identifier ] = $module_data['src'] . $version;
if ( self::appropriate_usage( $module_data['usage'] ) ) {
$version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module_data['args']['version'] || '';
$import_map['imports'][ $module_identifier ] = $module_data['src'] . $version;
}
}

return $import_map;
Expand All @@ -105,13 +108,32 @@ public static function print_import_map() {
*/
public static function print_enqueued_modules() {
foreach ( self::$enqueued as $module_identifier ) {
if ( isset( self::$registered[ $module_identifier ] ) ) {
$module = self::$registered[ $module_identifier ];
$version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || '';
echo '<script type="module" src="' . $module['src'] . $version . '" id="' . $module_identifier . '"></script>';
if ( isset( self::$registered[ $module_identifier ] ) && self::appropriate_usage( self::$registered[ $module_identifier ]['usage'] ) ) {
$module = self::$registered[ $module_identifier ];
$version = SCRIPT_DEBUG ? '?ver=' . time() : '?ver=' . $module['args']['version'] || '';
echo '<script type="module" src="' . $module['src'] . $version . '" id="' . $module_identifier . '"></script>';
}
}
}

/**
* Determines if the usage is appropriate for the current context.
*
* @param string $usage Specifies the usage of the module. Can be 'admin', 'frontend', or 'both'.
* @return bool Returns true if it's appropriate to load the module in the current WP context.
*/
public static function appropriate_usage( $usage ) {
if ( 'both' === $usage ) {
return true;
}
if ( 'admin' === $usage && is_admin() ) {
return true;
}
if ( 'frontend' === $usage && ! is_admin() ) {
return true;
}
return false;
}
}

/**
Expand All @@ -128,8 +150,8 @@ public static function print_enqueued_modules() {
* is set to true, it uses the timestamp instead.
* }
*/
function gutenberg_register_module( $module_identifier, $src, $args = array() ) {
Gutenberg_Modules::register( $module_identifier, $src, $args );
function gutenberg_register_module( $module_identifier, $src, $usage, $args = array() ) {
Gutenberg_Modules::register( $module_identifier, $src, $usage, $args );
}

/**
Expand Down
11 changes: 7 additions & 4 deletions packages/block-library/src/image/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,7 @@ function render_block_core_image( $attributes, $content, $block ) {
isset( $lightbox_settings['enabled'] ) &&
true === $lightbox_settings['enabled']
) {
gutenberg_enqueue_module(
'@wordpress/block-library/image',
'/wp-content/plugins/gutenberg/build/interactivity/image.min.js'
);
gutenberg_enqueue_module( '@wordpress/block-library/image' );

/*
* This render needs to happen in a filter with priority 15 to ensure
Expand Down Expand Up @@ -354,5 +351,11 @@ function register_block_core_image() {
'render_callback' => 'render_block_core_image',
)
);

gutenberg_register_module(
'@wordpress/block-library/image',
'/wp-content/plugins/gutenberg/build/interactivity/image.min.js',
'frontend'
);
}
add_action( 'init', 'register_block_core_image' );
11 changes: 7 additions & 4 deletions packages/block-library/src/navigation/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,10 +640,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {

// Load the modules.
if ( $should_load_view_script ) {
gutenberg_enqueue_module(
'@wordpress/block-library/navigation-block',
'/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js'
);
gutenberg_enqueue_module( '@wordpress/block-library/navigation-block' );
}

// Add directives to the submenu if needed.
Expand Down Expand Up @@ -784,6 +781,12 @@ function register_block_core_navigation() {
'render_callback' => 'render_block_core_navigation',
)
);

gutenberg_register_module(
'@wordpress/block-library/navigation-block',
'/wp-content/plugins/gutenberg/build/interactivity/navigation.min.js',
'frontend'
);
}

add_action( 'init', 'register_block_core_navigation' );
Expand Down
15 changes: 8 additions & 7 deletions packages/block-library/src/query/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
*/
function render_block_core_query( $attributes, $content, $block ) {
if ( $attributes['enhancedPagination'] && isset( $attributes['queryId'] ) ) {
gutenberg_enqueue_module( '@wordpress/block-library/query' );

$p = new WP_HTML_Tag_Processor( $content );
if ( $p->next_tag() ) {
// Add the necessary directives.
Expand Down Expand Up @@ -67,13 +69,6 @@ class="wp-block-query__enhanced-pagination-animation"
}
}

if ( $attributes['enhancedPagination'] ) {
gutenberg_enqueue_module(
'@wordpress/block-library/query',
'/wp-content/plugins/gutenberg/build/interactivity/query.min.js'
);
}

$style_asset = 'wp-block-query';
if ( ! wp_style_is( $style_asset ) ) {
$style_handles = $block->block_type->style_handles;
Expand Down Expand Up @@ -122,6 +117,12 @@ function register_block_core_query() {
'render_callback' => 'render_block_core_query',
)
);

gutenberg_register_module(
'@wordpress/block-library/query',
'/wp-content/plugins/gutenberg/build/interactivity/query.min.js',
'frontend'
);
}
add_action( 'init', 'register_block_core_query' );

Expand Down
Loading