Backport aspect ratio block support #5963
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| <?php | ||
| /** | ||
| * @group block-supports | ||
| * | ||
| * @covers ::wp_render_dimensions_support | ||
| */ | ||
| class Tests_Block_Supports_WpRenderDimensionsSupport extends WP_UnitTestCase { | ||
| /** | ||
| * @var string|null | ||
| */ | ||
| private $test_block_name; | ||
|
|
||
| /** | ||
| * Theme root directory. | ||
| * | ||
| * @var string | ||
| */ | ||
| private $theme_root; | ||
|
|
||
| /** | ||
| * Original theme directory. | ||
| * | ||
| * @var string | ||
| */ | ||
| private $orig_theme_dir; | ||
|
|
||
| public function set_up() { | ||
| parent::set_up(); | ||
| $this->test_block_name = null; | ||
| $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' ); | ||
| $this->orig_theme_dir = $GLOBALS['wp_theme_directories']; | ||
|
|
||
| // /themes is necessary as theme.php functions assume /themes is the root if there is only one root. | ||
| $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root ); | ||
|
|
||
| add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); | ||
| add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); | ||
| add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); | ||
|
|
||
| // Clear caches. | ||
| wp_clean_themes_cache(); | ||
| unset( $GLOBALS['wp_themes'] ); | ||
| WP_Style_Engine_CSS_Rules_Store::remove_all_stores(); | ||
| } | ||
|
|
||
| public function tear_down() { | ||
| $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir; | ||
|
|
||
| // Clear up the filters to modify the theme root. | ||
| remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); | ||
| remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); | ||
| remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); | ||
|
|
||
| wp_clean_themes_cache(); | ||
| unset( $GLOBALS['wp_themes'] ); | ||
| WP_Style_Engine_CSS_Rules_Store::remove_all_stores(); | ||
| unregister_block_type( $this->test_block_name ); | ||
| $this->test_block_name = null; | ||
| parent::tear_down(); | ||
| } | ||
|
|
||
| public function filter_set_theme_root() { | ||
| return $this->theme_root; | ||
| } | ||
|
|
||
| /** | ||
| * Tests that dimensions block support works as expected. | ||
| * | ||
| * @ticket 60365 | ||
| * | ||
| * @covers ::wp_render_dimensions_support | ||
| * | ||
| * @dataProvider data_dimensions_block_support | ||
| * | ||
| * @param string $theme_name The theme to switch to. | ||
| * @param string $block_name The test block name to register. | ||
| * @param mixed $dimensions_settings The dimensions block support settings. | ||
| * @param mixed $dimensions_style The dimensions styles within the block attributes. | ||
| * @param string $expected_wrapper Expected markup for the block wrapper. | ||
| * @param string $wrapper Existing markup for the block wrapper. | ||
| */ | ||
| public function test_dimensions_block_support( $theme_name, $block_name, $dimensions_settings, $dimensions_style, $expected_wrapper, $wrapper ) { | ||
| switch_theme( $theme_name ); | ||
| $this->test_block_name = $block_name; | ||
|
|
||
| register_block_type( | ||
| $this->test_block_name, | ||
| array( | ||
| 'api_version' => 2, | ||
| 'attributes' => array( | ||
| 'style' => array( | ||
| 'type' => 'object', | ||
| ), | ||
| ), | ||
| 'supports' => array( | ||
| 'dimensions' => $dimensions_settings, | ||
| ), | ||
| ) | ||
| ); | ||
|
|
||
| $block = array( | ||
| 'blockName' => $block_name, | ||
| 'attrs' => array( | ||
| 'style' => array( | ||
| 'dimensions' => $dimensions_style, | ||
| ), | ||
| ), | ||
| ); | ||
|
|
||
| $actual = wp_render_dimensions_support( $wrapper, $block ); | ||
|
|
||
| $this->assertEquals( | ||
| $expected_wrapper, | ||
| $actual, | ||
| 'Dimensions block wrapper markup should be correct' | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Data provider. | ||
| * | ||
| * @return array | ||
| */ | ||
| public function data_dimensions_block_support() { | ||
| return array( | ||
| 'aspect ratio style is applied, with min-height unset' => array( | ||
| 'theme_name' => 'block-theme-child-with-fluid-typography', | ||
|
There was a problem hiding this comment. Any reason for using this particular theme as opposed to, say, There was a problem hiding this comment. Yes, There was a problem hiding this comment. Oh I see! Might be worth consolidating some of those themes at some point but this is fine for now. |
||
| 'block_name' => 'test/dimensions-rules-are-output', | ||
| 'dimensions_settings' => array( | ||
| 'aspectRatio' => true, | ||
| ), | ||
| 'dimensions_style' => array( | ||
| 'aspectRatio' => '16/9', | ||
| ), | ||
| 'expected_wrapper' => '<div class="has-aspect-ratio" style="aspect-ratio:16/9;min-height:unset;">Content</div>', | ||
| 'wrapper' => '<div>Content</div>', | ||
| ), | ||
| 'dimensions style is appended if a style attribute already exists' => array( | ||
| 'theme_name' => 'block-theme-child-with-fluid-typography', | ||
| 'block_name' => 'test/dimensions-rules-are-output', | ||
| 'dimensions_settings' => array( | ||
| 'aspectRatio' => true, | ||
| ), | ||
| 'dimensions_style' => array( | ||
| 'aspectRatio' => '16/9', | ||
| ), | ||
| 'expected_wrapper' => '<div class="wp-block-test has-aspect-ratio" style="color:red;aspect-ratio:16/9;min-height:unset;">Content</div>', | ||
| 'wrapper' => '<div class="wp-block-test" style="color:red;">Content</div>', | ||
| ), | ||
| 'aspect ratio style is unset if block has min-height set' => array( | ||
| 'theme_name' => 'block-theme-child-with-fluid-typography', | ||
| 'block_name' => 'test/dimensions-rules-are-output', | ||
| 'dimensions_settings' => array( | ||
| 'aspectRatio' => true, | ||
| ), | ||
| 'dimensions_style' => array( | ||
| 'minHeight' => '100px', | ||
| ), | ||
| 'expected_wrapper' => '<div style="min-height:100px;aspect-ratio:unset;">Content</div>', | ||
| 'wrapper' => '<div style="min-height:100px">Content</div>', | ||
| ), | ||
| 'aspect ratio style is not applied if the block does not support aspect ratio' => array( | ||
| 'theme_name' => 'block-theme-child-with-fluid-typography', | ||
| 'block_name' => 'test/background-rules-are-not-output', | ||
| 'dimensions_settings' => array( | ||
| 'aspectRatio' => false, | ||
| ), | ||
| 'dimensions_style' => array( | ||
| 'aspectRatio' => '16/9', | ||
| ), | ||
| 'expected_wrapper' => '<div>Content</div>', | ||
| 'wrapper' => '<div>Content</div>', | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would it be worth adding an
@sincefor this change incompute_style_properties?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea! Added in: 03d2d01