WordPress.org
Get WordPress

Make WordPress Core

Changeset 51198


Ignore:
Timestamp:
06/22/2021 09:49:13 AM (3 years ago)
Author:
jorgefilipecosta
Message:

Ports theme.json changes for beta 3.

  • Add _wp_to_kebab_case function
  • Add CSS Custom Properties within preset classes.

Props nosolosw.
See #53397.

Location:
trunk
Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/class-wp-theme-json.php

    r51168 r51198  
    712712                foreach ( $preset_by_slug as $slug => $value ) {
    713713                    $stylesheet .= self::to_ruleset(
    714                         self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ),
     714                        self::append_to_selector( $selector, '.has-' . _wp_to_kebab_case( $slug ) . '-' . $class['class_suffix'] ),
    715715                        array(
    716716                            array(
    717717                                'name'  => $class['property_name'],
    718                                 'value' => $value . ' !important',
     718                                'value' => 'var(--wp--preset--' . $preset['css_var_infix'] . '--' . _wp_to_kebab_case( $slug ) . ') !important',
    719719                            ),
    720720                        )
    … …  
    752752            foreach ( $preset_by_slug as $slug => $value ) {
    753753                $declarations[] = array(
    754                     'name'  => '--wp--preset--' . $preset['css_var_infix'] . '--' . $slug,
     754                    'name'  => '--wp--preset--' . $preset['css_var_infix'] . '--' . _wp_to_kebab_case( $slug ),
    755755                    'value' => $value,
    756756                );

  • trunk/src/wp-includes/functions.php

    r51182 r51198  
    46994699
    47004700/**
     4701 * This function is trying to replicate what
     4702 * lodash's kebabCase (JS library) does in the client.
     4703 *
     4704 * The reason we need this function is that we do some processing
     4705 * in both the client and the server (e.g.: we generate
     4706 * preset classes from preset slugs) that needs to
     4707 * create the same output.
     4708 *
     4709 * We can't remove or update the client's library due to backward compatibility
     4710 * (some of the output of lodash's kebabCase is saved in the post content).
     4711 * We have to make the server behave like the client.
     4712 *
     4713 * Changes to this function should follow updates in the client
     4714 * with the same logic.
     4715 *
     4716 * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L14369
     4717 * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L278
     4718 * @link https://github.com/lodash-php/lodash-php/blob/master/src/String/kebabCase.php
     4719 * @link https://github.com/lodash-php/lodash-php/blob/master/src/internal/unicodeWords.php
     4720 *
     4721 * @param string $string The string to kebab-case.
     4722 *
     4723 * @return string kebab-cased-string.
     4724 */
     4725function _wp_to_kebab_case( $string ) {
     4726    //phpcs:disable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase
     4727    // ignore the camelCase names for variables so the names are the same as lodash
     4728    // so comparing and porting new changes is easier.
     4729
     4730    /*
     4731     * Some notable things we've removed compared to the lodash version are:
     4732     *
     4733     * - non-alphanumeric characters: rsAstralRange, rsEmoji, etc
     4734     * - the groups that processed the apostrophe, as it's removed before passing the string to preg_match: rsApos, rsOptContrLower, and rsOptContrUpper
     4735     *
     4736     */
     4737
     4738    /** Used to compose unicode character classes. */
     4739    $rsLowerRange       = 'a-z\\xdf-\\xf6\\xf8-\\xff';
     4740    $rsNonCharRange     = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf';
     4741    $rsPunctuationRange = '\\x{2000}-\\x{206f}';
     4742    $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}';
     4743    $rsUpperRange       = 'A-Z\\xc0-\\xd6\\xd8-\\xde';
     4744    $rsBreakRange       = $rsNonCharRange . $rsPunctuationRange . $rsSpaceRange;
     4745
     4746    /** Used to compose unicode capture groups. */
     4747    $rsBreak  = '[' . $rsBreakRange . ']';
     4748    $rsDigits = '\\d+'; // The last lodash version in GitHub uses a single digit here and expands it when in use.
     4749    $rsLower  = '[' . $rsLowerRange . ']';
     4750    $rsMisc   = '[^' . $rsBreakRange . $rsDigits . $rsLowerRange . $rsUpperRange . ']';
     4751    $rsUpper  = '[' . $rsUpperRange . ']';
     4752
     4753    /** Used to compose unicode regexes. */
     4754    $rsMiscLower = '(?:' . $rsLower . '|' . $rsMisc . ')';
     4755    $rsMiscUpper = '(?:' . $rsUpper . '|' . $rsMisc . ')';
     4756    $rsOrdLower  = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])';
     4757    $rsOrdUpper  = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])';
     4758
     4759    $regexp = '/' . implode(
     4760        '|',
     4761        array(
     4762            $rsUpper . '?' . $rsLower . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper, '$' ) ) . ')',
     4763            $rsMiscUpper . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper . $rsMiscLower, '$' ) ) . ')',
     4764            $rsUpper . '?' . $rsMiscLower . '+',
     4765            $rsUpper . '+',
     4766            $rsOrdUpper,
     4767            $rsOrdLower,
     4768            $rsDigits,
     4769        )
     4770    ) . '/u';
     4771
     4772    preg_match_all( $regexp, str_replace( "'", '', $string ), $matches );
     4773    return strtolower( implode( '-', $matches[0] ) );
     4774    //phpcs:enable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase
     4775}
     4776
     4777/**
    47014778 * Determines if the variable is a numeric-indexed array.
    47024779 *

  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r51149 r51198  
    295295
    296296        $this->assertSame(
    297             'body{--wp--preset--color--grey: grey;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
     297            'body{--wp--preset--color--grey: grey;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    298298            $theme_json->get_stylesheet()
    299299        );
    300300        $this->assertSame(
    301             'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
     301            'body{color: var(--wp--preset--color--grey);}a{background-color: #333;color: #111;}.wp-block-group{padding-top: 12px;padding-bottom: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    302302            $theme_json->get_stylesheet( 'block_styles' )
    303303        );
    … …  
    330330
    331331        $this->assertSame(
    332             'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: #fff !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: #fff !important;}',
     332            'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white) !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}',
    333333            $theme_json->get_stylesheet( 'block_styles' )
    334334        );
    … …  
    366366
    367367        $this->assertSame(
    368             '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
     368            '.wp-block-group{--wp--preset--color--grey: grey;}.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    369369            $theme_json->get_stylesheet()
    370370        );
    371371        $this->assertSame(
    372             '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: grey !important;}.wp-block-group.has-grey-background-color{background-color: grey !important;}',
     372            '.wp-block-group{color: red;}.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    373373            $theme_json->get_stylesheet( 'block_styles' )
    374374        );
    … …  
    408408
    409409        $this->assertSame(
    410             'body{--wp--preset--color--grey: grey;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: grey !important;}.has-grey-background-color{background-color: grey !important;}',
     410            'body{--wp--preset--color--grey: grey;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}',
    411411            $theme_json->get_stylesheet()
    412412        );
Note: See TracChangeset for help on using the changeset viewer.