WordPress.org
Get WordPress

Make WordPress Core

Changeset 58834


Ignore:
Timestamp:
07/31/2024 02:39:46 AM (2 years ago)
Author:
ramonopoly
Message:

Background: add background attachment support to theme.json styles

Introduces the ability to specify a value for background.backgroundAttachment in theme.json styles.

The theme.json value determines the CSS value for the background-attachment property.

This feature was introduced into the Gutenberg plugin in version 18.9.

Props andrewserong, mukesh27, noisysocks, ramonopoly.

Fixes #61720

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/block-supports/background.php

    r58797 r58834  
    4343 * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
    4444 * @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default.
     45 * @since 6.7.0 Added support for `backgroundAttachment` output.
    4546 *
    4647 * @access private
    … …  
    6364        }
    6465
    65         $background_styles                       = array();
    66         $background_styles['backgroundImage']    = $block_attributes['style']['background']['backgroundImage'] ?? null;
    67         $background_styles['backgroundSize']     = $block_attributes['style']['background']['backgroundSize'] ?? null;
    68         $background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
    69         $background_styles['backgroundRepeat']   = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
     66        $background_styles                         = array();
     67        $background_styles['backgroundImage']      = $block_attributes['style']['background']['backgroundImage'] ?? null;
     68        $background_styles['backgroundSize']       = $block_attributes['style']['background']['backgroundSize'] ?? null;
     69        $background_styles['backgroundPosition']   = $block_attributes['style']['background']['backgroundPosition'] ?? null;
     70        $background_styles['backgroundRepeat']     = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
     71        $background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null;
    7072
    7173        if ( ! empty( $background_styles['backgroundImage'] ) ) {

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

    r58797 r58834  
    227227         * @since 6.5.0 Added `aspect-ratio` property.
    228228         * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
     229         * @since 6.7.0 Added `background-attachment` property.
    229230         *
    230231         * @var array
    … …  
    238239                'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
    239240                'background-size'                   => array( 'background', 'backgroundSize' ),
     241                'background-attachment'             => array( 'background', 'backgroundAttachment' ),
    240242                'border-radius'                     => array( 'border', 'radius' ),
    241243                'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
    … …  
    521523        const VALID_STYLES = array(
    522524                'background' => array(
    523                         'backgroundImage'    => null,
    524                         'backgroundPosition' => null,
    525                         'backgroundRepeat'   => null,
    526                         'backgroundSize'     => null,
     525                        'backgroundImage'      => null,
     526                        'backgroundPosition'   => null,
     527                        'backgroundRepeat'     => null,
     528                        'backgroundSize'       => null,
     529                        'backgroundAttachment' => null,
    527530                ),
    528531                'border'     => array(

  • trunk/src/wp-includes/style-engine/class-wp-style-engine.php

    r58311 r58834  
    5151        const BLOCK_STYLE_DEFINITIONS_METADATA = array(
    5252                'background' => array(
    53                         'backgroundImage'    => array(
     53                        'backgroundImage'      => array(
    5454                                'property_keys' => array(
    5555                                        'default' => 'background-image',
    … …  
    5858                                'path'          => array( 'background', 'backgroundImage' ),
    5959                        ),
    60                         'backgroundPosition' => array(
     60                        'backgroundPosition'   => array(
    6161                                'property_keys' => array(
    6262                                        'default' => 'background-position',
    … …  
    6464                                'path'          => array( 'background', 'backgroundPosition' ),
    6565                        ),
    66                         'backgroundRepeat'   => array(
     66                        'backgroundRepeat'     => array(
    6767                                'property_keys' => array(
    6868                                        'default' => 'background-repeat',
    … …  
    7070                                'path'          => array( 'background', 'backgroundRepeat' ),
    7171                        ),
    72                         'backgroundSize'     => array(
     72                        'backgroundSize'       => array(
    7373                                'property_keys' => array(
    7474                                        'default' => 'background-size',
    7575                                ),
    7676                                'path'          => array( 'background', 'backgroundSize' ),
     77                        ),
     78                        'backgroundAttachment' => array(
     79                                'property_keys' => array(
     80                                        'default' => 'background-attachment',
     81                                ),
     82                                'path'          => array( 'background', 'backgroundAttachment' ),
    7783                        ),
    7884                ),

  • trunk/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php

    r58222 r58834  
    7070         * @ticket 60175
    7171         * @ticket 61123
     72         * @ticket 61720
    7273         *
    7374         * @covers ::wp_render_background_support
    … …  
    140141                                'wrapper'             => '<div>Content</div>',
    141142                        ),
    142                         'background image style with contain, position, and repeat is applied' => array(
    143                                 'theme_name'          => 'block-theme-child-with-fluid-typography',
    144                                 'block_name'          => 'test/background-rules-are-output',
    145                                 'background_settings' => array(
    146                                         'backgroundImage' => true,
    147                                 ),
    148                                 'background_style'    => array(
    149                                         'backgroundImage'  => array(
    150                                                 'url' => 'https://example.com/image.jpg',
    151                                         ),
    152                                         'backgroundRepeat' => 'no-repeat',
    153                                         'backgroundSize'   => 'contain',
    154                                 ),
    155                                 'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
     143                        'background image style with contain, position, attachment, and repeat is applied' => array(
     144                                'theme_name'          => 'block-theme-child-with-fluid-typography',
     145                                'block_name'          => 'test/background-rules-are-output',
     146                                'background_settings' => array(
     147                                        'backgroundImage' => true,
     148                                ),
     149                                'background_style'    => array(
     150                                        'backgroundImage'      => array(
     151                                                'url' => 'https://example.com/image.jpg',
     152                                        ),
     153                                        'backgroundRepeat'     => 'no-repeat',
     154                                        'backgroundSize'       => 'contain',
     155                                        'backgroundAttachment' => 'fixed',
     156                                ),
     157                                'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
    156158                                'wrapper'             => '<div>Content</div>',
    157159                        ),

  • trunk/tests/phpunit/tests/style-engine/styleEngine.php

    r58089 r58834  
    2929         * @ticket 58590
    3030         * @ticket 60175
     31         * @ticket 61720
    3132         *
    3233         * @covers ::wp_style_engine_get_styles
    … …  
    540541                                'block_styles'    => array(
    541542                                        'background' => array(
    542                                                 'backgroundImage'    => array(
     543                                                'backgroundImage'      => array(
    543544                                                        'url' => 'https://example.com/image.jpg',
    544545                                                ),
    545                                                 'backgroundPosition' => 'center',
    546                                                 'backgroundRepeat'   => 'no-repeat',
    547                                                 'backgroundSize'     => 'cover',
     546                                                'backgroundPosition'   => 'center',
     547                                                'backgroundRepeat'     => 'no-repeat',
     548                                                'backgroundSize'       => 'cover',
     549                                                'backgroundAttachment' => 'fixed',
    548550                                        ),
    549551                                ),
    550552                                'options'         => array(),
    551553                                'expected_output' => array(
    552                                         'css'          => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
    553                                         'declarations' => array(
    554                                                 'background-image'    => "url('https://example.com/image.jpg')",
    555                                                 'background-position' => 'center',
    556                                                 'background-repeat'   => 'no-repeat',
    557                                                 'background-size'     => 'cover',
     554                                        'css'          => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;",
     555                                        'declarations' => array(
     556                                                'background-image'      => "url('https://example.com/image.jpg')",
     557                                                'background-position'   => 'center',
     558                                                'background-repeat'     => 'no-repeat',
     559                                                'background-size'       => 'cover',
     560                                                'background-attachment' => 'fixed',
    558561                                        ),
    559562                                ),

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

    r58797 r58834  
    49984998         * @ticket 61123
    49994999         * @ticket 61165
     5000         * @ticket 61720
    50005001         */
    50015002        public function test_get_top_level_background_image_styles() {
    … …  
    50055006                                'styles'  => array(
    50065007                                        'background' => array(
    5007                                                 'backgroundImage'    => array(
     5008                                                'backgroundImage'      => array(
    50085009                                                        'url' => 'http://example.org/image.png',
    50095010                                                ),
    5010                                                 'backgroundSize'     => 'contain',
    5011                                                 'backgroundRepeat'   => 'no-repeat',
    5012                                                 'backgroundPosition' => 'center center',
     5011                                                'backgroundSize'       => 'contain',
     5012                                                'backgroundRepeat'     => 'no-repeat',
     5013                                                'backgroundPosition'   => 'center center',
     5014                                                'backgroundAttachment' => 'fixed',
    50135015                                        ),
    50145016                                ),
    … …  
    50215023                );
    50225024
    5023                 $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
     5025                $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
    50245026                $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background styles type do not match expectations' );
    50255027
    … …  
    50295031                                'styles'  => array(
    50305032                                        'background' => array(
    5031                                                 'backgroundImage'    => "url('http://example.org/image.png')",
    5032                                                 'backgroundSize'     => 'contain',
    5033                                                 'backgroundRepeat'   => 'no-repeat',
    5034                                                 'backgroundPosition' => 'center center',
    5035                                         ),
    5036                                 ),
    5037                         )
    5038                 );
    5039 
    5040                 $expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
     5033                                                'backgroundImage'      => "url('http://example.org/image.png')",
     5034                                                'backgroundSize'       => 'contain',
     5035                                                'backgroundRepeat'     => 'no-repeat',
     5036                                                'backgroundPosition'   => 'center center',
     5037                                                'backgroundAttachment' => 'fixed',
     5038                                        ),
     5039                                ),
     5040                        )
     5041                );
     5042
    50415043                $this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background image as string type do not match expectations' );
    50425044        }
    … …  
    50445046        /**
    50455047         * @ticket 61588
     5048         * @ticket 61720
    50465049         */
    50475050        public function test_get_block_background_image_styles() {
    … …  
    50535056                                                'core/group' => array(
    50545057                                                        'background' => array(
    5055                                                                 'backgroundImage'    => "url('http://example.org/group.png')",
    5056                                                                 'backgroundSize'     => 'cover',
    5057                                                                 'backgroundRepeat'   => 'no-repeat',
    5058                                                                 'backgroundPosition' => 'center center',
     5058                                                                'backgroundImage'      => "url('http://example.org/group.png')",
     5059                                                                'backgroundSize'       => 'cover',
     5060                                                                'backgroundRepeat'     => 'no-repeat',
     5061                                                                'backgroundPosition'   => 'center center',
     5062                                                                'backgroundAttachment' => 'fixed',
    50595063                                                        ),
    50605064                                                ),
    … …  
    50955099                );
    50965100
    5097                 $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
     5101                $group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
    50985102                $this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
    50995103        }
Note: See TracChangeset for help on using the changeset viewer.