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

Jump to bottom

Fixes for breaking changes from Gutenberg 11.4 #30

Merged
merged 4 commits into from
Sep 9, 2021
Merged

Fixes for breaking changes from Gutenberg 11.4 #30

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8767768
Bring over the layout/alignment style changes from Blockbase
coreymckrill Sep 8, 2021
049d2ca
Set the post header's layout to flex
coreymckrill Sep 9, 2021
d1437a2
Tweak layout styles to restore desired alignments
coreymckrill Sep 9, 2021
546e280
Avoid using 'important' clauses where possible
coreymckrill Sep 9, 2021
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
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- wp:group {"tagName":"article","layout":{"inherit":true}} -->
<article class="wp-block-group">
<!-- wp:group {"tagName":"header","align":"wide","className":"entry-header"} -->
<!-- wp:group {"tagName":"header","align":"wide","className":"entry-header","layout":{"type":"flex"}} -->
<header class="wp-block-group alignwide entry-header">
<!-- wp:group {"className":"entry-meta"} -->
<div class="wp-block-group entry-meta">
Expand Down
39 changes: 29 additions & 10 deletions source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
View file
Open in desktop
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 All @@ -37,4 +56,4 @@
max-width: var(--wp--custom--layout--content-size);
margin-left: auto !important;
margin-right: auto !important;
}
}
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.wp-block-post-title {
margin-top: 0;
margin-top: 0 !important; // TODO this might be fixable via the blockGap prop in theme.json.
coreymckrill marked this conversation as resolved.
Show resolved Hide resolved
}
2 changes: 2 additions & 0 deletions source/wp-content/themes/wporg-news-2021/sass/post/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@
.wp-block-post-author,
.wp-block-post-terms {
display: inline-block;
margin-top: 0 !important; // TODO this might be fixable via the blockGap prop in theme.json.
coreymckrill marked this conversation as resolved.
Show resolved Hide resolved
}
}

@include break-large {
.entry-header {
display: flex;
align-items: flex-start !important; // TODO eventually this might be a layout setting.
justify-content: space-between;

.entry-meta {
Expand Down