Skip to content

Commit

Permalink
Another attempt at alignments (#4459)
Browse files Browse the repository at this point in the history
Another attempt at alignments.  With this change alignment rules no longer depend on trying to discern "inherit width" containers and instead installs a gutter on the top-level container.  Any element that is "full width" is "busted out" of those gutters (with negative margins) and if those containers are groups themselves (group block, columns block or template parts) they also express those same gutter margins internally.
  • Loading branch information
pbking authored Aug 24, 2021
1 parent c3be92a commit 4a2a95f
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 16 deletions.
31 changes: 24 additions & 7 deletions blockbase/assets/ponyfill.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 28 additions & 9 deletions blockbase/sass/base/_alignment.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,36 @@
.wp-block-group.alignfull,
*[class*="wp-container-"] //Anything that inherits layout (container)
{
//give it some padding
//FRONTEND
.wp-site-blocks { // top level of the view
//In this situation we want to introduce a standardized gap between content and the edge of the screen.
padding-left: var(--wp--custom--post-content--padding--left);
padding-right: var(--wp--custom--post-content--padding--right);
.alignfull {
// these elements we want to "bust out" of the gap created above
margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
width: unset;
// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
&.wp-block-template-part,
&.wp-block-columns,
&.wp-block-group {
padding-left: var(--wp--custom--post-content--padding--left);
padding-right: var(--wp--custom--post-content--padding--right);
}
}
}

//Any nested containers, and anything that is alignfull
*[class*="wp-container-"], // Any nested containers
> .alignfull { // Any direct descendant that is alignfull
// bust out of the container's padding
// EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet. However the selectors are quite different
// and it's a lot easier to understand and ensure intent separated in this way.
.is-root-container { //top level of the editor
padding-left: var(--wp--custom--post-content--padding--left);
padding-right: var(--wp--custom--post-content--padding--right);
.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) !important;
width: unset;
>.wp-block-group {
padding-left: var(--wp--custom--post-content--padding--left);
padding-right: var(--wp--custom--post-content--padding--right);
}
}
}

Expand Down

0 comments on commit 4a2a95f

Please sign in to comment.