Experiment: A simple Modules API with no server dependency graph #56092
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <?php | ||
| /** | ||
| * Interactive modules. | ||
| * | ||
| * @package Gutenberg | ||
| * @subpackage Interactivity API | ||
| */ | ||
|
|
||
| /** | ||
| * Register the `@wordpress/interactivity` module. | ||
| */ | ||
| function gutenberg_register_interactivity_module() { | ||
| gutenberg_register_module( | ||
| '@wordpress/interactivity', | ||
| '/wp-content/plugins/gutenberg/build/interactivity/index.min.js' | ||
| ); | ||
| } | ||
|
|
||
| add_action( 'wp_enqueue_scripts', 'gutenberg_register_interactivity_module' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| <?php | ||
| /** | ||
| * Gutenberg_Modules class. | ||
| * | ||
| * Native support for ES Modules and Import Maps. | ||
| * | ||
| * @package Gutenberg | ||
| * @subpackage Modules | ||
| */ | ||
| class Gutenberg_Modules { | ||
| /** | ||
| * An array of registered modules, keyed by module identifier. | ||
| * | ||
| * @var array | ||
| */ | ||
| private static $registered = array(); | ||
|
|
||
|
|
||
| /** | ||
| * An array of queued modules. | ||
| * | ||
| * @var string[] | ||
| */ | ||
| private static $enqueued = array(); | ||
|
|
||
| /** | ||
| * Registers the module if no module with that module identifier already | ||
| * exists. | ||
| * | ||
| * @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 array $args { | ||
| * Optional array of arguments. | ||
| * | ||
| * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL | ||
| * as a query string for cache busting purposes. If version is set to false, a version | ||
| * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG | ||
| * is set to true, it uses the timestamp instead. | ||
| * } | ||
| */ | ||
| public static function register( $module_identifier, $src, $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, | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Enqueues a module for output in the page. | ||
| * | ||
| * @param string $module_identifier The identifier of the module. | ||
| * @param string $src Optional. Full URL of the module, or path of the script relative to the WordPress root directory. | ||
| * @param array $args { | ||
| * Optional array of arguments. | ||
| * | ||
| * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL | ||
| * as a query string for cache busting purposes. If version is set to false, a version | ||
| * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG | ||
| * is set to true, it uses the timestamp instead. | ||
| * } | ||
| */ | ||
| public static function enqueue( $module_identifier, $src = null, $args = array() ) { | ||
| // Register the module if a source is provided and it's not already registered. | ||
| if ( $src && ! isset( self::$registered[ $module_identifier ] ) ) { | ||
| self::register( $module_identifier, $src, $args ); | ||
| } | ||
|
|
||
| // Add the module to the queue if it's not already there. | ||
| if ( ! in_array( $module_identifier, self::$enqueued, true ) ) { | ||
| self::$enqueued[] = $module_identifier; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Returns the import map array. | ||
| * | ||
| * @return string The import map. | ||
| */ | ||
| public static function get_import_map() { | ||
| $import_map = array( | ||
| 'imports' => array(), | ||
| ); | ||
|
|
||
| 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; | ||
| } | ||
|
|
||
| return $import_map; | ||
| } | ||
|
|
||
| /** | ||
| * Prints the import map | ||
| */ | ||
| public static function print_import_map() { | ||
| echo '<script type="importmap">' . wp_json_encode( self::get_import_map(), JSON_HEX_TAG | JSON_HEX_AMP ) . '</script>'; | ||
| } | ||
|
|
||
| /** | ||
| * Prints all enqueued modules using script tags with type "module". | ||
| */ | ||
| 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>'; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Registers a JavaScript module. It will be added to the import map. | ||
| * | ||
| * @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 array $args { | ||
| * Optional array of arguments. | ||
| * | ||
| * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL | ||
| * as a query string for cache busting purposes. If version is set to false, a version | ||
| * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG | ||
| * 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 ); | ||
| } | ||
|
|
||
| /** | ||
| * Enqueues a JavaScript module. It will be added to both the import map and a | ||
| * script tag with the "module" type. | ||
| * | ||
| * It registers the module if a source is provided but it won't overwrites the | ||
| * value if there is an existing one. | ||
| * | ||
| * @param string $module_identifier The identifier of the module. Should be unique. It will be used in the final import map. | ||
| * @param string $src Optional. Full URL of the module, or path of the script relative to the WordPress root directory. | ||
| * @param array $args { | ||
| * Optional array of arguments. | ||
| * | ||
| * @type string|bool $ver Optional. String specifying script version number, if it has one, it is added to the URL | ||
| * as a query string for cache busting purposes. If version is set to false, a version | ||
| * number is automatically added equal to current installed WordPress version. If SCRIPT_DEBUG | ||
| * is set to true, it uses the timestamp instead. | ||
| * } | ||
| */ | ||
| function gutenberg_enqueue_module( $module_identifier, $src = '', $args = array() ) { | ||
| Gutenberg_Modules::enqueue( $module_identifier, $src, $args ); | ||
| } | ||
|
|
||
| // Attach the above function to 'wp_head' action hook. | ||
| add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_import_map' ) ); | ||
|
|
||
| // Attach the new function to 'wp_head' action hook. | ||
| add_action( 'wp_head', array( 'Gutenberg_Modules', 'print_enqueued_modules' ) ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,6 +52,5 @@ | |
| "layout": true | ||
| }, | ||
| "editorStyle": "wp-block-query-editor", | ||
| "style": "wp-block-query" | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the basic version (no server graph), I was wondering if we could support some kind of "flags" or something to say that a script is a backend script, frontend script or both. (It's a small optimization as there's a lot of backend script that are not meant to be loaded in the frontend)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure. I don't think it makes sense to have a version of the API that doesn't do that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added in 11b4e1b.