Skip to content

RTL: Fix left/right alignments of blocks #3911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tofumatt merged 3 commits into from
Jul 3, 2018
Merged

RTL: Fix left/right alignments of blocks #3911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e0bef3
Fix left/right alignments of blocks in RTL mode
yoavf Jun 21, 2018
7448b2d
extend the fix for the toolbar location, since its position is defined
yoavf Jun 21, 2018
2697659
fix toolbar rtl: default position shouldn't be ignored, and we should…
yoavf Jun 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions core-blocks/button/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
}

&[data-align="right"] {
/*!rtl:ignore*/
text-align: right;
}
}
Expand Down
23 changes: 19 additions & 4 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Copy Markdown
Member

@tofumatt tofumatt Jun 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To compensate for what? I think this comment is incomplete.

Copy link
Copy Markdown
Member

@gziolo gziolo Jul 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tofumatt - can you update this comment yourself and merge this PR?

Copy link
Copy Markdown
Member

@tofumatt tofumatt Jul 3, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally, will do!

EDIT: I forgot about this PR and realised my issue is I have no idea what this means, but I'll figure it out and address...

.editor-block-contextual-toolbar {
margin-bottom: 1px;
}
Expand All @@ -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
Copy link
Copy Markdown
Member

@tofumatt tofumatt Jun 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's not part of this PR but that's a weird indentation/comment placement, if anymore edits are made it'd be nice to tidy it up 😉

/*!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;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -906,7 +921,7 @@
padding: 4px 4px;
background: theme( outlines );
color: $white;

// Animate in
.editor-block-list__block:hover & {
@include fade_in( .1s );
Expand Down