Skip to content

Commit

Permalink
Add missing controls to flex layouts. (#47134)
Browse files Browse the repository at this point in the history 
* Add missing controls to flex layouts.

* Front end support

* Change space-between to kebab case and fix popover props warning.

* Update to use the correct icons.

* Update PHP test output.

* Remove todo comment.
  • Loading branch information
@tellthemachines
tellthemachines authored Jan 29, 2023
1 parent 2ceba81 commit 8d8167f
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 17 deletions.
12 changes: 11 additions & 1 deletion lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
);

if ( 'horizontal' === $layout_orientation ) {
$justify_content_options += array( 'space-between' => 'space-between' );
$justify_content_options += array( 'space-between' => 'space-between' );
$vertical_alignment_options += array( 'stretch' => 'stretch' );
} else {
$justify_content_options += array( 'stretch' => 'stretch' );
$vertical_alignment_options += array( 'space-between' => 'space-between' );
}

if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
Expand Down Expand Up @@ -269,6 +273,12 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
'declarations' => array( 'align-items' => 'flex-start' ),
);
}
if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
$layout_styles[] = array(
'selector' => $selector,
'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
);
}
}
}

Expand Down
12 changes: 12 additions & 0 deletions packages/block-editor/src/components/block-vertical-alignment-control/icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,15 @@ export const alignTop = (
<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
</SVG>
);

export const alignStretch = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M4 4L20 4L20 5.5L4 5.5L4 4ZM10 7L14 7L14 17L10 17L10 7ZM20 18.5L4 18.5L4 20L20 20L20 18.5Z" />
</SVG>
);

export const spaceBetween = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M7 4H17V8L7 8V4ZM7 16L17 16V20L7 20V16ZM20 11.25H4V12.75H20V11.25Z" />
</SVG>
);
22 changes: 16 additions & 6 deletions packages/block-editor/src/components/block-vertical-alignment-control/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
/**
* Internal dependencies
*/
import { alignTop, alignCenter, alignBottom } from './icons';
import {
alignTop,
alignCenter,
alignBottom,
alignStretch,
spaceBetween,
} from './icons';

const BLOCK_ALIGNMENTS_CONTROLS = {
top: {
Expand All @@ -22,15 +28,19 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
icon: alignBottom,
title: _x( 'Align bottom', 'Block vertical alignment setting' ),
},
stretch: {
icon: alignStretch,
title: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
},
'space-between': {
icon: spaceBetween,
title: _x( 'Space between', 'Block vertical alignment setting' ),
},
};

const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
const DEFAULT_CONTROL = 'top';

const POPOVER_PROPS = {
variant: 'toolbar',
};

function BlockVerticalAlignmentUI( {
value,
onChange,
Expand All @@ -49,7 +59,7 @@ function BlockVerticalAlignmentUI( {
const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const extraProps = isToolbar
? { isCollapsed }
: { popoverProps: { POPOVER_PROPS } };
: { popoverProps: { variant: 'toolbar' } };

return (
<UIComponent
Expand Down
45 changes: 36 additions & 9 deletions packages/block-editor/src/layouts/flex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
justifyCenter,
justifyRight,
justifySpaceBetween,
justifyStretch,
arrowRight,
arrowDown,
} from '@wordpress/icons';
Expand Down Expand Up @@ -44,12 +45,15 @@ const alignItemsMap = {
left: 'flex-start',
right: 'flex-end',
center: 'center',
stretch: 'stretch',
};

const verticalAlignmentMap = {
top: 'flex-start',
center: 'center',
bottom: 'flex-end',
stretch: 'stretch',
'space-between': 'space-between',
};

const flexWrapOptions = [ 'wrap', 'nowrap' ];
Expand Down Expand Up @@ -101,14 +105,13 @@ export default {
onChange={ onChange }
isToolbar
/>
{ allowVerticalAlignment &&
layout?.orientation !== 'vertical' && (
<FlexLayoutVerticalAlignmentControl
layout={ layout }
onChange={ onChange }
isToolbar
/>
) }
{ allowVerticalAlignment && (
<FlexLayoutVerticalAlignmentControl
layout={ layout }
onChange={ onChange }
isToolbar
/>
) }
</BlockControls>
);
},
Expand Down Expand Up @@ -153,6 +156,9 @@ export default {
rules.push( `justify-content: ${ justifyContent }` );
}
} else {
if ( verticalAlignment ) {
rules.push( `justify-content: ${ verticalAlignment }` );
}
rules.push( 'flex-direction: column' );
rules.push( `align-items: ${ alignItems }` );
}
Expand Down Expand Up @@ -188,7 +194,14 @@ function FlexLayoutVerticalAlignmentControl( {
onChange,
isToolbar = false,
} ) {
const { verticalAlignment = verticalAlignmentMap.center } = layout;
const { orientation = 'horizontal' } = layout;

const defaultVerticalAlignment =
orientation === 'horizontal'
? verticalAlignmentMap.center
: verticalAlignmentMap.top;

const { verticalAlignment = defaultVerticalAlignment } = layout;

const onVerticalAlignmentChange = ( value ) => {
onChange( {
Expand All @@ -201,6 +214,11 @@ function FlexLayoutVerticalAlignmentControl( {
<BlockVerticalAlignmentControl
onChange={ onVerticalAlignmentChange }
value={ verticalAlignment }
controls={
orientation === 'horizontal'
? [ 'top', 'center', 'bottom', 'stretch' ]
: [ 'top', 'center', 'bottom', 'space-between' ]
}
/>
);
}
Expand Down Expand Up @@ -255,6 +273,8 @@ function FlexLayoutJustifyContentControl( {
const allowedControls = [ 'left', 'center', 'right' ];
if ( orientation === 'horizontal' ) {
allowedControls.push( 'space-between' );
} else {
allowedControls.push( 'stretch' );
}
if ( isToolbar ) {
return (
Expand Down Expand Up @@ -293,6 +313,13 @@ function FlexLayoutJustifyContentControl( {
icon: justifySpaceBetween,
label: __( 'Space between items' ),
} );
} else {
// Todo: we also need an icon here.
justificationOptions.push( {
value: 'stretch',
icon: justifyStretch,
label: __( 'Stretch items' ),
} );
}

return (
Expand Down
1 change: 1 addition & 0 deletions packages/icons/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export { default as justifyLeft } from './library/justify-left';
export { default as justifyCenter } from './library/justify-center';
export { default as justifyRight } from './library/justify-right';
export { default as justifySpaceBetween } from './library/justify-space-between';
export { default as justifyStretch } from './library/justify-stretch';
export { default as key } from './library/key';
export { default as keyboardClose } from './library/keyboard-close';
export { default as keyboardReturn } from './library/keyboard-return';
Expand Down
12 changes: 12 additions & 0 deletions packages/icons/src/library/justify-stretch.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const justifyStretch = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M4 4H5.5V20H4V4ZM7 10L17 10V14L7 14V10ZM20 4H18.5V20H20V4Z" />
</SVG>
);

export default justifyStretch;
2 changes: 1 addition & 1 deletion phpunit/block-supports/layout-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ public function data_gutenberg_get_layout_style() {
'verticalAlignment' => 'bottom',
),
),
'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}',
'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;justify-content:flex-end;}',
),
'default layout with blockGap to verify converting gap value into valid CSS' => array(
'args' => array(
Expand Down

1 comment on commit 8d8167f

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 8d8167f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4039188072
📝 Reported issues:

Please sign in to comment.