Skip to content

Commit ad976ad

Browse files
author
gziolo
committed
Build: Split packages and blocks to their webpack configs
It aligns with the changes proposed added in Gutenberg: WordPress/gutenberg#33293. The idea here is to split the growing webpack config into two parts: blocks and packages. We need to add handling for JavaScript files that are going to be used with blocks on the frontend. They didn't work quite well with the current setup for entry points created for packages. As part of the effort, it adds support for `viewScript` in `block.json` metadata file that is later translated to `$view_script` in `WP_Block_Type` class and exposed as `view_script` from the REST API endpoint for block types. Props youknowriad, desrosj, aristath. Fixes #53690. git-svn-id: https://develop.svn.wordpress.org/trunk@51501 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 31c328d commit ad976ad

14 files changed

Lines changed: 290 additions & 126 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ wp-tests-config.php
2929
/src/wp-includes/css/*.min.css
3030
/src/wp-includes/css/*-rtl.css
3131
/src/wp-includes/blocks/**/*.css
32+
/src/wp-includes/blocks/**/*.js
33+
/src/wp-includes/blocks/**/*.js.map
3234
/packagehash.txt
3335
/artifacts
3436

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -997,6 +997,7 @@ module.exports = function(grunt) {
997997
WORKING_DIR + 'wp-{admin,includes}/**/*.js',
998998
WORKING_DIR + 'wp-content/themes/twenty*/**/*.js',
999999
'!' + WORKING_DIR + 'wp-content/themes/twenty*/node_modules/**/*.js',
1000+
'!' + WORKING_DIR + 'wp-includes/blocks/**/*.js',
10001001
'!' + WORKING_DIR + 'wp-includes/js/dist/**/*.js',
10011002
]
10021003
}

‎src/wp-includes/blocks.php‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,16 @@ function generate_block_asset_handle( $block_name, $field_name ) {
4242
if ( 0 === strpos( $field_name, 'editor' ) ) {
4343
$asset_handle .= '-editor';
4444
}
45+
if ( 0 === strpos( $field_name, 'view' ) ) {
46+
$asset_handle .= '-view';
47+
}
4548
return $asset_handle;
4649
}
4750

4851
$field_mappings = array(
4952
'editorScript' => 'editor-script',
5053
'script' => 'script',
54+
'viewScript' => 'view-script',
5155
'editorStyle' => 'editor-style',
5256
'style' => 'style',
5357
);
@@ -96,18 +100,23 @@ function register_block_script_handle( $metadata, $field_name ) {
96100
);
97101
return false;
98102
}
99-
$script_asset = require $script_asset_path;
100-
$result = wp_register_script(
103+
$is_core_block = isset( $metadata['file'] ) && 0 === strpos( $metadata['file'], ABSPATH . WPINC );
104+
$script_uri = $is_core_block ?
105+
includes_url( str_replace( ABSPATH . WPINC, '', realpath( dirname( $metadata['file'] ) . '/' . $script_path ) ) ) :
106+
plugins_url( $script_path, $metadata['file'] );
107+
$script_asset = require $script_asset_path;
108+
$script_dependencies = isset( $script_asset['dependencies'] ) ? $script_asset['dependencies'] : array();
109+
$result = wp_register_script(
101110
$script_handle,
102-
plugins_url( $script_path, $metadata['file'] ),
103-
$script_asset['dependencies'],
104-
$script_asset['version']
111+
$script_uri,
112+
$script_dependencies,
113+
isset( $script_asset['version'] ) ? $script_asset['version'] : false
105114
);
106115
if ( ! $result ) {
107116
return false;
108117
}
109118

110-
if ( ! empty( $metadata['textdomain'] ) ) {
119+
if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $script_dependencies ) ) {
111120
wp_set_script_translations( $script_handle, $metadata['textdomain'] );
112121
}
113122

@@ -182,6 +191,7 @@ function register_block_style_handle( $metadata, $field_name ) {
182191
* Registers a block type from the metadata stored in the `block.json` file.
183192
*
184193
* @since 5.5.0
194+
* @since 5.9.0 Added support for the `viewScript` field.
185195
*
186196
* @param string $file_or_folder Path to the JSON file with metadata definition for
187197
* the block or path to the folder where the `block.json` file is located.
@@ -304,6 +314,13 @@ function register_block_type_from_metadata( $file_or_folder, $args = array() ) {
304314
);
305315
}
306316

317+
if ( ! empty( $metadata['viewScript'] ) ) {
318+
$settings['view_script'] = register_block_script_handle(
319+
$metadata,
320+
'viewScript'
321+
);
322+
}
323+
307324
if ( ! empty( $metadata['editorStyle'] ) ) {
308325
$settings['editor_style'] = register_block_style_handle(
309326
$metadata,

‎src/wp-includes/blocks/file/view.asset.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<?php return array('dependencies' => array('wp-polyfill'), 'version' => '499eaf2efb98327a07f222e92d742380');

‎src/wp-includes/blocks/file/view.min.asset.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'e8d668b8e69d9bf1c99dc250d92f2b72');

‎src/wp-includes/class-wp-block-type.php‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,31 +156,39 @@ class WP_Block_Type {
156156
public $provides_context = null;
157157

158158
/**
159-
* Block type editor script handle.
159+
* Block type editor only script handle.
160160
*
161161
* @since 5.0.0
162162
* @var string|null
163163
*/
164164
public $editor_script = null;
165165

166166
/**
167-
* Block type front end script handle.
167+
* Block type front end and editor script handle.
168168
*
169169
* @since 5.0.0
170170
* @var string|null
171171
*/
172172
public $script = null;
173173

174174
/**
175-
* Block type editor style handle.
175+
* Block type front end only script handle.
176+
*
177+
* @since 5.9.0
178+
* @var string|null
179+
*/
180+
public $view_script = null;
181+
182+
/**
183+
* Block type editor only style handle.
176184
*
177185
* @since 5.0.0
178186
* @var string|null
179187
*/
180188
public $editor_style = null;
181189

182190
/**
183-
* Block type front end style handle.
191+
* Block type front end and editor style handle.
184192
*
185193
* @since 5.0.0
186194
* @var string|null
@@ -198,6 +206,7 @@ class WP_Block_Type {
198206
* `uses_context`, and `provides_context` properties.
199207
* @since 5.6.0 Added the `api_version` property.
200208
* @since 5.8.0 Added the `variations` property.
209+
* @since 5.9.0 Added the `view_script` property.
201210
*
202211
* @see register_block_type()
203212
*
@@ -225,10 +234,11 @@ class WP_Block_Type {
225234
* @type array|null $attributes Block type attributes property schemas.
226235
* @type array $uses_context Context values inherited by blocks of this type.
227236
* @type array|null $provides_context Context provided by blocks of this type.
228-
* @type string|null $editor_script Block type editor script handle.
229-
* @type string|null $script Block type front end script handle.
230-
* @type string|null $editor_style Block type editor style handle.
231-
* @type string|null $style Block type front end style handle.
237+
* @type string|null $editor_script Block type editor only script handle.
238+
* @type string|null $script Block type front end and editor script handle.
239+
* @type string|null $view_script Block type front end only script handle.
240+
* @type string|null $editor_style Block type editor only style handle.
241+
* @type string|null $style Block type front end and editor style handle.
232242
* }
233243
*/
234244
public function __construct( $block_type, $args = array() ) {

‎src/wp-includes/class-wp-block.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,10 @@ public function render( $options = array() ) {
229229
wp_enqueue_script( $this->block_type->script );
230230
}
231231

232+
if ( ! empty( $this->block_type->view_script ) && empty( $this->block_type->render_callback ) ) {
233+
wp_enqueue_script( $this->block_type->view_script );
234+
}
235+
232236
if ( ! empty( $this->block_type->style ) ) {
233237
wp_enqueue_style( $this->block_type->style );
234238
}

‎src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@ public function prepare_item_for_response( $block_type, $request ) {
272272
'example',
273273
'editor_script',
274274
'script',
275+
'view_script',
275276
'editor_style',
276277
'style',
277278
'variations',
@@ -517,6 +518,13 @@ public function get_item_schema() {
517518
'readonly' => true,
518519
),
519520
'script' => array(
521+
'description' => __( 'Public facing and editor script handle.' ),
522+
'type' => array( 'string', 'null' ),
523+
'default' => null,
524+
'context' => array( 'embed', 'view', 'edit' ),
525+
'readonly' => true,
526+
),
527+
'view_script' => array(
520528
'description' => __( 'Public facing script handle.' ),
521529
'type' => array( 'string', 'null' ),
522530
'default' => null,
@@ -531,7 +539,7 @@ public function get_item_schema() {
531539
'readonly' => true,
532540
),
533541
'style' => array(
534-
'description' => __( 'Public facing style handle.' ),
542+
'description' => __( 'Public facing and editor style handle.' ),
535543
'type' => array( 'string', 'null' ),
536544
'default' => null,
537545
'context' => array( 'embed', 'view', 'edit' ),

‎tests/phpunit/data/blocks/notice/block.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
},
4949
"editorScript": "tests-notice-editor-script",
5050
"script": "tests-notice-script",
51+
"viewScript": "tests-notice-view-script",
5152
"editorStyle": "tests-notice-editor-style",
5253
"style": "tests-notice-style"
5354
}

‎tests/phpunit/tests/blocks/register.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,10 @@ function test_generate_block_asset_handle() {
132132
'unit-tests-my-block-script',
133133
generate_block_asset_handle( $block_name, 'script' )
134134
);
135+
$this->assertSame(
136+
'unit-tests-my-block-view-script',
137+
generate_block_asset_handle( $block_name, 'viewScript' )
138+
);
135139
$this->assertSame(
136140
'unit-tests-my-block-editor-style',
137141
generate_block_asset_handle( $block_name, 'editorStyle' )
@@ -156,6 +160,10 @@ function test_generate_block_asset_handle_core_block() {
156160
'wp-block-paragraph',
157161
generate_block_asset_handle( $block_name, 'script' )
158162
);
163+
$this->assertSame(
164+
'wp-block-paragraph-view',
165+
generate_block_asset_handle( $block_name, 'viewScript' )
166+
);
159167
$this->assertSame(
160168
'wp-block-paragraph-editor',
161169
generate_block_asset_handle( $block_name, 'editorStyle' )
@@ -372,6 +380,7 @@ function test_block_registers_with_metadata_fixture() {
372380
);
373381
$this->assertSame( 'tests-notice-editor-script', $result->editor_script );
374382
$this->assertSame( 'tests-notice-script', $result->script );
383+
$this->assertSame( 'tests-notice-view-script', $result->view_script );
375384
$this->assertSame( 'tests-notice-editor-style', $result->editor_style );
376385
$this->assertSame( 'tests-notice-style', $result->style );
377386

0 commit comments

Comments
 (0)