From edb0d3d7973e07eb4daf5175a10026f4b497b3b9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 21 Oct 2021 17:29:32 +1100 Subject: [PATCH 1/9] Add flex layout to Buttons block and new layout type. --- lib/block-supports/layout.php | 27 ++++ packages/block-editor/src/layouts/column.js | 152 ++++++++++++++++++ packages/block-editor/src/layouts/index.js | 3 +- packages/block-library/src/buttons/block.json | 16 +- packages/block-library/src/buttons/edit.js | 54 +------ .../block-library/src/buttons/editor.scss | 5 - packages/block-library/src/buttons/style.scss | 4 - .../block-library/src/buttons/variations.js | 4 +- 8 files changed, 197 insertions(+), 68 deletions(-) create mode 100644 packages/block-editor/src/layouts/column.js diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 2ea8871df102e..9e23207876501 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -100,6 +100,33 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support } $style .= '}'; + $style .= "$selector > * { margin: 0; }"; + } elseif ('column' === $layout_type ) { + $justify_content_options = array( + 'left' => 'flex-start', + 'right' => 'flex-end', + 'center' => 'center', + ); + + $style = "$selector {"; + $style .= 'display: flex;'; + $style .= 'flex-direction: column;'; + if ( $has_block_gap_support ) { + $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; + } else { + $style .= 'gap: 0.5em;'; + } + $style .= 'flex-wrap: wrap;'; + /** + * Add this style only if is not empty for backwards compatibility, + * since we intend to convert blocks that had flex layout implemented + * by custom css. + */ + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; + } + $style .= '}'; + $style .= "$selector > * { margin: 0; }"; } diff --git a/packages/block-editor/src/layouts/column.js b/packages/block-editor/src/layouts/column.js new file mode 100644 index 0000000000000..3b197ce206673 --- /dev/null +++ b/packages/block-editor/src/layouts/column.js @@ -0,0 +1,152 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons'; +import { Button } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { appendSelectors } from './utils'; +import useSetting from '../components/use-setting'; +import { BlockControls, JustifyContentControl } from '../components'; + +const justifyContentMap = { + left: 'flex-start', + right: 'flex-end', + center: 'center', +}; + +export default { + name: 'column', + label: __( 'Column' ), + inspectorControls: function FlexLayoutInspectorControls( { + layout = {}, + onChange, + } ) { + return ( + + ); + }, + toolBarControls: function FlexLayoutToolbarControls( { + layout = {}, + onChange, + layoutBlockSupport, + } ) { + if ( layoutBlockSupport?.allowSwitching ) { + return null; + } + return ( + + + + ); + }, + save: function FlexLayoutStyle( { selector, layout } ) { + const blockGapSupport = useSetting( 'spacing.blockGap' ); + const hasBlockGapStylesSupport = blockGapSupport !== null; + const alignItems = + justifyContentMap[ layout.justifyContent ] || 'flex-start'; + return ( + + ); + }, + getOrientation() { + return 'vertical'; + }, + getAlignments() { + return []; + }, +}; + +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' ), + }, +]; +function FlexLayoutJustifyContentControl( { + layout, + onChange, + isToolbar = false, +} ) { + const { justifyContent = 'left' } = layout; + const onJustificationChange = ( value ) => { + onChange( { + ...layout, + justifyContent: value, + } ); + }; + if ( isToolbar ) { + return ( + + ); + } + + return ( +
+ { __( 'Justification' ) } +
+ { justificationOptions.map( ( { value, icon, label } ) => { + return ( +
+
+ ); +} diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js index 928876c1365f7..4e5a9f6acc4ef 100644 --- a/packages/block-editor/src/layouts/index.js +++ b/packages/block-editor/src/layouts/index.js @@ -3,8 +3,9 @@ */ import flex from './flex'; import flow from './flow'; +import column from './column'; -const layoutTypes = [ flow, flex ]; +const layoutTypes = [ flow, flex, column ]; /** * Retrieves a layout type by name. diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 7730867393709..818d4d20e9f8f 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -6,15 +6,6 @@ "description": "Prompt visitors to take action with a group of button-style links.", "keywords": [ "link" ], "textdomain": "default", - "attributes": { - "contentJustification": { - "type": "string" - }, - "orientation": { - "type": "string", - "default": "horizontal" - } - }, "supports": { "anchor": true, "align": [ "wide", "full" ], @@ -25,6 +16,13 @@ "__experimentalDefaultControls": { "blockGap": true } + }, + "__experimentalLayout": { + "allowSwitching": false, + "allowInheriting": false, + "default": { + "type": "flex" + } } }, "editorStyle": "wp-block-buttons-editor", diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js index 348fc7a9eeb92..306f6fce7ac51 100644 --- a/packages/block-library/src/buttons/edit.js +++ b/packages/block-library/src/buttons/edit.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ @@ -10,7 +5,6 @@ import { BlockControls, useBlockProps, useInnerBlocksProps, - JustifyContentControl, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; @@ -21,28 +15,9 @@ import { useSelect } from '@wordpress/data'; import { name as buttonBlockName } from '../button'; const ALLOWED_BLOCKS = [ buttonBlockName ]; -const LAYOUT = { - type: 'default', - alignments: [], -}; -const VERTICAL_JUSTIFY_CONTROLS = [ 'left', 'center', 'right' ]; -const HORIZONTAL_JUSTIFY_CONTROLS = [ - 'left', - 'center', - 'right', - 'space-between', -]; -function ButtonsEdit( { - attributes: { contentJustification, orientation }, - setAttributes, -} ) { - const blockProps = useBlockProps( { - className: classnames( { - [ `is-content-justification-${ contentJustification }` ]: contentJustification, - 'is-vertical': orientation === 'vertical', - } ), - } ); +function ButtonsEdit( { attributes: { layout = {} } } ) { + const blockProps = useBlockProps(); const preferredStyle = useSelect( ( select ) => { const preferredStyleVariations = select( blockEditorStore @@ -58,31 +33,16 @@ function ButtonsEdit( { { className: preferredStyle && `is-style-${ preferredStyle }` }, ], ], - orientation, - __experimentalLayout: LAYOUT, + __experimentalLayout: layout, templateInsertUpdatesSelection: true, } ); - const justifyControls = - orientation === 'vertical' - ? VERTICAL_JUSTIFY_CONTROLS - : HORIZONTAL_JUSTIFY_CONTROLS; - return ( <> - - - setAttributes( { contentJustification: value } ) - } - popoverProps={ { - position: 'bottom right', - isAlternate: true, - } } - /> - +
); diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index 672f2b0712358..1f964c32fa940 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -1,11 +1,6 @@ // This variable is repeated across Button, Buttons, and Buttons editor styles. $blocks-block__margin: 0.5em; -.wp-block > .wp-block-buttons { - display: flex; - flex-wrap: wrap; -} - .wp-block-buttons { // Override editor auto block margins for button as well as the block appender. > .wp-block { diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index fdd69cc8314b0..6ba301ea7e25c 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -2,10 +2,6 @@ $blocks-block__margin: 0.5em; .wp-block-buttons { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: var(--wp--style--block-gap, $blocks-block__margin); &.is-vertical { flex-direction: column; diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js index 438a5fc97b5eb..bb3483817b576 100644 --- a/packages/block-library/src/buttons/variations.js +++ b/packages/block-library/src/buttons/variations.js @@ -9,14 +9,14 @@ const variations = [ isDefault: true, title: __( 'Horizontal' ), description: __( 'Buttons shown in a row.' ), - attributes: { orientation: 'horizontal' }, + attributes: { layout: { type: 'flex' } }, scope: [ 'transform' ], }, { name: 'buttons-vertical', title: __( 'Vertical' ), description: __( 'Buttons shown in a column.' ), - attributes: { orientation: 'vertical' }, + attributes: { layout: { type: 'column' } }, scope: [ 'transform' ], }, ]; From 191176d47614e662bb270f971f648a68f7dace70 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 15:16:57 +1100 Subject: [PATCH 2/9] Make orientation a property of flex layout --- lib/block-supports/layout.php | 41 ++--- packages/block-editor/src/layouts/column.js | 152 ------------------ packages/block-editor/src/layouts/flex.js | 89 ++++++---- packages/block-editor/src/layouts/index.js | 3 +- .../block-library/src/buttons/variations.js | 2 +- 5 files changed, 78 insertions(+), 209 deletions(-) delete mode 100644 packages/block-editor/src/layouts/column.js diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 9e23207876501..a06ebee127bfa 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -69,13 +69,18 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }"; } } elseif ( 'flex' === $layout_type ) { + $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal'; + $justify_content_options = array( 'left' => 'flex-start', 'right' => 'flex-end', 'center' => 'center', - 'space-between' => 'space-between', ); + if ( 'horizontal' === $layout_orientation ) { + $justify_content_options += array( 'space-between' => 'space-between' ); + } + $flex_wrap_options = array( 'wrap', 'nowrap' ); $flex_wrap = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ? $layout['flexWrap'] : @@ -97,33 +102,30 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support */ if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; - } - $style .= '}'; - - $style .= "$selector > * { margin: 0; }"; - } elseif ('column' === $layout_type ) { - $justify_content_options = array( - 'left' => 'flex-start', - 'right' => 'flex-end', - 'center' => 'center', - ); $style = "$selector {"; $style .= 'display: flex;'; - $style .= 'flex-direction: column;'; if ( $has_block_gap_support ) { $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; } else { $style .= 'gap: 0.5em;'; } $style .= 'flex-wrap: wrap;'; - /** - * Add this style only if is not empty for backwards compatibility, - * since we intend to convert blocks that had flex layout implemented - * by custom css. - */ - if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; + if ( 'horizontal' === $layout_orientation ) { + $style .= 'align-items: center;'; + /** + * Add this style only if is not empty for backwards compatibility, + * since we intend to convert blocks that had flex layout implemented + * by custom css. + */ + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; + } + } else { + $style .= 'flex-direction: column;'; + if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { + $style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};"; + } } $style .= '}'; @@ -231,4 +233,3 @@ function( $matches ) { remove_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 ); } add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 ); - diff --git a/packages/block-editor/src/layouts/column.js b/packages/block-editor/src/layouts/column.js deleted file mode 100644 index 3b197ce206673..0000000000000 --- a/packages/block-editor/src/layouts/column.js +++ /dev/null @@ -1,152 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons'; -import { Button } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { appendSelectors } from './utils'; -import useSetting from '../components/use-setting'; -import { BlockControls, JustifyContentControl } from '../components'; - -const justifyContentMap = { - left: 'flex-start', - right: 'flex-end', - center: 'center', -}; - -export default { - name: 'column', - label: __( 'Column' ), - inspectorControls: function FlexLayoutInspectorControls( { - layout = {}, - onChange, - } ) { - return ( - - ); - }, - toolBarControls: function FlexLayoutToolbarControls( { - layout = {}, - onChange, - layoutBlockSupport, - } ) { - if ( layoutBlockSupport?.allowSwitching ) { - return null; - } - return ( - - - - ); - }, - save: function FlexLayoutStyle( { selector, layout } ) { - const blockGapSupport = useSetting( 'spacing.blockGap' ); - const hasBlockGapStylesSupport = blockGapSupport !== null; - const alignItems = - justifyContentMap[ layout.justifyContent ] || 'flex-start'; - return ( - - ); - }, - getOrientation() { - return 'vertical'; - }, - getAlignments() { - return []; - }, -}; - -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' ), - }, -]; -function FlexLayoutJustifyContentControl( { - layout, - onChange, - isToolbar = false, -} ) { - const { justifyContent = 'left' } = layout; - const onJustificationChange = ( value ) => { - onChange( { - ...layout, - justifyContent: value, - } ); - }; - if ( isToolbar ) { - return ( - - ); - } - - return ( -
- { __( 'Justification' ) } -
- { justificationOptions.map( ( { value, icon, label } ) => { - return ( -
-
- ); -} diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 03ed93d31a266..c2db76b2cf61d 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -17,6 +17,7 @@ import { appendSelectors } from './utils'; import useSetting from '../components/use-setting'; import { BlockControls, JustifyContentControl } from '../components'; +// Used with the default, horizontal flex orientation. const justifyContentMap = { left: 'flex-start', right: 'flex-end', @@ -24,6 +25,13 @@ const justifyContentMap = { 'space-between': 'space-between', }; +// Used with the vertical (column) flex orientation. +const alignItemsMap = { + left: 'flex-start', + right: 'flex-end', + center: 'center', +}; + const flexWrapOptions = [ 'wrap', 'nowrap' ]; export default { @@ -62,6 +70,7 @@ export default { ); }, save: function FlexLayoutStyle( { selector, layout } ) { + const { orientation = 'horizontal' } = layout; const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapStylesSupport = blockGapSupport !== null; const justifyContent = @@ -70,6 +79,17 @@ export default { const flexWrap = flexWrapOptions.includes( layout.flexWrap ) ? layout.flexWrap : 'wrap'; + const rowOrientation = ` + flex-direction: row; + align-items: center; + justify-content: ${ justifyContent }; + `; + const alignItems = + alignItemsMap[ layout.justifyContent ] || alignItemsMap.left; + const columnOrientation = ` + flex-direction: column; + align-items: ${ alignItems }; + `; return ( ); }, - getOrientation() { - return 'horizontal'; + getOrientation( layout ) { + const { orientation = 'horizontal' } = layout; + return orientation; }, getAlignments() { return []; }, }; -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' ), - }, - { - value: 'space-between', - icon: justifySpaceBetween, - label: __( 'Space between items' ), - }, -]; function FlexLayoutJustifyContentControl( { layout, onChange, isToolbar = false, } ) { - const { justifyContent = 'left' } = layout; + const { justifyContent = 'left', orientation = 'horizontal' } = layout; const onJustificationChange = ( value ) => { onChange( { ...layout, justifyContent: value, } ); }; + const allowedControls = [ 'left', 'center', 'right' ]; + if ( orientation === 'horizontal' ) { + allowedControls.push( 'space-between' ); + } if ( isToolbar ) { return ( { __( 'Justification' ) } diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js index 4e5a9f6acc4ef..928876c1365f7 100644 --- a/packages/block-editor/src/layouts/index.js +++ b/packages/block-editor/src/layouts/index.js @@ -3,9 +3,8 @@ */ import flex from './flex'; import flow from './flow'; -import column from './column'; -const layoutTypes = [ flow, flex, column ]; +const layoutTypes = [ flow, flex ]; /** * Retrieves a layout type by name. diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js index bb3483817b576..2946c5d0d06ce 100644 --- a/packages/block-library/src/buttons/variations.js +++ b/packages/block-library/src/buttons/variations.js @@ -16,7 +16,7 @@ const variations = [ name: 'buttons-vertical', title: __( 'Vertical' ), description: __( 'Buttons shown in a column.' ), - attributes: { layout: { type: 'column' } }, + attributes: { layout: { type: 'flex', orientation: 'vertical' } }, scope: [ 'transform' ], }, ]; From f4acac243a5da22c87e7e51391bcafd14b0a7afb Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 16:29:13 +1100 Subject: [PATCH 3/9] Update save function and add deprecation --- .../block-library/src/buttons/deprecated.js | 76 ++++++++++++++++++- packages/block-library/src/buttons/save.js | 17 +---- 2 files changed, 75 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/buttons/deprecated.js b/packages/block-library/src/buttons/deprecated.js index 47d049578ea58..08fb792807d8a 100644 --- a/packages/block-library/src/buttons/deprecated.js +++ b/packages/block-library/src/buttons/deprecated.js @@ -1,9 +1,79 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks } from '@wordpress/block-editor'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +/** + * @param {Object} attributes Block's attributes. + */ +const migrateWithLayout = ( attributes ) => { + if ( !! attributes.layout ) { + return attributes; + } + + const { contentJustification, orientation } = attributes; + + const updatedAttributes = { + ...attributes, + }; + + if ( contentJustification || orientation ) { + Object.assign( updatedAttributes, { + layout: { + type: 'flex', + justifyContent: contentJustification || 'left', + orientation: orientation || 'horizontal', + }, + } ); + } + + return updatedAttributes; +}; const deprecated = [ + { + attributes: { + contentJustification: { + type: 'string', + }, + orientation: { + type: 'string', + default: 'horizontal', + }, + }, + supports: { + anchor: true, + align: [ 'wide', 'full' ], + __experimentalExposeControlsToChildren: true, + spacing: { + blockGap: true, + margin: [ 'top', 'bottom' ], + __experimentalDefaultControls: { + blockGap: true, + }, + }, + }, + isEligible: ( { layout } ) => ! layout, + migrate: migrateWithLayout, + save( { attributes: { contentJustification, orientation } } ) { + return ( +
+ +
+ ); + }, + }, { supports: { align: [ 'center', 'left', 'right' ], @@ -20,7 +90,7 @@ const deprecated = [ return align && [ 'center', 'left', 'right' ].includes( align ); }, migrate( attributes ) { - return { + return migrateWithLayout( { ...attributes, align: undefined, // Floating Buttons blocks shouldn't have been supported in the @@ -30,7 +100,7 @@ const deprecated = [ // As for center-aligned Buttons blocks, the content justification // equivalent will create an identical end result in most cases. contentJustification: attributes.align, - }; + } ); }, }, ]; diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js index 0c17b5c3d2bc0..6ed6c218d6769 100644 --- a/packages/block-library/src/buttons/save.js +++ b/packages/block-library/src/buttons/save.js @@ -1,22 +1,9 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; -export default function save( { - attributes: { contentJustification, orientation }, -} ) { - const blockProps = useBlockProps.save( { - className: classnames( { - [ `is-content-justification-${ contentJustification }` ]: contentJustification, - 'is-vertical': orientation === 'vertical', - } ), - } ); - const innerBlocksProps = useInnerBlocksProps.save( blockProps ); +export default function save() { + const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() ); return
; } From f0127c7b34cc7a6e402b31a0a44ae3eabc1374e0 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 16:43:50 +1100 Subject: [PATCH 4/9] Update fixtures --- .../fixtures/blocks/core__buttons.html | 6 +-- .../fixtures/blocks/core__buttons.json | 10 +++-- .../fixtures/blocks/core__buttons.parsed.json | 9 +++-- .../blocks/core__buttons.serialized.html | 4 +- .../blocks/core__buttons__deprecated-1.json | 7 +++- ...ore__buttons__deprecated-1.serialized.html | 4 +- .../blocks/core__buttons__deprecated-2.html | 11 +++++ .../blocks/core__buttons__deprecated-2.json | 40 +++++++++++++++++++ .../core__buttons__deprecated-2.parsed.json | 37 +++++++++++++++++ ...ore__buttons__deprecated-2.serialized.html | 9 +++++ .../core_buttons__simple__deprecated.json | 7 +++- ...uttons__simple__deprecated.serialized.html | 2 +- 12 files changed, 129 insertions(+), 17 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-2.html create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-2.json create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-2.parsed.json create mode 100644 test/integration/fixtures/blocks/core__buttons__deprecated-2.serialized.html diff --git a/test/integration/fixtures/blocks/core__buttons.html b/test/integration/fixtures/blocks/core__buttons.html index c6cc0e3bf76c2..5b114e3c7b6f7 100644 --- a/test/integration/fixtures/blocks/core__buttons.html +++ b/test/integration/fixtures/blocks/core__buttons.html @@ -1,5 +1,5 @@ - -
+ +
My button 1
@@ -8,4 +8,4 @@
My button 2
- + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__buttons.json b/test/integration/fixtures/blocks/core__buttons.json index 7668b778d09b0..b736172fa3ef0 100644 --- a/test/integration/fixtures/blocks/core__buttons.json +++ b/test/integration/fixtures/blocks/core__buttons.json @@ -4,9 +4,11 @@ "name": "core/buttons", "isValid": true, "attributes": { - "contentJustification": "center", - "orientation": "horizontal", - "align": "wide" + "align": "wide", + "layout": { + "type": "flex", + "justifyContent": "center" + } }, "innerBlocks": [ { @@ -30,6 +32,6 @@ "originalContent": "
My button 2
" } ], - "originalContent": "
\n\t\n\n\t\n
" + "originalContent": "
\n\t\n\n\t\n
" } ] diff --git a/test/integration/fixtures/blocks/core__buttons.parsed.json b/test/integration/fixtures/blocks/core__buttons.parsed.json index 937cd47942299..03df2f840a4d2 100644 --- a/test/integration/fixtures/blocks/core__buttons.parsed.json +++ b/test/integration/fixtures/blocks/core__buttons.parsed.json @@ -3,7 +3,10 @@ "blockName": "core/buttons", "attrs": { "align": "wide", - "contentJustification": "center" + "layout": { + "type": "flex", + "justifyContent": "center" + } }, "innerBlocks": [ { @@ -25,9 +28,9 @@ ] } ], - "innerHTML": "\n
\n\t\n\n\t\n
\n", + "innerHTML": "\n
\n\t\n\n\t\n
\n", "innerContent": [ - "\n
\n\t", + "\n
\n\t", null, "\n\n\t", null, diff --git a/test/integration/fixtures/blocks/core__buttons.serialized.html b/test/integration/fixtures/blocks/core__buttons.serialized.html index 34141befc4da2..31157113d05d4 100644 --- a/test/integration/fixtures/blocks/core__buttons.serialized.html +++ b/test/integration/fixtures/blocks/core__buttons.serialized.html @@ -1,5 +1,5 @@ - -
+ +
My button 1
diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-1.json b/test/integration/fixtures/blocks/core__buttons__deprecated-1.json index 23484290b0e14..8eeec861f7aed 100644 --- a/test/integration/fixtures/blocks/core__buttons__deprecated-1.json +++ b/test/integration/fixtures/blocks/core__buttons__deprecated-1.json @@ -4,7 +4,12 @@ "name": "core/buttons", "isValid": true, "attributes": { - "contentJustification": "center" + "contentJustification": "center", + "layout": { + "type": "flex", + "justifyContent": "center", + "orientation": "horizontal" + } }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__buttons__deprecated-1.serialized.html index b311167cbfed0..f8104335fee06 100644 --- a/test/integration/fixtures/blocks/core__buttons__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__buttons__deprecated-1.serialized.html @@ -1,5 +1,5 @@ - -
+ +
My button 1
diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-2.html b/test/integration/fixtures/blocks/core__buttons__deprecated-2.html new file mode 100644 index 0000000000000..c6cc0e3bf76c2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__buttons__deprecated-2.html @@ -0,0 +1,11 @@ + +
+ +
My button 1
+ + + +
My button 2
+ +
+ diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-2.json b/test/integration/fixtures/blocks/core__buttons__deprecated-2.json new file mode 100644 index 0000000000000..8d30fe9ae4f69 --- /dev/null +++ b/test/integration/fixtures/blocks/core__buttons__deprecated-2.json @@ -0,0 +1,40 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/buttons", + "isValid": true, + "attributes": { + "contentJustification": "center", + "orientation": "horizontal", + "align": "wide", + "layout": { + "type": "flex", + "justifyContent": "center", + "orientation": "horizontal" + } + }, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/button", + "isValid": true, + "attributes": { + "text": "My button 1" + }, + "innerBlocks": [], + "originalContent": "
My button 1
" + }, + { + "clientId": "_clientId_1", + "name": "core/button", + "isValid": true, + "attributes": { + "text": "My button 2" + }, + "innerBlocks": [], + "originalContent": "
My button 2
" + } + ], + "originalContent": "
\n\t\n\n\t\n
" + } +] diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-2.parsed.json b/test/integration/fixtures/blocks/core__buttons__deprecated-2.parsed.json new file mode 100644 index 0000000000000..937cd47942299 --- /dev/null +++ b/test/integration/fixtures/blocks/core__buttons__deprecated-2.parsed.json @@ -0,0 +1,37 @@ +[ + { + "blockName": "core/buttons", + "attrs": { + "align": "wide", + "contentJustification": "center" + }, + "innerBlocks": [ + { + "blockName": "core/button", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t
My button 1
\n\t", + "innerContent": [ + "\n\t
My button 1
\n\t" + ] + }, + { + "blockName": "core/button", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t
My button 2
\n\t", + "innerContent": [ + "\n\t
My button 2
\n\t" + ] + } + ], + "innerHTML": "\n
\n\t\n\n\t\n
\n", + "innerContent": [ + "\n
\n\t", + null, + "\n\n\t", + null, + "\n
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__buttons__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__buttons__deprecated-2.serialized.html new file mode 100644 index 0000000000000..dc4ecfa51732f --- /dev/null +++ b/test/integration/fixtures/blocks/core__buttons__deprecated-2.serialized.html @@ -0,0 +1,9 @@ + +
+
My button 1
+ + + +
My button 2
+
+ diff --git a/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json b/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json index 885679a67bfe3..819b6bbb284c4 100644 --- a/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json +++ b/test/integration/fixtures/blocks/core_buttons__simple__deprecated.json @@ -4,7 +4,12 @@ "name": "core/buttons", "isValid": true, "attributes": { - "orientation": "horizontal" + "orientation": "horizontal", + "layout": { + "type": "flex", + "justifyContent": "left", + "orientation": "horizontal" + } }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core_buttons__simple__deprecated.serialized.html b/test/integration/fixtures/blocks/core_buttons__simple__deprecated.serialized.html index baf0a0226c066..8f9252029d32d 100644 --- a/test/integration/fixtures/blocks/core_buttons__simple__deprecated.serialized.html +++ b/test/integration/fixtures/blocks/core_buttons__simple__deprecated.serialized.html @@ -1,4 +1,4 @@ - +
My button 1
From 9bf62afd85ae5b79909d45c5cb279ea5b69a2d54 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Oct 2021 17:05:06 +1100 Subject: [PATCH 5/9] Fix php lint warnings. --- lib/block-supports/layout.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index a06ebee127bfa..4b3195c7dddb3 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -72,9 +72,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal'; $justify_content_options = array( - 'left' => 'flex-start', - 'right' => 'flex-end', - 'center' => 'center', + 'left' => 'flex-start', + 'right' => 'flex-end', + 'center' => 'center', ); if ( 'horizontal' === $layout_orientation ) { From ee74ef880d22d5c8f6be98a6018dba7d3375b38b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 2 Nov 2021 11:37:28 +1100 Subject: [PATCH 6/9] Fix bad conflict resolution --- lib/block-supports/layout.php | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 4b3195c7dddb3..841252da96522 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -94,23 +94,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= 'gap: 0.5em;'; } $style .= "flex-wrap: $flex_wrap;"; - $style .= 'align-items: center;'; - /** - * Add this style only if is not empty for backwards compatibility, - * since we intend to convert blocks that had flex layout implemented - * by custom css. - */ - if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) { - $style .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};"; - - $style = "$selector {"; - $style .= 'display: flex;'; - if ( $has_block_gap_support ) { - $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; - } else { - $style .= 'gap: 0.5em;'; - } - $style .= 'flex-wrap: wrap;'; if ( 'horizontal' === $layout_orientation ) { $style .= 'align-items: center;'; /** From 0105f2fe3179297909a86fe88900c45f32eb0e90 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 2 Nov 2021 13:01:25 +1100 Subject: [PATCH 7/9] Set orientation in layout tools --- packages/block-editor/src/layouts/flex.js | 32 ++++++++++++++++++- packages/block-library/src/buttons/block.json | 3 +- packages/block-library/src/buttons/index.js | 2 -- .../block-library/src/buttons/variations.js | 24 -------------- 4 files changed, 33 insertions(+), 28 deletions(-) delete mode 100644 packages/block-library/src/buttons/variations.js diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index c2db76b2cf61d..a9421b1ae7032 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -8,7 +8,12 @@ import { justifyRight, justifySpaceBetween, } from '@wordpress/icons'; -import { Button, ToggleControl } from '@wordpress/components'; +import { + Button, + ToggleControl, + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; /** * Internal dependencies @@ -47,6 +52,12 @@ export default { layout={ layout } onChange={ onChange } /> + { layout?.orientation && ( + + ) } ); @@ -208,3 +219,22 @@ function FlexWrapControl( { layout, onChange } ) { /> ); } + +function OrientationControl( { layout, onChange } ) { + const { orientation = 'horizontal' } = layout; + return ( + { + onChange( { + ...layout, + orientation: value, + } ); + } } + > + + + + ); +} diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 818d4d20e9f8f..0fda3fc6d7df5 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -21,7 +21,8 @@ "allowSwitching": false, "allowInheriting": false, "default": { - "type": "flex" + "type": "flex", + "orientation": "horizontal" } } }, diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js index 2ee8ca3d371d9..52d406e0ca976 100644 --- a/packages/block-library/src/buttons/index.js +++ b/packages/block-library/src/buttons/index.js @@ -12,7 +12,6 @@ import transforms from './transforms'; import edit from './edit'; import metadata from './block.json'; import save from './save'; -import variations from './variations'; const { name } = metadata; @@ -36,5 +35,4 @@ export const settings = { transforms, edit, save, - variations, }; diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js deleted file mode 100644 index 2946c5d0d06ce..0000000000000 --- a/packages/block-library/src/buttons/variations.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -const variations = [ - { - name: 'buttons-horizontal', - isDefault: true, - title: __( 'Horizontal' ), - description: __( 'Buttons shown in a row.' ), - attributes: { layout: { type: 'flex' } }, - scope: [ 'transform' ], - }, - { - name: 'buttons-vertical', - title: __( 'Vertical' ), - description: __( 'Buttons shown in a column.' ), - attributes: { layout: { type: 'flex', orientation: 'vertical' } }, - scope: [ 'transform' ], - }, -]; - -export default variations; From ce2ffed6b7ef7b3438d61e3b5da9f87475c65d4b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 3 Nov 2021 12:36:15 +1100 Subject: [PATCH 8/9] Improve orientation controls --- packages/block-editor/src/hooks/layout.scss | 3 +- packages/block-editor/src/layouts/flex.js | 73 +++++++++++++-------- 2 files changed, 46 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss index 653f9da7b9bda..5589e08b9837c 100644 --- a/packages/block-editor/src/hooks/layout.scss +++ b/packages/block-editor/src/hooks/layout.scss @@ -22,7 +22,8 @@ font-size: $helptext-font-size; } -.block-editor-hooks__flex-layout-justification-controls { +.block-editor-hooks__flex-layout-justification-controls, +.block-editor-hooks__flex-layout-orientation-controls { margin-bottom: $grid-unit-15; legend { margin-bottom: $grid-unit-10; diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index a9421b1ae7032..47be2f1cbfdf6 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -7,13 +7,10 @@ import { justifyCenter, justifyRight, justifySpaceBetween, + arrowRight, + arrowDown, } from '@wordpress/icons'; -import { - Button, - ToggleControl, - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOption as ToggleGroupControlOption, -} from '@wordpress/components'; +import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components'; /** * Internal dependencies @@ -48,16 +45,22 @@ export default { } ) { return ( <> - - { layout?.orientation && ( - - ) } + + + + + + { layout?.orientation && ( + + ) } + + ); @@ -223,18 +226,30 @@ function FlexWrapControl( { layout, onChange } ) { function OrientationControl( { layout, onChange } ) { const { orientation = 'horizontal' } = layout; return ( - { - onChange( { - ...layout, - orientation: value, - } ); - } } - > - - - +
+ { __( 'Orientation' ) } +
); } From 45cbc76e46168dce7a1fb0060024f0ea3baf3a07 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 3 Nov 2021 12:51:18 +1100 Subject: [PATCH 9/9] Change orientation to opt-out --- packages/block-editor/src/layouts/flex.js | 3 ++- packages/block-library/src/buttons/block.json | 3 +-- packages/block-library/src/group/variations.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 47be2f1cbfdf6..9e687f6b7d790 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -43,6 +43,7 @@ export default { layout = {}, onChange, } ) { + const { allowOrientation = true } = layout; return ( <> @@ -53,7 +54,7 @@ export default { /> - { layout?.orientation && ( + { allowOrientation && ( blockAttributes.layout?.type === 'flex',