vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Greg Ziółkowski 2024-01-31 09:09:22 +00:00
parent dc15d66ee6
commit 1a5ff3fc6d
8 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/wp-includes/blocks.php
View File

@ -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 ] ) ) {

10
src/wp-includes/class-wp-block-type.php
View File

@ -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() ) {

6
src/wp-includes/class-wp-block.php
View File

@ -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.
*

11
src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php
View File

@ -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',

1
tests/phpunit/data/blocks/notice/block-view.css Normal file
View File

@ -0,0 +1 @@
/* Test front end only CSS file */

1
tests/phpunit/data/blocks/notice/block.json
View File

@ -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"
}

37
tests/phpunit/tests/blocks/register.php
View File

@ -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 );
}

3
tests/phpunit/tests/rest-api/rest-block-type-controller.php
View File

@ -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 );