Make WordPress Core

Changeset 58834


Ignore:
Timestamp:
07/31/2024 02:39:46 AM (3 months 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.