Editor: Add viewScriptModule handling to block.json metadata

Syncing changes from the Gutenberg plugin: https://github.com/WordPress/gutenberg/pull/57437.

Scripts and styles can be registered for blocks via `block.json` metadata. There is now a Modules API, but was no way to register or associate module assets with blocks via `block.json`.

Fixes #60233.
Props jonsurrell, gziolo, cbravobernal, luisherranz, youknowriad.



git-svn-id: https://develop.svn.wordpress.org/trunk@57565 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Greg Ziółkowski
2024-02-08 10:39:24 +00:00
parent 1d8d810ea2
commit e42bf01555
7 changed files with 309 additions and 10 deletions

View File

@@ -68,6 +68,7 @@
"editorScript": "tests-notice-editor-script",
"script": "tests-notice-script",
"viewScript": [ "tests-notice-view-script", "tests-notice-view-script-2" ],
"viewScriptModule": [ "tests-notice-view-script-module", "tests-notice-view-script-module-2" ],
"editorStyle": "tests-notice-editor-style",
"style": [ "tests-notice-style", "tests-notice-style-2" ],
"viewStyle": [ "tests-notice-view-style" ],

View File

@@ -138,6 +138,7 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
/**
* @ticket 50263
* @ticket 60233
*/
public function test_generate_block_asset_handle() {
$block_name = 'unit-tests/my-block';
@@ -154,6 +155,18 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
'unit-tests-my-block-view-script-100',
generate_block_asset_handle( $block_name, 'viewScript', 99 )
);
$this->assertSame(
'unit-tests-my-block-view-script-module',
generate_block_asset_handle( $block_name, 'viewScriptModule' )
);
$this->assertSame(
'unit-tests-my-block-view-script-module-2',
generate_block_asset_handle( $block_name, 'viewScriptModule', 1 )
);
$this->assertSame(
'unit-tests-my-block-view-script-module-100',
generate_block_asset_handle( $block_name, 'viewScriptModule', 99 )
);
$this->assertSame(
'unit-tests-my-block-editor-style-2',
generate_block_asset_handle( $block_name, 'editorStyle', 1 )
@@ -198,6 +211,52 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
);
}
/**
* @ticket 60233
*/
public function test_generate_block_asset_handle_core_block_module() {
$block_name = 'core/paragraph';
$this->assertSame(
'wp-block-paragraph-editor-script-module',
generate_block_asset_handle( $block_name, 'editorScriptModule' )
);
$this->assertSame(
'wp-block-paragraph-editor-script-module-2',
generate_block_asset_handle( $block_name, 'editorScriptModule', 1 )
);
$this->assertSame(
'wp-block-paragraph-editor-script-module-100',
generate_block_asset_handle( $block_name, 'editorScriptModule', 99 )
);
$this->assertSame(
'wp-block-paragraph-view-script-module',
generate_block_asset_handle( $block_name, 'viewScriptModule' )
);
$this->assertSame(
'wp-block-paragraph-view-script-module-2',
generate_block_asset_handle( $block_name, 'viewScriptModule', 1 )
);
$this->assertSame(
'wp-block-paragraph-view-script-module-100',
generate_block_asset_handle( $block_name, 'viewScriptModule', 99 )
);
$this->assertSame(
'wp-block-paragraph-script-module',
generate_block_asset_handle( $block_name, 'scriptModule' )
);
$this->assertSame(
'wp-block-paragraph-script-module-2',
generate_block_asset_handle( $block_name, 'scriptModule', 1 )
);
$this->assertSame(
'wp-block-paragraph-script-module-100',
generate_block_asset_handle( $block_name, 'scriptModule', 99 )
);
}
/**
* @ticket 50263
*/
@@ -231,6 +290,115 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
$this->assertFalse( $result );
}
/**
* @ticket 60233
*/
public function test_field_not_found_register_block_script_module_id() {
$result = register_block_script_module_id( array(), 'viewScriptModule' );
$this->assertFalse( $result );
}
/**
* @ticket 60233
*/
public function test_empty_string_value_do_not_register_block_script_module_id() {
$metadata = array( 'viewScriptModule' => '' );
$result = register_block_script_module_id( $metadata, 'viewScriptModule' );
$this->assertFalse( $result );
}
/**
* @ticket 60233
*/
public function test_empty_array_value_do_not_register_block_script_module_id() {
$metadata = array( 'viewScriptModule' => array() );
$result = register_block_script_module_id( $metadata, 'viewScriptModule' );
$this->assertFalse( $result );
}
/**
* @ticket 60233
*/
public function test_wrong_array_index_do_not_register_block_script_module_id() {
$metadata = array( 'viewScriptModule' => array( 'test-module_id' ) );
$result = register_block_script_module_id( $metadata, 'script', 1 );
$this->assertFalse( $result );
}
/**
* @ticket 60233
*/
public function test_missing_asset_file_register_block_script_module_id() {
$metadata = array(
'file' => __FILE__,
'name' => 'unit-tests/test-block',
'viewScriptModule' => 'file:./blocks/notice/missing-asset.js',
);
$result = register_block_script_module_id( $metadata, 'viewScriptModule' );
$this->assertSame( 'unit-tests-test-block-view-script-module', $result );
}
/**
* @ticket 60233
*/
public function test_handle_passed_register_block_script_module_id() {
$metadata = array(
'viewScriptModule' => 'test-script-module-id',
);
$result = register_block_script_module_id( $metadata, 'viewScriptModule' );
$this->assertSame( 'test-script-module-id', $result );
}
/**
* @ticket 60233
*/
public function test_handles_passed_register_block_script_module_ids() {
$metadata = array(
'viewScriptModule' => array( 'test-id', 'test-id-other' ),
);
$result = register_block_script_module_id( $metadata, 'viewScriptModule' );
$this->assertSame( 'test-id', $result );
$result = register_block_script_module_id( $metadata, 'viewScriptModule', 1 );
$this->assertSame( 'test-id-other', $result );
}
/**
* @ticket 60233
*/
public function test_success_register_block_script_module_id() {
$metadata = array(
'file' => DIR_TESTDATA . '/blocks/notice/block.json',
'name' => 'unit-tests/test-block',
'viewScriptModule' => 'file:./block.js',
);
$result = register_block_script_module_id( $metadata, 'viewScriptModule' );
$this->assertSame( 'unit-tests-test-block-view-script-module', $result );
// Test the behavior directly within the unit test
$this->assertFalse(
strpos(
wp_normalize_path( realpath( dirname( $metadata['file'] ) . '/' . $metadata['viewScriptModule'] ) ),
trailingslashit( wp_normalize_path( get_template_directory() ) )
) === 0
);
$this->assertFalse(
strpos(
wp_normalize_path( realpath( dirname( $metadata['file'] ) . '/' . $metadata['viewScriptModule'] ) ),
trailingslashit( wp_normalize_path( get_stylesheet_directory() ) )
) === 0
);
}
/**
* @ticket 50263
*/
@@ -245,14 +413,14 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
public function test_handles_passed_register_block_script_handles() {
$metadata = array(
'script' => array( 'test-script-handle', 'test-script-handle-2' ),
'script' => array( 'test-script-handle', 'test-script-handle-other' ),
);
$result = register_block_script_handle( $metadata, 'script' );
$this->assertSame( 'test-script-handle', $result );
$result = register_block_script_handle( $metadata, 'script', 1 );
$this->assertSame( 'test-script-handle-2', $result, 1 );
$this->assertSame( 'test-script-handle-other', $result );
}
/**
@@ -751,6 +919,7 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
* @ticket 50328
* @ticket 57585
* @ticket 59797
* @ticket 60233
*/
public function test_block_registers_with_metadata_fixture() {
$result = register_block_type_from_metadata(
@@ -853,6 +1022,10 @@ class Tests_Blocks_Register extends WP_UnitTestCase {
array( 'tests-notice-view-script', 'tests-notice-view-script-2' ),
$result->view_script_handles
);
$this->assertSameSets(
array( 'tests-notice-view-script-module', 'tests-notice-view-script-module-2' ),
$result->view_script_module_ids
);
$this->assertSameSets(
array( 'tests-notice-editor-style' ),
$result->editor_style_handles

View File

@@ -261,6 +261,7 @@ class REST_Block_Type_Controller_Test extends WP_Test_REST_Controller_Testcase {
$this->assertSameSets( array(), $data['editor_script_handles'] );
$this->assertSameSets( array(), $data['script_handles'] );
$this->assertSameSets( array(), $data['view_script_handles'] );
$this->assertSameSets( array(), $data['view_script_module_ids'] );
$this->assertSameSets( array(), $data['editor_style_handles'] );
$this->assertSameSets( array(), $data['style_handles'] );
$this->assertFalse( $data['is_dynamic'] );
@@ -339,6 +340,7 @@ class REST_Block_Type_Controller_Test extends WP_Test_REST_Controller_Testcase {
$this->assertSameSets( array(), $data['editor_script_handles'] );
$this->assertSameSets( array(), $data['script_handles'] );
$this->assertSameSets( array(), $data['view_script_handles'] );
$this->assertSameSets( array(), $data['view_script_module_ids'] );
$this->assertSameSets( array(), $data['editor_style_handles'] );
$this->assertSameSets( array(), $data['style_handles'] );
$this->assertFalse( $data['is_dynamic'] );
@@ -562,7 +564,7 @@ class REST_Block_Type_Controller_Test extends WP_Test_REST_Controller_Testcase {
$response = rest_get_server()->dispatch( $request );
$data = $response->get_data();
$properties = $data['schema']['properties'];
$this->assertCount( 32, $properties );
$this->assertCount( 33, $properties );
$this->assertArrayHasKey( 'api_version', $properties );
$this->assertArrayHasKey( 'name', $properties );
$this->assertArrayHasKey( 'title', $properties );
@@ -586,6 +588,7 @@ class REST_Block_Type_Controller_Test extends WP_Test_REST_Controller_Testcase {
$this->assertArrayHasKey( 'editor_script_handles', $properties );
$this->assertArrayHasKey( 'script_handles', $properties );
$this->assertArrayHasKey( 'view_script_handles', $properties );
$this->assertArrayHasKey( 'view_script_module_ids', $properties );
$this->assertArrayHasKey( 'editor_style_handles', $properties );
$this->assertArrayHasKey( 'style_handles', $properties );
$this->assertArrayHasKey( 'view_style_handles', $properties, 'schema must contain view_style_handles' );
@@ -718,6 +721,7 @@ class REST_Block_Type_Controller_Test extends WP_Test_REST_Controller_Testcase {
'editor_script_handles',
'script_handles',
'view_script_handles',
'view_script_module_ids',
'editor_style_handles',
'style_handles',
// Deprecated fields.