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.

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

Jump to bottom

Add justification controls to constrained layout #44065

Merged
merged 3 commits into from
Sep 13, 2022
Merged

Add justification controls to constrained layout #44065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7b2c0a
Add justification controls to constrained layout
tellthemachines Sep 12, 2022
78a9ca9
Improve layout controls panel
tellthemachines Sep 13, 2022
d91c1bd
Override base component bottom margin
tellthemachines Sep 13, 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
26 changes: 22 additions & 4 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}
}
} elseif ( 'constrained' === $layout_type ) {
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
$content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : '';
$wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : '';
$justify_content = isset( $layout['justifyContent'] ) ? $layout['justifyContent'] : 'center';

$all_max_width_value = $content_size ? $content_size : $wide_size;
$wide_max_width_value = $wide_size ? $wide_size : $content_size;
Expand All @@ -78,15 +79,18 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$all_max_width_value = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
$wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );

$margin_left = 'left' === $justify_content ? '0 !important' : 'auto !important';
$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';

if ( $content_size || $wide_size ) {
array_push(
$layout_styles,
array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array(
'max-width' => $all_max_width_value,
'margin-left' => 'auto !important',
'margin-right' => 'auto !important',
'margin-left' => $margin_left,
'margin-right' => $margin_right,
),
),
array(
Expand Down Expand Up @@ -125,6 +129,20 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
}
}

if ( 'left' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-left' => '0 !important' ),
);
}

if ( 'right' === $justify_content ) {
$layout_styles[] = array(
'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
'declarations' => array( 'margin-right' => '0 !important' ),
);
}

if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
{ showInheritToggle && (
<>
<ToggleControl
className="block-editor-hooks__toggle-control"
label={ __( 'Inner blocks use content width' ) }
checked={
layoutType?.name === 'constrained' ||
Expand Down
8 changes: 7 additions & 1 deletion packages/block-editor/src/hooks/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.block-editor-hooks__layout-controls {
display: flex;
margin-bottom: $grid-unit-20;
margin-bottom: $grid-unit-10;

.block-editor-hooks__layout-controls-unit {
display: flex;
Expand All @@ -19,7 +19,9 @@
}

.block-editor-hooks__layout-controls-helptext {
color: $gray-700;
font-size: $helptext-font-size;
margin-bottom: $grid-unit-20;
}

.block-editor-hooks__flex-layout-justification-controls,
Expand All @@ -29,3 +31,7 @@
margin-bottom: $grid-unit-10;
}
}

.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
margin-bottom: $grid-unit-20;
}
97 changes: 73 additions & 24 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 @@ -2,12 +2,20 @@
* WordPress dependencies
*/
import {
Button,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalUnitControl as UnitControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
import {
Icon,
positionCenter,
stretchWide,
justifyLeft,
justifyCenter,
justifyRight,
} from '@wordpress/icons';
import { getCSSRules } from '@wordpress/style-engine';

/**
Expand All @@ -25,7 +33,30 @@ export default {
layout,
onChange,
} ) {
const { wideSize, contentSize } = layout;
const { wideSize, contentSize, justifyContent = 'center' } = layout;
const onJustificationChange = ( value ) => {
onChange( {
...layout,
justifyContent: value,
} );
};
const justificationOptions = [
{
value: 'left',
icon: justifyLeft,
label: __( 'Justify items left' ),
},
{
value: 'center',
icon: justifyCenter,
label: __( 'Justify items center' ),
},
{
value: 'right',
icon: justifyRight,
label: __( 'Justify items right' ),
},
];
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'%',
Expand All @@ -35,7 +66,6 @@ export default {
'vw',
],
} );

return (
<>
<div className="block-editor-hooks__layout-controls">
Expand Down Expand Up @@ -80,28 +110,28 @@ export default {
<Icon icon={ stretchWide } />
</div>
</div>
<div className="block-editor-hooks__layout-controls-reset">
<Button
variant="secondary"
isSmall
disabled={ ! contentSize && ! wideSize }
onClick={ () =>
onChange( {
contentSize: undefined,
wideSize: undefined,
inherit: false,
} )
}
>
{ __( 'Reset' ) }
</Button>
</div>

<p className="block-editor-hooks__layout-controls-helptext">
{ __(
'Customize the width for all elements that are assigned to the center or wide columns.'
) }
</p>
<ToggleGroupControl
__experimentalIsBorderless
label={ __( 'Justification' ) }
value={ justifyContent }
onChange={ onJustificationChange }
>
{ justificationOptions.map( ( { value, icon, label } ) => {
return (
<ToggleGroupControlOptionIcon
key={ value }
value={ value }
icon={ icon }
label={ label }
/>
);
} ) }
</ToggleGroupControl>
</>
);
},
Expand All @@ -116,7 +146,7 @@ export default {
hasBlockGapSupport,
layoutDefinitions,
} ) {
const { contentSize, wideSize } = layout;
const { contentSize, wideSize, justifyContent } = layout;
const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );

// If a block's block.json skips serialization for spacing or
Expand All @@ -131,6 +161,11 @@ export default {
}
}

const marginLeft =
justifyContent === 'left' ? '0 !important' : 'auto !important';
const marginRight =
justifyContent === 'right' ? '0 !important' : 'auto !important';

let output =
!! contentSize || !! wideSize
? `
Expand All @@ -139,8 +174,8 @@ export default {
'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
) } {
max-width: ${ contentSize ?? wideSize };
margin-left: auto !important;
margin-right: auto !important;
margin-left: ${ marginLeft };
margin-right: ${ marginRight }t;
}
${ appendSelectors( selector, '> .alignwide' ) } {
max-width: ${ wideSize ?? contentSize };
Expand All @@ -151,6 +186,20 @@ export default {
`
: '';

if ( justifyContent === 'left' ) {
output += `${ appendSelectors(
selector,
'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
) }
{ margin-left: ${ marginLeft }; }`;
} else if ( justifyContent === 'right' ) {
output += `${ appendSelectors(
selector,
'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
) }
{ margin-right: ${ marginRight }; }`;
}

// If there is custom padding, add negative margins for alignfull blocks.
if ( style?.spacing?.padding ) {
// The style object might be storing a preset so we need to make sure we get a usable value.
Expand Down