From 1a5ff3fc6dbe45376b54335028d8e9b19da93244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=83=C2=B3=C3=85=E2=80=9Akowski?= Date: Wed, 31 Jan 2024 09:09:22 +0000 Subject: [PATCH] Editor: Add `viewStyle` property to `block.json` for frontend-only block styles Related issue in Gutenberg: https://github.com/WordPress/gutenberg/issues/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 --- src/wp-includes/blocks.php | 3 ++ src/wp-includes/class-wp-block-type.php | 10 +++++ src/wp-includes/class-wp-block.php | 6 +++ .../class-wp-rest-block-types-controller.php | 11 ++++++ .../phpunit/data/blocks/notice/block-view.css | 1 + tests/phpunit/data/blocks/notice/block.json | 1 + tests/phpunit/tests/blocks/register.php | 37 +++++++++++++++++-- .../rest-api/rest-block-type-controller.php | 3 +- 8 files changed, 68 insertions(+), 4 deletions(-) create mode 100644 tests/phpunit/data/blocks/notice/block-view.css diff --git a/src/wp-includes/blocks.php b/src/wp-includes/blocks.php index b7b806fd47..fdf97545f7 100644 --- a/src/wp-includes/blocks.php +++ b/src/wp-includes/blocks.php @@ -64,6 +64,7 @@ function generate_block_asset_handle( $block_name, $field_name, $index = 0 ) { 'viewScript' => 'view-script', 'editorStyle' => 'editor-style', 'style' => 'style', + 'viewStyle' => 'view-style', ); $asset_handle = str_replace( '/', '-', $block_name ) . '-' . $field_mappings[ $field_name ]; @@ -326,6 +327,7 @@ function get_block_metadata_i18n_schema() { * @since 6.1.0 Added support for `render` field. * @since 6.3.0 Added `selectors` field. * @since 6.4.0 Added support for `blockHooks` field. + * @since 6.5.0 Added support for `viewStyle` field. * * @param string $file_or_folder Path to the JSON file with metadata definition for * 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() ) { $style_fields = array( 'editorStyle' => 'editor_style_handles', 'style' => 'style_handles', + 'viewStyle' => 'view_style_handles', ); foreach ( $style_fields as $metadata_field_name => $settings_field_name ) { if ( ! empty( $settings[ $metadata_field_name ] ) ) { diff --git a/src/wp-includes/class-wp-block-type.php b/src/wp-includes/class-wp-block-type.php index 6ad8ebcd67..5bdcee1504 100644 --- a/src/wp-includes/class-wp-block-type.php +++ b/src/wp-includes/class-wp-block-type.php @@ -234,6 +234,14 @@ class WP_Block_Type { */ public $style_handles = array(); + /** + * Block type front end only style handles. + * + * @since 6.5.0 + * @var string[] + */ + public $view_style_handles = array(); + /** * Deprecated block type properties for script and style handles. * @@ -278,6 +286,7 @@ class WP_Block_Type { * Deprecated the `editor_script`, `script`, `view_script`, `editor_style`, and `style` properties. * @since 6.3.0 Added the `selectors` property. * @since 6.4.0 Added the `block_hooks` property. + * @since 6.5.0 Added the `view_style_handles` property. * * @see register_block_type() * @@ -315,6 +324,7 @@ class WP_Block_Type { * @type string[] $view_script_handles Block type front end only script handles. * @type string[] $editor_style_handles Block type editor only style handles. * @type string[] $style_handles Block type front end and editor style handles. + * @type string[] $view_style_handles Block type front end only style handles. * } */ public function __construct( $block_type, $args = array() ) { diff --git a/src/wp-includes/class-wp-block.php b/src/wp-includes/class-wp-block.php index 65d3af6a12..f7bf912f42 100644 --- a/src/wp-includes/class-wp-block.php +++ b/src/wp-includes/class-wp-block.php @@ -280,6 +280,12 @@ class WP_Block { } } + if ( ( ! empty( $this->block_type->view_style_handles ) ) ) { + foreach ( $this->block_type->view_style_handles as $view_style_handle ) { + wp_enqueue_style( $view_style_handle ); + } + } + /** * Filters the content of a single block. * diff --git a/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php b/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php index 852143d96e..9e8ba9e929 100644 --- a/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php +++ b/src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php @@ -292,6 +292,7 @@ class WP_REST_Block_Types_Controller extends WP_REST_Controller { 'view_script_handles', 'editor_style_handles', 'style_handles', + 'view_style_handles', 'variations', 'block_hooks', ), @@ -602,6 +603,16 @@ class WP_REST_Block_Types_Controller extends WP_REST_Controller { 'context' => array( 'embed', 'view', 'edit' ), 'readonly' => true, ), + 'view_style_handles' => array( + 'description' => __( 'Public facing style handles.' ), + 'type' => array( 'array' ), + 'default' => array(), + 'items' => array( + 'type' => 'string', + ), + 'context' => array( 'embed', 'view', 'edit' ), + 'readonly' => true, + ), 'styles' => array( 'description' => __( 'Block style variations.' ), 'type' => 'array', diff --git a/tests/phpunit/data/blocks/notice/block-view.css b/tests/phpunit/data/blocks/notice/block-view.css new file mode 100644 index 0000000000..5aefdf30e0 --- /dev/null +++ b/tests/phpunit/data/blocks/notice/block-view.css @@ -0,0 +1 @@ +/* Test front end only CSS file */ \ No newline at end of file diff --git a/tests/phpunit/data/blocks/notice/block.json b/tests/phpunit/data/blocks/notice/block.json index c72c25c6df..3e198145bd 100644 --- a/tests/phpunit/data/blocks/notice/block.json +++ b/tests/phpunit/data/blocks/notice/block.json @@ -70,5 +70,6 @@ "viewScript": [ "tests-notice-view-script", "tests-notice-view-script-2" ], "editorStyle": "tests-notice-editor-style", "style": [ "tests-notice-style", "tests-notice-style-2" ], + "viewStyle": [ "tests-notice-view-style" ], "render": "file:./render.php" } diff --git a/tests/phpunit/tests/blocks/register.php b/tests/phpunit/tests/blocks/register.php index 012171e38a..eb3bc92b18 100644 --- a/tests/phpunit/tests/blocks/register.php +++ b/tests/phpunit/tests/blocks/register.php @@ -156,6 +156,12 @@ class Tests_Blocks_Register extends WP_UnitTestCase { 'unit-tests-my-block-style', generate_block_asset_handle( $block_name, 'style' ) ); + // @ticket 59673 + $this->assertSame( + 'unit-tests-my-block-view-style', + generate_block_asset_handle( $block_name, 'viewStyle' ), + 'asset handle for viewStyle is not generated correctly' + ); } /** @@ -439,9 +445,10 @@ class Tests_Blocks_Register extends WP_UnitTestCase { */ public function test_success_register_block_style_handle() { $metadata = array( - 'file' => DIR_TESTDATA . '/blocks/notice/block.json', - 'name' => 'unit-tests/test-block', - 'style' => 'file:./block.css', + 'file' => DIR_TESTDATA . '/blocks/notice/block.json', + 'name' => 'unit-tests/test-block', + 'style' => 'file:./block.css', + 'viewStyle' => 'file:./block-view.css', ); $result = register_block_style_handle( $metadata, 'style' ); @@ -454,6 +461,17 @@ class Tests_Blocks_Register extends WP_UnitTestCase { wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) ) ); + // Test viewStyle property + $result = register_block_style_handle( $metadata, 'viewStyle' ); + $this->assertSame( 'unit-tests-test-block-view-style', $result ); + + // @ticket 59673 + $this->assertSame( + wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block-view.css' ) ), + wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-view-style', 'path' ) ), + 'viewStyle asset path is not correct' + ); + // Test the behavior directly within the unit test $this->assertFalse( strpos( @@ -837,6 +855,12 @@ class Tests_Blocks_Register extends WP_UnitTestCase { array( 'tests-notice-style', 'tests-notice-style-2' ), $result->style_handles ); + // @ticket 59673 + $this->assertSameSets( + array( 'tests-notice-view-style' ), + $result->view_style_handles, + 'parsed view_style_handles is not correct' + ); // @ticket 50328 $this->assertSame( @@ -844,6 +868,13 @@ class Tests_Blocks_Register extends WP_UnitTestCase { wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-style', 'path' ) ) ); + // @ticket 59673 + $this->assertSame( + wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block-view.css' ) ), + wp_normalize_path( wp_styles()->get_data( 'unit-tests-test-block-view-style', 'path' ) ), + 'viewStyle asset path is not correct' + ); + // @ticket 53148 $this->assertIsCallable( $result->render_callback ); } diff --git a/tests/phpunit/tests/rest-api/rest-block-type-controller.php b/tests/phpunit/tests/rest-api/rest-block-type-controller.php index 59c77e03b6..eca0e64a5f 100644 --- a/tests/phpunit/tests/rest-api/rest-block-type-controller.php +++ b/tests/phpunit/tests/rest-api/rest-block-type-controller.php @@ -557,7 +557,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( 30, $properties ); + $this->assertCount( 31, $properties ); $this->assertArrayHasKey( 'api_version', $properties ); $this->assertArrayHasKey( 'name', $properties ); $this->assertArrayHasKey( 'title', $properties ); @@ -582,6 +582,7 @@ class REST_Block_Type_Controller_Test extends WP_Test_REST_Controller_Testcase { $this->assertArrayHasKey( 'view_script_handles', $properties ); $this->assertArrayHasKey( 'editor_style_handles', $properties ); $this->assertArrayHasKey( 'style_handles', $properties ); + $this->assertArrayHasKey( 'view_style_handles', $properties, 'schema must contain view_style_handles' ); $this->assertArrayHasKey( 'is_dynamic', $properties ); // Deprecated properties. $this->assertArrayHasKey( 'editor_script', $properties );