Skip to content

More consistent root padding #60715

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
tellthemachines merged 17 commits into from
May 28, 2024
Merged

More consistent root padding #60715

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1ef0f01
testing
richtabor Apr 12, 2024
24d00d2
try remove alignfull margin 0
richtabor Apr 12, 2024
e5d8226
make fullwidth > fullwidth blocks always fullwidth (site editor)
richtabor Apr 13, 2024
5adc113
nested content width children do not get padding
richtabor Apr 13, 2024
9bf5bf6
omit alignwide from nested
richtabor Apr 13, 2024
55f19ee
try alignfull = global padding
richtabor Apr 16, 2024
4ded0f3
Add back 'constrained' === $used_layout['type']
richtabor Apr 30, 2024
6c321c0
add back changes after rebase
richtabor May 23, 2024
82b1208
update comment
richtabor May 23, 2024
d57a022
try omitting flex + fullwidth from global padding
richtabor May 23, 2024
28efeab
clean up a bit
richtabor May 24, 2024
8e79ebe
try reduce logic from alignfull
richtabor May 24, 2024
3870bd3
improve nested
richtabor May 24, 2024
57c0333
Update comments
richtabor May 28, 2024
7bbd0b5
Add sync PR info
tellthemachines May 28, 2024
7405063
Add bullet point lol
tellthemachines May 28, 2024
4d4712e
Update test string
tellthemachines May 28, 2024
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
improve nested
  • Loading branch information
@richtabor @tellthemachines
richtabor authored and tellthemachines committed May 28, 2024
commit 3870bd3301e44071e9f5145b01aa32b8b60f9333
5 changes: 3 additions & 2 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2818,11 +2818,12 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
// Right and left padding are applied to the first container with `.has-global-padding` class.
$css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
// Nested containers with `.has-global-padding` class do not get padding.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }';
// Alignfull children of the container with left and right padding have negative margins so they can still be full width.
$css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
// The above rule is negated for alignfull children of nested containers.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }';
// Nested containers with `.has-global-padding` class do not get padding.
$css .= '.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }';
}

$css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
Expand Down
6 changes: 4 additions & 2 deletions packages/block-editor/src/components/global-styles/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -823,8 +823,10 @@ export const toStyles = (
*/
ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }`;
.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) { padding-right: 0; padding-left: 0; }
.has-global-padding :where(.has-global-padding:not(.wp-block-block, .alignfull, .alignwide)) > .alignfull { margin-left: 0; margin-right: 0; }
`;
}

ruleset += '}';
Expand Down