Skip to content

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

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

Merged
youknowriad 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 1 commit
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
Prev Previous commit
Next Next commit
fix wp-block class and z-index
  • Loading branch information
@youknowriad
youknowriad committed Feb 11, 2022
commit 2fbef4d1e430d5e3a4c3ae366befdc94d2a73279
9 changes: 6 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 @@ -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.
Expand All @@ -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 = (
<div
className="wp-block"
Expand Down Expand Up @@ -180,7 +183,7 @@ function BlockListBlock( {
const value = {
clientId,
className:
isAligned && themeSupportsLayout
wrapperProps[ 'data-align' ] && themeSupportsLayout
? classnames(
className,
`align${ wrapperProps[ 'data-align' ] }`
Copy link
Member

@ellatrix ellatrix Feb 11, 2022

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

@youknowriad youknowriad Feb 11, 2022

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.

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