diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 5ba02a5f6d1061..aac8018270f527 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -53,7 +53,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support $style = ''; if ( $content_size || $wide_size ) { - $style = "$selector > * {"; + $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;'; @@ -63,8 +63,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/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 76dc750ae0d797..6daf20e4757ce3 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 ] ); @@ -119,10 +128,19 @@ 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. + // 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 ) { 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"); } diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index 86d9a2a1f5ddae..f5581534fa7995 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -115,31 +115,33 @@ export default { let output = !! contentSize || !! wideSize ? ` - ${ appendSelectors( selector, '> *' ) } { + ${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } { max-width: ${ contentSize ?? wideSize }; margin-left: auto !important; margin-right: auto !important; } - ${ appendSelectors( selector, '> [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; + margin-left: 0; } - ${ appendSelectors( selector, '> [data-align="right"]' ) } { + ${ appendSelectors( selector, '> .alignright' ) } { float: right; margin-left: 2em; + margin-right: 0; } `; 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 { 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( '' );