mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-01-16 20:38:35 +01:00
Code Issues Actions 75 Packages Projects Releases Wiki Activity

Editor: Ensure global styles are rendered for third-party blocks.

Browse Source 
This change ensures custom styles for all third-party blocks are rendered on the front end if assets are set to be loaded on a per-block basis.  Additionally, this change includes new unit tests to help prevent a similar bug in the future.

Props scruffian, aristath, poena, wildworks, ajlende, andraganescu, ndiego, gigitux, cbravobernal, ramonopoly, andrewserong, oandregal, hellofromTonya, bernhard-reiter.
Fixes #56915.

git-svn-id: https://develop.svn.wordpress.org/trunk@54703 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David Baumwald 2022-10-27 15:39:20 +00:00
parent 6a2c768b47
commit 7691fe2725
5 changed files with 243 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
phpcs.xml.dist
View File

@ -244,6 +244,7 @@
<element value="WP_Import_UnitTestCase"/>
<element value="WP_Test_Adjacent_Image_Link_TestCase"/>
<element value="WP_Tests_Image_Resize_UnitTestCase"/>
<element value="WP_Theme_UnitTestCase"/>
<!-- Mock classes. -->
<element value="Spy_REST_Server"/>

15
src/wp-includes/global-styles-and-settings.php
View File

@ -218,14 +218,18 @@ function wp_add_global_styles_for_blocks() {
continue;
}
$stylesheet_handle = 'global-styles';
if ( isset( $metadata['name'] ) ) {
$block_name = str_replace( 'core/', '', $metadata['name'] );
/*
* These block styles are added on block_render.
* This hooks inline CSS to them so that they are loaded conditionally
* based on whether or not the block is used on the page.
*/
wp_add_inline_style( 'wp-block-' . $block_name, $block_css );
if ( str_starts_with( $metadata['name'], 'core/' ) ) {
$block_name = str_replace( 'core/', '', $metadata['name'] );
$stylesheet_handle = 'wp-block-' . $block_name;
}
wp_add_inline_style( $stylesheet_handle, $block_css );
}
// The likes of block element styles from theme.json do not have $metadata['name'] set.
@ -242,8 +246,11 @@ function wp_add_global_styles_for_blocks() {
)
);
if ( isset( $result[0] ) ) {
$block_name = str_replace( 'core/', '', $result[0] );
wp_add_inline_style( 'wp-block-' . $block_name, $block_css );
if ( str_starts_with( $result[0], 'core/' ) ) {
$block_name = str_replace( 'core/', '', $result[0] );
$stylesheet_handle = 'wp-block-' . $block_name;
}
wp_add_inline_style( $stylesheet_handle, $block_css );
}
}
}

5
tests/phpunit/data/themedir1/block-theme/theme.json
View File

@ -69,6 +69,11 @@
"filter": {
"duotone": "var(--wp--preset--duotone--custom-duotone)"
}
},
"my/third-party-block": {
"color": {
"background": "hotpink"
}
}
},
"elements": {

66
tests/phpunit/tests/theme/base.php Normal file
View File

@ -0,0 +1,66 @@
<?php
abstract class WP_Theme_UnitTestCase extends WP_UnitTestCase {
/**
* Theme root directory.
*
* @var string
*/
private $theme_root;
/**
* Original theme directory.
*
* @var string
*/
private $orig_theme_dir;
public function set_up() {
parent::set_up();
$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
$this->theme_root = realpath( DIR_TESTDATA . '/themedir1' );
// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
// Set up the new root.
add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
// Clear caches.
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
}
public function tear_down() {
$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
// Clear up the filters to modify the theme root.
remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
parent::tear_down();
}
/**
* Cleans up global scope.
*
* @global WP_Styles $wp_styles
*/
public function clean_up_global_scope() {
global $wp_styles;
parent::clean_up_global_scope();
$wp_styles = null;
}
public function filter_set_theme_root() {
return $this->theme_root;
}
}

160
tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php Normal file
View File

@ -0,0 +1,160 @@
<?php
require_once __DIR__ . '/base.php';
/**
* Tests wp_add_global_styles_for_blocks().
*
* @group themes
*
* @covers ::wp_add_global_styles_for_blocks
*/
class Tests_Theme_WpAddGlobalStylesForBlocks extends WP_Theme_UnitTestCase {
/**
* Test blocks to unregister at cleanup.
*
* @var array
*/
private $test_blocks = array();
public function tear_down() {
// Unregister test blocks.
if ( ! empty( $this->test_blocks ) ) {
foreach ( $this->test_blocks as $test_block ) {
unregister_block_type( $test_block );
}
$this->test_blocks = array();
}
parent::tear_down();
}
/**
* @ticket 56915
*/
public function test_third_party_blocks_inline_styles_not_register_to_global_styles() {
switch_theme( 'block-theme' );
wp_register_style( 'global-styles', false, array(), true, true );
wp_add_global_styles_for_blocks();
$this->assertNotContains(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$this->get_global_styles()
);
}
/**
* @ticket 56915
*/
public function test_third_party_blocks_inline_styles_get_registered_to_global_styles() {
$this->set_up_third_party_block();
wp_register_style( 'global-styles', false, array(), true, true );
$this->assertNotContains(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$this->get_global_styles(),
'Third party block inline style should not be registered before running wp_add_global_styles_for_blocks()'
);
wp_add_global_styles_for_blocks();
$this->assertContains(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$this->get_global_styles(),
'Third party block inline style should be registered after running wp_add_global_styles_for_blocks()'
);
}
/**
* @ticket 56915
*/
public function test_third_party_blocks_inline_styles_get_registered_to_global_styles_when_per_block() {
$this->set_up_third_party_block();
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
wp_register_style( 'global-styles', false, array(), true, true );
$this->assertNotContains(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$this->get_global_styles(),
'Third party block inline style should not be registered before running wp_add_global_styles_for_blocks()'
);
wp_add_global_styles_for_blocks();
$this->assertContains(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$this->get_global_styles(),
'Third party block inline style should be registered after running wp_add_global_styles_for_blocks()'
);
}
/**
* @ticket 56915
*/
public function test_third_party_blocks_inline_styles_get_rendered_when_per_block() {
$this->set_up_third_party_block();
add_filter( 'should_load_separate_core_block_assets', '__return_true' );
wp_register_style( 'global-styles', false, array(), true, true );
wp_enqueue_style( 'global-styles' );
wp_add_global_styles_for_blocks();
$actual = get_echo( 'wp_print_styles' );
$this->assertStringContainsString(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$actual,
'Third party block inline style should render'
);
$this->assertStringNotContainsString(
'.wp-block-post-featured-image',
$actual,
'Core block should not render'
);
}
/**
* @ticket 56915
*/
public function test_blocks_inline_styles_get_rendered() {
wp_register_style( 'global-styles', false, array(), true, true );
wp_enqueue_style( 'global-styles' );
wp_add_global_styles_for_blocks();
$actual = get_echo( 'wp_print_styles' );
$this->assertStringContainsString(
'.wp-block-my-third-party-block{background-color: hotpink;}',
$actual,
'Third party block inline style should render'
);
$this->assertStringContainsString(
'.wp-block-post-featured-image',
$actual,
'Core block should render'
);
}
private function set_up_third_party_block() {
switch_theme( 'block-theme' );
$name = 'my/third-party-block';
$settings = array(
'icon' => 'text',
'category' => 'common',
'render_callback' => 'foo',
);
register_block_type( $name, $settings );
$this->test_blocks[] = $name;
}
private function get_global_styles() {
$actual = wp_styles()->get_data( 'global-styles', 'after' );
return is_array( $actual ) ? $actual : array();
}
}