From c5041be0302949aeab5783dc7fc209f59d018a16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 19:31:33 +0100 Subject: [PATCH 1/9] Reorder constants and update constructor --- lib/class-wp-theme-json-gutenberg.php | 230 +++++++++++++++----------- 1 file changed, 135 insertions(+), 95 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index fa4eced8949ae6..ea8d8e578c8048 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1,14 +1,20 @@ array( - 'color' => null, - 'radius' => null, - 'style' => null, - 'width' => null, - ), - 'color' => array( - 'background' => null, - 'gradient' => null, - 'text' => null, - ), - 'filter' => array( - 'duotone' => null, - ), - 'spacing' => array( - 'margin' => null, - 'padding' => null, - 'blockGap' => null, - ), - 'typography' => array( - 'fontFamily' => null, - 'fontSize' => null, - 'fontStyle' => null, - 'fontWeight' => null, - 'letterSpacing' => null, - 'lineHeight' => null, - 'textDecoration' => null, - 'textTransform' => null, - ), - ); - - const VALID_SETTINGS = array( - 'appearanceTools' => null, - 'border' => array( - 'color' => null, - 'radius' => null, - 'style' => null, - 'width' => null, - ), - 'color' => array( - 'background' => null, - 'custom' => null, - 'customDuotone' => null, - 'customGradient' => null, - 'defaultGradients' => null, - 'defaultPalette' => null, - 'duotone' => null, - 'gradients' => null, - 'link' => null, - 'palette' => null, - 'text' => null, - ), - 'custom' => null, - 'layout' => array( - 'contentSize' => null, - 'wideSize' => null, - ), - 'spacing' => array( - 'blockGap' => null, - 'margin' => null, - 'padding' => null, - 'units' => null, - ), - 'typography' => array( - 'customFontSize' => null, - 'dropCap' => null, - 'fontFamilies' => null, - 'fontSizes' => null, - 'fontStyle' => null, - 'fontWeight' => null, - 'letterSpacing' => null, - 'lineHeight' => null, - 'textDecoration' => null, - 'textTransform' => null, - ), - ); - /** * Presets are a set of values that serve * to bootstrap some styles: colors, font sizes, etc. @@ -154,7 +80,7 @@ class WP_Theme_JSON_Gutenberg { * - value_func => optionally, instead of value_key, a function to generate * the value that takes a preset as an argument * - * - css_var => name of the var to generate. The "$slug" substring will be + * - css_vars => name of the var to generate. The "$slug" substring will be * replaced by the slug of each preset. For example, * given a preset for color with two values whose slugs are "black" and "white", * the string "--wp--preset--color--$slug" will generate two variables: @@ -170,6 +96,7 @@ class WP_Theme_JSON_Gutenberg { * '.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. @@ -274,6 +201,112 @@ class WP_Theme_JSON_Gutenberg { 'spacing.blockGap' => array( 'spacing', 'blockGap' ), ); + /** + * The top-level keys a theme.json can have. + * + * @var string[] + */ + const VALID_TOP_LEVEL_KEYS = array( + 'customTemplates', + 'settings', + 'styles', + 'templateParts', + 'version', + ); + + /** + * The valid properties under the settings key. + * + * @var array + */ + const VALID_SETTINGS = array( + 'appearanceTools' => null, + 'border' => array( + 'color' => null, + 'radius' => null, + 'style' => null, + 'width' => null, + ), + 'color' => array( + 'background' => null, + 'custom' => null, + 'customDuotone' => null, + 'customGradient' => null, + 'defaultGradients' => null, + 'defaultPalette' => null, + 'duotone' => null, + 'gradients' => null, + 'link' => null, + 'palette' => null, + 'text' => null, + ), + 'custom' => null, + 'layout' => array( + 'contentSize' => null, + 'wideSize' => null, + ), + 'spacing' => array( + 'blockGap' => null, + 'margin' => null, + 'padding' => null, + 'units' => null, + ), + 'typography' => array( + 'customFontSize' => null, + 'dropCap' => null, + 'fontFamilies' => null, + 'fontSizes' => null, + 'fontStyle' => null, + 'fontWeight' => null, + 'letterSpacing' => null, + 'lineHeight' => null, + 'textDecoration' => null, + 'textTransform' => null, + ), + ); + + /** + * The valid properties under the styles key. + * + * @var array + */ + const VALID_STYLES = array( + 'border' => array( + 'color' => null, + 'radius' => null, + 'style' => null, + 'width' => null, + ), + 'color' => array( + 'background' => null, + 'gradient' => null, + 'text' => null, + ), + 'filter' => array( + 'duotone' => null, + ), + 'spacing' => array( + 'margin' => null, + 'padding' => null, + 'blockGap' => null, + ), + 'typography' => array( + 'fontFamily' => null, + 'fontSize' => null, + 'fontStyle' => null, + 'fontWeight' => null, + 'letterSpacing' => null, + 'lineHeight' => null, + 'textDecoration' => null, + 'textTransform' => null, + ), + ); + + /** + * The valid elements that can be found under styles. + * + * @var string[] + */ const ELEMENTS = array( 'link' => 'a', 'h1' => 'h1', @@ -284,24 +317,31 @@ class WP_Theme_JSON_Gutenberg { 'h6' => 'h6', ); + /** + * The latest version of the schema in use. + * + * @var int + */ + const LATEST_SCHEMA = 2; /** * Constructor. * - * @param array $theme_json A structure that follows the theme.json schema. - * @param string $origin What source of data this object represents. One of default, theme, or custom. Default: theme. + * @param array $theme_json A structure that follows the theme.json schema. + * @param string $origin Optional. What source of data this object represents. + * One of 'default', 'theme', or 'custom'. Default 'theme'. */ public function __construct( $theme_json = array(), $origin = 'theme' ) { if ( ! in_array( $origin, self::VALID_ORIGINS, true ) ) { $origin = 'theme'; } - $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); + $this->theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); $valid_block_names = array_keys( self::get_blocks_metadata() ); $valid_element_names = array_keys( self::ELEMENTS ); - $theme_json = self::sanitize( $theme_json, $valid_block_names, $valid_element_names ); + $theme_json = self::sanitize( $this->theme_json, $valid_block_names, $valid_element_names ); $this->theme_json = self::maybe_opt_in_into_settings( $theme_json ); // Internally, presets are keyed by origin. From 122785de8e78aa9990b826d2aa7d7031ff658e78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 19:34:56 +0100 Subject: [PATCH 2/9] Remove spaces from comment --- lib/class-wp-theme-json-gutenberg.php | 6 ------ 1 file changed, 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index ea8d8e578c8048..20ec12dd68ec33 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -71,21 +71,16 @@ class WP_Theme_JSON_Gutenberg { * 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 - * * - 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 - * * - css_vars => name of the var to generate. The "$slug" substring will be * replaced by the slug of each preset. For example, * given a preset for color with two values whose slugs are "black" and "white", * the string "--wp--preset--color--$slug" will generate two variables: * "--wp--preset--color--black" and "--wp--preset--color--white". - * * - 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. @@ -96,7 +91,6 @@ class WP_Theme_JSON_Gutenberg { * '.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. From c3df3b6fc9739520e4df4f68239d6bc13ccee351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 19:40:15 +0100 Subject: [PATCH 3/9] Update comments --- lib/class-wp-theme-json-gutenberg.php | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 20ec12dd68ec33..f53cf82c6b877c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -76,11 +76,10 @@ class WP_Theme_JSON_Gutenberg { * - 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 - * - css_vars => name of the var to generate. The "$slug" substring will be - * replaced by the slug of each preset. For example, - * given a preset for color with two values whose slugs are "black" and "white", - * the string "--wp--preset--color--$slug" will generate two variables: - * "--wp--preset--color--black" and "--wp--preset--color--white". + * (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: " 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. From 20131886797cf7a350d40aeaecf0043e2a2f17bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:14:50 +0100 Subject: [PATCH 4/9] Update comments --- lib/class-wp-theme-json-gutenberg.php | 36 ++++++++++++++------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f53cf82c6b877c..0399bbf3fb5c0e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -410,7 +410,6 @@ private static function do_opt_in_into_settings( &$context ) { * @param array $input Structure to sanitize. * @param array $valid_block_names List of valid block names. * @param array $valid_element_names List of valid element names. - * * @return array The sanitized output. */ private static function sanitize( $input, $valid_block_names, $valid_element_names ) { @@ -469,21 +468,25 @@ private static function sanitize( $input, $valid_block_names, $valid_element_nam * * Example: * - * { - * 'core/paragraph': { - * 'selector': 'p' - * }, - * 'core/heading': { - * 'selector': 'h1' - * }, - * 'core/group': { - * 'selector': '.wp-block-group' - * }, - * 'core/cover': { - * 'selector': '.wp-block-cover', - * 'duotone': '> .wp-block-cover__image-background, > .wp-block-cover__video-background' - * } - * } + * { + * 'core/paragraph': { + * 'selector': 'p', + * 'elements': { + * 'link' => 'link selector', + * 'etc' => 'element selector' + * } + * }, + * 'core/heading': { + * 'selector': 'h1', + * 'elements': {} + * }, + * 'core/image': { + * 'selector': '.wp-block-image', + * 'duotone': 'img', + * 'elements': {} + * } + * } + * * * @return array Block metadata. */ @@ -536,7 +539,6 @@ private static function get_blocks_metadata() { * * @param array $tree Input to process. * @param array $schema Schema to adhere to. - * * @return array Returns the modified $tree. */ private static function remove_keys_not_in_schema( $tree, $schema ) { From e368c8cad170fe8c274fc1d5bfa30c1e3073076b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:26:33 +0100 Subject: [PATCH 5/9] Reorder methods to follow WordPress core order so it is easier to backport changes --- lib/class-wp-theme-json-gutenberg.php | 1220 ++++++++++++------------- 1 file changed, 610 insertions(+), 610 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 0399bbf3fb5c0e..d201482babe08c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -564,409 +564,255 @@ private static function remove_keys_not_in_schema( $tree, $schema ) { } /** - * Given a tree, it creates a flattened one - * by merging the keys and binding the leaf values - * to the new keys. - * - * It also transforms camelCase names into kebab-case - * and substitutes '/' by '-'. - * - * This is thought to be useful to generate - * CSS Custom Properties from a tree, - * although there's nothing in the implementation - * of this function that requires that format. + * Returns the existing settings for each block. * - * For example, assuming the given prefix is '--wp' - * and the token is '--', for this input tree: + * Example: * * { - * 'some/property': 'value', - * 'nestedProperty': { - * 'sub-property': 'value' + * 'root': { + * 'color': { + * 'custom': true + * } + * }, + * 'core/paragraph': { + * 'typography': { + * 'customFontSize': true + * } * } * } * - * it'll return this output: - * - * { - * '--wp--some-property': 'value', - * '--wp--nested-property--sub-property': 'value' - * } - * - * @param array $tree Input tree to process. - * @param string $prefix Prefix to prepend to each variable. '' by default. - * @param string $token Token to use between levels. '--' by default. - * - * @return array The flattened tree. + * @return array Settings per block. */ - private static function flatten_tree( $tree, $prefix = '', $token = '--' ) { - $result = array(); - foreach ( $tree as $property => $value ) { - $new_key = $prefix . str_replace( - '/', - '-', - strtolower( preg_replace( '/(?theme_json['settings'] ) ) { + return array(); + } else { + return $this->theme_json['settings']; } - return $result; } /** - * Returns the style property for the given path. - * - * It also converts CSS Custom Property stored as - * "var:preset|color|secondary" to the form - * "--wp--preset--color--secondary". + * Returns the stylesheet that results of processing + * the theme.json structure this object represents. * - * @param array $styles Styles subtree. - * @param array $path Which property to process. + * @param array $types Types of styles to load. Will load all by default. It accepts: + * 'variables': only the CSS Custom Properties for presets & custom ones. + * 'styles': only the styles section in theme.json. + * 'presets': only the classes for the presets. + * @param array $origins A list of origins to include. By default it includes 'default', 'theme', and 'custom'. * - * @return string Style property value. + * @return string Stylesheet. */ - private static function get_property_value( $styles, $path ) { - $value = _wp_array_get( $styles, $path, '' ); + public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = self::VALID_ORIGINS ) { + $blocks_metadata = self::get_blocks_metadata(); + $style_nodes = self::get_style_nodes( $this->theme_json, $blocks_metadata ); + $setting_nodes = self::get_setting_nodes( $this->theme_json, $blocks_metadata ); - if ( '' === $value || is_array( $value ) ) { - return $value; + $stylesheet = ''; + + if ( in_array( 'variables', $types, true ) ) { + $stylesheet .= $this->get_css_variables( $setting_nodes, $origins ); } - $prefix = 'var:'; - $prefix_len = strlen( $prefix ); - $token_in = '|'; - $token_out = '--'; - if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) { - $unwrapped_name = str_replace( - $token_in, - $token_out, - substr( $value, $prefix_len ) - ); - $value = "var(--wp--$unwrapped_name)"; + if ( in_array( 'styles', $types, true ) ) { + $stylesheet .= $this->get_block_classes( $style_nodes ); } - return $value; + if ( in_array( 'presets', $types, true ) ) { + $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins ); + } + + return $stylesheet; } /** - * Given a styles array, it extracts the style properties - * and adds them to the $declarations array following the format: - * - * ```php - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * ``` - * - * @param array $styles Styles to process. - * @param array $settings Theme settings. - * @param array $properties Properties metadata. + * Returns the page templates of the current theme. * - * @return array Returns the modified $declarations. + * @return array */ - private static function compute_style_properties( $styles, $settings = array(), $properties = self::PROPERTIES_METADATA ) { - $declarations = array(); - if ( empty( $styles ) ) { - return $declarations; + public function get_custom_templates() { + $custom_templates = array(); + if ( ! isset( $this->theme_json['customTemplates'] ) ) { + return $custom_templates; } - foreach ( $properties as $css_property => $value_path ) { - $value = self::get_property_value( $styles, $value_path ); - - // Look up protected properties, keyed by value path. - // Skip protected properties that are explicitly set to `null`. - if ( is_array( $value_path ) ) { - $path_string = implode( '.', $value_path ); - if ( - array_key_exists( $path_string, self::PROTECTED_PROPERTIES ) && - _wp_array_get( $settings, self::PROTECTED_PROPERTIES[ $path_string ], null ) === null - ) { - continue; - } - } - - // Skip if empty and not "0" or value represents array of longhand values. - $has_missing_value = empty( $value ) && ! is_numeric( $value ); - if ( $has_missing_value || is_array( $value ) ) { - continue; + foreach ( $this->theme_json['customTemplates'] as $item ) { + if ( isset( $item['name'] ) ) { + $custom_templates[ $item['name'] ] = array( + 'title' => isset( $item['title'] ) ? $item['title'] : '', + 'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ), + ); } - - $declarations[] = array( - 'name' => $css_property, - 'value' => $value, - ); } - - return $declarations; + return $custom_templates; } /** - * Function that appends a sub-selector to a existing one. - * - * Given the compounded $selector "h1, h2, h3" - * and the $to_append selector ".some-class" the result will be - * "h1.some-class, h2.some-class, h3.some-class". - * - * @param string $selector Original selector. - * @param string $to_append Selector to append. + * Returns the template part data of current theme. * - * @return string + * @return array */ - private static function append_to_selector( $selector, $to_append ) { - $new_selectors = array(); - $selectors = explode( ',', $selector ); - foreach ( $selectors as $sel ) { - $new_selectors[] = $sel . $to_append; + public function get_template_parts() { + $template_parts = array(); + if ( ! isset( $this->theme_json['templateParts'] ) ) { + return $template_parts; } - return implode( ',', $new_selectors ); + foreach ( $this->theme_json['templateParts'] as $item ) { + if ( isset( $item['name'] ) ) { + $template_parts[ $item['name'] ] = array( + 'title' => isset( $item['title'] ) ? $item['title'] : '', + 'area' => isset( $item['area'] ) ? $item['area'] : '', + ); + } + } + return $template_parts; } /** - * Function that scopes a selector with another one. This works a bit like - * SCSS nesting except the `&` operator isn't supported. + * Converts each style section into a list of rulesets + * containing the block styles to be appended to the stylesheet. * - * - * $scope = '.a, .b .c'; - * $selector = '> .x, .y'; - * $merged = scope_selector( $scope, $selector ); - * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y' - * + * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax * - * @param string $scope Selector to scope to. - * @param string $selector Original selector. + * For each section this creates a new ruleset such as: * - * @return string Scoped selector. + * block-selector { + * style-property-one: value; + * } + * + * @param array $style_nodes Nodes with styles. + * + * @return string The new stylesheet. */ - private static function scope_selector( $scope, $selector ) { - $scopes = explode( ',', $scope ); - $selectors = explode( ',', $selector ); + private function get_block_classes( $style_nodes ) { + $block_rules = ''; - $selectors_scoped = array(); - foreach ( $scopes as $outer ) { - foreach ( $selectors as $inner ) { - $selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner ); + foreach ( $style_nodes as $metadata ) { + if ( null === $metadata['selector'] ) { + continue; } - } - return implode( ', ', $selectors_scoped ); - } + $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); + $selector = $metadata['selector']; + $settings = _wp_array_get( $this->theme_json, array( 'settings' ) ); + $declarations = self::compute_style_properties( $node, $settings ); - /** - * Gets preset values keyed by slugs based on settings and metadata. - * - * - * $settings = array( - * 'typography' => array( - * 'fontFamilies' => array( - * array( - * 'slug' => 'sansSerif', - * 'fontFamily' => '"Helvetica Neue", sans-serif', - * ), - * array( - * 'slug' => 'serif', - * 'colors' => 'Georgia, serif', - * ) - * ), - * ), - * ); - * $meta = array( - * 'path' => array( 'typography', 'fontFamilies' ), - * 'value_key' => 'fontFamily', - * ); - * $values_by_slug = get_settings_values_by_slug(); - * // $values_by_slug === array( - * // 'sans-serif' => '"Helvetica Neue", sans-serif', - * // 'serif' => 'Georgia, serif', - * // ); - * - * - * @param array $settings Settings to process. - * @param array $preset_metadata One of the PRESETS_METADATA values. - * @param array $origins List of origins to process. - * - * @return array Array of presets where each key is a slug and each value is the preset value. - */ - private static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) { - $preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() ); - - $result = array(); - foreach ( $origins as $origin ) { - if ( ! isset( $preset_per_origin[ $origin ] ) ) { - continue; - } - foreach ( $preset_per_origin[ $origin ] as $preset ) { - $slug = _wp_to_kebab_case( $preset['slug'] ); - - $value = ''; - if ( isset( $preset_metadata['value_key'] ) ) { - $value_key = $preset_metadata['value_key']; - $value = $preset[ $value_key ]; - } elseif ( - isset( $preset_metadata['value_func'] ) && - is_callable( $preset_metadata['value_func'] ) - ) { - $value_func = $preset_metadata['value_func']; - $value = call_user_func( $value_func, $preset ); - } else { - // If we don't have a value, then don't add it to the result. - continue; + // 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; } - - $result[ $slug ] = $value; } - } - return $result; - } - - /** - * Similar to get_settings_values_by_slug, but doesn't compute the value. - * - * @param array $settings Settings to process. - * @param array $preset_metadata One of the PRESETS_METADATA values. - * @param array $origins List of origins to process. - * - * @return array Array of presets where the key and value are both the slug. - */ - private static function get_settings_slugs( $settings, $preset_metadata, $origins = self::VALID_ORIGINS ) { - $preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() ); - $result = array(); - foreach ( $origins as $origin ) { - if ( ! isset( $preset_per_origin[ $origin ] ) ) { - continue; - } - foreach ( $preset_per_origin[ $origin ] as $preset ) { - $slug = _wp_to_kebab_case( $preset['slug'] ); + // 2. Generate the rules that use the general selector. + $block_rules .= self::to_ruleset( $selector, $declarations ); - // Use the array as a set so we don't get duplicates. - $result[ $slug ] = $slug; + // 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 ); } - } - return $result; - } - /** - * Given a settings array, it returns the generated rulesets - * for the preset classes. - * - * @param array $settings Settings to process. - * @param string $selector Selector wrapping the classes. - * @param array $origins List of origins to process. - * - * @return string The result of processing the presets. - */ - private static function compute_preset_classes( $settings, $selector, $origins ) { - if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - // Classes at the global level do not need any CSS prefixed, - // and we don't want to increase its specificity. - $selector = ''; - } + if ( self::ROOT_BLOCK_SELECTOR === $selector ) { + $block_rules .= 'body { margin: 0; }'; + $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; + $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; + $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $stylesheet = ''; - foreach ( self::PRESETS_METADATA as $preset_metadata ) { - $slugs = self::get_settings_slugs( $settings, $preset_metadata, $origins ); - foreach ( $preset_metadata['classes'] as $class => $property ) { - foreach ( $slugs as $slug ) { - $css_var = self::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); - $class_name = self::replace_slug_in_string( $class, $slug ); - $stylesheet .= self::to_ruleset( - self::append_to_selector( $selector, $class_name ), - array( - array( - 'name' => $property, - 'value' => 'var(' . $css_var . ') !important', - ), - ) - ); + $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null; + if ( $has_block_gap_support ) { + $block_rules .= '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }'; + $block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; } } } - return $stylesheet; + return $block_rules; } /** - * Transform a slug into a CSS Custom Property. + * Creates new rulesets as classes for each preset value such as: * - * @param string $input String to replace. - * @param string $slug The slug value to use to generate the custom property. + * .has-value-color { + * color: value; + * } * - * @return string The CSS Custom Property. Something along the lines of --wp--preset--color--black. - */ - private static function replace_slug_in_string( $input, $slug ) { - return strtr( $input, array( '$slug' => $slug ) ); - } - - /** - * Given the block settings, it extracts the CSS Custom Properties - * for the presets and adds them to the $declarations array - * following the format: + * .has-value-background-color { + * background-color: value; + * } * - * ```php - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * ``` + * .has-value-font-size { + * font-size: value; + * } * - * @param array $settings Settings to process. - * @param array $origins List of origins to process. + * .has-value-gradient-background { + * background: value; + * } * - * @return array Returns the modified $declarations. + * p.has-value-gradient-background { + * background: value; + * } + + * @param array $setting_nodes Nodes with settings. + * @param array $origins List of origins to process presets from. + * + * @return string The new stylesheet. */ - private static function compute_preset_vars( $settings, $origins ) { - $declarations = array(); - foreach ( self::PRESETS_METADATA as $preset_metadata ) { - $values_by_slug = self::get_settings_values_by_slug( $settings, $preset_metadata, $origins ); - foreach ( $values_by_slug as $slug => $value ) { - $declarations[] = array( - 'name' => self::replace_slug_in_string( $preset_metadata['css_vars'], $slug ), - 'value' => $value, - ); + private function get_preset_classes( $setting_nodes, $origins ) { + $preset_rules = ''; + + foreach ( $setting_nodes as $metadata ) { + if ( null === $metadata['selector'] ) { + continue; } + + $selector = $metadata['selector']; + $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); + $preset_rules .= self::compute_preset_classes( $node, $selector, $origins ); } - return $declarations; + return $preset_rules; } /** - * Given an array of settings, it extracts the CSS Custom Properties - * for the custom values and adds them to the $declarations - * array following the format: + * Converts each styles section into a list of rulesets + * to be appended to the stylesheet. + * These rulesets contain all the css variables (custom variables and preset variables). * - * ```php - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * ``` + * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax * - * @param array $settings Settings to process. + * For each section this creates a new ruleset such as: * - * @return array Returns the modified $declarations. + * block-selector { + * --wp--preset--category--slug: value; + * --wp--custom--variable: value; + * } + * + * @param array $nodes Nodes with settings. + * @param array $origins List of origins to process. + * + * @return string The new stylesheet. */ - private static function compute_theme_vars( $settings ) { - $declarations = array(); - $custom_values = _wp_array_get( $settings, array( 'custom' ), array() ); - $css_vars = self::flatten_tree( $custom_values ); - foreach ( $css_vars as $key => $value ) { - $declarations[] = array( - 'name' => '--wp--custom--' . $key, - 'value' => $value, - ); + private function get_css_variables( $nodes, $origins ) { + $stylesheet = ''; + foreach ( $nodes as $metadata ) { + if ( null === $metadata['selector'] ) { + continue; + } + + $selector = $metadata['selector']; + + $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); + $declarations = array_merge( self::compute_preset_vars( $node, $origins ), self::compute_theme_vars( $node ) ); + + $stylesheet .= self::to_ruleset( $selector, $declarations ); } - return $declarations; + return $stylesheet; } /** @@ -1009,221 +855,460 @@ function ( $carry, $element ) { } /** - * Converts each styles section into a list of rulesets - * to be appended to the stylesheet. - * These rulesets contain all the css variables (custom variables and preset variables). - * - * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax + * Function that appends a sub-selector to a existing one. * - * For each section this creates a new ruleset such as: + * Given the compounded $selector "h1, h2, h3" + * and the $to_append selector ".some-class" the result will be + * "h1.some-class, h2.some-class, h3.some-class". * - * block-selector { - * --wp--preset--category--slug: value; - * --wp--custom--variable: value; - * } + * @param string $selector Original selector. + * @param string $to_append Selector to append. * - * @param array $nodes Nodes with settings. - * @param array $origins List of origins to process. - * - * @return string The new stylesheet. + * @return string */ - private function get_css_variables( $nodes, $origins ) { - $stylesheet = ''; - foreach ( $nodes as $metadata ) { - if ( null === $metadata['selector'] ) { - continue; - } + private static function append_to_selector( $selector, $to_append ) { + $new_selectors = array(); + $selectors = explode( ',', $selector ); + foreach ( $selectors as $sel ) { + $new_selectors[] = $sel . $to_append; + } - $selector = $metadata['selector']; + return implode( ',', $new_selectors ); + } - $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); - $declarations = array_merge( self::compute_preset_vars( $node, $origins ), self::compute_theme_vars( $node ) ); + /** + * Given a settings array, it returns the generated rulesets + * for the preset classes. + * + * @param array $settings Settings to process. + * @param string $selector Selector wrapping the classes. + * @param array $origins List of origins to process. + * + * @return string The result of processing the presets. + */ + private static function compute_preset_classes( $settings, $selector, $origins ) { + if ( self::ROOT_BLOCK_SELECTOR === $selector ) { + // Classes at the global level do not need any CSS prefixed, + // and we don't want to increase its specificity. + $selector = ''; + } - $stylesheet .= self::to_ruleset( $selector, $declarations ); + $stylesheet = ''; + foreach ( self::PRESETS_METADATA as $preset_metadata ) { + $slugs = self::get_settings_slugs( $settings, $preset_metadata, $origins ); + foreach ( $preset_metadata['classes'] as $class => $property ) { + foreach ( $slugs as $slug ) { + $css_var = self::replace_slug_in_string( $preset_metadata['css_vars'], $slug ); + $class_name = self::replace_slug_in_string( $class, $slug ); + $stylesheet .= self::to_ruleset( + self::append_to_selector( $selector, $class_name ), + array( + array( + 'name' => $property, + 'value' => 'var(' . $css_var . ') !important', + ), + ) + ); + } + } } return $stylesheet; } /** - * Converts each style section into a list of rulesets - * containing the block styles to be appended to the stylesheet. + * Function that scopes a selector with another one. This works a bit like + * SCSS nesting except the `&` operator isn't supported. * - * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax + * + * $scope = '.a, .b .c'; + * $selector = '> .x, .y'; + * $merged = scope_selector( $scope, $selector ); + * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y' + * * - * For each section this creates a new ruleset such as: + * @param string $scope Selector to scope to. + * @param string $selector Original selector. * - * block-selector { - * style-property-one: value; - * } + * @return string Scoped selector. + */ + private static function scope_selector( $scope, $selector ) { + $scopes = explode( ',', $scope ); + $selectors = explode( ',', $selector ); + + $selectors_scoped = array(); + foreach ( $scopes as $outer ) { + foreach ( $selectors as $inner ) { + $selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner ); + } + } + + return implode( ', ', $selectors_scoped ); + } + + /** + * Gets preset values keyed by slugs based on settings and metadata. * - * @param array $style_nodes Nodes with styles. + * + * $settings = array( + * 'typography' => array( + * 'fontFamilies' => array( + * array( + * 'slug' => 'sansSerif', + * 'fontFamily' => '"Helvetica Neue", sans-serif', + * ), + * array( + * 'slug' => 'serif', + * 'colors' => 'Georgia, serif', + * ) + * ), + * ), + * ); + * $meta = array( + * 'path' => array( 'typography', 'fontFamilies' ), + * 'value_key' => 'fontFamily', + * ); + * $values_by_slug = get_settings_values_by_slug(); + * // $values_by_slug === array( + * // 'sans-serif' => '"Helvetica Neue", sans-serif', + * // 'serif' => 'Georgia, serif', + * // ); + * * - * @return string The new stylesheet. + * @param array $settings Settings to process. + * @param array $preset_metadata One of the PRESETS_METADATA values. + * @param array $origins List of origins to process. + * + * @return array Array of presets where each key is a slug and each value is the preset value. */ - private function get_block_classes( $style_nodes ) { - $block_rules = ''; + private static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) { + $preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() ); - foreach ( $style_nodes as $metadata ) { - if ( null === $metadata['selector'] ) { + $result = array(); + foreach ( $origins as $origin ) { + if ( ! isset( $preset_per_origin[ $origin ] ) ) { continue; } + foreach ( $preset_per_origin[ $origin ] as $preset ) { + $slug = _wp_to_kebab_case( $preset['slug'] ); - $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); - $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; + $value = ''; + if ( isset( $preset_metadata['value_key'] ) ) { + $value_key = $preset_metadata['value_key']; + $value = $preset[ $value_key ]; + } elseif ( + isset( $preset_metadata['value_func'] ) && + is_callable( $preset_metadata['value_func'] ) + ) { + $value_func = $preset_metadata['value_func']; + $value = call_user_func( $value_func, $preset ); + } else { + // If we don't have a value, then don't add it to the result. + continue; } + + $result[ $slug ] = $value; } + } + return $result; + } - // 2. Generate the rules that use the general selector. - $block_rules .= self::to_ruleset( $selector, $declarations ); + /** + * Similar to get_settings_values_by_slug, but doesn't compute the value. + * + * @param array $settings Settings to process. + * @param array $preset_metadata One of the PRESETS_METADATA values. + * @param array $origins List of origins to process. + * + * @return array Array of presets where the key and value are both the slug. + */ + private static function get_settings_slugs( $settings, $preset_metadata, $origins = self::VALID_ORIGINS ) { + $preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() ); - // 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 ); + $result = array(); + foreach ( $origins as $origin ) { + if ( ! isset( $preset_per_origin[ $origin ] ) ) { + continue; } + foreach ( $preset_per_origin[ $origin ] as $preset ) { + $slug = _wp_to_kebab_case( $preset['slug'] ); - if ( self::ROOT_BLOCK_SELECTOR === $selector ) { - $block_rules .= 'body { margin: 0; }'; - $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }'; - $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }'; - $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - - $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null; - if ( $has_block_gap_support ) { - $block_rules .= '.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }'; - $block_rules .= '.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); }'; - } + // Use the array as a set so we don't get duplicates. + $result[ $slug ] = $slug; } } - - return $block_rules; + return $result; } /** - * Creates new rulesets as classes for each preset value such as: - * - * .has-value-color { - * color: value; - * } + * Transform a slug into a CSS Custom Property. * - * .has-value-background-color { - * background-color: value; - * } + * @param string $input String to replace. + * @param string $slug The slug value to use to generate the custom property. * - * .has-value-font-size { - * font-size: value; - * } + * @return string The CSS Custom Property. Something along the lines of --wp--preset--color--black. + */ + private static function replace_slug_in_string( $input, $slug ) { + return strtr( $input, array( '$slug' => $slug ) ); + } + + /** + * Given the block settings, it extracts the CSS Custom Properties + * for the presets and adds them to the $declarations array + * following the format: * - * .has-value-gradient-background { - * background: value; - * } + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` * - * p.has-value-gradient-background { - * background: value; - * } - - * @param array $setting_nodes Nodes with settings. - * @param array $origins List of origins to process presets from. + * @param array $settings Settings to process. + * @param array $origins List of origins to process. * - * @return string The new stylesheet. + * @return array Returns the modified $declarations. */ - private function get_preset_classes( $setting_nodes, $origins ) { - $preset_rules = ''; - - foreach ( $setting_nodes as $metadata ) { - if ( null === $metadata['selector'] ) { - continue; + private static function compute_preset_vars( $settings, $origins ) { + $declarations = array(); + foreach ( self::PRESETS_METADATA as $preset_metadata ) { + $values_by_slug = self::get_settings_values_by_slug( $settings, $preset_metadata, $origins ); + foreach ( $values_by_slug as $slug => $value ) { + $declarations[] = array( + 'name' => self::replace_slug_in_string( $preset_metadata['css_vars'], $slug ), + 'value' => $value, + ); } + } - $selector = $metadata['selector']; - $node = _wp_array_get( $this->theme_json, $metadata['path'], array() ); - $preset_rules .= self::compute_preset_classes( $node, $selector, $origins ); + return $declarations; + } + + /** + * Given an array of settings, it extracts the CSS Custom Properties + * for the custom values and adds them to the $declarations + * array following the format: + * + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` + * + * @param array $settings Settings to process. + * + * @return array Returns the modified $declarations. + */ + private static function compute_theme_vars( $settings ) { + $declarations = array(); + $custom_values = _wp_array_get( $settings, array( 'custom' ), array() ); + $css_vars = self::flatten_tree( $custom_values ); + foreach ( $css_vars as $key => $value ) { + $declarations[] = array( + 'name' => '--wp--custom--' . $key, + 'value' => $value, + ); } - return $preset_rules; + return $declarations; } /** - * Returns the existing settings for each block. + * Given a tree, it creates a flattened one + * by merging the keys and binding the leaf values + * to the new keys. * - * Example: + * It also transforms camelCase names into kebab-case + * and substitutes '/' by '-'. + * + * This is thought to be useful to generate + * CSS Custom Properties from a tree, + * although there's nothing in the implementation + * of this function that requires that format. + * + * For example, assuming the given prefix is '--wp' + * and the token is '--', for this input tree: * * { - * 'root': { - * 'color': { - * 'custom': true - * } - * }, - * 'core/paragraph': { - * 'typography': { - * 'customFontSize': true - * } + * 'some/property': 'value', + * 'nestedProperty': { + * 'sub-property': 'value' * } * } * - * @return array Settings per block. + * it'll return this output: + * + * { + * '--wp--some-property': 'value', + * '--wp--nested-property--sub-property': 'value' + * } + * + * @param array $tree Input tree to process. + * @param string $prefix Prefix to prepend to each variable. '' by default. + * @param string $token Token to use between levels. '--' by default. + * + * @return array The flattened tree. */ - public function get_settings() { - if ( ! isset( $this->theme_json['settings'] ) ) { - return array(); - } else { - return $this->theme_json['settings']; + private static function flatten_tree( $tree, $prefix = '', $token = '--' ) { + $result = array(); + foreach ( $tree as $property => $value ) { + $new_key = $prefix . str_replace( + '/', + '-', + strtolower( preg_replace( '/(? 'property_name', + * 'value' => 'property_value, + * ) + * ``` + * + * @param array $styles Styles to process. + * @param array $settings Theme settings. + * @param array $properties Properties metadata. + * + * @return array Returns the modified $declarations. */ - public function get_custom_templates() { - $custom_templates = array(); - if ( ! isset( $this->theme_json['customTemplates'] ) ) { - return $custom_templates; + private static function compute_style_properties( $styles, $settings = array(), $properties = self::PROPERTIES_METADATA ) { + $declarations = array(); + if ( empty( $styles ) ) { + return $declarations; } - foreach ( $this->theme_json['customTemplates'] as $item ) { - if ( isset( $item['name'] ) ) { - $custom_templates[ $item['name'] ] = array( - 'title' => isset( $item['title'] ) ? $item['title'] : '', - 'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ), - ); + foreach ( $properties as $css_property => $value_path ) { + $value = self::get_property_value( $styles, $value_path ); + + // Look up protected properties, keyed by value path. + // Skip protected properties that are explicitly set to `null`. + if ( is_array( $value_path ) ) { + $path_string = implode( '.', $value_path ); + if ( + array_key_exists( $path_string, self::PROTECTED_PROPERTIES ) && + _wp_array_get( $settings, self::PROTECTED_PROPERTIES[ $path_string ], null ) === null + ) { + continue; + } + } + + // Skip if empty and not "0" or value represents array of longhand values. + $has_missing_value = empty( $value ) && ! is_numeric( $value ); + if ( $has_missing_value || is_array( $value ) ) { + continue; } + + $declarations[] = array( + 'name' => $css_property, + 'value' => $value, + ); } - return $custom_templates; + + return $declarations; + } + + /** + * Returns the style property for the given path. + * + * It also converts CSS Custom Property stored as + * "var:preset|color|secondary" to the form + * "--wp--preset--color--secondary". + * + * @param array $styles Styles subtree. + * @param array $path Which property to process. + * + * @return string Style property value. + */ + private static function get_property_value( $styles, $path ) { + $value = _wp_array_get( $styles, $path, '' ); + + if ( '' === $value || is_array( $value ) ) { + return $value; + } + + $prefix = 'var:'; + $prefix_len = strlen( $prefix ); + $token_in = '|'; + $token_out = '--'; + if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) { + $unwrapped_name = str_replace( + $token_in, + $token_out, + substr( $value, $prefix_len ) + ); + $value = "var(--wp--$unwrapped_name)"; + } + + return $value; } /** - * Returns the template part data of current theme. + * Builds metadata for the setting nodes, which returns in the form of: + * + * [ + * [ + * 'path' => ['path', 'to', 'some', 'node' ], + * 'selector' => 'CSS selector for some node' + * ], + * [ + * 'path' => [ 'path', 'to', 'other', 'node' ], + * 'selector' => 'CSS selector for other node' + * ], + * ] + * + * @param array $theme_json The tree to extract setting nodes from. + * @param array $selectors List of selectors per block. * * @return array */ - public function get_template_parts() { - $template_parts = array(); - if ( ! isset( $this->theme_json['templateParts'] ) ) { - return $template_parts; + private static function get_setting_nodes( $theme_json, $selectors = array() ) { + $nodes = array(); + if ( ! isset( $theme_json['settings'] ) ) { + return $nodes; } - foreach ( $this->theme_json['templateParts'] as $item ) { - if ( isset( $item['name'] ) ) { - $template_parts[ $item['name'] ] = array( - 'title' => isset( $item['title'] ) ? $item['title'] : '', - 'area' => isset( $item['area'] ) ? $item['area'] : '', - ); + // Top-level. + $nodes[] = array( + 'path' => array( 'settings' ), + 'selector' => self::ROOT_BLOCK_SELECTOR, + ); + + // Calculate paths for blocks. + if ( ! isset( $theme_json['settings']['blocks'] ) ) { + return $nodes; + } + + foreach ( $theme_json['settings']['blocks'] as $name => $node ) { + $selector = null; + if ( isset( $selectors[ $name ]['selector'] ) ) { + $selector = $selectors[ $name ]['selector']; } + + $nodes[] = array( + 'path' => array( 'settings', 'blocks', $name ), + 'selector' => $selector, + ); } - return $template_parts; + + return $nodes; } /** @@ -1303,91 +1388,6 @@ private static function get_style_nodes( $theme_json, $selectors = array() ) { return $nodes; } - /** - * Builds metadata for the setting nodes, which returns in the form of: - * - * [ - * [ - * 'path' => ['path', 'to', 'some', 'node' ], - * 'selector' => 'CSS selector for some node' - * ], - * [ - * 'path' => [ 'path', 'to', 'other', 'node' ], - * 'selector' => 'CSS selector for other node' - * ], - * ] - * - * @param array $theme_json The tree to extract setting nodes from. - * @param array $selectors List of selectors per block. - * - * @return array - */ - private static function get_setting_nodes( $theme_json, $selectors = array() ) { - $nodes = array(); - if ( ! isset( $theme_json['settings'] ) ) { - return $nodes; - } - - // Top-level. - $nodes[] = array( - 'path' => array( 'settings' ), - 'selector' => self::ROOT_BLOCK_SELECTOR, - ); - - // Calculate paths for blocks. - if ( ! isset( $theme_json['settings']['blocks'] ) ) { - return $nodes; - } - - foreach ( $theme_json['settings']['blocks'] as $name => $node ) { - $selector = null; - if ( isset( $selectors[ $name ]['selector'] ) ) { - $selector = $selectors[ $name ]['selector']; - } - - $nodes[] = array( - 'path' => array( 'settings', 'blocks', $name ), - 'selector' => $selector, - ); - } - - return $nodes; - } - - /** - * Returns the stylesheet that results of processing - * the theme.json structure this object represents. - * - * @param array $types Types of styles to load. Will load all by default. It accepts: - * 'variables': only the CSS Custom Properties for presets & custom ones. - * 'styles': only the styles section in theme.json. - * 'presets': only the classes for the presets. - * @param array $origins A list of origins to include. By default it includes 'default', 'theme', and 'custom'. - * - * @return string Stylesheet. - */ - public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = self::VALID_ORIGINS ) { - $blocks_metadata = self::get_blocks_metadata(); - $style_nodes = self::get_style_nodes( $this->theme_json, $blocks_metadata ); - $setting_nodes = self::get_setting_nodes( $this->theme_json, $blocks_metadata ); - - $stylesheet = ''; - - if ( in_array( 'variables', $types, true ) ) { - $stylesheet .= $this->get_css_variables( $setting_nodes, $origins ); - } - - if ( in_array( 'styles', $types, true ) ) { - $stylesheet .= $this->get_block_classes( $style_nodes ); - } - - if ( in_array( 'presets', $types, true ) ) { - $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins ); - } - - return $stylesheet; - } - /** * Merge new incoming data. * @@ -1528,6 +1528,64 @@ private static function filter_slugs( $node, $path, $slugs ) { return $new_node; } + /** + * Removes insecure data from theme.json. + * + * @param array $theme_json Structure to sanitize. + * + * @return array Sanitized structure. + */ + public static function remove_insecure_properties( $theme_json ) { + $sanitized = array(); + + $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); + + $valid_block_names = array_keys( self::get_blocks_metadata() ); + $valid_element_names = array_keys( self::ELEMENTS ); + $theme_json = self::sanitize( $theme_json, $valid_block_names, $valid_element_names ); + + $blocks_metadata = self::get_blocks_metadata(); + $style_nodes = self::get_style_nodes( $theme_json, $blocks_metadata ); + foreach ( $style_nodes as $metadata ) { + $input = _wp_array_get( $theme_json, $metadata['path'], array() ); + if ( empty( $input ) ) { + continue; + } + + $output = self::remove_insecure_styles( $input ); + if ( ! empty( $output ) ) { + _wp_array_set( $sanitized, $metadata['path'], $output ); + } + } + + $setting_nodes = self::get_setting_nodes( $theme_json ); + foreach ( $setting_nodes as $metadata ) { + $input = _wp_array_get( $theme_json, $metadata['path'], array() ); + if ( empty( $input ) ) { + continue; + } + + $output = self::remove_insecure_settings( $input ); + if ( ! empty( $output ) ) { + _wp_array_set( $sanitized, $metadata['path'], $output ); + } + } + + if ( empty( $sanitized['styles'] ) ) { + unset( $theme_json['styles'] ); + } else { + $theme_json['styles'] = $sanitized['styles']; + } + + if ( empty( $sanitized['settings'] ) ) { + unset( $theme_json['settings'] ); + } else { + $theme_json['settings'] = $sanitized['settings']; + } + + return $theme_json; + } + /** * Processes a setting node and returns the same node * without the insecure settings. @@ -1624,64 +1682,6 @@ private static function is_safe_css_declaration( $property_name, $property_value return ! empty( trim( $filtered ) ); } - /** - * Removes insecure data from theme.json. - * - * @param array $theme_json Structure to sanitize. - * - * @return array Sanitized structure. - */ - public static function remove_insecure_properties( $theme_json ) { - $sanitized = array(); - - $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); - - $valid_block_names = array_keys( self::get_blocks_metadata() ); - $valid_element_names = array_keys( self::ELEMENTS ); - $theme_json = self::sanitize( $theme_json, $valid_block_names, $valid_element_names ); - - $blocks_metadata = self::get_blocks_metadata(); - $style_nodes = self::get_style_nodes( $theme_json, $blocks_metadata ); - foreach ( $style_nodes as $metadata ) { - $input = _wp_array_get( $theme_json, $metadata['path'], array() ); - if ( empty( $input ) ) { - continue; - } - - $output = self::remove_insecure_styles( $input ); - if ( ! empty( $output ) ) { - _wp_array_set( $sanitized, $metadata['path'], $output ); - } - } - - $setting_nodes = self::get_setting_nodes( $theme_json ); - foreach ( $setting_nodes as $metadata ) { - $input = _wp_array_get( $theme_json, $metadata['path'], array() ); - if ( empty( $input ) ) { - continue; - } - - $output = self::remove_insecure_settings( $input ); - if ( ! empty( $output ) ) { - _wp_array_set( $sanitized, $metadata['path'], $output ); - } - } - - if ( empty( $sanitized['styles'] ) ) { - unset( $theme_json['styles'] ); - } else { - $theme_json['styles'] = $sanitized['styles']; - } - - if ( empty( $sanitized['settings'] ) ) { - unset( $theme_json['settings'] ); - } else { - $theme_json['settings'] = $sanitized['settings']; - } - - return $theme_json; - } - /** * Returns the raw data. * @@ -1691,7 +1691,7 @@ public function get_raw_data() { return $this->theme_json; } - /** + /** * * Transforms the given editor settings according the * add_theme_support format to the theme.json format. From 47c15d3f61d8e8209241614ceb4dab38342b9bcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:35:42 +0100 Subject: [PATCH 6/9] Update comments --- lib/class-wp-theme-json-gutenberg.php | 172 ++++++++++++-------------- 1 file changed, 78 insertions(+), 94 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index d201482babe08c..958f5be9a6592b 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -315,7 +315,6 @@ class WP_Theme_JSON_Gutenberg { * * @var int */ - const LATEST_SCHEMA = 2; /** @@ -568,18 +567,18 @@ private static function remove_keys_not_in_schema( $tree, $schema ) { * * Example: * - * { - * 'root': { - * 'color': { - * 'custom': true - * } - * }, - * 'core/paragraph': { - * 'typography': { - * 'customFontSize': true + * { + * 'root': { + * 'color': { + * 'custom': true + * } + * }, + * 'core/paragraph': { + * 'spacing': { + * 'customPadding': true + * } + * } * } - * } - * } * * @return array Settings per block. */ @@ -599,11 +598,22 @@ public function get_settings() { * 'variables': only the CSS Custom Properties for presets & custom ones. * 'styles': only the styles section in theme.json. * 'presets': only the classes for the presets. - * @param array $origins A list of origins to include. By default it includes 'default', 'theme', and 'custom'. - * + * @param array $origins A list of origins to include. By default it includes self::VALID_ORIGINS. * @return string Stylesheet. */ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = self::VALID_ORIGINS ) { + if ( is_string( $types ) ) { + // Dispatch error and map old arguments to new ones. + _deprecated_argument( __FUNCTION__, '5.9' ); + if ( 'block_styles' === $types ) { + $types = array( 'styles', 'presets' ); + } elseif ( 'css_variables' === $types ) { + $types = array( 'variables' ); + } else { + $types = array( 'variables', 'styles', 'presets' ); + } + } + $blocks_metadata = self::get_blocks_metadata(); $style_nodes = self::get_style_nodes( $this->theme_json, $blocks_metadata ); $setting_nodes = self::get_setting_nodes( $this->theme_json, $blocks_metadata ); @@ -682,7 +692,6 @@ public function get_template_parts() { * } * * @param array $style_nodes Nodes with styles. - * * @return string The new stylesheet. */ private function get_block_classes( $style_nodes ) { @@ -756,10 +765,9 @@ private function get_block_classes( $style_nodes ) { * p.has-value-gradient-background { * background: value; * } - + * * @param array $setting_nodes Nodes with settings. * @param array $origins List of origins to process presets from. - * * @return string The new stylesheet. */ private function get_preset_classes( $setting_nodes, $origins ) { @@ -787,14 +795,13 @@ private function get_preset_classes( $setting_nodes, $origins ) { * * For each section this creates a new ruleset such as: * - * block-selector { - * --wp--preset--category--slug: value; - * --wp--custom--variable: value; - * } + * block-selector { + * --wp--preset--category--slug: value; + * --wp--custom--variable: value; + * } * * @param array $nodes Nodes with settings. * @param array $origins List of origins to process. - * * @return string The new stylesheet. */ private function get_css_variables( $nodes, $origins ) { @@ -863,7 +870,6 @@ function ( $carry, $element ) { * * @param string $selector Original selector. * @param string $to_append Selector to append. - * * @return string */ private static function append_to_selector( $selector, $to_append ) { @@ -883,7 +889,6 @@ private static function append_to_selector( $selector, $to_append ) { * @param array $settings Settings to process. * @param string $selector Selector wrapping the classes. * @param array $origins List of origins to process. - * * @return string The result of processing the presets. */ private static function compute_preset_classes( $settings, $selector, $origins ) { @@ -978,7 +983,6 @@ private static function scope_selector( $scope, $selector ) { * @param array $settings Settings to process. * @param array $preset_metadata One of the PRESETS_METADATA values. * @param array $origins List of origins to process. - * * @return array Array of presets where each key is a slug and each value is the preset value. */ private static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) { @@ -1019,7 +1023,6 @@ private static function get_settings_values_by_slug( $settings, $preset_metadata * @param array $settings Settings to process. * @param array $preset_metadata One of the PRESETS_METADATA values. * @param array $origins List of origins to process. - * * @return array Array of presets where the key and value are both the slug. */ private static function get_settings_slugs( $settings, $preset_metadata, $origins = self::VALID_ORIGINS ) { @@ -1045,7 +1048,6 @@ private static function get_settings_slugs( $settings, $preset_metadata, $origin * * @param string $input String to replace. * @param string $slug The slug value to use to generate the custom property. - * * @return string The CSS Custom Property. Something along the lines of --wp--preset--color--black. */ private static function replace_slug_in_string( $input, $slug ) { @@ -1057,16 +1059,14 @@ private static function replace_slug_in_string( $input, $slug ) { * for the presets and adds them to the $declarations array * following the format: * - * ```php - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * ``` + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * * * @param array $settings Settings to process. * @param array $origins List of origins to process. - * * @return array Returns the modified $declarations. */ private static function compute_preset_vars( $settings, $origins ) { @@ -1089,15 +1089,12 @@ private static function compute_preset_vars( $settings, $origins ) { * for the custom values and adds them to the $declarations * array following the format: * - * ```php - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * ``` + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) * * @param array $settings Settings to process. - * * @return array Returns the modified $declarations. */ private static function compute_theme_vars( $settings ) { @@ -1130,24 +1127,23 @@ private static function compute_theme_vars( $settings ) { * For example, assuming the given prefix is '--wp' * and the token is '--', for this input tree: * - * { - * 'some/property': 'value', - * 'nestedProperty': { - * 'sub-property': 'value' - * } - * } + * { + * 'some/property': 'value', + * 'nestedProperty': { + * 'sub-property': 'value' + * } + * } * * it'll return this output: * - * { - * '--wp--some-property': 'value', - * '--wp--nested-property--sub-property': 'value' - * } + * { + * '--wp--some-property': 'value', + * '--wp--nested-property--sub-property': 'value' + * } * * @param array $tree Input tree to process. * @param string $prefix Prefix to prepend to each variable. '' by default. * @param string $token Token to use between levels. '--' by default. - * * @return array The flattened tree. */ private static function flatten_tree( $tree, $prefix = '', $token = '--' ) { @@ -1176,17 +1172,14 @@ private static function flatten_tree( $tree, $prefix = '', $token = '--' ) { * Given a styles array, it extracts the style properties * and adds them to the $declarations array following the format: * - * ```php - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * ``` + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) * * @param array $styles Styles to process. * @param array $settings Theme settings. * @param array $properties Properties metadata. - * * @return array Returns the modified $declarations. */ private static function compute_style_properties( $styles, $settings = array(), $properties = self::PROPERTIES_METADATA ) { @@ -1233,8 +1226,7 @@ private static function compute_style_properties( $styles, $settings = array(), * "--wp--preset--color--secondary". * * @param array $styles Styles subtree. - * @param array $path Which property to process. - * + * @param array $path Which property to process. * @return string Style property value. */ private static function get_property_value( $styles, $path ) { @@ -1263,20 +1255,19 @@ private static function get_property_value( $styles, $path ) { /** * Builds metadata for the setting nodes, which returns in the form of: * - * [ - * [ - * 'path' => ['path', 'to', 'some', 'node' ], - * 'selector' => 'CSS selector for some node' - * ], - * [ - * 'path' => [ 'path', 'to', 'other', 'node' ], - * 'selector' => 'CSS selector for other node' - * ], - * ] + * [ + * [ + * 'path' => ['path', 'to', 'some', 'node' ], + * 'selector' => 'CSS selector for some node' + * ], + * [ + * 'path' => [ 'path', 'to', 'other', 'node' ], + * 'selector' => 'CSS selector for other node' + * ], + * ] * * @param array $theme_json The tree to extract setting nodes from. - * @param array $selectors List of selectors per block. - * + * @param array $selectors List of selectors per block. * @return array */ private static function get_setting_nodes( $theme_json, $selectors = array() ) { @@ -1314,22 +1305,21 @@ private static function get_setting_nodes( $theme_json, $selectors = array() ) { /** * Builds metadata for the style nodes, which returns in the form of: * - * [ - * [ - * 'path' => [ 'path', 'to', 'some', 'node' ], - * 'selector' => 'CSS selector for some node', - * 'duotone' => 'CSS selector for duotone for some node' - * ], - * [ - * 'path' => ['path', 'to', 'other', 'node' ], - * 'selector' => 'CSS selector for other node', - * 'duotone' => null - * ], - * ] + * [ + * [ + * 'path' => [ 'path', 'to', 'some', 'node' ], + * 'selector' => 'CSS selector for some node', + * 'duotone' => 'CSS selector for duotone for some node' + * ], + * [ + * 'path' => ['path', 'to', 'other', 'node' ], + * 'selector' => 'CSS selector for other node', + * 'duotone' => null + * ], + * ] * * @param array $theme_json The tree to extract style nodes from. - * @param array $selectors List of selectors per block. - * + * @param array $selectors List of selectors per block. * @return array */ private static function get_style_nodes( $theme_json, $selectors = array() ) { @@ -1455,7 +1445,6 @@ public function merge( $incoming ) { } } } - } /** @@ -1532,7 +1521,6 @@ private static function filter_slugs( $node, $path, $slugs ) { * Removes insecure data from theme.json. * * @param array $theme_json Structure to sanitize. - * * @return array Sanitized structure. */ public static function remove_insecure_properties( $theme_json ) { @@ -1591,7 +1579,6 @@ public static function remove_insecure_properties( $theme_json ) { * without the insecure settings. * * @param array $input Node to process. - * * @return array */ private static function remove_insecure_settings( $input ) { @@ -1647,7 +1634,6 @@ private static function remove_insecure_settings( $input ) { * without the insecure styles. * * @param array $input Node to process. - * * @return array */ private static function remove_insecure_styles( $input ) { @@ -1691,13 +1677,11 @@ public function get_raw_data() { return $this->theme_json; } - /** - * + /** * Transforms the given editor settings according the * add_theme_support format to the theme.json format. * * @param array $settings Existing editor settings. - * * @return array Config that adheres to the theme.json schema. */ public static function get_from_editor_settings( $settings ) { From ae7a6c7aae6a053ec33f5695be9719163305391b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:40:22 +0100 Subject: [PATCH 7/9] Port core changes to get_custom_templates and get_template_parts --- lib/class-wp-theme-json-gutenberg.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 958f5be9a6592b..b9eb34ba0a934e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -642,7 +642,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' */ public function get_custom_templates() { $custom_templates = array(); - if ( ! isset( $this->theme_json['customTemplates'] ) ) { + if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) { return $custom_templates; } @@ -664,7 +664,7 @@ public function get_custom_templates() { */ public function get_template_parts() { $template_parts = array(); - if ( ! isset( $this->theme_json['templateParts'] ) ) { + if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) { return $template_parts; } From 37e60bc6fed45027a600619df407a7f9386a8d2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:43:24 +0100 Subject: [PATCH 8/9] Update comment --- lib/class-wp-theme-json-gutenberg.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index b9eb34ba0a934e..be2dfa713001c4 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1141,9 +1141,9 @@ private static function compute_theme_vars( $settings ) { * '--wp--nested-property--sub-property': 'value' * } * - * @param array $tree Input tree to process. - * @param string $prefix Prefix to prepend to each variable. '' by default. - * @param string $token Token to use between levels. '--' by default. + * @param array $tree Input tree to process. + * @param string $prefix Optional. Prefix to prepend to each variable. Default empty string. + * @param string $token Optional. Token to use between levels. Default '--'. * @return array The flattened tree. */ private static function flatten_tree( $tree, $prefix = '', $token = '--' ) { From 25bac06ed49d6b06388ee989229c6745c1c17e3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 29 Nov 2021 21:11:13 +0100 Subject: [PATCH 9/9] Fix lint issues reported by the Gutenberg linter --- lib/class-wp-theme-json-gutenberg.php | 40 ++++++++++++++------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index be2dfa713001c4..7dd2c94bf30889 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -14,7 +14,6 @@ * * @access private */ - class WP_Theme_JSON_Gutenberg { /** @@ -320,9 +319,9 @@ class WP_Theme_JSON_Gutenberg { /** * Constructor. * - * @param array $theme_json A structure that follows the theme.json schema. - * @param string $origin Optional. What source of data this object represents. - * One of 'default', 'theme', or 'custom'. Default 'theme'. + * @param array $theme_json A structure that follows the theme.json schema. + * @param string $origin Optional. What source of data this object represents. + * One of 'default', 'theme', or 'custom'. Default 'theme'. */ public function __construct( $theme_json = array(), $origin = 'theme' ) { if ( ! in_array( $origin, self::VALID_ORIGINS, true ) ) { @@ -330,7 +329,6 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) { } $this->theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); - $valid_block_names = array_keys( self::get_blocks_metadata() ); $valid_element_names = array_keys( self::ELEMENTS ); $theme_json = self::sanitize( $this->theme_json, $valid_block_names, $valid_element_names ); @@ -486,7 +484,6 @@ private static function sanitize( $input, $valid_block_names, $valid_element_nam * } * } * - * * @return array Block metadata. */ private static function get_blocks_metadata() { @@ -1059,11 +1056,12 @@ private static function replace_slug_in_string( $input, $slug ) { * for the presets and adds them to the $declarations array * following the format: * - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) - * + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` * * @param array $settings Settings to process. * @param array $origins List of origins to process. @@ -1089,10 +1087,12 @@ private static function compute_preset_vars( $settings, $origins ) { * for the custom values and adds them to the $declarations * array following the format: * - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` * * @param array $settings Settings to process. * @return array Returns the modified $declarations. @@ -1172,10 +1172,12 @@ private static function flatten_tree( $tree, $prefix = '', $token = '--' ) { * Given a styles array, it extracts the style properties * and adds them to the $declarations array following the format: * - * array( - * 'name' => 'property_name', - * 'value' => 'property_value, - * ) + * ```php + * array( + * 'name' => 'property_name', + * 'value' => 'property_value, + * ) + * ``` * * @param array $styles Styles to process. * @param array $settings Theme settings.