diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 968ba799efcf3d..7697f610af86da 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -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'] ) { @@ -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'] ] ), + ); + } } } diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/icons.js b/packages/block-editor/src/components/block-vertical-alignment-control/icons.js index 14c68957b9e6a1..b5c283ffef37db 100644 --- a/packages/block-editor/src/components/block-vertical-alignment-control/icons.js +++ b/packages/block-editor/src/components/block-vertical-alignment-control/icons.js @@ -20,3 +20,15 @@ export const alignTop = ( ); + +export const alignStretch = ( + + + +); + +export const spaceBetween = ( + + + +); diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js index 3a243da1b95728..b25e401966180b 100644 --- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js +++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js @@ -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: { @@ -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, @@ -49,7 +59,7 @@ function BlockVerticalAlignmentUI( { const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu; const extraProps = isToolbar ? { isCollapsed } - : { popoverProps: { POPOVER_PROPS } }; + : { popoverProps: { variant: 'toolbar' } }; return ( - { allowVerticalAlignment && - layout?.orientation !== 'vertical' && ( - - ) } + { allowVerticalAlignment && ( + + ) } ); }, @@ -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 }` ); } @@ -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( { @@ -201,6 +214,11 @@ function FlexLayoutVerticalAlignmentControl( { ); } @@ -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 ( @@ -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 ( diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 77c974fc61211f..df8328d60f699e 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -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'; diff --git a/packages/icons/src/library/justify-stretch.js b/packages/icons/src/library/justify-stretch.js new file mode 100644 index 00000000000000..6ab1f4921fa92e --- /dev/null +++ b/packages/icons/src/library/justify-stretch.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const justifyStretch = ( + + + +); + +export default justifyStretch; diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php index 9a01a371f72de5..c7e14ffe84dbc0 100644 --- a/phpunit/block-supports/layout-test.php +++ b/phpunit/block-supports/layout-test.php @@ -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(