Make WordPress Core

Opened 6 weeks ago

Closed 3 weeks ago

#66020 closed defect (bug) (fixed)

Fix dashicons arrows in RTL

Reported by: sabernhardt Owned by: joedolson
Priority: normal Milestone: 7.2
Component: General Version: 6.9
Severity: normal Keywords: has-patch
Cc: Focuses: rtl

Description

Commits such as [60806] used the alternative text syntax for CSS content, but the ​Gruntfile does not account for that when switching the direction of the arrows for RTL stylesheets.

As a result, the fallback for old browsers is changed correctly while the modern syntax gives the wrong arrow.
​Example in toolbar:

#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
	content: "\f141";
	content: "\f139" / '';
}

Attachments (1)

66020.diff​ (845 bytes ) - added by sabernhardt 6 weeks ago.

Download all attachments as: .zip

Change History (5)

#1 @joedolson
6 weeks ago

  • Milestone Awaiting Review → 7.2
  • Owner set to joedolson
  • Status new → accepted

@sabernhardt
6 weeks ago

#2 @sabernhardt
6 weeks ago

66020.diff​ is not very polished, but it removes the empty alternative text syntax before comparisons and then adds it back at the end.

This ticket was mentioned in ​PR #13361 on ​WordPress/wordpress-develop by ​@khokansardar.


6 weeks ago
#3

  • Keywords has-patch added

In RTL admin screens some dashicons arrows point the wrong way, with the old-browser fallback flipped correctly and the modern value not flipped.

The swap-dashicons-left-right-arrows rtlcss plugin in Gruntfile.js compares each content value against the six arrow glyphs by exact string equality, so a declaration written with alternative text, as in content: "\f141" / '';, never matches. This sets the alternative text aside before the comparison and restores it afterwards.

Seventeen declarations across seven generated stylesheets change, including the toolbar submenu arrows named in the ticket.

Trac ticket: https://core.trac.wordpress.org/ticket/66020

## Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: diagnosing the rtlcss value comparison and drafting the Gruntfile change. All changes were reviewed and validated by me.

#4 @lancewillett
3 weeks ago

  • Resolution → fixed
  • Status accepted → closed

In 63885:

Build/Test Tools: Correct RTL arrows with alternative text.

Set aside CSS content alternative text before matching directional Dashicons, then restore it after swapping the glyph. This keeps modern declarations consistent with their legacy fallbacks in generated RTL stylesheets.

Developed in: ​https://github.com/WordPress/wordpress-develop/pull/13361

Props khokansardar, sabernhardt, joedolson.
Fixes #66020.

Note: See TracTickets for help on using tickets.