Changeset 57493

Timestamp:

01/31/2024 09:09:22 AM (3 years ago)

Author:

gziolo

Message:

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.

Location:

trunk

Files:

• src/wp-includes/blocks.php (modified) (3 diffs)
• src/wp-includes/class-wp-block-type.php (modified) (3 diffs)
• src/wp-includes/class-wp-block.php (modified) (1 diff)
• src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php (modified) (2 diffs)
• tests/phpunit/data/blocks/notice/block-view.css (added)
• tests/phpunit/data/blocks/notice/block.json (modified) (1 diff)
• tests/phpunit/tests/blocks/register.php (modified) (5 diffs)
• tests/phpunit/tests/rest-api/rest-block-type-controller.php (modified) (2 diffs)

trunk/src/wp-includes/blocks.php

@@ -65 +65 @@
                 'editorStyle'  => 'editor-style',
                 'style'        => 'style',
+                'viewStyle'    => 'view-style',
         );
         $asset_handle   = str_replace( '/', '-', $block_name ) .
@@ -327 +328 @@
  * @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
@@ -504 +506 @@
                 'editorStyle' => 'editor_style_handles',
                 'style'       => 'style_handles',
+                'viewStyle'   => 'view_style_handles',
         );
         foreach ( $style_fields as $metadata_field_name => $settings_field_name ) {

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

@@ -234 +234 @@
          */
         public $style_handles = array();
+
+        /**
+         * Block type front end only style handles.
+         *
+         * @since 6.5.0
+         * @var string[]
+         */
+        public $view_style_handles = array();
 
         /**
@@ -279 +287 @@
          * @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()
@@ -316 +325 @@
          *     @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.
          * }
          */

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

@@ -281 +281 @@
                 }
 
+                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.

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

@@ -293 +293 @@
                                 'editor_style_handles',
                                 'style_handles',
+                                'view_style_handles',
                                 'variations',
                                 'block_hooks',
@@ -603 +604 @@
                                         '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.' ),

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

@@ -71 +71 @@
         "editorStyle": "tests-notice-editor-style",
         "style": [ "tests-notice-style", "tests-notice-style-2" ],
+        "viewStyle": [ "tests-notice-view-style" ],
         "render": "file:./render.php"
 }

trunk/tests/phpunit/tests/blocks/register.php

@@ -157 +157 @@
                         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'
+                );
         }
 
@@ -440 +446 @@
         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' );
@@ -453 +460 @@
                         wp_normalize_path( realpath( DIR_TESTDATA . '/blocks/notice/block.css' ) ),
                         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'
                 );
 
@@ -838 +856 @@
                         $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
@@ -843 +867 @@
                         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'
                 );
 

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

@@ -558 +558 @@
                 $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 );
@@ -583 +583 @@
                 $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.