Skip to content

Commit 1a5ff3f

Browse files
gziologziolo
committed
Editor: Add viewStyle property to block.json for frontend-only block styles
Related issue in Gutenberg: WordPress/gutenberg#54491. For block scripts there was already `script`, `viewScript` and `editorScript`. For block styles there was only `style` and `editorStyle`. This brings the parity. Props gaambo. Fixes #59673. git-svn-id: https://develop.svn.wordpress.org/trunk@57493 602fd350-edb4-49c9-b593-d223f7449a82
1 parent dc15d66 commit 1a5ff3f

8 files changed

Lines changed: 68 additions & 4 deletions

File tree

‎src/wp-includes/blocks.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ function generate_block_asset_handle( $block_name, $field_name, $index = 0 ) {
6464
'viewScript' => 'view-script',
6565
'editorStyle' => 'editor-style',
6666
'style' => 'style',
67+
'viewStyle' => 'view-style',
6768
);
6869
$asset_handle = str_replace( '/', '-', $block_name ) .
6970
'-' . $field_mappings[ $field_name ];
@@ -326,6 +327,7 @@ function get_block_metadata_i18n_schema() {
326327
* @since 6.1.0 Added support for `render` field.
327328
* @since 6.3.0 Added `selectors` field.
328329
* @since 6.4.0 Added support for `blockHooks` field.
330+
* @since 6.5.0 Added support for `viewStyle` field.
329331
*
330332
* @param string $file_or_folder Path to the JSON file with metadata definition for
331333
* the block or path to the folder where the `block.json` file is located.
@@ -503,6 +505,7 @@ function register_block_type_from_metadata( $file_or_folder, $args = array() ) {
503505
$style_fields = array(
504506
'editorStyle' => 'editor_style_handles',
505507
'style' => 'style_handles',
508+
'viewStyle' => 'view_style_handles',
506509
);
507510
foreach ( $style_fields as $metadata_field_name => $settings_field_name ) {
508511
if ( ! empty( $settings[ $metadata_field_name ] ) ) {

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,14 @@ class WP_Block_Type {
234234
*/
235235
public $style_handles = array();
236236

237+
/**
238+
* Block type front end only style handles.
239+
*
240+
* @since 6.5.0
241+
* @var string[]
242+
*/
243+
public $view_style_handles = array();
244+
237245
/**
238246
* Deprecated block type properties for script and style handles.
239247
*
@@ -278,6 +286,7 @@ class WP_Block_Type {
278286
* Deprecated the `editor_script`, `script`, `view_script`, `editor_style`, and `style` properties.
279287
* @since 6.3.0 Added the `selectors` property.
280288
* @since 6.4.0 Added the `block_hooks` property.
289+
* @since 6.5.0 Added the `view_style_handles` property.
281290
*
282291
* @see register_block_type()
283292
*
@@ -315,6 +324,7 @@ class WP_Block_Type {
315324
* @type string[] $view_script_handles Block type front end only script handles.
316325
* @type string[] $editor_style_handles Block type editor only style handles.
317326
* @type string[] $style_handles Block type front end and editor style handles.
327+
* @type string[] $view_style_handles Block type front end only style handles.
318328
* }
319329
*/
320330
public function __construct( $block_type, $args = array() ) {

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,12 @@ public function render( $options = array() ) {
280280
}
281281
}
282282

283+
if ( ( ! empty( $this->block_type->view_style_handles ) ) ) {
284+
foreach ( $this->block_type->view_style_handles as $view_style_handle ) {
285+
wp_enqueue_style( $view_style_handle );
286+
}
287+
}
288+
283289
/**
284290
* Filters the content of a single block.
285291
*

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,7 @@ public function prepare_item_for_response( $item, $request ) {
292292
'view_script_handles',
293293
'editor_style_handles',
294294
'style_handles',
295+
'view_style_handles',
295296
'variations',
296297
'block_hooks',
297298
),
@@ -602,6 +603,16 @@ public function get_item_schema() {
602603
'context' => array( 'embed', 'view', 'edit' ),
603604
'readonly' => true,
604605
),
606+
'view_style_handles' => array(
607+
'description' => __( 'Public facing style handles.' ),
608+
'type' => array( 'array' ),
609+
'default' => array(),
610+
'items' => array(
611+
'type' => 'string',
612+
),
613+
'context' => array( 'embed', 'view', 'edit' ),
614+
'readonly' => true,
615+
),
605616
'styles' => array(
606617
'description' => __( 'Block style variations.' ),
607618
'type' => 'array',

‎tests/phpunit/data/blocks/notice/block-view.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* Test front end only CSS file */

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,6 @@
7070
"viewScript": [ "tests-notice-view-script", "tests-notice-view-script-2" ],
7171
"editorStyle": "tests-notice-editor-style",
7272
"style": [ "tests-notice-style", "tests-notice-style-2" ],
73+
"viewStyle": [ "tests-notice-view-style" ],
7374
"render": "file:./render.php"
7475
}

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

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,12 @@ public function test_generate_block_asset_handle() {
156156
'unit-tests-my-block-style',
157157
generate_block_asset_handle( $block_name, 'style' )
158158
);
159+
// @ticket 59673
160+
$this->assertSame(
161+
'unit-tests-my-block-view-style',
162+
generate_block_asset_handle( $block_name, 'viewStyle' ),
163+
'asset handle for viewStyle is not generated correctly'
164+
);
159165
}
160166

161167
/**
@@ -439,9 +445,10 @@ public function test_handles_passed_register_block_style_handles() {
439445
*/
440446
public function test_success_register_block_style_handle() {
441447
$metadata = array(
442-
'file' => DIR_TESTDATA . '/blocks/notice/block.json',
443-
'name' => 'unit-tests/test-block',
444-
'style' => 'file:./block.css',
448+
'file' => DIR_TESTDATA . '/blocks/notice/block.json',
449+
'name' => 'unit-tests/test-block',
450+
'style' => 'file:./block.css',
451+
'viewStyle' => 'file:./block-view.css',
445452
);
446453
$result = register_block_style_handle( $metadata, 'style' );
447454

@@ -454,6 +461,17 @@ public function test_success_register_block_style_handle() {
454461
wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) )
455462
);
456463

464+
// Test viewStyle property
465+
$result = register_block_style_handle( $metadata, 'viewStyle' );
466+
$this->assertSame( 'unit-tests-test-block-view-style', $result );
467+
468+
// @ticket 59673
469+
$this->assertSame(
470+
wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block-view.css' ) ),
471+
wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-view-style', 'path' ) ),
472+
'viewStyle asset path is not correct'
473+
);
474+
457475
// Test the behavior directly within the unit test
458476
$this->assertFalse(
459477
strpos(
@@ -837,13 +855,26 @@ public function test_block_registers_with_metadata_fixture() {
837855
array( 'tests-notice-style', 'tests-notice-style-2' ),
838856
$result->style_handles
839857
);
858+
// @ticket 59673
859+
$this->assertSameSets(
860+
array( 'tests-notice-view-style' ),
861+
$result->view_style_handles,
862+
'parsed view_style_handles is not correct'
863+
);
840864

841865
// @ticket 50328
842866
$this->assertSame(
843867
wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
844868
wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) )
845869
);
846870

871+
// @ticket 59673
872+
$this->assertSame(
873+
wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block-view.css' ) ),
874+
wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-view-style', 'path' ) ),
875+
'viewStyle asset path is not correct'
876+
);
877+
847878
// @ticket 53148
848879
$this->assertIsCallable( $result->render_callback );
849880
}

‎tests/phpunit/tests/rest-api/rest-block-type-controller.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -557,7 +557,7 @@ public function test_get_item_schema() {
557557
$response = rest_get_server()->dispatch( $request );
558558
$data = $response->get_data();
559559
$properties = $data['schema']['properties'];
560-
$this->assertCount( 30, $properties );
560+
$this->assertCount( 31, $properties );
561561
$this->assertArrayHasKey( 'api_version', $properties );
562562
$this->assertArrayHasKey( 'name', $properties );
563563
$this->assertArrayHasKey( 'title', $properties );
@@ -582,6 +582,7 @@ public function test_get_item_schema() {
582582
$this->assertArrayHasKey( 'view_script_handles', $properties );
583583
$this->assertArrayHasKey( 'editor_style_handles', $properties );
584584
$this->assertArrayHasKey( 'style_handles', $properties );
585+
$this->assertArrayHasKey( 'view_style_handles', $properties, 'schema must contain view_style_handles' );
585586
$this->assertArrayHasKey( 'is_dynamic', $properties );
586587
// Deprecated properties.
587588
$this->assertArrayHasKey( 'editor_script', $properties );

0 commit comments

Comments
 (0)