Editor: Add viewStyle property to block.json for frontend-only bl…

…ock 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
WordPress · Jan 31, 2024 · 1a5ff3f · 1a5ff3f
1 parent dc15d66
commit 1a5ff3f
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 4 deletions.
diff --git 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
@@ -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
@@ -280,6 +280,12 @@ public function render( $options = array() ) {
 			}
 		}
 
+		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
@@ -292,6 +292,7 @@ public function prepare_item_for_response( $item, $request ) {
 				'view_script_handles',
 				'editor_style_handles',
 				'style_handles',
+				'view_style_handles',
 				'variations',
 				'block_hooks',
 			),
@@ -602,6 +603,16 @@ public function get_item_schema() {
 					'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
@@ -0,0 +1 @@
+/* Test front end only CSS file */
diff --git 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
@@ -156,6 +156,12 @@ public function test_generate_block_asset_handle() {
 			'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 @@ public function test_handles_passed_register_block_style_handles() {
 	 */
 	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 @@ public function test_success_register_block_style_handle() {
 			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,13 +855,26 @@ public function test_block_registers_with_metadata_fixture() {
 			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(
 			wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
 			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
@@ -557,7 +557,7 @@ public function test_get_item_schema() {
 		$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 @@ public function test_get_item_schema() {
 		$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 );