From e537502ba936d21e72cf5567af3729d8b3816cde Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 8 Feb 2022 09:41:01 +0100 Subject: [PATCH 1/7] Remove data-align divs for themes that support layout --- .../src/components/block-list/block.js | 27 ++++++++++++++++--- packages/block-editor/src/layouts/flow.js | 8 +++--- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 76dc750ae0d797..e7c27dbdec662c 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -19,7 +19,12 @@ import { isUnmodifiedDefaultBlock, } from '@wordpress/blocks'; import { withFilters } from '@wordpress/components'; -import { withDispatch, withSelect, useDispatch } from '@wordpress/data'; +import { + withDispatch, + withSelect, + useDispatch, + useSelect, +} from '@wordpress/data'; import { compose, pure, ifCondition } from '@wordpress/compose'; import { safeHTML } from '@wordpress/dom'; @@ -86,6 +91,10 @@ function BlockListBlock( { onMerge, toggleSelection, } ) { + const themeSupportsLayout = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return getSettings().supportsLayout; + }, [] ); const { removeBlock } = useDispatch( blockEditorStore ); const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] ); @@ -123,7 +132,13 @@ function BlockListBlock( { // For aligned blocks, provide a wrapper element so the block can be // positioned relative to the block column. - if ( isAligned ) { + // This is only kept for classic themes that don't support layout + // Historically we used to rely on extra divs and data-align to + // provide the alignments styles in the editor. + // Due to the differences between frontend and backend, we migrated + // to the layout feature, and we're now aligning the markup of frontend + // and backend. + if ( isAligned && ! themeSupportsLayout ) { blockEdit = (
[data-align="wide"]' ) } { + ${ appendSelectors( selector, '> .alignwide' ) } { max-width: ${ wideSize ?? contentSize }; } - ${ appendSelectors( selector, '> [data-align="full"]' ) } { + ${ appendSelectors( selector, '> .alignfull' ) } { max-width: none; } ` : ''; output += ` - ${ appendSelectors( selector, '> [data-align="left"]' ) } { + ${ appendSelectors( selector, '> .alignleft' ) } { float: left; margin-right: 2em; } - ${ appendSelectors( selector, '> [data-align="right"]' ) } { + ${ appendSelectors( selector, '> .alignright' ) } { float: right; margin-left: 2em; } From 095a55c4cf1498642115d788603c7288d749edf4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 8 Feb 2022 10:33:37 +0100 Subject: [PATCH 2/7] Add the left/right margins properly --- lib/block-supports/layout.php | 6 ++++-- packages/block-editor/src/layouts/flow.js | 5 +++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 5ba02a5f6d1061..1115644992a8da 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -55,6 +55,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support if ( $content_size || $wide_size ) { $style = "$selector > * {"; $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; + $style .= '}'; + $style = "$selector > :not(.alignleft):not(.alignright) {"; $style .= 'margin-left: auto !important;'; $style .= 'margin-right: auto !important;'; $style .= '}'; @@ -63,8 +65,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style .= "$selector .alignfull { max-width: none; }"; } - $style .= "$selector .alignleft { float: left; margin-right: 2em; }"; - $style .= "$selector .alignright { float: right; margin-left: 2em; }"; + $style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }"; + $style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }"; if ( $has_block_gap_support ) { $gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )'; $style .= "$selector > * { margin-top: 0; margin-bottom: 0; }"; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 1e4c199c48e556..87f1b22521454d 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -117,6 +117,9 @@ export default { ? ` ${ appendSelectors( selector, '> *' ) } { max-width: ${ contentSize ?? wideSize }; + } + + ${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } { margin-left: auto !important; margin-right: auto !important; } @@ -135,11 +138,13 @@ export default { ${ appendSelectors( selector, '> .alignleft' ) } { float: left; margin-right: 2em; + margin-left: 0; } ${ appendSelectors( selector, '> .alignright' ) } { float: right; margin-left: 2em; + margin-right: 0; } `; From 778077c4c303dedee0cbe786a57cd45e5cc1563f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 10 Feb 2022 14:41:40 +0100 Subject: [PATCH 3/7] Fix layout styles --- lib/block-supports/layout.php | 4 +--- packages/block-editor/src/layouts/flow.js | 5 +---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 1115644992a8da..aac8018270f527 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -53,10 +53,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style = ''; if ( $content_size || $wide_size ) { - $style = "$selector > * {"; - $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; - $style .= '}'; $style = "$selector > :not(.alignleft):not(.alignright) {"; + $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';'; $style .= 'margin-left: auto !important;'; $style .= 'margin-right: auto !important;'; $style .= '}'; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 87f1b22521454d..f5581534fa7995 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -115,11 +115,8 @@ export default { let output = !! contentSize || !! wideSize ? ` - ${ appendSelectors( selector, '> *' ) } { - max-width: ${ contentSize ?? wideSize }; - } - ${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } { + max-width: ${ contentSize ?? wideSize }; margin-left: auto !important; margin-right: auto !important; } From 2fbef4d1e430d5e3a4c3ae366befdc94d2a73279 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 11 Feb 2022 14:23:50 +0100 Subject: [PATCH 4/7] fix wp-block class and z-index --- packages/block-editor/src/components/block-list/block.js | 9 ++++++--- .../block-editor/src/components/block-list/style.scss | 4 +++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index e7c27dbdec662c..f82e7cd719435d 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -128,7 +128,10 @@ function BlockListBlock( { ); } - const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ]; + const isAligned = + wrapperProps && + !! wrapperProps[ 'data-align' ] && + ! themeSupportsLayout; // For aligned blocks, provide a wrapper element so the block can be // positioned relative to the block column. @@ -138,7 +141,7 @@ function BlockListBlock( { // Due to the differences between frontend and backend, we migrated // to the layout feature, and we're now aligning the markup of frontend // and backend. - if ( isAligned && ! themeSupportsLayout ) { + if ( isAligned ) { blockEdit = (
*, -.wp-block[data-align="right"] > * { +.wp-block[data-align="right"] > *, +.wp-block.alignleft, +.wp-block.alignright { // Without z-index, won't be clickable as "above" adjacent content. z-index: z-index("{core/image aligned left or right} .wp-block"); } From ddec7acc142247f8cdda0f2ee3db54bcda480811 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 11 Feb 2022 14:49:26 +0100 Subject: [PATCH 5/7] Fix unit test --- packages/block-editor/src/components/block-list/block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index f82e7cd719435d..6daf20e4757ce3 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -183,7 +183,7 @@ function BlockListBlock( { const value = { clientId, className: - wrapperProps[ 'data-align' ] && themeSupportsLayout + wrapperProps?.[ 'data-align' ] && themeSupportsLayout ? classnames( className, `align${ wrapperProps[ 'data-align' ] }` From f096a086dd6e159c326ee8b81122406601abda62 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 11 Feb 2022 15:40:30 +0100 Subject: [PATCH 6/7] Fix caption styles --- packages/block-library/src/image/editor.scss | 18 ------------------ packages/block-library/src/image/style.scss | 3 +++ 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 541791bd5748b9..0fd26a8e0bdecf 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -70,24 +70,6 @@ figure.wp-block-image:not(.wp-block) { } } -*:not([data-align]) { - > .wp-block-image { - display: grid; - grid-template-columns: [image] minmax(0, max-content) [placeholder] auto; - .components-placeholder { - grid-column: placeholder; - } - > div:not(.components-placeholder) { - grid-column: image; - } - > figcaption { - grid-column: image; - display: table-caption; - caption-side: bottom; - } - } -} - .wp-block[data-align="left"] > .wp-block-image { margin-right: 1em; margin-left: 0; diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 4a5742f0ff6754..564cdad7270e2e 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -22,6 +22,9 @@ width: 100%; } + &.alignleft, + &.alignright, + &.aligncenter, .alignleft, .alignright, .aligncenter { From e12ac149a1ec47518b011dd5d6d26e224429b1cb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 11 Feb 2022 16:43:56 +0100 Subject: [PATCH 7/7] Fix e2e test --- packages/e2e-tests/specs/editor/blocks/image.test.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js index 291bb125f4226b..ac3ddba34b46ea 100644 --- a/packages/e2e-tests/specs/editor/blocks/image.test.js +++ b/packages/e2e-tests/specs/editor/blocks/image.test.js @@ -103,9 +103,10 @@ describe( 'Image', () => { `\\s*
\\s*` ); expect( await getEditedPostContent() ).toMatch( regex3 ); - // For some reason just clicking the block wrapper causes figcaption to get focus - // in puppeteer but not in live browser, so clicking on the image wrapper div here instead. - await page.click( '.wp-block-image > div' ); + // Focus outside the block to avoid the image caption being selected + // It can happen on CI specially. + await page.click( '.wp-block-post-title' ); + await page.click( '.wp-block-image img' ); await page.keyboard.press( 'Backspace' ); expect( await getEditedPostContent() ).toBe( '' );