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

Navigation Component: Add Support for RTL Languages #26334

Merged
merged 9 commits into from
Oct 26, 2020

Conversation

jeyip
Copy link
Contributor

@jeyip jeyip commented Oct 20, 2020

Paired programmed with @mattwiebe for these code changes

Description

There are several arrow symbol and navigation items that need to be adjusted (or even moved) according to the RTL directions.

How has this been tested?

Site Editor

  1. Enable the site editor locally
  2. Set the navigation language to one that requires an RTL view (arabic, hebrew, etc.)
  3. Navigate to the site editor
  4. Ensure that the UI and animations mirror the sidebar for LTR languages (english, spanish, etc.)

Storybook

  1. Navigate to a local copy of the Gutenberg repo in a terminal shell
  2. Run yarn storybook:dev
  3. In the left sidebar, select the Navigation component
  4. Use the chrome dev tools inspector and select an area near the example navigation component
  5. Add the dir="rtl" attribute to the HTML element of the iframe
  6. Verify that RTL language support works as expected

Screenshots

Before

2020-10-20 13 49 15

After

2020-10-20 16 38 58

Types of changes

Fixes #25997

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@jeyip jeyip added [Type] Bug An existing feature does not function as intended Internationalization (i18n) Issues or PRs related to internationalization efforts [Feature] Full Site Editing labels Oct 20, 2020
@jeyip jeyip requested review from david-szabo97 and Copons October 20, 2020 20:52
@github-actions
Copy link

github-actions bot commented Oct 20, 2020

Size Change: +111 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/components/index.js 172 kB +111 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.53 kB 0 B
build/api-fetch/index.js 3.34 kB 0 B
build/autop/index.js 2.73 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.58 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 130 kB 0 B
build/block-editor/style-rtl.css 11 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 8.93 kB 0 B
build/block-library/editor.css 8.93 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.75 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.62 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/data-controls/index.js 679 B 0 B
build/data/index.js 8.61 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.7 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.37 kB 0 B
build/edit-post/style.css 6.35 kB 0 B
build/edit-site/index.js 22.2 kB 0 B
build/edit-site/style-rtl.css 3.79 kB 0 B
build/edit-site/style.css 3.79 kB 0 B
build/edit-widgets/index.js 26.6 kB 0 B
build/edit-widgets/style-rtl.css 3.09 kB 0 B
build/edit-widgets/style.css 3.09 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 42.6 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.47 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.55 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.38 kB 0 B
build/keycodes/index.js 1.84 kB 0 B
build/list-reusable-blocks/index.js 3.01 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.11 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.26 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.35 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@jeyip
Copy link
Contributor Author

jeyip commented Oct 20, 2020

Paired programmed with @mattwiebe for these code changes

@jeyip jeyip force-pushed the add/navigation-component-rtl-support branch 2 times, most recently from 79113ff to 6530922 Compare October 20, 2020 23:36
export const ItemTitleUI = styled( Text )`
margin-right: auto;
text-align: left;
`;
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd imagine that if we used SCSS directly, we'd have gained automatic RTL versions. 🤔

Copy link
Member

Choose a reason for hiding this comment

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

Too bad styled-components doesn't have RTL support. I found a snippet that seems to work though: https://codesandbox.io/s/7w2pk6zz1x?file=/src/index.js

It uses https://github.com/cssjanus/cssjanus under the hood

Maybe worth experimenting with it?

Copy link
Contributor

Choose a reason for hiding this comment

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

Possibly?
I haven't followed the development of G2 and styled components in Gutenberg, so I'm not sure!
Let's involve @ItsJonQ!

Copy link
Member

Choose a reason for hiding this comment

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

We either use something automatic or develop our own little utils. Like we could have {padding('1px 2px 3px 4px')} function that properly replaces the values if document is in RTL mode.

Copy link
Contributor Author

@jeyip jeyip Oct 21, 2020

Choose a reason for hiding this comment

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

Great points! We used the pattern we saw here packages/components/src/input-control/styles/input-control-styles.js:275 as an example, but I'm on board for standardization

I'd love to hear Jon Q's input as well.

Copy link

Choose a reason for hiding this comment

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

Haii!!

Too bad styled-components doesn't have RTL support

@david-szabo97 You are correct! There isn't a standardized way to handle RTL within CSS-in-JS yet.
There are several strategies, but the implementation differs between libraries.

(Will share more insight below, but first...)

We either use something automatic or develop our own little utils."

We have one :)

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/utils/rtl.js
It's a very naive (and tedious) way to do it.

I would love for that process to be automated.

☀️ Thoughts

For run-time compiled styles (e.g. Emotion/Styled components), you're able to tap into the inner CSS compiler (Stylis) and add custom plugins. This "middleware" layer allows you to transform CSS styles just before they're rendered.

Naturally, this is where folks would add plugins to handle things like RTL (which is what G2 Components does).

There's a couple more details to this, which I'll add in the ending notes:

The go-to RTL (JS) library is CSSJanus. Unfortunately, it is licensed under Apache 2.0, which is currently not compatible with Gutenberg's license.

(That means that G2's RTL implementation will need to be removed if/when integrated into Gutenberg)

My regex skills aren't strong enough to create my own RTL solution. (I tried).

Hopefully this helps!

📝 Notes

  • RTL in CSS-in-JS can be achieved by tapping into the plugin/middleware layer for Emotion
  • A stylis RTL plugin can be added
  • This needs to be added to a custom Emotion cache
  • For Gutenberg's usage of emotion, (using styled), this can be achieved by creating and using an Emotion cache provider. All styled components would render inside. Something like this.

Bonus: G2 Components can achieve this without a provider due to it's custom Emotion implementation

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the insight here Jon! Much appreciated.

@Copons
Copy link
Contributor

Copons commented Oct 21, 2020

This works well and it's almost there! ✨

Testing in the storybook ("More Examples" story), I've noticed that group titles and item badges have incorrect paddings:

LTR RTL
Screenshot 2020-10-21 at 12 35 42 Screenshot 2020-10-21 at 12 35 56

@jeyip
Copy link
Contributor Author

jeyip commented Oct 21, 2020

Updated alignment:
Screen Shot 2020-10-21 at 11 09 55 AM

Side Note:
It looks like RTL CSS processing doesn't happen for storybook example styles like packages/components/src/navigation/stories/style.css. It's why the custom WordPress icon was offset as well.

@mattwiebe
Copy link
Contributor

Working well for me 👍

Copy link
Member

@david-szabo97 david-szabo97 left a comment

Choose a reason for hiding this comment

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

LGTM! 🚢

@jeyip jeyip force-pushed the add/navigation-component-rtl-support branch from b7d3b38 to 675f4bc Compare October 23, 2020 21:38
margin-left: ${ ( props ) => ( props.isRTL ? '0' : '8px' ) };
margin-right: ${ ( props ) => ( props.isRTL ? '8px' : '0' ) };
margin-left: ${ ( props ) => ( props.isRTL ? '0' : space( 1 ) ) };
margin-right: ${ ( props ) => ( props.isRTL ? space( 1 ) : '0' ) };
display: inline-flex;
padding: 4px 12px;
Copy link
Member

Choose a reason for hiding this comment

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

Can we use space here too?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah my mistake David. I didn't see these comments because I was focused on getting the e2e tests to pass, but I agree that they should be switched to space.

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'm going to open up a quick PR to update all pixel values to use space

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@@ -126,7 +129,9 @@ export const MenuTitleSearchUI = styled.div`
export const GroupTitleUI = styled( Text )`
margin-top: 8px;
Copy link
Member

Choose a reason for hiding this comment

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

Can we use space here too?

Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

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

LGTM!

@david-szabo97 makes valid points, but are ultimately unrelated to this PR (and related to whoever wrote the component in the first place 😷 ), so they shouldn't be blockers here, and can be addressed in a follow-up, or even whenever we actually do a proper design review of the whole component.

@jeyip jeyip force-pushed the add/navigation-component-rtl-support branch from 2f3a12c to 70affaa Compare October 26, 2020 16:21
@jeyip
Copy link
Contributor Author

jeyip commented Oct 26, 2020

Thanks for the reviews! I'm rebasing master periodically, and will merge this PR whenever the Github CI checks aren't imploding 💥

@jeyip jeyip force-pushed the add/navigation-component-rtl-support branch from 70affaa to a129864 Compare October 26, 2020 17:53
@jeyip
Copy link
Contributor Author

jeyip commented Oct 26, 2020

The Unit Tests / PHP (pull_request) github actions job is failing, but it matches failures already seen on the master branch. All other jobs are passing, so I'm merging this PR.

@jeyip jeyip merged commit 28cdde9 into master Oct 26, 2020
@jeyip jeyip deleted the add/navigation-component-rtl-support branch October 26, 2020 22:44
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Oct 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Internationalization (i18n) Issues or PRs related to internationalization efforts [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation Component: Add Support for RTL Languages
5 participants