Skip to content
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

RTL: Fix left/right alignments of blocks #3911

Merged
merged 3 commits into from
Jul 3, 2018
Merged

RTL: Fix left/right alignments of blocks #3911

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
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
}

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

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
Member

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
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;
}
@@ -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
Member

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;
}
}
@@ -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 );