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;`.
WordPress · Feb 15, 2022 · 112dce8 · 112dce8
1 parent 47a8adc
commit 112dce8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/lib/block-supports/layout.php b/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';

diff --git a/packages/block-editor/src/layouts/flow.js b/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 };
 				}
 			`;
 		}