Skip to content

Commit

Permalink
Editor: Introduce minimum height dimensions block support.
Browse files Browse the repository at this point in the history
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:
* [WordPress/gutenberg#45300 Gutenberg PR 45300]
* [WordPress/gutenberg#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
  • Loading branch information
hellofromtonya committed Feb 1, 2023
1 parent 8604838 commit f3b858c
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 8 deletions.
27 changes: 21 additions & 6 deletions src/wp-includes/block-supports/dimensions.php
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -44,23 +43,39 @@ 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.
* @param array $block_attributes Block attributes.
* @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.
Expand Down
14 changes: 12 additions & 2 deletions src/wp-includes/class-wp-theme-json.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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' ),
Expand Down Expand Up @@ -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(
Expand All @@ -319,6 +321,9 @@ class WP_Theme_JSON {
'text' => null,
),
'custom' => null,
'dimensions' => array(
'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
'definitions' => null,
Expand Down Expand Up @@ -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
*/
Expand All @@ -378,6 +383,9 @@ class WP_Theme_JSON {
'gradient' => null,
'text' => null,
),
'dimensions' => array(
'minHeight' => null,
),
'filter' => array(
'duotone' => null,
),
Expand Down Expand Up @@ -490,6 +498,7 @@ public static function get_element_class_name( $element ) {
* Options that settings.appearanceTools enables.
*
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
Expand All @@ -498,6 +507,7 @@ public static function get_element_class_name( $element ) {
array( 'border', 'style' ),
array( 'border', 'width' ),
array( 'color', 'link' ),
array( 'dimensions', 'minHeight' ),
array( 'spacing', 'blockGap' ),
array( 'spacing', 'margin' ),
array( 'spacing', 'padding' ),
Expand Down
11 changes: 11 additions & 0 deletions src/wp-includes/style-engine/class-wp-style-engine.php
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
103 changes: 103 additions & 0 deletions tests/phpunit/tests/block-supports/wpApplyDimensionsSupport.php
Original file line number Diff line number Diff line change
@@ -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 changes: 15 additions & 0 deletions tests/phpunit/tests/style-engine/styleEngine.php
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,21 @@ public function data_wp_style_engine_get_styles() {
),
),

'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(
Expand Down
6 changes: 6 additions & 0 deletions tests/phpunit/tests/theme/wpThemeJson.php
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,9 @@ public function test_get_settings_appearance_true_opts_in() {
'color' => array(
'link' => true,
),
'dimensions' => array(
'minHeight' => true,
),
'spacing' => array(
'blockGap' => false,
'margin' => true,
Expand All @@ -265,6 +268,9 @@ public function test_get_settings_appearance_true_opts_in() {
'color' => array(
'link' => true,
),
'dimensions' => array(
'minHeight' => true,
),
'spacing' => array(
'blockGap' => false,
'margin' => true,
Expand Down

0 comments on commit f3b858c

Please sign in to comment.