Skip to content

Duotone: Limit SVG filter output to used filters #49103

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

Merged
ajlende merged 55 commits into from
Mar 17, 2023
Merged

Duotone: Limit SVG filter output to used filters #49103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
7aa4c4a
Adds WP_Duotone class to set-up preset and theme-defined blocks using…
jeryj Mar 7, 2023
23b631b
Fix incorrect filter name
jeryj Mar 8, 2023
2f63ab2
Check if duotone filter is applied on a block in theme.json
jeryj Mar 9, 2023
70581a1
Rename duotone class static variables and functions
jeryj Mar 9, 2023
a024ddb
Set WP_Duotone:: array and only output those via wp_footer
jeryj Mar 9, 2023
0256548
Only output used duotone presets
jeryj Mar 9, 2023
2c283cc
Cleanup, removal, and only output used SVG filters and CSS
jeryj Mar 10, 2023
460a413
Support var:preset|duotone|default-filter syntax for block name styles
jeryj Mar 10, 2023
2d0e235
Refactor to handle both duotone pipe and css var style syntax for duo…
jeryj Mar 10, 2023
5f47de7
Renamed output_presets to output, as it also includes custom dutone o…
jeryj Mar 10, 2023
c39504b
Fix theme json vs block styles duotone order of application
jeryj Mar 10, 2023
1f13855
Renamed filter to be more accurate, but should refactor out
jeryj Mar 10, 2023
0c67759
Simplify getting global styles presets
jeryj Mar 13, 2023
e41b1e6
Undo theme json class duotone refactoring and remove filter
jeryj Mar 13, 2023
45426d2
Remove unused code
jeryj Mar 13, 2023
3d224bf
Rename save_ to set_ class method names
jeryj Mar 14, 2023
476fe04
Fix duotone test to use real global preset value
jeryj Mar 14, 2023
c23a4a4
Tests for WP_Duotone::gutenberg_get_slug_from_attr()
jeryj Mar 14, 2023
47d86d4
Rework gutenberg_get_slug_from_attr to use regex for more accurate ma…
jeryj Mar 14, 2023
a7fab17
Tests for WP_Duotone::is_preset
jeryj Mar 14, 2023
af3a236
Rework is_preset to also check if the preset exists
jeryj Mar 14, 2023
005baa1
Remove array_key_exists checks for presets within the block filter
jeryj Mar 14, 2023
c7160de
Return early if no block content
jeryj Mar 14, 2023
f5499b4
Make linter happy
jeryj Mar 14, 2023
99faa18
Remove unnecessary methods from theme json class
jeryj Mar 15, 2023
f599e58
Renamed get_css_var to get_css_custom_property name and added get_css…
jeryj Mar 15, 2023
31da413
Renamed get_css_declaration to get_css_custom_property_declaration
jeryj Mar 15, 2023
a656518
Rename WP_Duotone to WP_Duotone_Gutenberg to match gutenberg coding s…
jeryj Mar 15, 2023
2df2c5c
Move safari rerender hack into WP_Duotone_Gutenberg
jeryj Mar 15, 2023
826cdc9
Move footer action to output SVG into WP_Duotone_Gutenberg.
jeryj Mar 15, 2023
737b9cb
Move wp_enqueue_scripts action into WP_Duotone_Gutenberg class.
jeryj Mar 15, 2023
b18c1a4
Moved gutenberg_render_duotone_support into WP_Duotone_Gutenberg class.
jeryj Mar 15, 2023
3a885b3
Move scrip-loader modifications to 6.3 release
jeryj Mar 15, 2023
6f5db3f
Set WP_Duotone_Gutenberg static variables private
jeryj Mar 15, 2023
19739f3
Linting and comments
jeryj Mar 15, 2023
0b6538a
Switched to protected static from private static
jeryj Mar 15, 2023
f35b70c
Fix comment misspellings
jeryj Mar 16, 2023
4d0ff95
Minor cleanup and comments
jeryj Mar 16, 2023
28f5f84
Change from protected to private variables
jeryj Mar 16, 2023
d587738
Use self:: instead of WP_Duotone_Gutenberg:: within class
jeryj Mar 16, 2023
bad40ba
Move actions from class into duotone.php
jeryj Mar 16, 2023
f284d92
Set internal methods to private in duotone class
jeryj Mar 16, 2023
719551d
Rename duotone weird-chars test to invalid-slug-chards
jeryj Mar 16, 2023
c98c327
Add gutenberg_render_duotone_support as deprecated
jeryj Mar 16, 2023
d3c83fc
Rename duotone test file to class-wp-duotone-test
jeryj Mar 16, 2023
c49b056
Update tests to allow access to private static methods
jeryj Mar 16, 2023
7b938b9
Rename test suite to WP_Duotone_Gutenberg_Test
jeryj Mar 16, 2023
d254364
Set wp theme json duotone value_func to null
jeryj Mar 16, 2023
46ad8b7
Change deprecated magic constant to correct name of __FUNCTION__
jeryj Mar 16, 2023
d598e9a
Correct duotone stylehseet to dutuotone CSS styles comment
jeryj Mar 17, 2023
431496c
Update comment about how duotone styles are included in the stylesheet
jeryj Mar 17, 2023
8cfa88a
Lint php
jeryj Mar 17, 2023
dd80152
Set WP_Duotone_Gutenberg CSS_VAR_PREFIX to private
jeryj Mar 17, 2023
1457d58
Remove private specifier to CSS_VAR_PREFIX
Mar 17, 2023
88179f6
Added tests teardown to prevent css rules from leaking to other phpun…
jeryj Mar 17, 2023
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
128 changes: 8 additions & 120 deletions lib/block-supports/duotone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,128 +426,12 @@ function gutenberg_register_duotone_support( $block_type ) {
*
* @param string $block_content Rendered block content.
* @param array $block Block object.
* @deprecated 6.3.0 Use WP_Duotone_Gutenberg::render_duotone_support() instead.
* @return string Filtered block content.
*/
function gutenberg_render_duotone_support( $block_content, $block ) {
Comment thread
jeryj marked this conversation as resolved.

@ajlende ajlende Mar 15, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For those reviewing, this function had modifications and was moved to the WP_Duotone_Gutenberg class. It may be a little easier to see the modifications in this diff with an earlier commit.

$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );

$duotone_support = false;
if ( $block_type && property_exists( $block_type, 'supports' ) ) {
$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
}

$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );

if (
! $duotone_support ||
! $has_duotone_attribute
) {
return $block_content;
}

// Possible values for duotone attribute:
// 1. Array of colors - e.g. array('#000000', '#ffffff').
// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue'.
// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
$duotone_attr = $block['attrs']['style']['color']['duotone'];

$is_preset = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === 0;
$is_css = is_string( $duotone_attr ) && strpos( $duotone_attr, 'var:preset|duotone|' ) === false;
$is_custom = is_array( $duotone_attr );

// Generate the pieces needed for rendering a duotone to the page.
if ( $is_preset ) {
// Extract the slug from the preset variable string.
$slug = str_replace( 'var:preset|duotone|', '', $duotone_attr );

// Utilize existing preset CSS custom property.
$filter_property = "var(--wp--preset--duotone--$slug)";
} elseif ( $is_css ) {
// Build a unique slug for the filter based on the CSS value.
$slug = wp_unique_id( sanitize_key( $duotone_attr . '-' ) );

// Pass through the CSS value.
$filter_property = $duotone_attr;
} elseif ( $is_custom ) {
// Build a unique slug for the filter based on the array of colors.
$slug = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) );

// This has the same shape as a preset, so it can be used in place of a
// preset when getting the filter property and SVG filter.
$filter_data = array(
'slug' => $slug,
'colors' => $duotone_attr,
);

// Build a customized CSS filter property for unique slug.
$filter_property = gutenberg_get_duotone_filter_property( $filter_data );

// SVG will be output on the page later.
$filter_svg = gutenberg_get_duotone_filter_svg( $filter_data );
}

// - Applied as a class attribute to the block wrapper.
// - Used as a selector to apply the filter to the block.
$filter_id = gutenberg_get_duotone_filter_id( array( 'slug' => $slug ) );

// Build the CSS selectors to which the filter will be applied.
$selector = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $filter_id, $duotone_support );

// Calling gutenberg_style_engine_get_stylesheet_from_css_rules ensures that
// the styles are rendered in an inline for block supports because we're
// using the `context` option to instruct it so.
gutenberg_style_engine_get_stylesheet_from_css_rules(
array(
array(
'selector' => $selector,
'declarations' => array(
// !important is needed because these styles
// render before global styles,
// and they should be overriding the duotone
// filters set by global styles.
'filter' => $filter_property . ' !important',
),
),
),
array(
'context' => 'block-supports',
)
);

// If we needed to generate an SVG, output it on the page.
if ( isset( $filter_svg ) ) {
add_action(
'wp_footer',
static function () use ( $filter_svg, $selector ) {
echo $filter_svg;

/*
* Safari renders elements incorrectly on first paint when the
* SVG filter comes after the content that it is filtering, so
* we force a repaint with a WebKit hack which solves the issue.
*/
global $is_safari;
if ( $is_safari ) {
/*
* Simply accessing el.offsetHeight flushes layout and style
* changes in WebKit without having to wait for setTimeout.
*/
printf(
'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
wp_json_encode( $selector )
);
}
}
);
}

// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
return preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . $filter_id . ' ',
$block_content,
1
);
_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::render_duotone_support' );
return WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block );
}

// Register the block support.
Expand All @@ -558,6 +442,10 @@ static function () use ( $filter_svg, $selector ) {
)
);

add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_styles_presets' ), 10 );
add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_style_block_names' ), 10 );
// Remove WordPress core filter to avoid rendering duplicate support elements.
remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 );
add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 );
add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 );
add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 );
Loading