Skip to content

Commit

Permalink
This is the first commit that switches the blockGap over to use to an…
Browse files Browse the repository at this point in the history 
… object. We're using the `top` and `left` properties of the BoxControl next value to represent row and column values.
  • Loading branch information
@ramonjd
ramonjd committed Feb 15, 2022
1 parent 86658be commit 523d9be
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 74 deletions.
6 changes: 6 additions & 0 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }";
$style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }";
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = $gap_value['left'] === $gap_value['top'] ? $gap_value['top'] : $gap_value['top'] . ' ' . $gap_value['left'];
}
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
$style .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
$style .= "$selector > * + * { margin-top: $gap_style; margin-bottom: 0; }";
Expand All @@ -91,6 +94,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style = "$selector {";
$style .= 'display: flex;';
if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = $gap_value['left'] === $gap_value['top'] ? $gap_value['top'] : $gap_value['top'] . ' ' . $gap_value['left'];
}
$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
$style .= "gap: $gap_style;";
} else {
Expand Down
68 changes: 10 additions & 58 deletions packages/block-editor/src/hooks/gap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { getBlockSupport } from '@wordpress/blocks';
import {
__experimentalUseCustomUnits as useCustomUnits,
__experimentalBoxControl as BoxControl,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';

/**
Expand Down Expand Up @@ -108,17 +107,11 @@ export function GapEdit( props ) {
}

const onChange = ( next ) => {
let newValue = next;
if ( typeof next === 'object' ) {
const row = next?.top || 0;
const column = next?.left || 0;
newValue = row === column ? row : `${ row } ${ column }`;
}
const newStyle = {
...style,
spacing: {
...style?.spacing,
blockGap: newValue,
blockGap: next,
},
};

Expand All @@ -140,59 +133,18 @@ export function GapEdit( props ) {
}
};

const blockGapValue = style?.spacing?.blockGap;
const boxValuesArray = blockGapValue
? blockGapValue.split( ' ' )
: [ undefined ];
const boxValues = {
left: undefined,
top: undefined,
bottom: undefined,
right: undefined,
};

if ( boxValuesArray.length === 1 ) {
boxValues.left = boxValuesArray[ 0 ];
boxValues.right = boxValuesArray[ 0 ];
boxValues.top = boxValuesArray[ 0 ];
boxValues.bottom = boxValuesArray[ 0 ];
}

if ( boxValuesArray.length === 2 ) {
boxValues.left = boxValuesArray[ 1 ];
boxValues.right = boxValuesArray[ 1 ];
boxValues.top = boxValuesArray[ 0 ];
boxValues.bottom = boxValuesArray[ 0 ];
}

// The default combined value we'll take from row.
const defaultValue = boxValues.top;

return Platform.select( {
web: (
<>
{ splitOnAxis ? (
<BoxControl
label={ __( 'Block spacing' ) }
min={ 0 }
onChange={ onChange }
units={ units }
sides={ sides }
values={ boxValues }
allowReset={ false }
splitOnAxis={ splitOnAxis }
/>
) : (
<UnitControl
label={ __( 'Block spacing' ) }
__unstableInputWidth="80px"
min={ 0 }
onChange={ onChange }
units={ units }
// Default to `row` for combined values.
value={ defaultValue }
/>
) }
<BoxControl
values={ style?.spacing?.blockGap }
onChange={ onChange }
label={ __( 'Block spacing' ) }
sides={ sides }
units={ units }
allowReset={ false }
splitOnAxis={ splitOnAxis }
/>
</>
),
native: null,
Expand Down
11 changes: 9 additions & 2 deletions packages/block-editor/src/layouts/flex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,15 @@ export default {
const { orientation = 'horizontal' } = layout;
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;
const blockGapValue =
style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
const blockGapStyleValue = style?.spacing?.blockGap;
let blockGapValue = 'var( --wp--style--block-gap, 0.5em )';

if ( blockGapStyleValue ) {

This comment has been minimized.

Sign in to view

Copy link
@youknowriad

youknowriad Feb 15, 2022

Contributor

Seems like we're not handling the case where this could be a string? (existing content)

This comment has been minimized.

Sign in to view

Copy link
@ramonjd

ramonjd Feb 15, 2022

Author Member

Thanks for the note! This was on the list for the next commit 😇
const blockGapRow = style?.spacing?.blockGap?.top || '0';
const blockGapColumn = style?.spacing?.blockGap?.left || '0';
blockGapValue = `${ blockGapRow } ${ blockGapColumn }`;
}

const justifyContent =
justifyContentMap[ layout.justifyContent ] ||
justifyContentMap.left;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/layouts/flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default {
const blockGapSupport = useSetting( 'spacing.blockGap' );
const hasBlockGapStylesSupport = blockGapSupport !== null;
const blockGapValue =
style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
style?.spacing?.blockGap?.top ?? 'var( --wp--style--block-gap )';

This comment has been minimized.

Sign in to view

Copy link
@youknowriad

youknowriad Feb 15, 2022

Contributor

Same 523d9be#r66706490

let output =
!! contentSize || !! wideSize
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-links/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
}
},
"spacing": {
"blockGap": [ "vertical", "horizontal" ],
"blockGap": [ "horizontal" ],
"margin": [ "top", "bottom" ],
"units": [ "px", "em", "rem", "vh", "vw" ],
"__experimentalDefaultControls": {
Expand Down
41 changes: 29 additions & 12 deletions packages/edit-site/src/components/global-styles/dimensions-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalBoxControl as BoxControl,
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
} from '@wordpress/components';
import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
Expand Down Expand Up @@ -129,14 +128,31 @@ export default function DimensionsPanel( { name } ) {
const hasMarginValue = () =>
!! marginValues && Object.keys( marginValues ).length;

const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
const resetGapValue = () => setGapValue( undefined );
const hasGapValue = () => !! gapValue;
const [ rawBlockGap, setRawBlockGap ] = useStyle(
'spacing.blockGap',
name
);
const blockGapValues = splitStyleValue( rawBlockGap );
const blockGapSides = useCustomSides( name, 'blockGap' );
const isAxialBlockGap =
blockGapSides &&
blockGapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );

const setBlockGapValues = ( newBlockGapValues ) => {
const blockGap = filterValuesBySides(
newBlockGapValues,
blockGapSides
);
setRawBlockGap( blockGap );
};
const resetBlockGapValue = () => setBlockGapValues( {} );
const hasBlockGapValue = () =>
!! blockGapValues && Object.keys( blockGapValues ).length;

const resetAll = () => {
resetPaddingValue();
resetMarginValue();
resetGapValue();
resetBlockGapValue();
};

return (
Expand Down Expand Up @@ -179,18 +195,19 @@ export default function DimensionsPanel( { name } ) {
) }
{ showGapControl && (
<ToolsPanelItem
hasValue={ hasGapValue }
hasValue={ hasBlockGapValue }
label={ __( 'Block spacing' ) }
onDeselect={ resetGapValue }
onDeselect={ resetBlockGapValue }
isShownByDefault={ true }
>
<UnitControl
<BoxControl
values={ blockGapValues }
onChange={ setBlockGapValues }
label={ __( 'Block spacing' ) }
__unstableInputWidth="80px"
min={ 0 }
onChange={ setGapValue }
sides={ blockGapSides }
units={ units }
value={ gapValue }
allowReset={ false }
splitOnAxis={ isAxialBlockGap }
/>
</ToolsPanelItem>
) }
Expand Down

0 comments on commit 523d9be

Please sign in to comment.