Reader: Basic Column Block support (#95207)

* Add basic Column styles to full post reader

* Allow import to use vars

* Adjust column margin to match p tags

* Provide minimal wrapping to manage multi-columns

* Revert from using vars for testing

* Reorganize imports to prevent impacting mobile apps

client/blocks/reader-full-post/_content.scss

@@ -66,6 +66,10 @@
 .is-reader-page .reader-full-post__story-content {
 	padding-top: 0 !important;
 
+	.wp-block-columns {
+		margin-bottom: 24px;
+	}
+
 	.wp-block-jetpack-slideshow_slide img,
 	.wp-block-media-text__media img,
 	.wp-block-image img {
@@ -515,19 +519,19 @@
 			background-image: url("data:image/svg+xml,%3Csvg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.3438 17.3438h-4.68755c-.08594 0-.15625.0703-.15625.1562v.625c0 .3457.2793.625.625.625h3.75c.3457 0 .625-.2793.625-.625v-.625c0-.0859-.0703-.1562-.1562-.1562zm-2.3438-16.0938c-3.53711 0-6.40625 2.86914-6.40625 6.40625 0 2.37105 1.28906 4.44145 3.20313 5.54885v2.2637c0 .3457.27929.625.625.625h5.15622c.3457 0 .625-.2793.625-.625v-2.2637c1.9141-1.1074 3.2032-3.1778 3.2032-5.54885 0-3.53711-2.8692-6.40625-6.4063-6.40625zm2.498 10.7383-.7011.4062v2.293h-3.59377v-2.293l-.70118-.4062c-1.53711-.8887-2.50195-2.52541-2.50195-4.33205 0-2.76172 2.23828-5 5-5 2.7617 0 5 2.23828 5 5 0 1.80664-.9648 3.44335-2.502 4.33205z' fill='%231e1e1e'/%3E%3C/svg%3E");
 			background-repeat: no-repeat;
 			background-size: 24px 24px;
-			content: "";
+			content: "";;
 			display: inline-block;
 			height: 24px;
 			left: -5px;
 			opacity: 0.65;
 			position: absolute;
 			width: 24px;
 			top: 1px;
-		}
-	}
 
 	.jetpack-blogging-prompt__text {
 		font-size: $font-title-medium;
 		margin-bottom: 24px;
 	}
+		}
+	}
 }

client/blocks/reader-full-post/columns.scss

@@ -0,0 +1,73 @@
+@use 'sass:math';
+@import "@wordpress/base-styles/breakpoints";
+
+$column-gap: 19px; // Roughly 1.2rem, which is the gap in Gutenberg columns. This needs to be px for unit consistency in the math.div function.
+$column-min-width: math.div($reader-full-post-story-max-width - $reader-full-post-story-padding * 2 - $column-gap, 3);
+
+.wp-block-columns {
+	display: flex;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+	align-items: initial;
+	gap: rem($column-gap);
+
+	&.are-vertically-aligned-top {
+		align-items: flex-start;
+	}
+
+	&.are-vertically-aligned-center {
+		align-items: center;
+	}
+
+	&.are-vertically-aligned-bottom {
+		align-items: flex-end;
+	}
+
+	& > .wp-block-column {
+		flex-basis: 100%;
+
+		@media (min-width: $break-medium) {
+			flex-basis: 0;
+			min-width: $column-min-width; // This is the minimum width of a column in a 3-column layout.
+		}
+	}
+
+	&.is-not-stacked-on-mobile {
+		flex-wrap: nowrap;
+
+		> .wp-block-column {
+			flex-basis: 0;
+			flex-grow: 1;
+			min-width: auto;
+		}
+	}
+}
+
+.wp-block-column {
+	flex-grow: 1;
+	min-width: 0;
+	word-break: break-word;
+	overflow-wrap: break-word;
+
+	&.is-vertically-aligned-top {
+		align-self: flex-start;
+	}
+
+	&.is-vertically-aligned-center {
+		align-self: center;
+	}
+
+	&.is-vertically-aligned-bottom {
+		align-self: flex-end;
+	}
+
+	&.is-vertically-aligned-stretch {
+		align-self: stretch;
+	}
+
+	&.is-vertically-aligned-top,
+	&.is-vertically-aligned-center,
+	&.is-vertically-aligned-bottom {
+		width: 100%;
+	}
+}

client/blocks/reader-full-post/style.scss

@@ -9,6 +9,9 @@ $reader-full-post-story-max-width: 720px;
 $global-sidebar-and-frame-width: 295px + 16px;
 $reader-full-post-desktop-min: $reader-full-post-sidebar-width + $reader-full-post-story-max-width + ( $reader-full-post-story-padding * 2 ) + $global-sidebar-and-frame-width;
 
+// Import minimal styles for Gutenberg Columns block
+@import "./columns";
+
 .is-group-reader.has-no-sidebar {
 	.masterbar {
 		@include breakpoint-deprecated( "<660px" ) {