vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Introduce minimum height dimensions block support.

Browse Source 
This changeset adds the new dimension feature's PHP code for supporting minimum height in the block editor inspector and in global styles. Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. 

In this changeset:

* Adds support in `theme.json`.
* Adds support in the style engine.
* Adds support in `wp_apply_dimensions_support()`.
* Renames the setting from `'__experimentalDimensions'` to `dimensions` in `wp_register_dimensions_support()`.
* Adds PHPUnit tests.

Is renaming `'__experimentalDimensions'` a backwards-compatibility (BC) break?

Though the setting has been in the code since 5.9.0, it was never wired to anything, ie it did not expose any controls or styles. Notice in `wp_register_dimensions_support()` and `wp_apply_dimensions_support()` prior to this changeset, there are inline comments as placeholders for height and width support, but no code.

If a developer opted in to use it, it had no effect.

A search in wp.org's plugin and themes repo showed no instances of this experimental setting.

Given there was no functionality attached to it (until this changeset), no change in behavior or effect from removing it, and no usage found in the plugins and themes repository, it does appear to be a BC break.

References:
* [https://github.com/WordPress/gutenberg/pull/45300 Gutenberg PR 45300]
* [https://github.com/WordPress/gutenberg/pull/45334 Gutenberg PR 45334]

Follow-up to [53076], [52069].

Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly.
Fixes #57582.

git-svn-id: https://develop.svn.wordpress.org/trunk@55175 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2023-02-01 16:13:49 +00:00
parent 8604838832
commit f3b858cb98
6 changed files with 168 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/wp-includes/block-supports/dimensions.php
View File

@@ -29,8 +29,7 @@ function wp_register_dimensions_support( $block_type ) {
return;
}
$has_dimensions_support = block_has_support( $block_type, array( '__experimentalDimensions' ), false );
// Future block supports such as height & width will be added here.
$has_dimensions_support = block_has_support( $block_type, array( 'dimensions' ), false );
if ( $has_dimensions_support ) {
$block_type->attributes['style'] = array(
@@ -44,6 +43,7 @@ function wp_register_dimensions_support( $block_type ) {
* This will be applied to the block markup in the front-end.
*
* @since 5.9.0
* @since 6.2.0 Added `minHeight` support.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
@@ -51,16 +51,31 @@ function wp_register_dimensions_support( $block_type ) {
* @return array Block dimensions CSS classes and inline styles.
*/
function wp_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
if ( wp_should_skip_block_supports_serialization( $block_type, '__experimentalDimensions' ) ) {
if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
return array();
}
$styles = array();
$attributes = array();
// Height support to be added in near future.
// Width support to be added in near future.
return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
$has_min_height_support = block_has_support( $block_type, array( 'dimensions', 'minHeight' ), false );
$block_styles = isset( $block_attributes['style'] ) ? $block_attributes['style'] : null;
if ( ! $block_styles ) {
return $attributes;
}
$skip_min_height = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'minHeight' );
$dimensions_block_styles = array();
$dimensions_block_styles['minHeight'] = $has_min_height_support && ! $skip_min_height ? _wp_array_get( $block_styles, array( 'dimensions', 'minHeight' ), null ) : null;
$styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
if ( ! empty( $styles['css'] ) ) {
$attributes['style'] = $styles['css'];
}
return $attributes;
}
// Register the block support.

14
src/wp-includes/class-wp-theme-json.php
View File

@@ -192,7 +192,7 @@ class WP_Theme_JSON {
* @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
* `--wp--style--root--padding-*`, and `box-shadow` properties,
* removed the `--wp--style--block-gap` property.
* @since 6.2.0 Added `outline-*` properties.
* @since 6.2.0 Added `outline-*`, and `min-height` properties.
*
* @var array
*/
@@ -231,6 +231,7 @@ class WP_Theme_JSON {
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'min-height' => array( 'dimensions', 'minHeight' ),
'outline-color' => array( 'outline', 'color' ),
'outline-offset' => array( 'outline', 'offset' ),
'outline-style' => array( 'outline', 'style' ),
@@ -293,6 +294,7 @@ class WP_Theme_JSON {
* and `typography`, and renamed others according to the new schema.
* @since 6.0.0 Added `color.defaultDuotone`.
* @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
* @since 6.2.0 Added `dimensions.minHeight`.
* @var array
*/
const VALID_SETTINGS = array(
@@ -319,6 +321,9 @@ class WP_Theme_JSON {
'text' => null,
),
'custom' => null,
'dimensions' => array(
'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
'definitions' => null,
@@ -358,7 +363,7 @@ class WP_Theme_JSON {
* @since 6.1.0 Added new side properties for `border`,
* added new property `shadow`,
* updated `blockGap` to be allowed at any level.
* @since 6.2.0 Added `outline` properties.
* @since 6.2.0 Added `outline`, and `minHeight` properties.
*
* @var array
*/
@@ -378,6 +383,9 @@ class WP_Theme_JSON {
'gradient' => null,
'text' => null,
),
'dimensions' => array(
'minHeight' => null,
),
'filter' => array(
'duotone' => null,
),
@@ -490,6 +498,7 @@ class WP_Theme_JSON {
* Options that settings.appearanceTools enables.
*
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
@@ -498,6 +507,7 @@ class WP_Theme_JSON {
array( 'border', 'style' ),
array( 'border', 'width' ),
array( 'color', 'link' ),
array( 'dimensions', 'minHeight' ),
array( 'spacing', 'blockGap' ),
array( 'spacing', 'margin' ),
array( 'spacing', 'padding' ),

11
src/wp-includes/style-engine/class-wp-style-engine.php
View File

@@ -137,6 +137,17 @@ final class WP_Style_Engine {
),
),
),
'dimensions' => array(
'minHeight' => array(
'property_keys' => array(
'default' => 'min-height',
),
'path' => array( 'dimensions', 'minHeight' ),
'css_vars' => array(
'spacing' => '--wp--preset--spacing--$slug',
),
),
),
'spacing' => array(
'padding' => array(
'property_keys' => array(

103
tests/phpunit/tests/block-supports/wpApplyDimensionsSupport.php Normal file
View File

@@ -0,0 +1,103 @@
<?php
/**
* @group block-supports
*
* @covers ::wp_apply_dimensions_support
*/
class Tests_Block_Supports_WpApplyDimensionsSupport extends WP_UnitTestCase {
/**
* @var string|null
*/
private $test_block_name;
public function set_up() {
parent::set_up();
$this->test_block_name = null;
}
public function tear_down() {
unregister_block_type( $this->test_block_name );
$this->test_block_name = null;
parent::tear_down();
}
/**
* Tests that minimum height block support works as expected.
*
* @ticket 57582
*
* @covers ::wp_apply_dimensions_support
*
* @dataProvider data_minimum_height_block_support
*
* @param string $block_name The test block name to register.
* @param mixed $dimensions The dimensions block support settings.
* @param mixed $expected The expected results.
*/
public function test_minimum_height_block_support( $block_name, $dimensions, $expected ) {
$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,
),
)
);
$registry = WP_Block_Type_Registry::get_instance();
$block_type = $registry->get_registered( $this->test_block_name );
$block_attrs = array(
'style' => array(
'dimensions' => array(
'minHeight' => '50vh',
),
),
);
$actual = wp_apply_dimensions_support( $block_type, $block_attrs );
$this->assertSame( $expected, $actual );
}
/**
* Data provider.
*
* @return array
*/
public function data_minimum_height_block_support() {
return array(
'style is applied' => array(
'block_name' => 'test/dimensions-block-supports',
'dimensions' => array(
'minHeight' => true,
),
'expected' => array(
'style' => 'min-height:50vh;',
),
),
'style output is skipped when serialization is skipped' => array(
'block_name' => 'test/dimensions-with-skipped-serialization-block-supports',
'dimensions' => array(
'minHeight' => true,
'__experimentalSkipSerialization' => true,
),
'expected' => array(),
),
'style output is skipped when individual feature serialization is skipped' => array(
'block_name' => 'test/min-height-with-individual-skipped-serialization-block-supports',
'dimensions' => array(
'minHeight' => true,
'__experimentalSkipSerialization' => array( 'minHeight' ),
),
'expected' => array(),
),
);
}
}

15
tests/phpunit/tests/style-engine/styleEngine.php
View File

@@ -166,6 +166,21 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
),
),
'inline_valid_dimensions_style' => array(
'block_styles' => array(
'dimensions' => array(
'minHeight' => '50vh',
),
),
'options' => null,
'expected_output' => array(
'css' => 'min-height:50vh;',
'declarations' => array(
'min-height' => '50vh',
),
),
),
'inline_valid_typography_style' => array(
'block_styles' => array(
'typography' => array(

6
tests/phpunit/tests/theme/wpThemeJson.php
View File

@@ -241,6 +241,9 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
'color' => array(
'link' => true,
),
'dimensions' => array(
'minHeight' => true,
),
'spacing' => array(
'blockGap' => false,
'margin' => true,
@@ -265,6 +268,9 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
'color' => array(
'link' => true,
),
'dimensions' => array(
'minHeight' => true,
),
'spacing' => array(
'blockGap' => false,
'margin' => true,