WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#33786 closed defect (bug) (fixed)

The WP Admin bar secondary item tab's arrow, are opening in wrong direction in RTL sites.

Reported by: Ankit K Gupta Owned by: netweb
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch
Focuses: ui, accessibility, rtl, administration Cc:
PR Number:

Description

In WP Admin bar secondary item tab's arrow, are opening in wrong direction in RTL sites. It should open in same direction of opened sub-items list.

Attachments (5)

sub-items-in -rtl.gif (117.5 KB) - added by Ankit K Gupta 4 years ago.
screen shot of rtl site
33786.patch (438 bytes) - added by Ankit K Gupta 4 years ago.
patch file
screen shot after patch.png (94.5 KB) - added by Ankit K Gupta 4 years ago.
screen shot after patch
33786.diff (377 bytes) - added by yoavf 4 years ago.
33786.2.diff (31.8 KB) - added by netweb 4 years ago.

Download all attachments as: .zip

Change History (11)

@Ankit K Gupta
4 years ago

screen shot of rtl site

@Ankit K Gupta
4 years ago

patch file

@Ankit K Gupta
4 years ago

screen shot after patch

#1 @Ankit K Gupta
4 years ago

  • Keywords has-patch added

#2 follow-up: @netweb
4 years ago

  • Milestone changed from Awaiting Review to 4.4
  • Owner set to netweb
  • Status changed from new to assigned

Thanks Ankit,

Strange this isn't currently working, we actually as part of our build process swap /f141 for /f139 for our RTL CSS:

https://core.trac.wordpress.org/browser/trunk/Gruntfile.js#L206

I'll go take a closer look and find out why it's not working as expected

#3 in reply to: ↑ 2 @Ankit K Gupta
4 years ago

Replying to netweb:

Thanks Ankit,

Strange this isn't currently working, we actually as part of our build process swap /f141 for /f139 for our RTL CSS:

https://core.trac.wordpress.org/browser/trunk/Gruntfile.js#L206

I'll go take a closer look and find out why it's not working as expected

@netweb,
It's my Pleasure.

Thanks for your quick response :)

@yoavf
4 years ago

#4 follow-up: @yoavf
4 years ago

@netweb - swap-dashicons-left-right-arrows expects double quotes. 33786.diff should take care of that.

@netweb
4 years ago

#5 in reply to: ↑ 4 @netweb
4 years ago

Replying to yoavf:

@netweb - swap-dashicons-left-right-arrows expects double quotes. 33786.diff should take care of that.

Right, thanks, also a couple more instances, patch and further details below.

Per CSS Coding standards: https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#values

  • Use double quotes rather than single quotes, and only when needed, such as when a font name has a space.

Patch 33786.2.diff fixes all occurrences of single quotes, missing semi colon, or white space after the colon so that each instance is formatted per our coding standards e.g. content: "\f139";

The resulting patch 33786.2.diff may any other day be seen as “Code refactoring should not be done just because we can.” – Lead Developer Andrew Nacin though in this case by normalising these instances we're able to accurately and dynamically search and replacing these values as part of our Grunt build process here

The results of this patch is many other instances not just the original reported instance where the dashicon had not been replaced by the RTL equivalent per our Gruntfile.js in our Grunt build tools.

Note: 33786.2.diff only touches /wp-admin and /wp-includes, themes in /wp-content should be tackled in a separate ticket.

Last edited 4 years ago by netweb (previous) (diff)

#6 @wonderboymusic
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 34011:

Grunt RTL CSS: swap-dashicons-left-right-arrows in rtlcss:properties expects double-quoted content strings in CSS. It doesn't swap single-quoted values.

Props Ankit K Gupta, yoavf, netweb.
Fixes #33786.

Note: See TracTickets for help on using tickets.