Make WordPress Core

Changeset 55008


Ignore:
Timestamp:
12/19/2022 08:53:15 PM (19 months ago)
Author:
hellofromTonya
Message:

Themes: Adds outline CSS properties support in theme.json.

Adds the ability to define outline CSS properties for elements and blocks within theme.json to render outline-color, outline-offset, outline-style, and outline-width styles.

Originally developed and tested in Gutenberg PR 43526.

Props onemaggie, hellofromTonya, audrasjb, ironprogrammer.
Fixes #57354.

Location:
trunk
Files:
2 edited

Legend:

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

    r54853 r55008  
    193193     *              `--wp--style--root--padding-*`, and `box-shadow` properties,
    194194     *              removed the `--wp--style--block-gap` property.
     195     * @since 6.2.0 Added `outline-*` properties.
     196     *
    195197     * @var array
    196198     */
     
    230232        'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
    231233        'margin-left'                       => array( 'spacing', 'margin', 'left' ),
     234        'outline-color'                     => array( 'outline', 'color' ),
     235        'outline-offset'                    => array( 'outline', 'offset' ),
     236        'outline-style'                     => array( 'outline', 'style' ),
     237        'outline-width'                     => array( 'outline', 'width' ),
    232238        'padding'                           => array( 'spacing', 'padding' ),
    233239        'padding-top'                       => array( 'spacing', 'padding', 'top' ),
     
    353359     *              added new property `shadow`,
    354360     *              updated `blockGap` to be allowed at any level.
     361     * @since 6.2.0 Added `outline` properties.
     362     *
    355363     * @var array
    356364     */
     
    375383        ),
    376384        'shadow'     => null,
     385        'outline'    => array(
     386            'color'  => null,
     387            'offset' => null,
     388            'style'  => null,
     389            'width'  => null,
     390        ),
    377391        'spacing'    => array(
    378392            'margin'   => null,
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r54889 r55008  
    40914091        );
    40924092    }
     4093
     4094    /**
     4095     * @ticket 57354
     4096     */
     4097    public function test_get_stylesheet_returns_outline_styles() {
     4098        $theme_json = new WP_Theme_JSON(
     4099            array(
     4100                'version' => WP_Theme_JSON::LATEST_SCHEMA,
     4101                'styles'  => array(
     4102                    'elements' => array(
     4103                        'button' => array(
     4104                            'outline' => array(
     4105                                'offset' => '3px',
     4106                                'width'  => '3px',
     4107                                'style'  => 'dashed',
     4108                                'color'  => 'red',
     4109                            ),
     4110                            ':hover'  => array(
     4111                                'outline' => array(
     4112                                    'offset' => '3px',
     4113                                    'width'  => '3px',
     4114                                    'style'  => 'solid',
     4115                                    'color'  => 'blue',
     4116                                ),
     4117                            ),
     4118                        ),
     4119                    ),
     4120                ),
     4121            )
     4122        );
     4123
     4124        $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
     4125
     4126        $element_styles = '.wp-element-button, .wp-block-button__link{outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}.wp-element-button:hover, .wp-block-button__link:hover{outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
     4127
     4128        $expected = $base_styles . $element_styles;
     4129        $this->assertSame( $expected, $theme_json->get_stylesheet() );
     4130    }
    40934131}
Note: See TracChangeset for help on using the changeset viewer.