Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove data-align divs for themes that support layout #38613

Merged
merged 7 commits into from
Feb 14, 2022
Merged

Remove data-align divs for themes that support layout #38613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e537502
Remove data-align divs for themes that support layout
youknowriad Feb 8, 2022
095a55c
Add the left/right margins properly
youknowriad Feb 8, 2022
778077c
Fix layout styles
youknowriad Feb 10, 2022
2fbef4d
fix wp-block class and z-index
youknowriad Feb 11, 2022
ddec7ac
Fix unit test
youknowriad Feb 11, 2022
f096a08
Fix caption styles
youknowriad Feb 11, 2022
e12ac14
Fix e2e test
youknowriad Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions lib/block-supports/layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;';
Expand All @@ -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; }";
Expand Down
30 changes: 27 additions & 3 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 ] );

Expand Down Expand Up @@ -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 = (
<div
Expand Down Expand Up @@ -164,7 +182,13 @@ function BlockListBlock( {

const value = {
clientId,
className,
className:
wrapperProps?.[ 'data-align' ] && themeSupportsLayout
? classnames(
className,
`align${ wrapperProps[ 'data-align' ] }`
Copy link
Member

Choose a reason for hiding this comment

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

Why do we need to add this as a class instead of sticking to the data attributes or inline layout styles?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

inline layout styles target these classes. This matches the markup in the frontend.

)
: className,
wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
isAligned,
};
Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,9 @@
}

.wp-block[data-align="left"] > *,
.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");
}
Expand Down
12 changes: 7 additions & 5 deletions packages/block-editor/src/layouts/flow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,31 +115,33 @@ export default {
let output =
!! contentSize || !! wideSize
? `
${ appendSelectors( selector, '> *' ) } {
${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I changed this that way the auto margins don't apply to left/right aligned blocks. Otherwise, the margins we had specifically for these blocks didn't apply at all. I think this has some small potential to impact FSE themes for aligned left/right blocks but this restores the original intent basically. I think it's fine but also curious about testing impact here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I guess also the "max-width" rule should be moved here maybe, let me know what you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

cc @jasmussen did you see this, any thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

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

To be sure I understand right, the desired behavior is that a floated image is omitted from max width and auto margins, so that it's up to a theme to decide whether it should be part of the main column, or not. Is that right?

If so, then that appears to work fairly well in this branch:

Screenshot 2022-02-10 at 12 13 07

Screenshot 2022-02-10 at 12 13 47

However, look at the first paragraph in that screenshot above, it no longer has a max-width for some reason, whereas it does in trunk:

Screenshot 2022-02-10 at 12 14 37

Based on later comments in Maggie's testing content, it sounds like this is could be correct:

Screenshot 2022-02-10 at 12 17 09

Screenshot 2022-02-10 at 12 17 15

However it is inconsistent with the editor 🤔 :
Screenshot 2022-02-10 at 12 17 43

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To be sure I understand right, the desired behavior is that a floated image is omitted from max width and auto margins, so that it's up to a theme to decide whether it should be part of the main column, or not. Is that right?

Yes I want to exclude left/right aligned blocks from the auto margins and the max width. But it's not up to the theme to decide whether it should be part of the main column. It can't be part of the main column at all. If you want something to be part of the main column, you need to wrap it in a group.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep, sounds good to me. Did you see the Paragraph missing a max-width, issue, though? That's present in this branch but not in trunk.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, it was actually a missing . it should be fixed in the last commit.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think there are some unwanted side effects to adding this additional specificity.

In the flow layout, align wide and align full are no longer respected because the max-width rule from the default alignment now takes higher precedence:

Using emptytheme:

Before After
Screen Shot 2022-02-18 at 11 11 38 AM Screen Shot 2022-02-18 at 11 08 09 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

Good catch.

I wonder if this would work? :where(:not(.alignleft):not(.alignright))

Copy link
Contributor

Choose a reason for hiding this comment

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

@jasmussen's suggestion solves the alignment issue for me

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;
}

`;
Expand Down
18 changes: 0 additions & 18 deletions packages/block-library/src/image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
width: 100%;
}

&.alignleft,
&.alignright,
&.aligncenter,
.alignleft,
.alignright,
.aligncenter {
Expand Down
7 changes: 4 additions & 3 deletions packages/e2e-tests/specs/editor/blocks/image.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,10 @@ describe( 'Image', () => {
`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
);
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( '' );
Expand Down