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.

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

Proof of concept: Codemirror as scriptmodule dep of block editor #68191

Draft
wants to merge 25 commits into
base: trunk
Choose a base branch
from

Conversation

sirreal
Copy link
Member

@sirreal sirreal commented Dec 20, 2024

What?

Proof of concept and demonstration of WordPress/wordpress-develop#8024 in practice.

Builds on #60155 and using WordPress/wordpress-develop#8024 to add codemirror as an on-demand imported external dependency.

DEWP does not currrently handle these dependencies, so the block editor asset file needs to be manually modified to handle the script module dependencies. After building, change build/block-editor/index.min.asset.php to look like this:

<?php return array('dependencies' => array(
	array( 'type' => 'module', 'id' => '@codemirror/commands', ),
	array( 'type' => 'module', 'id' => '@codemirror/lang-css', ),
	array( 'type' => 'module', 'id' => '@codemirror/lang-html', ),
	array( 'type' => 'module', 'id' => '@codemirror/state', ),
	array( 'type' => 'module', 'id' => '@codemirror/view', ),
	array( 'type' => 'module', 'id' => 'codemirror', ),

	'react', 'react-dom', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-private-apis', 'wp-rich-text', 'wp-style-engine', 'wp-token-list', 'wp-url', 'wp-warning', 'wp-wordcount'), 'version' => 'da526c264560c67bccdf');

Why?

Script modules are ideal for deferred or conditional loading of JavaScript assets.

How?

Use the implementation for scripts to depend on script modules proposed in WordPress/wordpress-develop#8024 to load codemirror on demand.

Testing Instructions

Run this along with WordPress/wordpress-develop#8024. Load the editor and add a custom HTML block. In the network tab you'll see that codemirror assets are loaded on demand when the block is added. There are some problems with the block but that's beyond the scope of this proof of concept.

Screenshots or screencast

demo.mov

@sirreal sirreal added the [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible label Dec 20, 2024
Comment on lines +76 to +94
$module_deps = array();
$script_deps = array();
if ( array() !== $deps ) {
foreach ( $deps as $dep ) {
if ( is_string( $dep ) ) {
$script_deps[] = $dep;
} elseif (
isset( $dep['type'], $dep['id'] ) &&
'module' === $dep['type'] &&
is_string( $dep['id'] )
) {
$module_deps[] = $dep['id'];
}
}
}
$script->deps = $script_deps;
if ( array() !== $module_deps ) {
$scripts->add_data( $handle, 'module_deps', $module_deps );
}
Copy link
Member Author

Choose a reason for hiding this comment

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

This is porting some module dependency changes from WordPress/wordpress-develop#8024.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants