BB - Fix margin alignments in view and editor (#3978)

* Add selectors so that alignment utilities work in the editor.  Added important to utilities to overcode Gutenberg margin utilities.

* Comment editor style.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

blockbase/assets/ponyfill.css

@@ -4,6 +4,7 @@
  */
 body {
 	margin: 0;
+	padding: 0;
 }
 
 body {
@@ -54,15 +55,22 @@ img {
 /**
  * These are default block editor widths in case the theme doesn't provide them.
  */
+.is-root-container {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+}
+
+.block-editor-block-list__layout.is-root-container > .wp-block[data-align=full],
 .wp-block-post-content > .alignfull {
-	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
-	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right));
-	width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right));
+	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;
 }
 
 .site-header,
 .post-header,
 .page-content,
+[data-align="full"] p,
 .alignfull p {
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);

blockbase/sass/base/_alignment.scss

@@ -1,12 +1,21 @@
+// This targets the editor. It is the closest equivalent to .wp-block-post-content,
+// since the editor does not output that class. 
+.is-root-container {
+	padding-left: var(--wp--custom--post-content--padding--left);
+	padding-right: var(--wp--custom--post-content--padding--right);
+}
+
+.block-editor-block-list__layout.is-root-container>.wp-block[data-align=full],
 .wp-block-post-content > .alignfull {
-	margin-left: calc(-1 * var(--wp--custom--post-content--padding--left));
-	margin-right: calc(-1 * var(--wp--custom--post-content--padding--right));
-	width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) )
+	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;
 }
 
 .site-header,
 .post-header,
 .page-content,
+[data-align="full"] p,
 .alignfull p {
 	padding-left: var(--wp--custom--post-content--padding--left);
 	padding-right: var(--wp--custom--post-content--padding--right);

blockbase/sass/base/_normalize.scss

@@ -2,6 +2,7 @@
 // Remove the margin in all browsers.
 body {
   margin: 0;
+  padding: 0;
 }
 
 // Smooth out the fonts