Layout doesn't take into account different writing modes, such as lef…

…t-to-right, vertical and so on. With CSS logical properties, block and inline margins will apply to the appropriate side depending on the direction of the document flow. This change to the layout margins ensures that margins will adhere to the logic of current flow. For example, margin-block-start (instead of margin-top) will manifest itself as a top margin for `writing-mode: horizontal-tb;` but a right margin for `writing-mode: vertical-rl;`.

lib/block-supports/layout.php

@@ -55,20 +55,20 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		if ( $content_size || $wide_size ) {
 			$style  = "$selector > :not(.alignleft):not(.alignright) {";
 			$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
-			$style .= 'margin-left: auto !important;';
-			$style .= 'margin-right: auto !important;';
+			$style .= 'margin-inline-start: auto !important;';
+			$style .= 'margin-inline-end: auto !important;';
 			$style .= '}';
 
 			$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
 			$style .= "$selector .alignfull { max-width: none; }";
 		}
 
-		$style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }";
-		$style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }";
+		$style .= "$selector .alignleft { float: left; margin-inline-start: 2em; margin-inline-end: 0; }";
+		$style .= "$selector .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
 		if ( $has_block_gap_support ) {
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
-			$style    .= "$selector > * { margin-top: 0; margin-bottom: 0; }";
-			$style    .= "$selector > * + * { margin-top: $gap_style;  margin-bottom: 0; }";
+			$style    .= "$selector > * { margin-block-start: 0; margin-block-end: 0; }";
+			$style    .= "$selector > * + * { margin-block-start: $gap_style; margin-block-end: 0; }";
 		}
 	} elseif ( 'flex' === $layout_type ) {
 		$layout_orientation = isset( $layout['orientation'] ) ? $layout['orientation'] : 'horizontal';

packages/block-editor/src/layouts/flow.js

@@ -117,8 +117,8 @@ export default {
 				? `
 					${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } {
 						max-width: ${ contentSize ?? wideSize };
-						margin-left: auto !important;
-						margin-right: auto !important;
+						margin-inline-start: auto !important;
+						margin-inline-end: auto !important;
 					}
 
 					${ appendSelectors( selector, '> .alignwide' ) }  {
@@ -134,26 +134,26 @@ export default {
 		output += `
 			${ appendSelectors( selector, '> .alignleft' ) } {
 				float: left;
-				margin-right: 2em;
-				margin-left: 0;
+				margin-inline-end: 2em;
+				margin-inline-start: 0;
 			}
 
 			${ appendSelectors( selector, '> .alignright' ) } {
 				float: right;
-				margin-left: 2em;
-				margin-right: 0;
+				margin-inline-start: 2em;
+				margin-inline-end: 0;
 			}
 
 		`;
 
 		if ( hasBlockGapStylesSupport ) {
 			output += `
 				${ appendSelectors( selector, '> *' ) } {
-					margin-top: 0;
-					margin-bottom: 0;
+					margin-block-start: 0;
+					margin-block-end: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: ${ blockGapValue };
+					margin-block-start: ${ blockGapValue };
 				}
 			`;
 		}