Skip to content

Accordion Header: Toggle button text and icon have incorrect layout in RTL languages #71478

@t-hamano

Description

@t-hamano

Description

Flex layout automatically positions child elements based on document orientation. In other words, in the RTL language, flex elements are placed from right to left with no additional CSS.

Therefore, we should remove this style.

/* RTL language support */
[dir="rtl"] .wp-block-accordion-header:not(.icon-position-left) .accordion-content__toggle {
/* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
flex-direction: row-reverse;
}
[dir="rtl"] .wp-block-accordion-header.icon-position-left .accordion-content__toggle {
flex-direction: row;
}

Actual Expected
Image Image

Step-by-step reproduction instructions

  • Change the site language to Arabic.
  • Insert an Accordion block.
  • Ensure the toggle icon is positioned to the right of the toggle text.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

Good First IssueAn issue that's suitable for someone looking to contribute for the first time[Block] AccordionAffects the Accordion Block[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions