From 3ed6b83aedcb0528386dcfc8c2b4c0d014e1e971 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 26 Oct 2022 17:04:42 +1100 Subject: [PATCH 01/11] Try: Add a minHeight block support under dimensions --- docs/reference-guides/core-blocks.md | 4 +- .../theme-json-reference/theme-json-living.md | 10 + lib/block-supports/dimensions.php | 24 +- .../wordpress-6.2/class-wp-theme-json-6-2.php | 219 ++++++++++++++++++ .../class-wp-theme-json-gutenberg.php | 2 +- lib/load.php | 1 + .../src/components/use-setting/index.js | 8 +- packages/block-editor/src/hooks/dimensions.js | 74 ++++-- packages/block-editor/src/hooks/min-height.js | 120 ++++++++++ packages/block-editor/src/hooks/style.js | 12 +- packages/block-editor/src/hooks/test/style.js | 4 + packages/block-library/src/group/block.json | 3 + .../block-library/src/post-content/block.json | 3 + packages/blocks/src/api/constants.js | 5 + .../global-styles/dimensions-panel.js | 59 ++++- .../global-styles/use-global-styles-output.js | 1 + .../style-engine/class-wp-style-engine.php | 4 +- packages/style-engine/src/styles/index.ts | 2 + phpunit/class-wp-theme-json-test.php | 11 +- schemas/json/theme.json | 16 ++ 20 files changed, 549 insertions(+), 33 deletions(-) create mode 100644 lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php create mode 100644 packages/block-editor/src/hooks/min-height.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index dd9fdbdc0566b0..3cb36ce166c03c 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -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 @@ -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 diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index a23c94742e3a28..cf7624766c9ff3 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -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. diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 8fe5b82c3e7654..5c7f01d079e22a 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -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( @@ -45,15 +44,28 @@ 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(); - - // Height support to be added in near future. // Width support to be added in near future. + $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 empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); } diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php new file mode 100644 index 00000000000000..b52515760247d0 --- /dev/null +++ b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php @@ -0,0 +1,219 @@ + 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, + ), + ); +} diff --git a/lib/experimental/class-wp-theme-json-gutenberg.php b/lib/experimental/class-wp-theme-json-gutenberg.php index 53809cb692aa65..a16697dff07d07 100644 --- a/lib/experimental/class-wp-theme-json-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-gutenberg.php @@ -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 diff --git a/lib/load.php b/lib/load.php index d457271d5eb37f..c8c03b4c51df27 100644 --- a/lib/load.php +++ b/lib/load.php @@ -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. diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index c3d3a9133f2dab..630909f48738c9 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -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, diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 171080934213de..e44c49412b5dd8 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -30,6 +30,13 @@ import { resetMargin, useIsMarginDisabled, } from './margin'; +import { + MinHeightEdit, + hasMinHeightSupport, + hasMinHeightValue, + resetMinHeight, + useIsMinHeightDisabled, +} from './min-height'; import { PaddingEdit, PaddingVisualizer, @@ -40,6 +47,7 @@ import { } from './padding'; import useSetting from '../components/use-setting'; +export const DIMENSIONS_SUPPORT_KEY = 'dimensions'; export const SPACING_SUPPORT_KEY = 'spacing'; export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ]; export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; @@ -56,12 +64,13 @@ function useVisualizerMouseOver() { * * @param {Object} props Block props. * - * @return {WPElement} Inspector controls for spacing support features. + * @return {WPElement} Inspector controls for dimensions and spacing support features. */ export function DimensionsPanel( props ) { const isGapDisabled = useIsGapDisabled( props ); const isPaddingDisabled = useIsPaddingDisabled( props ); const isMarginDisabled = useIsMarginDisabled( props ); + const isMinHeightDisabled = useIsMinHeightDisabled( props ); const isDisabled = useIsDimensionsDisabled( props ); const isSupported = hasDimensionsSupport( props.name ); const spacingSizes = useSetting( 'spacing.spacingSizes' ); @@ -72,21 +81,27 @@ export function DimensionsPanel( props ) { return null; } + const defaultDimensionsControls = getBlockSupport( props.name, [ + DIMENSIONS_SUPPORT_KEY, + '__experimentalDefaultControls', + ] ); + const defaultSpacingControls = getBlockSupport( props.name, [ SPACING_SUPPORT_KEY, '__experimentalDefaultControls', ] ); - const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( { - ...newAttributes, - style: { - ...newAttributes.style, - spacing: { - ...newAttributes.style?.spacing, - [ attribute ]: undefined, + const createResetAllFilter = + ( attribute, featureSet ) => ( newAttributes ) => ( { + ...newAttributes, + style: { + ...newAttributes.style, + [ featureSet ]: { + ...newAttributes.style?.[ featureSet ], + [ attribute ]: undefined, + }, }, - }, - } ); + } ); const spacingClassnames = classnames( { 'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0, @@ -95,13 +110,34 @@ export function DimensionsPanel( props ) { return ( <> + { ! isMinHeightDisabled && ( + hasMinHeightValue( props ) } + label={ __( 'Minimum height' ) } + onDeselect={ () => resetMinHeight( props ) } + resetAllFilter={ createResetAllFilter( + 'minHeight', + 'dimensions' + ) } + isShownByDefault={ + defaultDimensionsControls?.minHeight + } + panelId={ props.clientId } + > + + + ) } { ! isPaddingDisabled && ( hasPaddingValue( props ) } label={ __( 'Padding' ) } onDeselect={ () => resetPadding( props ) } - resetAllFilter={ createResetAllFilter( 'padding' ) } + resetAllFilter={ createResetAllFilter( + 'padding', + 'spacing' + ) } isShownByDefault={ defaultSpacingControls?.padding } panelId={ props.clientId } > @@ -118,7 +154,10 @@ export function DimensionsPanel( props ) { hasValue={ () => hasMarginValue( props ) } label={ __( 'Margin' ) } onDeselect={ () => resetMargin( props ) } - resetAllFilter={ createResetAllFilter( 'margin' ) } + resetAllFilter={ createResetAllFilter( + 'margin', + 'spacing' + ) } isShownByDefault={ defaultSpacingControls?.margin } panelId={ props.clientId } > @@ -135,7 +174,10 @@ export function DimensionsPanel( props ) { hasValue={ () => hasGapValue( props ) } label={ __( 'Block spacing' ) } onDeselect={ () => resetGap( props ) } - resetAllFilter={ createResetAllFilter( 'blockGap' ) } + resetAllFilter={ createResetAllFilter( + 'blockGap', + 'spacing' + ) } isShownByDefault={ defaultSpacingControls?.blockGap } panelId={ props.clientId } > @@ -173,6 +215,7 @@ export function hasDimensionsSupport( blockName ) { return ( hasGapSupport( blockName ) || + hasMinHeightSupport( blockName ) || hasPaddingSupport( blockName ) || hasMarginSupport( blockName ) ); @@ -187,10 +230,13 @@ export function hasDimensionsSupport( blockName ) { */ const useIsDimensionsDisabled = ( props = {} ) => { const gapDisabled = useIsGapDisabled( props ); + const minHeightDisabled = useIsMinHeightDisabled( props ); const paddingDisabled = useIsPaddingDisabled( props ); const marginDisabled = useIsMarginDisabled( props ); - return gapDisabled && paddingDisabled && marginDisabled; + return ( + gapDisabled && minHeightDisabled && paddingDisabled && marginDisabled + ); }; /** diff --git a/packages/block-editor/src/hooks/min-height.js b/packages/block-editor/src/hooks/min-height.js new file mode 100644 index 00000000000000..dd4522212de37a --- /dev/null +++ b/packages/block-editor/src/hooks/min-height.js @@ -0,0 +1,120 @@ +/** + * WordPress dependencies + */ +import { getBlockSupport } from '@wordpress/blocks'; +import { + __experimentalUseCustomUnits as useCustomUnits, + __experimentalUnitControl as UnitControl, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import useSetting from '../components/use-setting'; +import { DIMENSIONS_SUPPORT_KEY } from './dimensions'; +import { cleanEmptyObject } from './utils'; + +/** + * Determines if there is minHeight support. + * + * @param {string|Object} blockType Block name or Block Type object. + * @return {boolean} Whether there is support. + */ +export function hasMinHeightSupport( blockType ) { + const support = getBlockSupport( blockType, DIMENSIONS_SUPPORT_KEY ); + return !! ( true === support || support?.minHeight ); +} + +/** + * Checks if there is a current value in the minHeight block support attributes. + * + * @param {Object} props Block props. + * @return {boolean} Whether or not the block has a minHeight value set. + */ +export function hasMinHeightValue( props ) { + return props.attributes.style?.dimensions?.minHeight !== undefined; +} + +/** + * Resets the minHeight block support attributes. This can be used when disabling + * the padding support controls for a block via a `ToolsPanel`. + * + * @param {Object} props Block props. + * @param {Object} props.attributes Block's attributes. + * @param {Object} props.setAttributes Function to set block's attributes. + */ +export function resetMinHeight( { attributes = {}, setAttributes } ) { + const { style } = attributes; + + setAttributes( { + style: cleanEmptyObject( { + ...style, + dimensions: { + ...style?.dimensions, + minHeight: undefined, + }, + } ), + } ); +} + +/** + * Custom hook that checks if minHeight controls have been disabled. + * + * @param {string} name The name of the block. + * @return {boolean} Whether minHeight control is disabled. + */ +export function useIsMinHeightDisabled( { name: blockName } = {} ) { + const isDisabled = ! useSetting( 'dimensions.minHeight' ); + return ! hasMinHeightSupport( blockName ) || isDisabled; +} + +/** + * Inspector control panel containing the minHeight related configuration. + * + * @param {Object} props Block props. + * @return {WPElement} Edit component for height. + */ +export function MinHeightEdit( props ) { + const { + attributes: { style }, + setAttributes, + } = props; + + const units = useCustomUnits( { + availableUnits: useSetting( 'dimensions.units' ) || [ + '%', + 'px', + 'em', + 'rem', + 'vh', + 'vw', + ], + } ); + + if ( useIsMinHeightDisabled( props ) ) { + return null; + } + + const onChange = ( next ) => { + const newStyle = { + ...style, + dimensions: { + ...style?.dimensions, + minHeight: next, + }, + }; + + setAttributes( { style: cleanEmptyObject( newStyle ) } ); + }; + + return ( + + ); +} diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index d701342d4cb333..9b1979de6c7253 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -27,7 +27,11 @@ import { TYPOGRAPHY_SUPPORT_KEY, TYPOGRAPHY_SUPPORT_KEYS, } from './typography'; -import { SPACING_SUPPORT_KEY, DimensionsPanel } from './dimensions'; +import { + DIMENSIONS_SUPPORT_KEY, + SPACING_SUPPORT_KEY, + DimensionsPanel, +} from './dimensions'; import useDisplayBlockControls from '../components/use-display-block-controls'; import { shouldSkipSerialization } from './utils'; @@ -35,6 +39,7 @@ const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, BORDER_SUPPORT_KEY, COLOR_SUPPORT_KEY, + DIMENSIONS_SUPPORT_KEY, SPACING_SUPPORT_KEY, ]; @@ -99,7 +104,10 @@ const skipSerializationPathsEdit = { TYPOGRAPHY_SUPPORT_KEY, ], [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ - 'spacing', + DIMENSIONS_SUPPORT_KEY, + ], + [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + SPACING_SUPPORT_KEY, ], }; diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 26c2522e79f1bc..ad8ba0667e781d 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -28,6 +28,9 @@ describe( 'getInlineStyles', () => { style: 'dotted', color: '#21759b', }, + dimensions: { + minHeight: '50vh', + }, spacing: { blockGap: '1em', padding: { top: '10px' }, @@ -44,6 +47,7 @@ describe( 'getInlineStyles', () => { lineHeight: 1.5, fontSize: 10, marginBottom: '15px', + minHeight: '50vh', paddingTop: '10px', } ); } ); diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 968f00cb1c5cbf..3f409ba052c95d 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -41,6 +41,9 @@ "blockGap": true } }, + "dimensions": { + "minHeight": true + }, "__experimentalBorder": { "color": true, "radius": true, diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index c330f624ee142b..c6041e036d132d 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -11,6 +11,9 @@ "align": [ "wide", "full" ], "html": false, "__experimentalLayout": true, + "dimensions": { + "minHeight": true + }, "typography": { "fontSize": true, "lineHeight": true, diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 90b6fc094276fa..28801b3cf4882e 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -175,6 +175,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { }, useEngine: true, }, + minHeight: { + value: [ 'dimensions', 'minHeight' ], + support: [ 'dimensions', 'minHeight' ], + useEngine: true, + }, padding: { value: [ 'spacing', 'padding' ], support: [ 'spacing', 'padding' ], diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js index 583a43f3411497..0c409565d2a96a 100644 --- a/packages/edit-site/src/components/global-styles/dimensions-panel.js +++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js @@ -35,8 +35,16 @@ export function useHasDimensionsPanel( name ) { const hasPadding = useHasPadding( name ); const hasMargin = useHasMargin( name ); const hasGap = useHasGap( name ); + const hasMinHeight = useHasMinHeight( name ); - return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap; + return ( + hasContentSize || + hasWideSize || + hasPadding || + hasMargin || + hasGap || + hasMinHeight + ); } function useHasContentSize( name ) { @@ -74,6 +82,13 @@ function useHasGap( name ) { return settings && supports.includes( 'blockGap' ); } +function useHasMinHeight( name ) { + const supports = getSupportedGlobalStylesPanels( name ); + const [ settings ] = useSetting( 'dimensions.minHeight', name ); + + return settings && supports.includes( 'minHeight' ); +} + function useHasSpacingPresets() { const [ settings ] = useSetting( 'spacing.spacingSizes' ); @@ -271,12 +286,29 @@ function useBlockGapProps( name ) { }; } +// Props for managing `dimensions.minHeight`. +function useMinHeightProps( name ) { + const [ minHeightValue, setMinHeightValue ] = useStyle( + 'dimensions.minHeight', + name + ); + const resetMinHeightValue = () => setMinHeightValue( undefined ); + const hasMinHeightValue = () => !! minHeightValue; + return { + minHeightValue, + setMinHeightValue, + resetMinHeightValue, + hasMinHeightValue, + }; +} + export default function DimensionsPanel( { name } ) { const showContentSizeControl = useHasContentSize( name ); const showWideSizeControl = useHasWideSize( name ); const showPaddingControl = useHasPadding( name ); const showMarginControl = useHasMargin( name ); const showGapControl = useHasGap( name ); + const showMinHeightControl = useHasMinHeight( name ); const showSpacingPresetsControl = useHasSpacingPresets(); const units = useCustomUnits( { availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [ @@ -336,6 +368,14 @@ export default function DimensionsPanel( { name } ) { hasGapValue, } = useBlockGapProps( name ); + // Props for managing `dimensions.minHeight`. + const { + minHeightValue, + setMinHeightValue, + resetMinHeightValue, + hasMinHeightValue, + } = useMinHeightProps( name ); + const resetAll = () => { resetPaddingValue(); resetMarginValue(); @@ -401,6 +441,23 @@ export default function DimensionsPanel( { name } ) { ) } + { showMinHeightControl && ( + + + + ) } { showPaddingControl && ( { [ 'border', 'color', + 'dimensions', 'spacing', 'typography', 'filter', diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index f5636c150c3eeb..124c25ea06d348 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -148,7 +148,7 @@ final class WP_Style_Engine { ), ), 'spacing' => array( - 'padding' => array( + 'padding' => array( 'property_keys' => array( 'default' => 'padding', 'individual' => 'padding-%s', @@ -158,7 +158,7 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'margin' => array( + 'margin' => array( 'property_keys' => array( 'default' => 'margin', 'individual' => 'margin-%s', diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts index 5dc1b8743e2ab4..7554d0280c355a 100644 --- a/packages/style-engine/src/styles/index.ts +++ b/packages/style-engine/src/styles/index.ts @@ -6,6 +6,7 @@ import color from './color'; import dimensions from './dimensions'; import shadow from './shadow'; import outline from './outline'; +import dimensions from './dimensions'; import spacing from './spacing'; import typography from './typography'; @@ -14,6 +15,7 @@ export const styleDefinitions = [ ...color, ...dimensions, ...outline, + ...dimensions, ...spacing, ...typography, ...shadow, diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 4a6327f60b878b..b6a82e2fb2b7cf 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -359,17 +359,20 @@ public function test_get_stylesheet() { ), 'blocks' => array( 'core/group' => array( - 'border' => array( + 'border' => array( 'radius' => '10px', ), - 'elements' => array( + 'dimensions' => array( + 'minHeight' => '50vh', + ), + 'elements' => array( 'link' => array( 'color' => array( 'text' => '#111', ), ), ), - 'spacing' => array( + 'spacing' => array( 'padding' => '24px', ), ), @@ -422,7 +425,7 @@ public function test_get_stylesheet() { ); $variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}'; - $styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}'; + $styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;min-height: 50vh;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}'; $presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}'; $all = $variables . $styles . $presets; diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 58ff918ba30171..d42706bec8df96 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -188,6 +188,22 @@ } } }, + "settingsPropertiesDimensions": { + "properties": { + "dimensions": { + "description": "Settings related to dimensions.", + "type": "object", + "properties": { + "minHeight": { + "description": "Allow users to set custom minimum height.", + "type": "boolean", + "default": false + } + }, + "additionalProperties": false + } + } + }, "settingsPropertiesLayout": { "type": "object", "properties": { From 7d208427020567487d1afd32f8d05e2df7da20d6 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 26 Oct 2022 17:33:19 +1100 Subject: [PATCH 02/11] Fix linting issues --- lib/block-supports/dimensions.php | 2 ++ packages/style-engine/class-wp-style-engine.php | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 5c7f01d079e22a..72444697c81db4 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -48,6 +48,8 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { return array(); } + $attributes = array(); + // Width support to be added in near future. $has_min_height_support = block_has_support( $block_type, array( 'dimensions', 'minHeight' ), false ); diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 124c25ea06d348..73c3f2f9a26150 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -148,7 +148,7 @@ final class WP_Style_Engine { ), ), 'spacing' => array( - 'padding' => array( + 'padding' => array( 'property_keys' => array( 'default' => 'padding', 'individual' => 'padding-%s', @@ -158,7 +158,7 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'margin' => array( + 'margin' => array( 'property_keys' => array( 'default' => 'margin', 'individual' => 'margin-%s', From 57d0cac81ac2ed21fbf7c308fd1ad20897b7c2c8 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 27 Oct 2022 15:51:56 +1100 Subject: [PATCH 03/11] Fix up order and skipSerialization --- lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php | 2 +- packages/block-editor/src/hooks/style.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php index b52515760247d0..4c6a1f50612a84 100644 --- a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php +++ b/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php @@ -20,8 +20,8 @@ class WP_Theme_JSON_6_2 extends WP_Theme_JSON_6_1 { array( 'border', 'radius' ), array( 'border', 'style' ), array( 'border', 'width' ), - array( 'dimensions', 'minHeight' ), array( 'color', 'link' ), + array( 'dimensions', 'minHeight' ), array( 'spacing', 'blockGap' ), array( 'spacing', 'margin' ), array( 'spacing', 'padding' ), diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 9b1979de6c7253..b6fe7b8188c2be 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -103,7 +103,7 @@ const skipSerializationPathsEdit = { [ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ TYPOGRAPHY_SUPPORT_KEY, ], - [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + [ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ DIMENSIONS_SUPPORT_KEY, ], [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ From b74f4958baf5d1c222f9911315434a1bd11fdcda Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 31 Oct 2022 15:16:05 +1100 Subject: [PATCH 04/11] Fix linting issue --- packages/style-engine/class-wp-style-engine.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 73c3f2f9a26150..f5636c150c3eeb 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -158,7 +158,7 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), - 'margin' => array( + 'margin' => array( 'property_keys' => array( 'default' => 'margin', 'individual' => 'margin-%s', From 2a0a1ca0690d87e17160fb49d1ee246432a8333b Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 31 Oct 2022 15:34:54 +1100 Subject: [PATCH 05/11] Set UnitControl components to use full large height --- packages/block-editor/src/hooks/min-height.js | 1 + .../edit-site/src/components/global-styles/dimensions-panel.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/block-editor/src/hooks/min-height.js b/packages/block-editor/src/hooks/min-height.js index dd4522212de37a..d5dccce3b3b431 100644 --- a/packages/block-editor/src/hooks/min-height.js +++ b/packages/block-editor/src/hooks/min-height.js @@ -115,6 +115,7 @@ export function MinHeightEdit( props ) { units={ units } onChange={ onChange } min={ 0 } + size={ '__unstable-large' } /> ); } diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js index 0c409565d2a96a..8c67ee30772738 100644 --- a/packages/edit-site/src/components/global-styles/dimensions-panel.js +++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js @@ -455,6 +455,7 @@ export default function DimensionsPanel( { name } ) { onChange={ setMinHeightValue } units={ units } min={ 0 } + size={ '__unstable-large' } /> ) } From 848420a1aa3a2786c460fc2a061a99afe9e45e2f Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 2 Nov 2022 15:03:56 +1100 Subject: [PATCH 06/11] Fix bad rebase --- packages/style-engine/src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts index 7554d0280c355a..1162ce07ae6478 100644 --- a/packages/style-engine/src/styles/index.ts +++ b/packages/style-engine/src/styles/index.ts @@ -6,7 +6,6 @@ import color from './color'; import dimensions from './dimensions'; import shadow from './shadow'; import outline from './outline'; -import dimensions from './dimensions'; import spacing from './spacing'; import typography from './typography'; From a9b483cdef9dbeefeec6ff4f4e526cd8bf996491 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 2 Nov 2022 15:38:43 +1100 Subject: [PATCH 07/11] Fix return of dimensions support in PHP --- lib/block-supports/dimensions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 72444697c81db4..5776a2701d53b5 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -68,7 +68,7 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { $attributes['style'] = $styles['css']; } - return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) ); + return $attributes; } // Register the block support. From e268c26597811fcf1f9f98d11c715df1cbea1b2c Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 2 Nov 2022 15:40:35 +1100 Subject: [PATCH 08/11] Remove duplicate spread of dimensions --- packages/style-engine/src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts index 1162ce07ae6478..5dc1b8743e2ab4 100644 --- a/packages/style-engine/src/styles/index.ts +++ b/packages/style-engine/src/styles/index.ts @@ -14,7 +14,6 @@ export const styleDefinitions = [ ...color, ...dimensions, ...outline, - ...dimensions, ...spacing, ...typography, ...shadow, From 102e0f4ad3ad3ed3c7f5591c815b52f49bbe6478 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 2 Nov 2022 16:10:06 +1100 Subject: [PATCH 09/11] Add PHP tests --- phpunit/block-supports/dimensions-test.php | 138 +++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 phpunit/block-supports/dimensions-test.php diff --git a/phpunit/block-supports/dimensions-test.php b/phpunit/block-supports/dimensions-test.php new file mode 100644 index 00000000000000..2ec0859b7cb7f8 --- /dev/null +++ b/phpunit/block-supports/dimensions-test.php @@ -0,0 +1,138 @@ +test_block_name = null; + } + + public function tear_down() { + unregister_block_type( $this->test_block_name ); + $this->test_block_name = null; + parent::tear_down(); + } + + public function test_dimensions_style_is_applied() { + $this->test_block_name = 'test/dimensions-style-is-applied'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'minHeight' => true, + ), + ), + ) + ); + $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 = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array( + 'style' => 'min-height:50vh;', + ); + + $this->assertSame( $expected, $actual ); + } + + public function test_dimensions_with_skipped_serialization_block_supports() { + $this->test_block_name = 'test/dimensions-with-skipped-serialization-block-supports'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'minHeight' => true, + '__experimentalSkipSerialization' => true, + ), + ), + ) + ); + $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 = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + } + + public function test_min_height_with_individual_skipped_serialization_block_supports() { + $this->test_block_name = 'test/min-height-with-individual-skipped-serialization-block-supports'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'minHeight' => true, + '__experimentalSkipSerialization' => array( 'minHeight' ), + ), + ), + ) + ); + $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 = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + + /* + * There is currently only one dimensions property available, + * so the expected result is an empty array. This test exists + * so that as new properties are added, this test can be expanded + * to check that skipping individual serialization works as expected. + */ + $expected = array(); + + $this->assertSame( $expected, $actual ); + } +} From ba6bb8321d4edfb537e607781db0727585e1be3e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 2 Nov 2022 16:19:52 +1100 Subject: [PATCH 10/11] Rename to Min. height --- packages/block-editor/src/hooks/dimensions.js | 2 +- packages/block-editor/src/hooks/min-height.js | 2 +- .../src/components/global-styles/dimensions-panel.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index e44c49412b5dd8..d18c9a649be968 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -114,7 +114,7 @@ export function DimensionsPanel( props ) { hasMinHeightValue( props ) } - label={ __( 'Minimum height' ) } + label={ __( 'Min. height' ) } onDeselect={ () => resetMinHeight( props ) } resetAllFilter={ createResetAllFilter( 'minHeight', diff --git a/packages/block-editor/src/hooks/min-height.js b/packages/block-editor/src/hooks/min-height.js index d5dccce3b3b431..3167edba8a8293 100644 --- a/packages/block-editor/src/hooks/min-height.js +++ b/packages/block-editor/src/hooks/min-height.js @@ -110,7 +110,7 @@ export function MinHeightEdit( props ) { return ( Date: Thu, 3 Nov 2022 12:16:52 +1100 Subject: [PATCH 11/11] Switch position of min height control so that it is at the bottom of the dimensions panel --- packages/block-editor/src/hooks/dimensions.js | 36 +++++++++---------- .../global-styles/dimensions-panel.js | 36 +++++++++---------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index d18c9a649be968..bf55564d082d93 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -110,24 +110,6 @@ export function DimensionsPanel( props ) { return ( <> - { ! isMinHeightDisabled && ( - hasMinHeightValue( props ) } - label={ __( 'Min. height' ) } - onDeselect={ () => resetMinHeight( props ) } - resetAllFilter={ createResetAllFilter( - 'minHeight', - 'dimensions' - ) } - isShownByDefault={ - defaultDimensionsControls?.minHeight - } - panelId={ props.clientId } - > - - - ) } { ! isPaddingDisabled && ( ) } + { ! isMinHeightDisabled && ( + hasMinHeightValue( props ) } + label={ __( 'Min. height' ) } + onDeselect={ () => resetMinHeight( props ) } + resetAllFilter={ createResetAllFilter( + 'minHeight', + 'dimensions' + ) } + isShownByDefault={ + defaultDimensionsControls?.minHeight + } + panelId={ props.clientId } + > + + + ) } { ! isPaddingDisabled && ( ) } - { showMinHeightControl && ( - - - - ) } { showPaddingControl && ( ) } + { showMinHeightControl && ( + + + + ) } ); }