diff --git a/core-blocks/button/editor.scss b/core-blocks/button/editor.scss index 20d277ff2e4661..452352f9992def 100644 --- a/core-blocks/button/editor.scss +++ b/core-blocks/button/editor.scss @@ -4,6 +4,7 @@ } &[data-align="right"] { + /*!rtl:ignore*/ text-align: right; } } diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 5ed138efdead7b..373e4235c09bd7 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -366,7 +366,7 @@ } } - // The padding collapses, but the outline is still 1px to compensate for. + // The padding collapses, but the outline is still 1px to compensate for. .editor-block-contextual-toolbar { margin-bottom: 1px; } @@ -375,19 +375,24 @@ // Left &[data-align="left"] { .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated + /*!rtl:begin:ignore*/ float: left; margin-right: 2em; + /*!rtl:end:ignore*/ } } // Right &[data-align="right"] { .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated + /*!rtl:begin:ignore*/ float: right; margin-left: 2em; + /*!rtl:end:ignore*/ } .editor-block-toolbar { + /*!rtl:ignore*/ float: right; } } @@ -468,7 +473,7 @@ > .editor-block-list__breadcrumb { right: -$border-width; } - + // Compensate for main container padding and subtract border. @include break-small() { margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width; @@ -606,7 +611,7 @@ .editor-block-list__block-mobile-toolbar { display: flex; flex-direction: row; - margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. + margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. margin-right: -$block-padding; margin-bottom: -$block-padding - $border-width; margin-left: -$block-padding; @@ -866,10 +871,20 @@ left: 0; .editor-block-list__block[data-align="right"] & { + /*!rtl:begin:ignore*/ left: auto; right: 0; + /*!rtl:end:ignore*/ } + .editor-block-list__block[data-align="left"] & { + /*!rtl:begin:ignore*/ + right: auto; + left: 0; + /*!rtl:end:ignore*/ + } + + @include break-small() { width: auto; } @@ -906,7 +921,7 @@ padding: 4px 4px; background: theme( outlines ); color: $white; - + // Animate in .editor-block-list__block:hover & { @include fade_in( .1s );