Skip to content

Commit

Permalink
Removing the CSS logical properties for styles that control horizonta…
Browse files Browse the repository at this point in the history 
…l page layout (left and right margins) so that any changes to the writing mode of blocks within wp-site-blocks and block containers still align themselves according to current horizontal rules.
  • Loading branch information
@ramonjd
ramonjd committed Feb 23, 2022
1 parent e242394 commit f9acb32
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 13 deletions.
4 changes: 2 additions & 2 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
if ( $content_size || $wide_size ) {
$style = "$selector > :where(:not(.alignleft):not(.alignright)) {";
$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
$style .= 'margin-inline-start: auto !important;';
$style .= 'margin-inline-end: auto !important;';
$style .= 'margin-left: auto !important;';
$style .= 'margin-right: auto !important;';
$style .= '}';

$style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
Expand Down
6 changes: 3 additions & 3 deletions lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,9 @@ protected function get_block_classes( $style_nodes ) {
}

if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }';
$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }';
$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }';
$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
if ( $has_block_gap_support ) {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/layouts/flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ export default {
'> :where(:not(.alignleft):not(.alignright))'
) } {
max-width: ${ contentSize ?? wideSize };
margin-inline-start: auto !important;
margin-inline-end: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
${ appendSelectors( selector, '> .alignwide' ) } {
max-width: ${ wideSize ?? contentSize };
Expand Down
12 changes: 6 additions & 6 deletions phpunit/class-wp-theme-json-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,7 @@ function test_get_stylesheet_support_for_shorthand_and_longhand_values() {
)
);

$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}';
$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}';
$this->assertEquals( $styles, $theme_json->get_stylesheet() );
$this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand Down Expand Up @@ -380,7 +380,7 @@ function test_get_stylesheet_skips_disabled_protected_properties() {
)
);

$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }';
$expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand All @@ -402,7 +402,7 @@ function test_get_stylesheet_renders_enabled_protected_properties() {
)
);

$expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
$expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
$this->assertEquals( $expected, $theme_json->get_stylesheet() );
$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
}
Expand Down Expand Up @@ -528,7 +528,7 @@ function test_get_stylesheet() {
);

$variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
$styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
$styles = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
$all = $variables . $styles . $presets;
$this->assertEquals( $all, $theme_json->get_stylesheet() );
Expand Down Expand Up @@ -594,7 +594,7 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() {
)
);

$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }.wp-block-group{color: red;}';
$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}';
$presets = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
$variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
$all = $variables . $styles . $presets;
Expand Down Expand Up @@ -680,7 +680,7 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() {
);

$this->assertEquals(
'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',
$theme_json->get_stylesheet()
);
}
Expand Down

0 comments on commit f9acb32

Please sign in to comment.