Fixes for breaking changes from Gutenberg 11.4 (#30)

* Bring over the layout/alignment style changes from Blockbase
  This better accommodates the change in Gutenberg that causes all blocks that support `experimentalLayout` (the Group block) to get the `wp-container-[hash]` class added during rendering.
  See Automattic/themes#4459
* Set the post header's layout to flex
* Tweak layout styles to restore desired alignments
* Avoid using 'important' clauses where possible

source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html

@@ -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">

source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss

@@ -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);
+		}
 	}
 }
 
@@ -37,4 +56,4 @@
 	max-width: var(--wp--custom--layout--content-size);
 	margin-left: auto !important;
 	margin-right: auto !important;
-}
+}

source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss

@@ -1,3 +1,5 @@
 .wp-block-post-title {
-	margin-top: 0;
+	.single [class*="wp-container-"] & {
+		margin-top: 0;
+	}
 }

source/wp-content/themes/wporg-news-2021/sass/post/_header.scss

@@ -6,12 +6,17 @@
 	.wp-block-post-author,
 	.wp-block-post-terms {
 		display: inline-block;
+
+		[class*="wp-container-"] & {
+			margin-top: 0;
+		}
 	}
 }
 
 @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 {