Make WordPress Core


Ignore:
Timestamp:
02/16/2026 11:50:37 PM (7 months ago)
Author:
isabel_brison
Message:

Editor: fix grid layout for style variations defining blockGap.

Ensures the grid block columns computation takes into account any blockGap value output by an active block style variation.

Props isabel_brison, mukesh27, westonruter, andrewserong.
Fixes #64624.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/block-supports/layout.php

    r61513 r61655  
    4343                wp_clean_themes_cache();
    4444                unset( $GLOBALS['wp_themes'] );
     45
     46                /*
     47                 * Register a style variation with a custom blockGap value for testing.
     48                 */
     49                register_block_style(
     50                        'core/group',
     51                        array(
     52                                'name'       => 'custom-gap',
     53                                'label'      => 'Custom Gap',
     54                                'style_data' => array(
     55                                        'spacing' => array(
     56                                                'blockGap' => '99px',
     57                                        ),
     58                                ),
     59                        )
     60                );
    4561        }
    4662
     
    5571                wp_clean_themes_cache();
    5672                unset( $GLOBALS['wp_themes'] );
     73
     74                // Clean up variation test data.
     75                unregister_block_style( 'core/group', 'custom-gap' );
     76                WP_Theme_JSON_Resolver::clean_cached_data();
     77
    5778                parent::tear_down();
    5879        }
     
    728749                );
    729750        }
     751
     752        /**
     753         * Tests that block style variations with blockGap values are applied to layout styles.
     754         *
     755         * @ticket 64624
     756         * @covers ::wp_render_layout_support_flag
     757         */
     758        public function test_layout_support_flag_uses_variation_block_gap_value() {
     759                switch_theme( 'block-theme' );
     760
     761                $block_content = '<div class="wp-block-group is-style-custom-gap"></div>';
     762                $block         = array(
     763                        'blockName'    => 'core/group',
     764                        'attrs'        => array(
     765                                'className' => 'is-style-custom-gap',
     766                                'layout'    => array(
     767                                        'type'               => 'grid',
     768                                        'columnCount'        => 3,
     769                                        'minimumColumnWidth' => '12rem',
     770                                ),
     771                        ),
     772                        'innerBlocks'  => array(),
     773                        'innerHTML'    => '<div class="wp-block-group is-style-custom-gap"></div>',
     774                        'innerContent' => array(
     775                                '<div class="wp-block-group is-style-custom-gap"></div>',
     776                        ),
     777                );
     778
     779                wp_render_layout_support_flag( $block_content, $block );
     780
     781                // Get the generated CSS from the style engine.
     782                $actual_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports', array( 'prettify' => false ) );
     783
     784                // The CSS grid declaration should contain the variation's blockGap value of 99px.
     785                $this->assertStringContainsString(
     786                        'grid-template-columns:repeat(auto-fill, minmax(max(min(12rem, 100%), (100% - (99px * (3 - 1))) /3), 1fr))',
     787                        $actual_stylesheet,
     788                        'Generated CSS should contain the variation blockGap value of 99px.'
     789                );
     790        }
     791
     792        /**
     793         * Tests that wp_get_block_style_variation_name_from_registered_style correctly extracts variation names from class strings.
     794         *
     795         * @ticket 64624
     796         * @covers ::wp_get_block_style_variation_name_from_registered_style
     797         *
     798         * @dataProvider data_get_block_style_variation_name_from_registered_style
     799         *
     800         * @param string      $class_name        CSS class string to test.
     801         * @param array       $registered_styles Registered block styles.
     802         * @param string|null $expected_result   Expected variation name or null.
     803         */
     804        public function test_get_block_style_variation_name_from_registered_style( $class_name, $registered_styles, $expected_result ) {
     805                $result = wp_get_block_style_variation_name_from_registered_style( $class_name, $registered_styles );
     806                $this->assertSame( $expected_result, $result );
     807        }
     808
     809        /**
     810         * Data provider for test_get_block_style_variation_name_from_registered_style.
     811         *
     812         * @return array
     813         */
     814        public function data_get_block_style_variation_name_from_registered_style() {
     815                return array(
     816                        'empty class name'                             => array(
     817                                'class_name'        => '',
     818                                'registered_styles' => array(),
     819                                'expected_result'   => null,
     820                        ),
     821                        'no matching registered styles'                => array(
     822                                'class_name'        => 'is-style-shadowed wp-block-button',
     823                                'registered_styles' => array(
     824                                        array( 'name' => 'rounded' ),
     825                                        array( 'name' => 'outlined' ),
     826                                ),
     827                                'expected_result'   => null,
     828                        ),
     829                        'single matching variation found'              => array(
     830                                'class_name'        => 'wp-block-button is-style-rounded',
     831                                'registered_styles' => array(
     832                                        array( 'name' => 'rounded' ),
     833                                        array( 'name' => 'outlined' ),
     834                                ),
     835                                'expected_result'   => 'rounded',
     836                        ),
     837                        'ignores default style only'                   => array(
     838                                'class_name'        => 'is-style-default wp-block-button',
     839                                'registered_styles' => array(
     840                                        array( 'name' => 'default' ),
     841                                        array( 'name' => 'rounded' ),
     842                                ),
     843                                'expected_result'   => null,
     844                        ),
     845                        'ignores default and returns next variation'   => array(
     846                                'class_name'        => 'is-style-default is-style-rounded wp-block-button',
     847                                'registered_styles' => array(
     848                                        array( 'name' => 'default' ),
     849                                        array( 'name' => 'rounded' ),
     850                                        array( 'name' => 'outlined' ),
     851                                ),
     852                                'expected_result'   => 'rounded',
     853                        ),
     854                        'returns first matching variation when multiple present' => array(
     855                                'class_name'        => 'is-style-shadowed is-style-rounded',
     856                                'registered_styles' => array(
     857                                        array( 'name' => 'rounded' ),
     858                                        array( 'name' => 'outlined' ),
     859                                        array( 'name' => 'shadowed' ),
     860                                ),
     861                                'expected_result'   => 'shadowed',
     862                        ),
     863                        'empty registered styles array'                => array(
     864                                'class_name'        => 'is-style-rounded',
     865                                'registered_styles' => array(),
     866                                'expected_result'   => null,
     867                        ),
     868                        'registered styles with missing name property' => array(
     869                                'class_name'        => 'is-style-outlined wp-block-button',
     870                                'registered_styles' => array(
     871                                        array( 'label' => 'Rounded' ),
     872                                        array( 'name' => 'outlined' ),
     873                                ),
     874                                'expected_result'   => 'outlined',
     875                        ),
     876                );
     877        }
    730878}
Note: See TracChangeset for help on using the changeset viewer.