Skip to content

Block Spacing: using spacing controls for block gap values to support presets in the UI #43466

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.

Sign up for GitHub

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

Merged
andrewserong merged 8 commits into from
Aug 26, 2022
Merged

Block Spacing: using spacing controls for block gap values to support presets in the UI #43466

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ec4ae47
Try using spacing controls for block gap values
andrewserong Aug 22, 2022
20b7167
Hacky attempt to progress the behaviour forward slightly, will be par…
andrewserong Aug 23, 2022
53e3738
Fix tests
andrewserong Aug 24, 2022
c0891e0
Get labels working properly
andrewserong Aug 24, 2022
fe8670a
Add support for the Gallery block ad-hoc calculations
andrewserong Aug 24, 2022
87a69b5
Add support for global styles, and matching a value against an existi…
andrewserong Aug 25, 2022
6cfe115
Fix linting issue
andrewserong Aug 25, 2022
8c8da9e
Ensure null values do not crash the component
andrewserong Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Hacky attempt to progress the behaviour forward slightly, will be par… 
…tially reverted
  • Loading branch information
@andrewserong
andrewserong committed Aug 25, 2022
commit 20b716750ba8de5272e52c64e834083592e207b0
1 change: 1 addition & 0 deletions packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ export default function SpacingInputControl( {
label={ ariaLabel }
hideLabelFromVision={ true }
className="components-spacing-sizes-control__custom-value-input"
style={ { gridColumn: '1' } }
/>

<RangeControl
Expand Down
17 changes: 12 additions & 5 deletions packages/block-editor/src/layouts/constrained.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,18 @@ export default {
const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
const blockGapValue =
blockGapStyleValue?.top &&
! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
? blockGapStyleValue?.top
: '';
// const blockGapValue =
// blockGapStyleValue?.top &&
// ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
// ? blockGapStyleValue?.top
// : '';

// This isn't _quite_ the right fix. We need to account for split values, and reference `top` if it's provided directly.
const blockGapValue = blockGapStyleValue;
console.log(
'blockGapStyleValue in constrained layout',
blockGapStyleValue
);

let output =
!! contentSize || !! wideSize
Expand Down
14 changes: 9 additions & 5 deletions packages/block-editor/src/layouts/flow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,15 @@ export default {

// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
const blockGapValue =
blockGapStyleValue?.top &&
! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
? blockGapStyleValue?.top
: '';
// const blockGapValue =
// blockGapStyleValue?.top &&
// ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
// ? blockGapStyleValue?.top
// : '';

// This isn't _quite_ the right fix. We need to account for split values, and reference `top` if it's provided directly.
const blockGapValue = blockGapStyleValue;
console.log( 'blockGapStyleValue in flow layout', blockGapStyleValue );

let output = '';

Expand Down