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

Jump to bottom

Global Styles: allow users to store duotone data #35318

Merged
merged 5 commits into from Oct 7, 2021
Merged

Global Styles: allow users to store duotone data #35318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
108a262
Update tests to allow duotone styles provided by the user
oandregal Sep 30, 2021
64430d5
Add a filter that does not pass validation
oandregal Oct 4, 2021
51b8d76
Enable filter CSS property when we need to use kses to filter user data
oandregal Oct 4, 2021
5310941
Simplify properties in use
oandregal Oct 4, 2021
a7e3e8f
Update comment
oandregal Oct 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 19 additions & 16 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Expand Up @@ -247,16 +247,7 @@ class WP_Theme_JSON_Gutenberg {
'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
);

/**
* Metadata for style properties that need to use the duotone selector.
*
* Each element is a direct mapping from the CSS property name to the
* path to the value in theme.json & block attributes.
*/
const DUOTONE_PROPERTIES_METADATA = array(
'filter' => array( 'filter', 'duotone' ),
'filter' => array( 'filter', 'duotone' ),
ajlende marked this conversation as resolved.
Show resolved Hide resolved
);

/**
Expand Down Expand Up @@ -981,8 +972,26 @@ private function get_block_classes( $style_nodes ) {
$selector = $metadata['selector'];
$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
$declarations = self::compute_style_properties( $node, $settings );

// 1. Separate the ones who use the general selector
// and the ones who use the duotone selector.
$declarations_duotone = array();
foreach ( $declarations as $index => $declaration ) {
if ( 'filter' === $declaration['name'] ) {
unset( $declarations[ $index ] );
$declarations_duotone[] = $declaration;
}
}

// 2. Generate the rules that use the general selector.
$block_rules .= self::to_ruleset( $selector, $declarations );

// 3. Generate the rules that use the duotone selector.
if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
$selector_duotone = self::scope_selector( $metadata['selector'], $metadata['duotone'] );
$block_rules .= self::to_ruleset( $selector_duotone, $declarations_duotone );
}

if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
Expand All @@ -993,12 +1002,6 @@ private function get_block_classes( $style_nodes ) {
$block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }';
}
}

if ( isset( $metadata['duotone'] ) ) {
$selector = self::scope_selector( $metadata['selector'], $metadata['duotone'] );
$declarations = self::compute_style_properties( $node, $settings, self::DUOTONE_PROPERTIES_METADATA );
$block_rules .= self::to_ruleset( $selector, $declarations );
}
}

return $block_rules;
Expand Down
13 changes: 13 additions & 0 deletions lib/global-styles.php
View file
Open in desktop
Expand Up @@ -274,6 +274,7 @@ function gutenberg_global_styles_filter_post( $content ) {
*/
function gutenberg_global_styles_kses_init_filters() {
add_filter( 'content_save_pre', 'gutenberg_global_styles_filter_post' );
add_filter( 'safe_style_css', 'gutenberg_global_styles_include_support_for_duotone', 10, 2 );
}

/**
Expand Down Expand Up @@ -345,6 +346,18 @@ function gutenberg_global_styles_include_support_for_wp_variables( $allow_css, $
return ! ! preg_match( '/^var\(--wp-[a-zA-Z0-9\-]+\)$/', trim( $parts[1] ) );
}

/**
* This is for using kses to test user data.
*
* @param array $atts Allowed CSS property names, according to kses.
*
* @return array The new allowed CSS property names.
*/
function gutenberg_global_styles_include_support_for_duotone( $atts ) {
$atts[] = 'filter';
return $atts;
}

// The else clause can be removed when plugin support requires WordPress 5.8.0+.
if ( function_exists( 'get_block_editor_settings' ) ) {
add_filter( 'block_editor_settings_all', 'gutenberg_experimental_global_styles_settings', PHP_INT_MAX );
Expand Down
10 changes: 10 additions & 0 deletions phpunit/class-wp-theme-json-test.php
View file
Open in desktop
Expand Up @@ -1041,6 +1041,11 @@ function test_remove_insecure_properties_removes_unsafe_styles() {
'duotone' => 'var:preset|duotone|blue-red',
),
),
'core/cover' => array(
'filter' => array(
'duotone' => 'var(--wp--preset--duotone--blue-red, var(--fallback-unsafe))',
),
),
'core/group' => array(
'color' => array(
'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
Expand Down Expand Up @@ -1078,6 +1083,11 @@ function test_remove_insecure_properties_removes_unsafe_styles() {
),
),
'blocks' => array(
'core/image' => array(
'filter' => array(
'duotone' => 'var:preset|duotone|blue-red',
),
),
'core/group' => array(
'color' => array(
'text' => 'var:preset|color|dark-gray',
Expand Down