-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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: Flip some dashicons that have directionality #3912
Conversation
`editor-outdent`, `editor-indent`, `list-view`, and `editor-ul` can and should be flipped in RTL `editor-ol` needs an RTL version: WordPress/dashicons#250
components/panel/style.scss
Outdated
@@ -133,3 +133,14 @@ | |||
.components-panel .circle-picker { | |||
padding-bottom: 20px; | |||
} | |||
|
|||
body.rtl .gutenberg .dashicon { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this should probably go in a dashicons scss: https://github.com/WordPress/gutenberg/tree/master/components/dashicon
/** | ||
* Internal dependencies | ||
*/ | ||
import './style.scss'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file is generated, so this import would be overwritten next time the Dashicons is updated. It seems like the RTL flipping could be valuable to have in the base Dashicons repository, but in keeping it generic we'd not want to assume the presence of an .rtl
body class. Would it be reasonable to detect RTL from JavaScript inside the component class and apply an inline style?
https://github.com/WordPress/dashicons/blob/master/sources/react/index-header.jsx
https://github.com/WordPress/dashicons/blob/master/sources/react/index-footer.jsx
@@ -0,0 +1,10 @@ | |||
body.rtl .gutenberg .dashicon { | |||
&.dashicons-editor-outdent, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mixed whitespace, tabs and spaces.
@yoavf do you plan to finish this PR or should someone else take it over? |
Closing as stale without response. |
Description
editor-outdent
,editor-indent
,list-view
, andeditor-ul
can and should be flipped in RTL.editor-ol
(not taken care of yet) needs an RTL version: RTL version needed for editor-ol dashicons#250How Has This Been Tested?
Manual testing in LTR and RTL mode
Screenshots (jpeg or gifs if applicable):
Before:


After


Types of changes
CSS that will affect the RTL version, and will flip the icons.
Checklist: