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.

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 showing/hiding the right block side UI on RTL languages #6400

Merged
merged 1 commit into from
Apr 25, 2018

Conversation

youknowriad
Copy link
Contributor

closes #6366

In RTL languages, if we hover the right area, the left side UI was shown and vice verca. This PR fixes it.

Testing instructions

  1. Change wordpress admin language to an RTL language such as arabic
  2. On new post, create a new block.
  3. Try to delete the post by clicking on the trash can icon.
  4. you'll notice the trash can disappear when the cursor is in the right place and reappear only when the cursor is on the other side of the block.

(Do the same on LTR languages as well)

@youknowriad youknowriad added the [Type] Bug An existing feature does not function as intended label Apr 25, 2018
@youknowriad youknowriad added this to the 2.8 milestone Apr 25, 2018
@youknowriad youknowriad self-assigned this Apr 25, 2018
const { width, left, right } = this.container.getBoundingClientRect();

let hoverArea = null;
if ( ( event.clientX - left ) < width / 3 ) {
hoverArea = 'left';
hoverArea = isRtl ? 'right' : 'left';
Copy link
Member

Choose a reason for hiding this comment

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

I think it should be called isRTL, similar to findDOMNode.

Would it make sense to introduce a helper like:
const direction = ( value) => {
if ( ! isRTL) {
return value;
}
return value === ‚right’ ? ‚left’ : ‚right’;
};

My mobile keyboard is a bit limited 😭

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I personally don't think adding this helper will help. I like dumb code :)

I'll update to isRTL

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@youknowriad youknowriad merged commit 0ba1177 into master Apr 25, 2018
@youknowriad youknowriad deleted the fix/rtl-block-side-ui branch April 25, 2018 11:15
nuzzio pushed a commit to nuzzio/gutenberg that referenced this pull request Apr 25, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

On RTL languages buttons appear and disappear incorrectly on hover
2 participants