From 6db793014792db909a6a929d2395b2fd8eddb48c Mon Sep 17 00:00:00 2001 From: jorgefilipecosta Date: Tue, 22 Jun 2021 09:51:00 +0000 Subject: [PATCH] Ports theme.json changes for beta 3. - Add _wp_to_kebab_case function - Add CSS Custom Properties within preset classes. Props nosolosw. See #53397. Built from https://develop.svn.wordpress.org/trunk@51198 git-svn-id: http://core.svn.wordpress.org/trunk@50807 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/class-wp-theme-json.php | 6 +-- wp-includes/functions.php | 77 +++++++++++++++++++++++++++++ wp-includes/version.php | 2 +- 3 files changed, 81 insertions(+), 4 deletions(-) diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 99d37acf86..2940920704 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -711,11 +711,11 @@ class WP_Theme_JSON { foreach ( $preset['classes'] as $class ) { foreach ( $preset_by_slug as $slug => $value ) { $stylesheet .= self::to_ruleset( - self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ), + self::append_to_selector( $selector, '.has-' . _wp_to_kebab_case( $slug ) . '-' . $class['class_suffix'] ), array( array( 'name' => $class['property_name'], - 'value' => $value . ' !important', + 'value' => 'var(--wp--preset--' . $preset['css_var_infix'] . '--' . _wp_to_kebab_case( $slug ) . ') !important', ), ) ); @@ -751,7 +751,7 @@ class WP_Theme_JSON { $preset_by_slug = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] ); foreach ( $preset_by_slug as $slug => $value ) { $declarations[] = array( - 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $slug, + 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . _wp_to_kebab_case( $slug ), 'value' => $value, ); } diff --git a/wp-includes/functions.php b/wp-includes/functions.php index 71a0522139..c834a01ef4 100644 --- a/wp-includes/functions.php +++ b/wp-includes/functions.php @@ -4697,6 +4697,83 @@ function _wp_array_set( &$array, $path, $value = null ) { $array[ $path[ $i ] ] = $value; } +/** + * This function is trying to replicate what + * lodash's kebabCase (JS library) does in the client. + * + * The reason we need this function is that we do some processing + * in both the client and the server (e.g.: we generate + * preset classes from preset slugs) that needs to + * create the same output. + * + * We can't remove or update the client's library due to backward compatibility + * (some of the output of lodash's kebabCase is saved in the post content). + * We have to make the server behave like the client. + * + * Changes to this function should follow updates in the client + * with the same logic. + * + * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L14369 + * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L278 + * @link https://github.com/lodash-php/lodash-php/blob/master/src/String/kebabCase.php + * @link https://github.com/lodash-php/lodash-php/blob/master/src/internal/unicodeWords.php + * + * @param string $string The string to kebab-case. + * + * @return string kebab-cased-string. + */ +function _wp_to_kebab_case( $string ) { + //phpcs:disable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase + // ignore the camelCase names for variables so the names are the same as lodash + // so comparing and porting new changes is easier. + + /* + * Some notable things we've removed compared to the lodash version are: + * + * - non-alphanumeric characters: rsAstralRange, rsEmoji, etc + * - the groups that processed the apostrophe, as it's removed before passing the string to preg_match: rsApos, rsOptContrLower, and rsOptContrUpper + * + */ + + /** Used to compose unicode character classes. */ + $rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff'; + $rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf'; + $rsPunctuationRange = '\\x{2000}-\\x{206f}'; + $rsSpaceRange = ' \\t\\x0b\\f\\xa0\\x{feff}\\n\\r\\x{2028}\\x{2029}\\x{1680}\\x{180e}\\x{2000}\\x{2001}\\x{2002}\\x{2003}\\x{2004}\\x{2005}\\x{2006}\\x{2007}\\x{2008}\\x{2009}\\x{200a}\\x{202f}\\x{205f}\\x{3000}'; + $rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde'; + $rsBreakRange = $rsNonCharRange . $rsPunctuationRange . $rsSpaceRange; + + /** Used to compose unicode capture groups. */ + $rsBreak = '[' . $rsBreakRange . ']'; + $rsDigits = '\\d+'; // The last lodash version in GitHub uses a single digit here and expands it when in use. + $rsLower = '[' . $rsLowerRange . ']'; + $rsMisc = '[^' . $rsBreakRange . $rsDigits . $rsLowerRange . $rsUpperRange . ']'; + $rsUpper = '[' . $rsUpperRange . ']'; + + /** Used to compose unicode regexes. */ + $rsMiscLower = '(?:' . $rsLower . '|' . $rsMisc . ')'; + $rsMiscUpper = '(?:' . $rsUpper . '|' . $rsMisc . ')'; + $rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])'; + $rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])'; + + $regexp = '/' . implode( + '|', + array( + $rsUpper . '?' . $rsLower . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper, '$' ) ) . ')', + $rsMiscUpper . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper . $rsMiscLower, '$' ) ) . ')', + $rsUpper . '?' . $rsMiscLower . '+', + $rsUpper . '+', + $rsOrdUpper, + $rsOrdLower, + $rsDigits, + ) + ) . '/u'; + + preg_match_all( $regexp, str_replace( "'", '', $string ), $matches ); + return strtolower( implode( '-', $matches[0] ) ); + //phpcs:enable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase +} + /** * Determines if the variable is a numeric-indexed array. * diff --git a/wp-includes/version.php b/wp-includes/version.php index efe0472e0d..cb8d253a2d 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.8-beta2-51197'; +$wp_version = '5.8-beta2-51198'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.