WordPress.org
Get WordPress

Make WordPress Core

Changeset 57254


Ignore:
Timestamp:
01/09/2024 06:10:09 AM (3 years ago)
Author:
isabel_brison
Message:

Editor: add size and repeat to background image support.

Adds background size and background repeat style processing to the background image block support and WP_Style_Engine definitions.

Props andrewserong, mukesh27.
Fixes #60175.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r56731 r57254  
    4141 *
    4242 * @since 6.4.0
     43 * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
    4344 * @access private
    4445 *
    … …  
    6566                ? $block_attributes['style']['background']['backgroundImage']['url']
    6667                : null;
     68
     69        if ( ! $background_image_source && ! $background_image_url ) {
     70                return $block_content;
     71        }
     72
    6773        $background_size         = isset( $block_attributes['style']['background']['backgroundSize'] )
    6874                ? $block_attributes['style']['background']['backgroundSize']
    6975                : 'cover';
     76        $background_position     = isset( $block_attributes['style']['background']['backgroundPosition'] )
     77                ? $block_attributes['style']['background']['backgroundPosition']
     78                : null;
     79        $background_repeat       = isset( $block_attributes['style']['background']['backgroundRepeat'] )
     80                ? $block_attributes['style']['background']['backgroundRepeat']
     81                : null;
    7082
    7183        $background_block_styles = array();
    … …  
    7789                // Set file based background URL.
    7890                $background_block_styles['backgroundImage']['url'] = $background_image_url;
    79                 // Only output the background size when an image url is set.
    80                 $background_block_styles['backgroundSize'] = $background_size;
     91                // Only output the background size and repeat when an image url is set.
     92                $background_block_styles['backgroundSize']     = $background_size;
     93                $background_block_styles['backgroundRepeat']   = $background_repeat;
     94                $background_block_styles['backgroundPosition'] = $background_position;
     95
     96                // If the background size is set to `contain` and no position is set, set the position to `center`.
     97                if ( 'contain' === $background_size && ! isset( $background_position ) ) {
     98                        $background_block_styles['backgroundPosition'] = 'center';
     99                }
    81100        }
    82101
    … …  
    100119                        $updated_style .= $styles['css'];
    101120                        $tags->set_attribute( 'style', $updated_style );
     121                        $tags->add_class( 'has-background' );
    102122                }
    103123

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

    r57247 r57254  
    345345         * @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
    346346         *              `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
    347          * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`.
     347         * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
     348         *              `background.backgroundSize`.
    348349         * @var array
    349350         */
    … …  
    353354                'background'                    => array(
    354355                        'backgroundImage' => null,
     356                        'backgroundSize'  => null,
    355357                ),
    356358                'border'                        => array(
    … …  
    574576         * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
    575577         * @since 6.4.0 Added `background.backgroundImage`.
     578         * @since 6.5.0 Added `background.backgroundSize`.
    576579         * @var array
    577580         */
    578581        const APPEARANCE_TOOLS_OPT_INS = array(
    579582                array( 'background', 'backgroundImage' ),
     583                array( 'background', 'backgroundSize' ),
    580584                array( 'border', 'color' ),
    581585                array( 'border', 'radius' ),

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

    r57253 r57254  
    2424 * @since 6.3.0 Added support for text-columns.
    2525 * @since 6.4.0 Added support for background.backgroundImage.
     26 * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
    2627 */
    2728#[AllowDynamicProperties]
    … …  
    4950        const BLOCK_STYLE_DEFINITIONS_METADATA = array(
    5051                'background' => array(
    51                         'backgroundImage' => array(
     52                        'backgroundImage'    => array(
    5253                                'property_keys' => array(
    5354                                        'default' => 'background-image',
    … …  
    5657                                'path'          => array( 'background', 'backgroundImage' ),
    5758                        ),
    58                         'backgroundSize'  => array(
     59                        'backgroundPosition' => array(
     60                                'property_keys' => array(
     61                                        'default' => 'background-position',
     62                                ),
     63                                'path'          => array( 'background', 'backgroundPosition' ),
     64                        ),
     65                        'backgroundRepeat'   => array(
     66                                'property_keys' => array(
     67                                        'default' => 'background-repeat',
     68                                ),
     69                                'path'          => array( 'background', 'backgroundRepeat' ),
     70                        ),
     71                        'backgroundSize'     => array(
    5972                                'property_keys' => array(
    6073                                        'default' => 'background-size',

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

    r56614 r57254  
    6868         *
    6969         * @ticket 59357
     70         * @ticket 60175
    7071         *
    7172         * @covers ::wp_render_background_support
    … …  
    136137                                        ),
    137138                                ),
    138                                 'expected_wrapper'    => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
     139                                'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
    139140                                'wrapper'             => '<div>Content</div>',
    140141                        ),
     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                                                'source' => 'file',
     152                                        ),
     153                                        'backgroundRepeat' => 'no-repeat',
     154                                        'backgroundSize'   => 'contain',
     155                                ),
     156                                '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>',
     157                                'wrapper'             => '<div>Content</div>',
     158                        ),
    141159                        'background image style is appended if a style attribute already exists' => array(
    142160                                'theme_name'          => 'block-theme-child-with-fluid-typography',
    … …  
    151169                                        ),
    152170                                ),
    153                                 'expected_wrapper'    => '<div classname="wp-block-test" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
    154                                 'wrapper'             => '<div classname="wp-block-test" style="color: red">Content</div>',
     171                                'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
     172                                'wrapper'             => '<div class="wp-block-test" style="color: red">Content</div>',
    155173                        ),
    156174                        'background image style is appended if a style attribute containing multiple styles already exists' => array(
    … …  
    166184                                        ),
    167185                                ),
    168                                 'expected_wrapper'    => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
    169                                 'wrapper'             => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
     186                                'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
     187                                'wrapper'             => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
    170188                        ),
    171189                        'background image style is not applied if the block does not support background image' => array(

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

    r57253 r57254  
    2828         * @ticket 58549
    2929         * @ticket 58590
     30         * @ticket 60175
    3031         *
    3132         * @covers ::wp_style_engine_get_styles
    … …  
    521522                                'block_styles'    => array(
    522523                                        'background' => array(
    523                                                 'backgroundImage' => array(
     524                                                'backgroundImage'    => array(
    524525                                                        'url' => 'https://example.com/image.jpg',
    525526                                                ),
    526                                                 'backgroundSize'  => 'cover',
    527                                         ),
    528                                 ),
    529                                 'options'         => array(),
    530                                 'expected_output' => array(
    531                                         'css'          => "background-image:url('https://example.com/image.jpg');background-size:cover;",
    532                                         'declarations' => array(
    533                                                 'background-image' => "url('https://example.com/image.jpg')",
    534                                                 'background-size'  => 'cover',
     527                                                'backgroundPosition' => 'center',
     528                                                'backgroundRepeat'   => 'no-repeat',
     529                                                'backgroundSize'     => 'cover',
     530                                        ),
     531                                ),
     532                                'options'         => array(),
     533                                'expected_output' => array(
     534                                        'css'          => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
     535                                        'declarations' => array(
     536                                                'background-image'    => "url('https://example.com/image.jpg')",
     537                                                'background-position' => 'center',
     538                                                'background-repeat'   => 'no-repeat',
     539                                                'background-size'     => 'cover',
    535540                                        ),
    536541                                ),

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

    r56615 r57254  
    265265                        'background' => array(
    266266                                'backgroundImage' => true,
     267                                'backgroundSize'  => true,
    267268                        ),
    268269                        'border'     => array(
    … …  
    301302                                        'background' => array(
    302303                                                'backgroundImage' => true,
     304                                                'backgroundSize'  => true,
    303305                                        ),
    304306                                        'border'     => array(
Note: See TracChangeset for help on using the changeset viewer.