Skip to content

Commit

Permalink
Rebasing on top of #32499
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed Aug 27, 2021
1 parent 0865604 commit 8907080
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 5 deletions.
11 changes: 11 additions & 0 deletions lib/block-supports/dimensions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,17 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
}
}

// Minimum height support.
$has_min_height_support = gutenberg_block_has_support( $block_type, array( '__experimentalDimensions', 'minHeight' ), false );

if ( $has_min_height_support ) {
$min_height_value = _wp_array_get( $block_attributes, array( 'style', 'dimensions', 'minHeight' ), null );

if ( null !== $min_height_value ) {
$styles[] = sprintf( 'min-height: %s;', $min_height_value );
}
}

// Width support to be added in near future.

return empty( $styles ) ? array() : array( 'style' => implode( ' ', $styles ) );
Expand Down
3 changes: 3 additions & 0 deletions lib/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ class WP_Theme_JSON_Gutenberg {
),
'dimensions' => array(
'height' => null,
'minHeight' => null,
),
'spacing' => array(
'margin' => null,
Expand Down Expand Up @@ -99,6 +100,7 @@ class WP_Theme_JSON_Gutenberg {
'custom' => null,
'dimensions' => array(
'customHeight' => null,
'customMinHeight' => null,
),
'layout' => array(
'contentSize' => null,
Expand Down Expand Up @@ -236,6 +238,7 @@ class WP_Theme_JSON_Gutenberg {
'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' ),
Expand Down
28 changes: 27 additions & 1 deletion packages/block-editor/src/hooks/dimensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@ import {
resetHeight,
useIsHeightDisabled,
} from './height';
import {
MinHeightEdit,
hasMinHeightSupport,
hasMinHeightValue,
resetMinHeight,
useIsMinHeightDisabled,
} from './min-height';
import {
MarginEdit,
hasMarginSupport,
Expand Down Expand Up @@ -51,6 +58,7 @@ export function DimensionsPanel( props ) {
const isPaddingDisabled = useIsPaddingDisabled( props );
const isMarginDisabled = useIsMarginDisabled( props );
const isHeightDisabled = useIsHeightDisabled( props );
const isMinHeightDisabled = useIsMinHeightDisabled( props );
const isDisabled = useIsDimensionsDisabled( props );
const isSupported = hasDimensionsSupport( props.name );

Expand Down Expand Up @@ -78,6 +86,7 @@ export function DimensionsPanel( props ) {
dimensions: {
...style?.dimensions,
height: undefined,
minHeight: undefined,
},
spacing: {
...style?.spacing,
Expand Down Expand Up @@ -106,6 +115,19 @@ export function DimensionsPanel( props ) {
<HeightEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isMinHeightDisabled && (
<ToolsPanelItem
className="single-column"
hasValue={ () => hasMinHeightValue( props ) }
label={ __( 'Minimum height' ) }
onDeselect={ () => resetMinHeight( props ) }
isShownByDefault={
defaultDimensionsControls?.minHeight
}
>
<MinHeightEdit { ...props } />
</ToolsPanelItem>
) }
{ ! isPaddingDisabled && (
<ToolsPanelItem
hasValue={ () => hasPaddingValue( props ) }
Expand Down Expand Up @@ -145,6 +167,7 @@ export function hasDimensionsSupport( blockName ) {

return (
hasHeightSupport( blockName ) ||
hasMinHeightSupport( blockName ) ||
hasPaddingSupport( blockName ) ||
hasMarginSupport( blockName )
);
Expand All @@ -158,10 +181,13 @@ export function hasDimensionsSupport( blockName ) {
*/
const useIsDimensionsDisabled = ( props = {} ) => {
const heightDisabled = useIsHeightDisabled( props );
const minHeightDisabled = useIsMinHeightDisabled( props );
const paddingDisabled = useIsPaddingDisabled( props );
const marginDisabled = useIsMarginDisabled( props );

return heightDisabled && paddingDisabled && marginDisabled;
return (
heightDisabled && minHeightDisabled && paddingDisabled && marginDisabled
);
};

/**
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/hooks/test/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ describe( 'getInlineStyles', () => {
},
dimensions: {
height: '500px',
minHeight: '200px',
},
spacing: {
padding: { top: '10px' },
Expand All @@ -41,6 +42,7 @@ describe( 'getInlineStyles', () => {
lineHeight: 1.5,
fontSize: 10,
height: '500px',
minHeight: '200px',
marginBottom: '15px',
paddingTop: '10px',
} );
Expand Down
4 changes: 4 additions & 0 deletions packages/blocks/src/api/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
marginLeft: 'left',
},
},
minHeight: {
value: [ 'dimensions', 'minHeight' ],
support: [ '__experimentalDimensions', 'minHeight' ],
},
padding: {
value: [ 'spacing', 'padding' ],
support: [ 'spacing', 'padding' ],
Expand Down
34 changes: 33 additions & 1 deletion packages/edit-site/src/components/sidebar/dimensions-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@ const AXIAL_SIDES = [ 'horizontal', 'vertical' ];

export function useHasDimensionsPanel( context ) {
const hasHeight = useHasHeight( context );
const hasMinHeight = useHasMinHeight( context );
const hasPadding = useHasPadding( context );
const hasMargin = useHasMargin( context );

return hasHeight || hasPadding || hasMargin;
return hasHeight || hasMinHeight || hasPadding || hasMargin;
}

function useHasHeight( { name, supports } ) {
Expand All @@ -32,6 +33,12 @@ function useHasHeight( { name, supports } ) {
return settings && supports.includes( 'height' );
}

function useHasMinHeight( { name, supports } ) {
const settings = useSetting( 'dimensions.customMinHeight', name );

return settings && supports.includes( 'minHeight' );
}

function useHasPadding( { name, supports } ) {
const settings = useSetting( 'spacing.customPadding', name );

Expand Down Expand Up @@ -85,6 +92,7 @@ function splitStyleValue( value ) {
export default function DimensionsPanel( { context, getStyle, setStyle } ) {
const { name } = context;
const showHeightControl = useHasHeight( context );
const showMinHeightControl = useHasMinHeight( context );
const showPaddingControl = useHasPadding( context );
const showMarginControl = useHasMargin( context );
const units = useCustomUnits( {
Expand All @@ -103,6 +111,12 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
const resetHeightValue = () => setHeightValue( undefined );
const hasHeightValue = () => !! heightValue;

// Min height.
const minHeightValue = getStyle( name, 'minHeight' );
const setMinHeightValue = ( next ) => setStyle( name, 'minHeight', next );
const resetMinHeightValue = () => setMinHeightValue( undefined );
const hasMinHeightValue = () => !! minHeightValue;

// Padding.
const paddingValues = splitStyleValue( getStyle( name, 'padding' ) );
const paddingSides = useCustomSides( name, 'padding' );
Expand Down Expand Up @@ -135,6 +149,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {

const resetAll = () => {
resetHeightValue();
resetMinHeightValue();
resetPaddingValue();
resetMarginValue();
};
Expand Down Expand Up @@ -162,6 +177,23 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
/>
</ToolsPanelItem>
) }
{ showMinHeightControl && (
<ToolsPanelItem
className="single-column"
hasValue={ hasMinHeightValue }
label={ __( 'Minimum height' ) }
onDeselect={ resetMinHeightValue }
isShownByDefault={ true }
>
<UnitControl
label={ __( 'Minimum height' ) }
value={ minHeightValue }
onChange={ setMinHeightValue }
units={ units }
min={ 0 }
/>
</ToolsPanelItem>
) }
{ showPaddingControl && (
<ToolsPanelItem
hasValue={ hasPaddingValue }
Expand Down
7 changes: 4 additions & 3 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,8 @@ function test_get_stylesheet() {
),
),
'dimensions' => array(
'height' => '200px',
'height' => '200px',
'minHeight' => '100px',
),
'spacing' => array(
'padding' => '24px',
Expand Down Expand Up @@ -355,11 +356,11 @@ function test_get_stylesheet() {
);

$this->assertEquals(
'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;}body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;height: 200px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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;}',
'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;}body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;height: 200px;min-height: 100px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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;}',
$theme_json->get_stylesheet()
);
$this->assertEquals(
'body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;height: 200px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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;}',
'body{color: var(--wp--preset--color--grey);}.wp-site-blocks > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;height: 200px;min-height: 100px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}.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;}',
$theme_json->get_stylesheet( 'block_styles' )
);
$this->assertEquals(
Expand Down

0 comments on commit 8907080

Please sign in to comment.