Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a minHeight block support under dimensions #45300

Merged
merged 11 commits into from
Nov 3, 2022
4 changes: 2 additions & 2 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute

- **Name:** core/group
- **Category:** design
- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** tagName, templateLock

## Heading
Expand Down Expand Up @@ -518,7 +518,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/

- **Name:** core/post-content
- **Category:** theme
- **Supports:** align (full, wide), typography (fontSize, lineHeight), ~~html~~
- **Supports:** align (full, wide), dimensions (minHeight), typography (fontSize, lineHeight), ~~html~~
- **Attributes:**

## Post Date
Expand Down
10 changes: 10 additions & 0 deletions docs/reference-guides/theme-json-reference/theme-json-living.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,16 @@ Settings related to colors.

---

### dimensions

Settings related to dimensions.

| Property | Type | Default | Props |
| --- | --- | --- |--- |
| minHeight | boolean | false | |

---

### layout

Settings related to layout.
Expand Down
26 changes: 20 additions & 6 deletions lib/block-supports/dimensions.php
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ function gutenberg_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 @@ -45,16 +44,31 @@ function gutenberg_register_dimensions_support( $block_type ) {
* @return array Block dimensions CSS classes and inline styles.
*/
function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
if ( gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalDimensions' ) ) {
if ( gutenberg_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 = gutenberg_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 = gutenberg_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
219 changes: 219 additions & 0 deletions lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<?php
/**
* WP_Theme_JSON_6_2 class
*
* @package gutenberg
*/

/**
* Class that encapsulates the processing of structures that adhere to the theme.json spec.
*
* This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
* This is a low-level API that may need to do breaking changes. Please,
* use get_global_settings, get_global_styles, and get_global_stylesheet instead.
*
* @access private
*/
class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 {
const APPEARANCE_TOOLS_OPT_INS = array(
array( 'border', 'color' ),
array( 'border', 'radius' ),
array( 'border', 'style' ),
array( 'border', 'width' ),
array( 'color', 'link' ),
array( 'dimensions', 'minHeight' ),
array( 'spacing', 'blockGap' ),
array( 'spacing', 'margin' ),
array( 'spacing', 'padding' ),
array( 'typography', 'lineHeight' ),
);

/**
* Metadata for style properties.
*
* Each element is a direct mapping from the CSS property name to the
* path to the value in theme.json & block attributes.
*
* @since 5.8.0
* @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
* `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
* `text-decoration`, `text-transform`, and `filter` properties,
* simplified the metadata structure.
* @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 `min-height`.
* @var array
*/
const PROPERTIES_METADATA = array(
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
'border-color' => array( 'border', 'color' ),
'border-width' => array( 'border', 'width' ),
'border-style' => array( 'border', 'style' ),
'border-top-color' => array( 'border', 'top', 'color' ),
'border-top-width' => array( 'border', 'top', 'width' ),
'border-top-style' => array( 'border', 'top', 'style' ),
'border-right-color' => array( 'border', 'right', 'color' ),
'border-right-width' => array( 'border', 'right', 'width' ),
'border-right-style' => array( 'border', 'right', 'style' ),
'border-bottom-color' => array( 'border', 'bottom', 'color' ),
'border-bottom-width' => array( 'border', 'bottom', 'width' ),
'border-bottom-style' => array( 'border', 'bottom', 'style' ),
'border-left-color' => array( 'border', 'left', 'color' ),
'border-left-width' => array( 'border', 'left', 'width' ),
'border-left-style' => array( 'border', 'left', 'style' ),
'color' => array( 'color', 'text' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
'margin' => array( 'spacing', 'margin' ),
'margin-top' => array( 'spacing', 'margin', 'top' ),
'margin-right' => array( 'spacing', 'margin', 'right' ),
'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
'margin-left' => array( 'spacing', 'margin', 'left' ),
'min-height' => array( 'dimensions', 'minHeight' ),
'padding' => array( 'spacing', 'padding' ),
'padding-top' => array( 'spacing', 'padding', 'top' ),
'padding-right' => array( 'spacing', 'padding', 'right' ),
'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'padding-left' => array( 'spacing', 'padding', 'left' ),
'--wp--style--root--padding' => array( 'spacing', 'padding' ),
'--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ),
'--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ),
'--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
'--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ),
'text-decoration' => array( 'typography', 'textDecoration' ),
'text-transform' => array( 'typography', 'textTransform' ),
'filter' => array( 'filter', 'duotone' ),
'box-shadow' => array( 'shadow' ),
);

/**
* The valid properties under the settings key.
*
* @since 5.8.0 As `ALLOWED_SETTINGS`.
* @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
* added new properties for `border`, `color`, `spacing`,
* 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(
'appearanceTools' => null,
'useRootPaddingAwareAlignments' => null,
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
),
'color' => array(
'background' => null,
'custom' => null,
'customDuotone' => null,
'customGradient' => null,
'defaultDuotone' => null,
'defaultGradients' => null,
'defaultPalette' => null,
'duotone' => null,
'gradients' => null,
'link' => null,
'palette' => null,
'text' => null,
),
'custom' => null,
'dimensions' => array(
'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
'definitions' => null,
'wideSize' => null,
),
'spacing' => array(
'customSpacingSize' => null,
'spacingSizes' => null,
'spacingScale' => null,
'blockGap' => null,
'margin' => null,
'padding' => null,
'units' => null,
),
'typography' => array(
'fluid' => null,
'customFontSize' => null,
'dropCap' => null,
'fontFamilies' => null,
'fontSizes' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textDecoration' => null,
'textTransform' => null,
),
);

/**
* The valid properties under the styles key.
*
* @since 5.8.0 As `ALLOWED_STYLES`.
* @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
* added new properties for `border`, `filter`, `spacing`,
* and `typography`.
* @since 6.1.0 Added new side properties for `border`,
* added new property `shadow`,
* updated `blockGap` to be allowed at any level.
* @var array
*/
const VALID_STYLES = array(
'border' => array(
'color' => null,
'radius' => null,
'style' => null,
'width' => null,
'top' => null,
'right' => null,
'bottom' => null,
'left' => null,
),
'color' => array(
'background' => null,
'gradient' => null,
'text' => null,
),
'dimensions' => array(
'minHeight' => null,
),
'filter' => array(
'duotone' => null,
),
'shadow' => null,
'spacing' => array(
'margin' => null,
'padding' => null,
'blockGap' => null,
),
'typography' => array(
'fontFamily' => null,
'fontSize' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textDecoration' => null,
'textTransform' => null,
),
);
}
2 changes: 1 addition & 1 deletion lib/experimental/class-wp-theme-json-gutenberg.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*
* @access private
*/
class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_1 {
class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_2 {
/**
* Holds block metadata extracted from block.json
* to be shared among all instances so we don't
Expand Down
1 change: 1 addition & 0 deletions lib/load.php
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';

// Experimental features.
remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/components/use-setting/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ import {
import { useBlockEditContext } from '../block-edit';
import { store as blockEditorStore } from '../../store';

const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
const blockedPaths = [
'color',
'border',
'dimensions',
'typography',
'spacing',
];

const deprecatedFlags = {
'color.palette': ( settings ) => settings.colors,
Expand Down
Loading