Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add viewStyle property for block metadata #5531

Closed
wants to merge 4 commits into from
Closed

Add viewStyle property for block metadata #5531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51fbbd4
add viewStyle property for block metadata
gaambo Oct 19, 2023
df8a60d
fix unit tests
gaambo Oct 19, 2023
abed24d
fix code formatting
gaambo Oct 19, 2023
a59d005
Apply suggestions from code review
gaambo Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/wp-includes/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ];
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -468,6 +470,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( $metadata[ $metadata_field_name ] ) ) {
Expand Down Expand Up @@ -1961,7 +1964,7 @@ function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) {
* @return string Filtered content without any HTML on the footnote content and with the sanitized id.
*/
function _wp_filter_post_meta_footnotes( $footnotes ) {
$footnotes_decoded = json_decode( $footnotes, true );
$footnotes_decoded = json_decode( $footnotes, true );
if ( ! is_array( $footnotes_decoded ) ) {
return '';
}
Expand Down
10 changes: 10 additions & 0 deletions src/wp-includes/class-wp-block-type.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,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.
*
Expand Down Expand Up @@ -267,6 +275,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()
*
Expand Down Expand Up @@ -303,6 +312,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() ) {
Expand Down
6 changes: 6 additions & 0 deletions src/wp-includes/class-wp-block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
11 changes: 11 additions & 0 deletions src/wp-includes/rest-api/endpoints/class-wp-rest-block-types-controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
),
Expand Down Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions tests/phpunit/data/blocks/notice/block-view.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/* Test front end only CSS file */
1 change: 1 addition & 0 deletions tests/phpunit/data/blocks/notice/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,5 +69,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 changes: 34 additions & 3 deletions tests/phpunit/tests/blocks/register.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);
}

/**
Expand Down Expand Up @@ -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' );

Expand All @@ -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(
Expand Down Expand Up @@ -715,13 +733,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 );
}
Expand Down
3 changes: 2 additions & 1 deletion tests/phpunit/tests/rest-api/rest-block-type-controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,7 +553,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 );
Expand All @@ -578,6 +578,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 );
Expand Down
Loading