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.

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

Backport defaultDuotone changes #2526

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 3 additions & 0 deletions src/wp-includes/class-wp-theme-json-resolver.php
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,9 @@ public static function get_theme_data( $deprecated = array() ) {
$default_gradients = true;
}
$theme_support_data['settings']['color']['defaultGradients'] = $default_gradients;

// Classic themes without a theme.json don't support global duotone.
$theme_support_data['settings']['color']['defaultDuotone'] = false;
Copy link
Member

@oandregal oandregal Apr 11, 2022

Choose a reason for hiding this comment

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

These is being backported at #2534 If this one lands later, this file can be ignored.

}
$with_theme_supports = new WP_Theme_JSON( $theme_support_data );
$with_theme_supports->merge( static::$theme );
Expand Down
113 changes: 82 additions & 31 deletions src/wp-includes/class-wp-theme-json.php
Original file line number Diff line number Diff line change
Expand Up @@ -74,41 +74,48 @@ class WP_Theme_JSON {
*
* This contains the necessary metadata to process them:
*
* - path => where to find the preset within the settings section
* - override => whether a theme preset with the same slug as a default preset
* can override it
* - use_default_names => whether to use the default names
* - value_key => the key that represents the value
* - value_func => optionally, instead of value_key, a function to generate
* the value that takes a preset as an argument
* (either value_key or value_func should be present)
* - css_vars => template string to use in generating the CSS Custom Property.
* Example output: "--wp--preset--duotone--blue: <value>" will generate
* as many CSS Custom Properties as presets defined
* substituting the $slug for the slug's value for each preset value.
* - classes => array containing a structure with the classes to
* generate for the presets, where for each array item
* the key is the class name and the value the property name.
* The "$slug" substring will be replaced by the slug of each preset.
* For example:
* 'classes' => array(
* '.has-$slug-color' => 'color',
* '.has-$slug-background-color' => 'background-color',
* '.has-$slug-border-color' => 'border-color',
* )
* - properties => array of CSS properties to be used by kses to
* validate the content of each preset
* by means of the remove_insecure_properties method.
* - path => Where to find the preset within the settings section.
Copy link
Member

@oandregal oandregal Apr 11, 2022

Choose a reason for hiding this comment

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

All changes in this file are also being backported at #2534 If this lands later, this file can be ignored.

* - prevent_override => Disables override of default presets by theme presets.
* The relationship between whether to override the defaults
* and whether the defaults are enabled is inverse:
* - If defaults are enabled => theme presets should not be overriden
* - If defaults are disabled => theme presets should be overriden
* For example, a theme sets defaultPalette to false,
* making the default palette hidden from the user.
* In that case, we want all the theme presets to be present,
* so they should override the defaults by setting this false.
* - value_key => the key that represents the value
* - value_func => optionally, instead of value_key, a function to generate
* the value that takes a preset as an argument
* (either value_key or value_func should be present)
* - css_vars => template string to use in generating the CSS Custom Property.
* Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
* substituting the $slug for the slug's value for each preset value.
* - classes => array containing a structure with the classes to
* generate for the presets, where for each array item
* the key is the class name and the value the property name.
* The "$slug" substring will be replaced by the slug of each preset.
* For example:
* 'classes' => array(
* '.has-$slug-color' => 'color',
* '.has-$slug-background-color' => 'background-color',
* '.has-$slug-border-color' => 'border-color',
* )
* - properties => array of CSS properties to be used by kses to
* validate the content of each preset
* by means of the remove_insecure_properties method.
*
* @since 5.8.0
* @since 5.9.0 Added the `color.duotone` and `typography.fontFamilies` presets,
* `use_default_names` preset key, and simplified the metadata structure.
* @since 6.0.0 Replaced `override` with `prevent_override` and updated the
* `prevent_overried` value for `color.duotone` to use `color.defaultDuotone`.
* @var array
*/
const PRESETS_METADATA = array(
array(
'path' => array( 'color', 'palette' ),
'override' => array( 'color', 'defaultPalette' ),
'prevent_override' => array( 'color', 'defaultPalette' ),
'use_default_names' => false,
'value_key' => 'color',
'css_vars' => '--wp--preset--color--$slug',
Expand All @@ -121,7 +128,7 @@ class WP_Theme_JSON {
),
array(
'path' => array( 'color', 'gradients' ),
'override' => array( 'color', 'defaultGradients' ),
'prevent_override' => array( 'color', 'defaultGradients' ),
'use_default_names' => false,
'value_key' => 'gradient',
'css_vars' => '--wp--preset--gradient--$slug',
Expand All @@ -130,7 +137,7 @@ class WP_Theme_JSON {
),
array(
'path' => array( 'color', 'duotone' ),
'override' => true,
'prevent_override' => array( 'color', 'defaultDuotone' ),
'use_default_names' => false,
'value_func' => 'wp_get_duotone_filter_property',
'css_vars' => '--wp--preset--duotone--$slug',
Expand All @@ -139,7 +146,7 @@ class WP_Theme_JSON {
),
array(
'path' => array( 'typography', 'fontSizes' ),
'override' => true,
'prevent_override' => false,
'use_default_names' => true,
'value_key' => 'size',
'css_vars' => '--wp--preset--font-size--$slug',
Expand All @@ -148,7 +155,7 @@ class WP_Theme_JSON {
),
array(
'path' => array( 'typography', 'fontFamilies' ),
'override' => true,
'prevent_override' => false,
'use_default_names' => false,
'value_key' => 'fontFamily',
'css_vars' => '--wp--preset--font-family--$slug',
Expand Down Expand Up @@ -242,6 +249,7 @@ class WP_Theme_JSON {
* @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
* added new properties for `border`, `color`, `spacing`,
* and `typography`, and renamed others according to the new schema.
* @since 6.0.0 Added `color.defaultDuotone`.
* @var array
*/
const VALID_SETTINGS = array(
Expand All @@ -257,6 +265,7 @@ class WP_Theme_JSON {
'custom' => null,
'customDuotone' => null,
'customGradient' => null,
'defaultDuotone' => null,
'defaultGradients' => null,
'defaultPalette' => null,
'duotone' => null,
Expand Down Expand Up @@ -1550,7 +1559,7 @@ public function merge( $incoming ) {

// Replace the presets.
foreach ( static::PRESETS_METADATA as $preset ) {
$override_preset = static::should_override_preset( $this->theme_json, $node['path'], $preset['override'] );
$override_preset = ! static::get_metadata_boolean( $this->theme_json['settings'], $preset['prevent_override'], true );

foreach ( static::VALID_ORIGINS as $origin ) {
$base_path = array_merge( $node['path'], $preset['path'] );
Expand Down Expand Up @@ -1624,13 +1633,16 @@ public function get_svg_filters( $origins ) {
* Returns whether a presets should be overridden or not.
*
* @since 5.9.0
* @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
*
* @param array $theme_json The theme.json like structure to inspect.
* @param array $path Path to inspect.
* @param bool|array $override Data to compute whether to override the preset.
* @return boolean
*/
protected static function should_override_preset( $theme_json, $path, $override ) {
_deprecated_function( __METHOD__, '6.0.0' );

if ( is_bool( $override ) ) {
return $override;
}
Expand Down Expand Up @@ -1663,6 +1675,45 @@ protected static function should_override_preset( $theme_json, $path, $override
}
}

/**
* For metadata values that can either be booleans or paths to booleans, gets the value.
*
* ```php
* $data = array(
* 'color' => array(
* 'defaultPalette' => true
* )
* );
*
* static::get_metadata_boolean( $data, false );
* // => false
*
* static::get_metadata_boolean( $data, array( 'color', 'defaultPalette' ) );
* // => true
* ```
*
* @since 6.0.0
*
* @param array $data The data to inspect.
* @param bool|array $path Boolean or path to a boolean.
* @param bool $default Default value if the referenced path is missing.
* @return boolean
*/
protected static function get_metadata_boolean( $data, $path, $default = false ) {
if ( is_bool( $path ) ) {
return $path;
}

if ( is_array( $path ) ) {
$value = _wp_array_get( $data, $path );
if ( isset( $value ) ) {
return $value;
}
}

return $default;
}

/**
* Returns the default slugs for all the presets in an associative array
* whose keys are the preset paths and the leafs is the list of slugs.
Expand Down
17 changes: 9 additions & 8 deletions src/wp-includes/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,46 +13,47 @@
"custom": true,
"customDuotone": true,
"customGradient": true,
"defaultDuotone": true,
"defaultGradients": true,
"defaultPalette": true,
"duotone": [
{
"name": "Dark grayscale" ,
"name": "Dark grayscale",
"colors": [ "#000000", "#7f7f7f" ],
"slug": "dark-grayscale"
},
{
"name": "Grayscale" ,
"name": "Grayscale",
"colors": [ "#000000", "#ffffff" ],
"slug": "grayscale"
},
{
"name": "Purple and yellow" ,
"name": "Purple and yellow",
"colors": [ "#8c00b7", "#fcff41" ],
"slug": "purple-yellow"
},
{
"name": "Blue and red" ,
"name": "Blue and red",
"colors": [ "#000097", "#ff4747" ],
"slug": "blue-red"
},
{
"name": "Midnight" ,
"name": "Midnight",
"colors": [ "#000000", "#00a5ff" ],
"slug": "midnight"
},
{
"name": "Magenta and yellow" ,
"name": "Magenta and yellow",
"colors": [ "#c7005a", "#fff278" ],
"slug": "magenta-yellow"
},
{
"name": "Purple and green" ,
"name": "Purple and green",
"colors": [ "#a60072", "#67ff66" ],
"slug": "purple-green"
},
{
"name": "Blue and orange" ,
"name": "Blue and orange",
"colors": [ "#1900d8", "#ffa96b" ],
"slug": "blue-orange"
}
Expand Down