-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Duotone: Limit SVG filter output to used filters #48995
Merged
Merged
Changes from all commits
Commits
Show all changes
24 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 23b631b
Fix incorrect filter name
jeryj 2f63ab2
Check if duotone filter is applied on a block in theme.json
jeryj 70581a1
Rename duotone class static variables and functions
jeryj a024ddb
Set WP_Duotone:: array and only output those via wp_footer
jeryj 0256548
Only output used duotone presets
jeryj 2c283cc
Cleanup, removal, and only output used SVG filters and CSS
jeryj 460a413
Support var:preset|duotone|default-filter syntax for block name styles
jeryj 2d0e235
Refactor to handle both duotone pipe and css var style syntax for duo…
jeryj 5f47de7
Renamed output_presets to output, as it also includes custom dutone o…
jeryj c39504b
Fix theme json vs block styles duotone order of application
jeryj 1f13855
Renamed filter to be more accurate, but should refactor out
jeryj 0c67759
Simplify getting global styles presets
jeryj e41b1e6
Undo theme json class duotone refactoring and remove filter
jeryj 45426d2
Remove unused code
jeryj 3d224bf
Rename save_ to set_ class method names
jeryj 476fe04
Fix duotone test to use real global preset value
jeryj c23a4a4
Tests for WP_Duotone::gutenberg_get_slug_from_attr()
jeryj 47d86d4
Rework gutenberg_get_slug_from_attr to use regex for more accurate ma…
jeryj a7fab17
Tests for WP_Duotone::is_preset
jeryj af3a236
Rework is_preset to also check if the preset exists
jeryj 005baa1
Remove array_key_exists checks for presets within the block filter
jeryj c7160de
Return early if no block content
jeryj f5499b4
Make linter happy
jeryj File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| <?php | ||
| /** | ||
| * WP_Duotone class | ||
| * | ||
| * @package gutenberg | ||
| * @since 6.3.0 | ||
| */ | ||
|
|
||
| /** | ||
| * Manages which duotone filters need to be output on the page. | ||
| * | ||
| * @access public | ||
| */ | ||
| class WP_Duotone { | ||
| /** | ||
| * An array of Duotone presets from global, theme, and custom styles. | ||
| * | ||
| * Example: | ||
| * [ | ||
| * 'blue-orange' => | ||
| * [ | ||
| * 'slug' => 'blue-orange', | ||
| * 'colors' => [ '#0000ff', '#ffcc00' ], | ||
| * ] | ||
| * ], | ||
| * … | ||
| * ] | ||
| * | ||
| * @since 6.3.0 | ||
| * @var array | ||
| */ | ||
| static $global_styles_presets = array(); | ||
|
|
||
| /** | ||
| * An array of block names from global, theme, and custom styles that have duotone presets. We'll use this to quickly | ||
| * check if a block being rendered needs to have duotone applied, and which duotone preset to use. | ||
| * | ||
| * Example: | ||
| * [ | ||
| * 'core/featured-image' => 'blue-orange', | ||
| * … | ||
| * ] | ||
| * | ||
| * @since 6.3.0 | ||
| * @var array | ||
| */ | ||
| static $global_styles_block_names = array(); | ||
|
|
||
| /** | ||
| * An array of Duotone SVG and CSS ouput needed for the frontend duotone rendering based on what is | ||
| * being ouptput on the page. Organized by a slug of the preset/color group and the information needed | ||
| * to generate the SVG and CSS at render. | ||
| * | ||
| * Example: | ||
| * [ | ||
| * 'blue-orange' => [ | ||
| * 'slug' => 'blue-orange', | ||
| * 'colors' => [ '#0000ff', '#ffcc00' ], | ||
| * ], | ||
| * 'wp-duotone-000000-ffffff-2' => [ | ||
| * 'slug' => 'wp-duotone-000000-ffffff-2', | ||
| * 'colors' => [ '#000000', '#ffffff' ], | ||
| * ], | ||
| * ] | ||
| * | ||
| * @since 6.3.0 | ||
| * @var array | ||
| */ | ||
| static $output = array(); | ||
|
|
||
| /** | ||
| * Get all possible duotone presets from global and theme styles and store as slug => [ colors array ] | ||
| * We only want to process this one time. On block render we'll access and output only the needed presets for that page. | ||
| */ | ||
| static function set_global_styles_presets() { | ||
| // Get the per block settings from the theme.json. | ||
| $tree = gutenberg_get_global_settings(); | ||
| $presets_by_origin = _wp_array_get( $tree, array( 'color', 'duotone' ), array() ); | ||
|
|
||
| foreach ( $presets_by_origin as $presets ) { | ||
| foreach ( $presets as $preset ) { | ||
| self::$global_styles_presets[ _wp_to_kebab_case( $preset['slug'] ) ] = array( | ||
| 'slug' => $preset['slug'], | ||
| 'colors' => $preset['colors'], | ||
| ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Scrape all block names from global styles and store in WP_Duotone::$global_styles_block_names | ||
| */ | ||
| static function set_global_style_block_names() { | ||
| // Get the per block settings from the theme.json. | ||
| $tree = WP_Theme_JSON_Resolver::get_merged_data(); | ||
| $block_nodes = $tree->get_styles_block_nodes(); | ||
| $theme_json = $tree->get_raw_data(); | ||
|
|
||
| foreach ( $block_nodes as $block_node ) { | ||
| // This block definition doesn't include any duotone settings. Skip it. | ||
| if ( empty( $block_node['duotone'] ) ) { | ||
| continue; | ||
| } | ||
|
|
||
| // Value looks like this: 'var(--wp--preset--duotone--blue-orange)' or 'var:preset|duotone|default-filter'. | ||
| $duotone_attr_path = array_merge( $block_node['path'], array( 'filter', 'duotone' ) ); | ||
| $duotone_attr = _wp_array_get( $theme_json, $duotone_attr_path, array() ); | ||
|
|
||
| if ( empty( $duotone_attr ) ) { | ||
| continue; | ||
| } | ||
| // If it has a duotone filter preset, save the block name and the preset slug. | ||
| $slug = self::gutenberg_get_slug_from_attr( $duotone_attr ); | ||
|
|
||
| if ( $slug && $slug !== $duotone_attr ) { | ||
| self::$global_styles_block_names[ $block_node['name'] ] = $slug; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Take the inline CSS duotone variable from a block and return the slug. Handles styles slugs like: | ||
| * var:preset|duotone|default-filter | ||
| * var(--wp--preset--duotone--blue-orange) | ||
| * | ||
| * @param string $duotone_attr The duotone attribute from a block. | ||
| * @return string The slug of the duotone preset or an empty string if no slug is found. | ||
| */ | ||
| static function gutenberg_get_slug_from_attr( $duotone_attr ) { | ||
| // Uses Branch Reset Groups `(?|…)` to return one capture group. | ||
| preg_match( '/(?|var:preset\|duotone\|(\S+)|var\(--wp--preset--duotone--(\S+)\))/', $duotone_attr, $matches ); | ||
|
|
||
| return ! empty( $matches[1] ) ? $matches[1] : ''; | ||
| } | ||
|
|
||
| /** | ||
| * Check if we have a valid duotone preset. | ||
| * | ||
| * @param string $duotone_attr The duotone attribute from a block. | ||
| * @return bool True if the duotone preset present and valid. | ||
| */ | ||
| static function is_preset( $duotone_attr ) { | ||
| $slug = WP_Duotone::gutenberg_get_slug_from_attr( $duotone_attr ); | ||
|
|
||
| return array_key_exists( $slug, WP_Duotone::$global_styles_presets ); | ||
| } | ||
| } | ||
|
|
||
| add_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_styles_presets' ), 10 ); | ||
| add_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_style_block_names' ), 10 ); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did we figure out if files in the
libfolder get the_Gutenbergsuffix. If not, this should have that suffix because we want to be able to make changes in Gutenberg without affecting core by referencing the_Gutenbergversion.