Make WordPress Core

Opened 4 years ago

Closed 21 months ago

#49447 closed defect (bug) (fixed)

Twenty Twenty: style of rtl paragraph

Reported by: amirkamizi's profile amirkamizi Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-patch commit
Focuses: css, rtl Cc:

Description (last modified by SergeyBiryukov)

when changing the language of the website with polylang plugin i noticed everything works perfectly except the alighnment of paragraphs which were still left to right although in the editor i set them to be right to left and it also got the class has-text-align-right

after checking many things I realzed in the style-rtl.css file the mentioned class (has-text-align-right) has text align as left and (has-text-align-left) had text alight to left as well.
so i changed the has-text-align-right to the following and now everything works great

.has-text-align-right {
	text-align: right;

Attachments (2)

49447.diff (303 bytes) - added by mayankmajeji 4 years ago.
has-text-align-right class alignment corrected
49447-1.diff (774 bytes) - added by hasanuzzamanshamim 21 months ago.
Patch created for rtl issue

Download all attachments as: .zip

Change History (13)

#1 @SergeyBiryukov
4 years ago

  • Component changed from Formatting to Bundled Theme
  • Summary changed from style of rtl paragraph for twenty twenty theme to Twenty Twenty: style of rtl paragraph

#2 @SergeyBiryukov
4 years ago

  • Description modified (diff)

#3 @ianbelanger
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.5
  • Severity changed from major to normal
  • Version changed from 5.3.2 to 5.3

4 years ago

has-text-align-right class alignment corrected

#4 @mayankmajeji
4 years ago

  • Keywords has-patch added; needs-patch removed

#5 @ianbelanger
4 years ago

  • Keywords 2nd-opinion added
  • Milestone changed from 5.5 to Future Release

Looking for a second opinion on this one. It seems like if a paragraph is set to align right in LTR, then it should be aligned to the left when using RTL?

#6 @sabernhardt
22 months ago

  • Keywords needs-patch added; has-patch 2nd-opinion removed
  • Milestone changed from Future Release to 6.1

Twenty Twenty's style.css has /*rtl:ignore*/ for the .has-text-align-left, but that is missing for .has-text-align-right. As a result, the theme overrides block library styles on the front end (and not in the editor).

The patch will need to update both style.css and style-rtl.css.

#7 @sabernhardt
21 months ago

#55825 was marked as a duplicate.

21 months ago

Patch created for rtl issue

#8 @hasanuzzamanshamim
21 months ago

  • Keywords has-patch added; needs-patch removed

I think /*rtl:ignore*/ comment will solve this issue.

#9 @sabernhardt
21 months ago

  • Keywords commit added

That patch works for me.

#10 @audrasjb
21 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for final testing and commit.

#11 @audrasjb
21 months ago

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

In 53471:

Twenty-Twenty: Fix paragraph block alignment issues when used on a RTL website.

Twenty Twenty's style.css file has /*rtl:ignore*/ for the .has-text-align-left class, but that was previously missing from the .has-text-align-right class. As a result, the theme overrides block library styles on the front-end (and not in the editor). This changeset adds the missing declaration.

Props amirkamizi, mayankmajeji, ianbelanger, sabernhardt, hasanuzzamanshamim.
Fixes #49447.

Note: See TracTickets for help on using tickets.