Restore left/right/centre alignments

blank-canvas-blocks/assets/ponyfill.css

@@ -97,6 +97,48 @@ body {
 	margin-right: unset;
 }
 
+.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 {
+		max-width: calc(var(--wp--custom--width--default) / 2);
+	}
+	.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);
+	}
+	.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*/
+		margin-right: var(--alignment-margin);
+	}
+}
+
 ::selection {
 	background-color: var(--wp--custom--color--selection);
 }

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

@@ -36,3 +36,63 @@ body {
 	margin-left: unset;
 	margin-right: unset;
 }
+
+// Align Center
+.aligncenter {
+	text-align: center;
+}
+
+// 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( 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( ( 100% - var(--content-width ) ) / 2 );
+	}
+
+	// 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
+	.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*/
+		margin-right: var(--alignment-margin);
+	}
+}