Add default styles to BCB for Image Block (#3430)

* Added default styles for image blocks.

* Refactored margins to simplify

* Rearranged block sass imports to match source branch

* rebuilt with latest changes

* Fix image, video and audio block alignments

* Added Alignmnent styles for wide/full for editor; Tightened up image styles (also for editor)

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blank-canvas-blocks/assets/ponyfill.css

@@ -60,7 +60,7 @@ p {
 }
 
 /*
- * Alignments, loaded in the front-end only.
+ * Alignments
  */
 body {
 	margin: 0;
@@ -80,6 +80,18 @@ body {
 	padding: 0 var(--wp--custom--margin--horizontal);
 }
 
+.wp-block {
+	max-width: var(--wp--custom--width--default);
+}
+
+.wp-block[data-align=wide] {
+	max-width: var(--wp--custom--width--wide);
+}
+
+.wp-block[data-align=full] {
+	max-width: none;
+}
+
 .wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
 .wp-site-blocks .wp-block-post-content > * {
 	max-width: var(--wp--custom--width--default);
@@ -103,44 +115,41 @@ body {
 	box-sizing: content-box;
 }
 
-.wp-site-blocks .wp-block-template-part.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
-.wp-site-blocks .wp-block-columns.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
 .aligncenter {
 	text-align: center;
 }
 
 @media only screen and (min-width: 482px) {
+	.block-editor-block-list__layout .alignleft,
+	.block-editor-block-list__layout .alignright,
 	.wp-site-blocks .alignleft,
 	.wp-site-blocks .alignright {
-		--content-width: min( 100vw - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
-		--alignment-margin: calc( ( 100vw - var(--content-width ) ) / 2 - var(--wp--custom--margin--horizontal) );
-		max-width: var(--wp--custom--width--default);
+		max-width: calc(var(--wp--custom--width--default) / 2);
 	}
-}
-
-@media only screen and (min-width: 482px) {
 	.wp-site-blocks .alignleft {
 		/*rtl:ignore*/
 		float: left;
+	}
+	.wp-site-blocks .alignright {
+		/*rtl:ignore*/
+		float: right;
+	}
+	.block-editor-block-list__layout > .alignleft,
+	.block-editor-block-list__layout > .alignright,
+	.wp-site-blocks .wp-block-post-content > .alignleft,
+	.wp-site-blocks .wp-block-post-content > .alignright {
+		--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
+		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
+	}
+	.block-editor-block-list__layout > .alignleft,
+	.wp-site-blocks .wp-block-post-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: var(--alignment-margin);
 		/*rtl:ignore*/
 		margin-right: var(--wp--custom--margin--horizontal);
 	}
-}
-
-@media only screen and (min-width: 482px) {
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
+	.block-editor-block-list__layout > .alignright,
+	.wp-site-blocks .wp-block-post-content > .alignright {
 		/*rtl:ignore*/
 		margin-left: var(--wp--custom--margin--horizontal);
 		/*rtl:ignore*/
@@ -371,4 +380,24 @@ p.has-text-color a {
 	text-align: var(--wp--custom--video--caption--text-align);
 }
 
+.wp-block-image {
+	/* 
+	From what I can tell the below are styles regularly used by themes
+	to fix the image block.  I believe these should go into the block's
+	default styles.  It's difficult to say how this will land, however 
+	based on discussion found in (many) related issues here: 
+	https://github.com/WordPress/gutenberg/issues/28923
+	*/
+	text-align: center;
+}
+
+/*
+	Further gutenberg APPEARS to be defaulting the margin to the same as 
+	the below, however (for reason's that aren't clear to me now) this
+	isn't coming through.
+*/
+.wp-block-column .wp-block-image {
+	margin: 0 0 1em 0;
+}
+
 /*# sourceMappingURL=ponyfill.css.map */

blank-canvas-blocks/sass/base/_alignment.scss

@@ -1,6 +1,6 @@
 
 /*
- * Alignments, loaded in the front-end only.
+ * Alignments
  */
 
 body {
@@ -23,6 +23,18 @@ body {
 	padding: 0 var(--wp--custom--margin--horizontal);
 }
 
+.wp-block { // For the editor.
+	max-width: var(--wp--custom--width--default);
+}
+
+.wp-block[data-align=wide] { // For the editor.
+	max-width: var(--wp--custom--width--wide);
+}
+
+.wp-block[data-align=full] { // For the editor.
+	max-width: none;
+}
+
 // This is the default with of blocks on the page with not assign alignwide or alignfull
 .wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part),
 .wp-site-blocks .wp-block-post-content > * {
@@ -49,16 +61,6 @@ body {
 	box-sizing: content-box;
 }
 
-.wp-site-blocks .wp-block-template-part.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
-.wp-site-blocks .wp-block-columns.alignfull {
-	width: 100%;
-	max-width: 100%;
-}
-
 // Align Center
 .aligncenter {
 	text-align: center;
@@ -66,36 +68,52 @@ body {
 
 // Align Left and Right
 @include media(mobile) {
+	.block-editor-block-list__layout .alignleft,
+	.block-editor-block-list__layout .alignright,
 	.wp-site-blocks .alignleft,
 	.wp-site-blocks .alignright {
+		max-width: calc(var(--wp--custom--width--default) / 2);
+	}
+
+	// Align Left
+	.wp-site-blocks .alignleft {
+		/*rtl:ignore*/
+		float: left;
+	}
+
+	// Align Right
+	.wp-site-blocks .alignright {
+		/*rtl:ignore*/
+		float: right;
+	}
+
+	// When alignments are applied to top level blocks
+	// we need to add more left/right margin as the block is full width.
+	.block-editor-block-list__layout > .alignleft, // For the editor.
+	.block-editor-block-list__layout > .alignright, // For the editor.
+	.wp-site-blocks .wp-block-post-content > .alignleft,
+	.wp-site-blocks .wp-block-post-content > .alignright {
 		// Content width is the lesser of the viewport width (subtracting margins)
 		// or the default site width.
 		// This variable is only used for this element.
-		--content-width: min( 100vw - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
+		--content-width: min( 100% - var(--wp--custom--margin--horizontal) * 2, var(--wp--custom--width--default) );
 		// The alignment margin is the viewport, subtract the content and divide by two
 		// Then subtract the block padding
-		--alignment-margin: calc( ( 100vw - var(--content-width ) ) / 2 - var(--wp--custom--margin--horizontal) );
-		max-width: var(--wp--custom--width--default);
+		--alignment-margin: calc( ( 100% - var(--content-width ) ) / 2 );
 	}
-}
 
-// Align Left
-@include media(mobile) {
-	.wp-site-blocks .alignleft {
-		/*rtl:ignore*/
-		float: left;
+	// Align Left
+	.block-editor-block-list__layout > .alignleft, // For the editor.
+	.wp-site-blocks .wp-block-post-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: var(--alignment-margin);
 		/*rtl:ignore*/
 		margin-right: var(--wp--custom--margin--horizontal);
 	}
-}
 
-// Align Right
-@include media(mobile) {
-	.wp-site-blocks .alignright {
-		/*rtl:ignore*/
-		float: right;
+	// Align Right
+	.block-editor-block-list__layout > .alignright, // For the editor.
+	.wp-site-blocks .wp-block-post-content > .alignright {
 		/*rtl:ignore*/
 		margin-left: var(--wp--custom--margin--horizontal);
 		/*rtl:ignore*/

blank-canvas-blocks/sass/blocks/_image.scss

@@ -0,0 +1,19 @@
+.wp-block-image {
+	/* 
+	From what I can tell the below are styles regularly used by themes
+	to fix the image block.  I believe these should go into the block's
+	default styles.  It's difficult to say how this will land, however 
+	based on discussion found in (many) related issues here: 
+	https://github.com/WordPress/gutenberg/issues/28923
+	*/
+	text-align: center;
+}
+
+/*
+	Further gutenberg APPEARS to be defaulting the margin to the same as 
+	the below, however (for reason's that aren't clear to me now) this
+	isn't coming through.
+*/
+.wp-block-column .wp-block-image {
+	margin: 0 0 1em 0;
+}

blank-canvas-blocks/sass/ponyfill.scss

@@ -17,3 +17,4 @@
 @import "blocks/group";
 @import "blocks/separator";
 @import "blocks/video";
+@import "blocks/image";