Editor: Lazily load Duotone settings only when needed.

Introduced in [56101] the `WP_Duotone` class, hooks into the `wp_loaded` action to load duotone style data from global styles. Hooking in early in the bootstrap process caused a number of problems. This hook, triggered an error on installing, as this lookup for global styles, would result in a global post trying to be created, even before the table existed. Additionally, this implementation caused a severe performance regression, as duotone styling data was loaded unnecessarily for requests that did not require such data, such as REST API calls or actions within the wp-admin interface.

In this change, refactor the `WP_Duotone` to lazily load the global styles and theme.json data, only when a block that supports duotone is encountered. The method `render_duotone_support` was change to take a third parameter to reuse the existing `WP_Block_Type` object passed to the filter, to save it being looked up again. The code has also got improved type checking and the use of the util function  `block_has_support`. Furthermore, the code's readability has been improved, along with enhancements to the documentation blocks.

Props Chouby, spacedmonkey, SergeyBiryukov, swissspidy, costdev, joemcgill, flixos90, mukesh27, nazmul111, ajlende, isabel_brison.
Fixes #58673.

git-svn-id: https://develop.svn.wordpress.org/trunk@56226 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonny Harris
2023-07-13 11:32:19 +00:00
parent 23a1516926
commit fc538206ec
5 changed files with 96 additions and 79 deletions

View File

@@ -27,9 +27,10 @@ class Tests_Block_Supports_DuoTones extends WP_UnitTestCase {
'blockName' => 'core/image',
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
);
$wp_block = new WP_Block( $block );
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
$expected = '<figure class="wp-block-image size-full wp-duotone-blue-orange"><img src="/my-image.jpg" /></figure>';
$this->assertSame( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
$this->assertSame( $expected, WP_Duotone::render_duotone_support( $block_content, $block, $wp_block ) );
}
/**
@@ -44,9 +45,10 @@ class Tests_Block_Supports_DuoTones extends WP_UnitTestCase {
'blockName' => 'core/image',
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
);
$wp_block = new WP_Block( $block );
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
$expected = '/<figure class="wp-block-image size-full wp-duotone-unset-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block, $wp_block ) );
}
/**
@@ -59,9 +61,10 @@ class Tests_Block_Supports_DuoTones extends WP_UnitTestCase {
'blockName' => 'core/image',
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
);
$wp_block = new WP_Block( $block );
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
$expected = '/<figure class="wp-block-image size-full wp-duotone-ffffff-000000-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block, $wp_block ) );
}
/**

View File

@@ -695,13 +695,14 @@ class Tests_Blocks_SupportedStyles extends WP_UnitTestCase {
);
$this->register_block_type( 'core/example', $block_type_settings );
$block = array(
$block = array(
'blockName' => 'core/example',
'attrs' => array(),
'innerBlock' => array(),
'innerContent' => array(),
'innerHTML' => array(),
);
$wp_block = new WP_Block( $block );
// Custom error handler's see Warnings even if they are suppressed by the @ symbol.
$errors = array();
@@ -714,7 +715,7 @@ class Tests_Blocks_SupportedStyles extends WP_UnitTestCase {
// HTML5 elements like <time> are not supported by the DOMDocument parser used by the block supports feature.
// This specific example is emitted by the "Display post date" setting in the latest-posts block.
apply_filters( 'render_block', '<div><time datetime="2020-06-18T04:01:43+10:00" class="wp-block-latest-posts__post-date">June 18, 2020</time></div>', $block );
apply_filters( 'render_block', '<div><time datetime="2020-06-18T04:01:43+10:00" class="wp-block-latest-posts__post-date">June 18, 2020</time></div>', $block, $wp_block );
restore_error_handler();