Tailwind & UI library: Improve RTL support

[igorschoester]

Note

Comes with a matching Premium PR to prevent some clashing directions: https://github.com/Yoast/wordpress-seo-premium/pull/4545.

Context

• RTL support is something we relied on the Grunt process for. A plugin built process. However, within separate package we already want to support RTL "out of the box". But the grunt task is too greedy in its reversal, resulting in reversed RTL, e.g. back to LTR again.
• This PR aims to make the UI library support RTL out of the box. Stopping the interference from the plugin. And where needed (most likely lots of places) fix the places where the grunt RTL did the work for us in the plugin.

Some sources:

• https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
• Nice list of logical properties support in TailwindCSS: Add logical properties support for inline direction tailwindlabs/tailwindcss#10166 landing in https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.0
• MDN on logical properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
• Our "default" Grunt RTL CSS config: https://github.com/Yoast/plugin-grunt-tasks/blob/develop/config/rtlcss.js#L47
• Our assets trying to load in -rtl stylesheet: https://github.com/Yoast/wordpress-seo/blob/trunk/admin/class-admin-asset-seo-location.php#L77

Note

Disclaimer: I'm not that familiar with RTL, trying to just fix the obvious.
There are nuances like a HTML code block that might need direction: ltr enforcing. However, due to me not knowing if that is always the case I left things like that out. Maybe @vraja-pro has a better view on those for a follow-up 😉

Summary

This PR can be summarized in the following changelog entry:

• Improves RTL support in certain areas like the mobile menu in dashboard and settings.
• [@yoast/ui-library 0.1.0 enhancement] Improves the RTL support.
• [@yoast/ui-library 0.1.0 enhancement] Upgrades the Root reset styling to match the Tailwind v3.4.16 preflight style.
• [@yoast/ui-library 0.1.0 enhancement] Adds optional onClear to the Autocomplete to support detecting of the difference between a null value and the user clearing the value.
• [@yoast/ui-library 0.1.0 enhancement] Improves the RTL support in the Pagination component to always have the LTR direction.
• [@yoast/ui-library 0.1.0 bugfix] Fixes a bug where the Autocomplete would have an empty trailing space after the input, which would especially show when using nullable.
• [@yoast/ui-library 0.1.0 other] Fixes a bug in the storybook where the RTL styling would not affect the dialogs.
• [@yoast/postcss-preset 0.1.0 other] Upgrades TailwindCSS to v3.4.16.
• [@yoast/related-keyphrase-suggestions 0.1.0 other] Upgrades TailwindCSS to v3.4.16.
• [@yoast/tailwindcss-preset 1.0.0 enhancement] Upgrades peer dependency tailwindcss from ^3.2.4 to ^3.3.7. 3.3.0 is the version that is improving the RTL support through logical properties (start/end).

Relevant technical choices:

• Excluding Tailwind stylesheet from being processed by Grunt RTL, preventing "double" RTL == LTR again. The UI library should be self reliant for RTL already. This has consequences for devs though. We can no longer rely on the auto direction changes of the Grunt RTL CSS plugin and need to ensure ourselves. If we adapt to logical properties this should be straight forward though.
• Not sure about the breaking change in the TailwindCSS preset package. Nothing is preventing us from upgrading to the wanted version. Just that the UI library RTL CSS would not work if actually that version. So seems safer to just require it to the minimum version we need for logical properties.
• Used the same latest version for TailwindCSS and forms in each package in this monorepo. In order to not have to test all the PostCSS version control things? Not sure how even.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

The headings below are structured per commit, which is alphabetical per elements and then components.
This was just the easiest for me to go about the code changes. However, in the plugin, there is more to it than the code changes. Therefor, the latter ones are more per plugin page/section.

Important

It makes sense to activate our other add-ons too.
The instructions are mostly from what is changes.
However, please check for things that I might've missed too!!

Note

Please ignore LTR on code HTML
They are added through WP style. I'm told this makes sense for code blocks.

Tip

Switching between RTL

• the fake method by using the RTL tester plugin to get a button in the admin bar
• the real method by opening /wp-admin/options-general.php in a new tab. Besides manually changing the language, you can also do the same by running some JS in the console (in case you can't read the language 😁 ):
  • Hebrew: document.getElementById("WPLANG").value = "he_IL"; document.getElementById("submit").click()
  • Default: document.getElementById("WPLANG").value = ""; document.getElementById("submit").click()

Tip

For devs:

• For premium: you can symlink this PR free inside the vendor/yoast folder and build (after building Free first).
• UI library: in free run the UI library storybook: yarn workspace @yoast/ui-library storybook

Update tailwindcss and @tailwindcss/forms

Upgrading the packages in the plugin and all the tooling. And updating the style reset in the Root of the UI library. In theory this can impact everything inside the yst-root.

Technically anything can happen here. But in reality I would not spend too much time here. Some quick regression tests should suffice.

Where is the Root from the UI library used?

Yoast admin (all our JS/React pages)

• General page
• Settings page
• Integrations page
• Academy page
• Support page

Editors

• Errors: maybe skip these if the rest works? 😇
  • Metabox error fallback
  • Sidebar error fallback
  • Elementor error fallback
• Semrush related keyphrases modal content
• WooCommerce upsell
• Social upsell

Other

• Any page with introductions

Refactor Autocomplete element

Specifically the icon at the "end" and when it can be cleared (nullable).

• Go to the dashboard: /wp-admin/admin.php?page=wpseo_dashboard
• Filtering on a term should show the clear button
• Verify the space between the input text and the button is not needlessly big like before
• Verify the clear button focus is mostly the icon and all the height (a bit stranger than normal icon buttons)
  
• Repeat for RTL or LTR
• Devs: verify in the Autocomplete element and Autocomplete field components stories in the storybook for both RTL and LTR

Fix loading button RTL

Specifically the distance from the spinner to the text of the button.

• Go to settings /wp-admin/admin.php?page=wpseo_page_settings
• Change a setting
• Save and look at the loading/spinner inside the button
• Repeat for RTL or LTR
• Devs: verify the button element' isLoading variant story in the storybook for both RTL and LTR

Fix checkbox RTL

Not actually used in the plugin. But specifically the distance between the label and the checkbox.

• Devs: verify the checkbox element story in the storybook for both RTL and LTR

Fix validation input icon placement

Fix validation RTL

Good to test these together probably.
For the icon placement look out for the distance from the top of the validation icon to the top of the input.
For the other it is the distance that is created for the icon at the end of the input and the position of the icon itself.

• Go to site representation settings: /wp-admin/admin.php?page=wpseo_page_settings#/site-representation
• Change the X or Twitter URL to include unsupported characters like $#%$#%
• Save and you will get the error validation variant

* Repeat for RTL or LTR * Devs: verify the text field component's validation story in the storybook for both RTL and LTR

Fix file input RTL

Fix file import RTL

Combining these here. Only in Shopify and UI library storybook.
Look out for the labels text being in the expected direction.
Look out for the feedback header spacing (distance between the icons and progressbar):

• Devs: verify the file input element story in the storybook for both RTL and LTR
• Devs: verify the file import component story in the storybook for both RTL and LTR

Fix radio RTL

Specifically the distances between the radios and the labels. And the check in the inline block variant.

• Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-representation
• The site represented is a normal radio site/user
• Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-basics
• The separator is the inline block variant
• Repeat for RTL or LTR
• Devs: verify the radio element and radio group component stories in the storybook for both RTL and LTR

Fix select RTL

Fix select field story RTL

Combined checks. Not actually be used in the plugin yet.
The text is start aligned and the icon is end aligned.
For the story: the badge should be spaced away from the label

• Devs: verify the select element and select field component stories in the storybook for both RTL and LTR
  • Specifically also check the with label suffix story for the badge spacing

Fix skeleton loader story RTL

Only touched the UI library storybook part. No need to check the plugin.
Specifically, the spacing between the round profile and the rest.

• Devs: verify the skeleton loader element' Profile story in the storybook for both RTL and LTR

Fix table RTL

The rounding of the header/row corners and the alignment of the header text.

• Go to /wp-admin/admin.php?page=wpseo_page_settings#/rss
• Verify it looks as it should
• Repeat for RTL or LTR
• Devs: verify the table element story in the storybook for both RTL and LTR

Refactor tag input style

The height of the tags themselves and the padding at the end / "after" the remove (x) button.

• Go to /wp-admin/admin.php?page=wpseo_page_settings#/post-type/posts#input-wpseo_titles-page-analyse-extra-post
• Play around with some tags
• Verify it looks as it should
• Repeat for RTL or LTR
• Devs: verify the tag input element and tag field component stories in the storybook for both RTL and LTR

Fix toast description RTL

A toast description (list) should now have the distance between the discs and the edge correct in RTL.
Used in the Notification of the UI library, when passing a description. Which I don't think we use in a plugin.

• Devs: verify the toast element' with description and notifications component' description list stories in the storybook for both RTL and LTR

Refactor toggle RTL

The handle when checked should move the correct way.

• Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-features (also found on the integrations page)
• Toggle a toggle 😄
• Repeat for RTL or LTR
• Devs: verify the toggle element and toggle field component stories in the storybook for both RTL and LTR

Fix tooltip RTL

Fix toggle field description RTL

Combining these two changes.
The position of the tooltip compared to the parent, the arrow of the tooltip. Basically all the positioning.
For the toggle field: the distance from the description and the toggle itself should be correct.

• Go to the dashboard: /wp-admin/admin.php?page=wpseo_dashboard
• Click before not analyzed and tab (easier to see with the focus visible outline)
• Verify the tooltip is in the middle and looks as expected

* You could check the editor `Get related keyphrase` semrush integration table for a to the middle positioning * Repeat for RTL or LTR * Devs: verify the tooltip element story in the storybook for both RTL and LTR * Verify all the positions * Devs: verify the toggle field component story in the storybook for both RTL and LTR

Fix storybook preview HTML dir

Devs: for example in the modal story you would now get the modal itself in RTL too. You can check that the html in the iframe receives the dir attribute as per the direction toggle.

Fix feature upsell RTL

The lock icon moving slightly more to the border of the button (away from the text). And only for the storybook, without any text it does not move away anymore, so centered now.

• Deactivate Premium
• There are multiple instances, but lets go to /wp-admin/admin.php?page=wpseo_page_settings#/crawl-optimization#input-wpseo-deny_google_extended_crawling
• Repeat for RTL or LTR
• Activate Premium again
• Devs: verify the feature upsell component story in the storybook for both RTL and LTR

Fix modal close RTL

The close button alignment should be towards the end.

• Go to settings: /wp-admin/admin.php?page=wpseo_page_settings#/site-features
• Change a settings
• Click discard changes at the bottom
• Verify the close button in this confirmation dialog
• Also used in the editors for the AI fix assessments and AI generator modals. But they all work the same?
• Repeat for RTL or LTR
• Devs: verify the modal component story in the storybook for both RTL and LTR

Fix notifications bottom-left in RTL

Should be already checked due to the previous steps. But you can repeat the X/Twitter field error to get a notification pop up again.

• Devs: verify the notifications component story in the storybook for both RTL and LTR

Fix pagination RTL

Not used in Free. Only in Premium. See that PR for more instructions.
As per feedback on this PR. The pagination should be LTR only due to numbers always being LTR.

• Devs: verify the pagination component story in the storybook for both RTL and LTR -- i.e. always the same
  • Flip through the pages a bit to verify no double borders

Fix sidebar navigation RTL

Collapsible chevron icon spacing should be to the end.
The mobile menu close should be next to the menu (not under it?).
The indentation of the menu items should be correct.

• Used in both Dashboard and settings. But settings has submenu items, so go to: /wp-admin/admin.php?page=wpseo_page_settings#/site-features
• Verify the 3 things above
• Repeat for RTL or LTR
• Devs: verify the sidebar navigation component story in the storybook for both RTL and LTR

Exclude Tailwind from Grunt RTL build

This is potentially more invasive. As it affect ALL the previously thought fixed RTL things.
Some context. The Grunt RTL task basically reversed all the known LTR styles. This interferes with the standalone RTL of the UI library (as a package). So the goal is that this PR makes that RTL pass irrelevant. So please verify if that is true.

We need to go over basically everywhere we use the UI library/Tailwind style. I tried to do this and fix all the things I ran into, related to this change or not 😅
So please pay some extra attention to spacing, icons appearing in expected order, borders.

• Verify the css/dist folder does not include a tailwind-xxx-RCx-rtl.css file (note the -rtl at the end).

General page

• Go to /wp-admin/admin.php?page=wpseo_dashboard
• Best to reset some notifications and ensure you have some, using the Test helper.
• Deactivate Premium
• Verify the webinar header should is not centered anymore in RTL
• Verify the upsell sidebar location and contents
• Activate Premium
• Go to the Alert center
• Hide a notification or problem
• Verify the collapsible icon is at the end
• Verify a single notification or problem' contents is spaced as expected, hidden within the collapsible and outside
• Go to the FTC
• There are lots of little tweaks here for RTL
• Please walk through the whole flow, mostly looking at the spacing between icons and the positioning of text

Settings page

• Deactivate Premium
• Go to /wp-admin/admin.php?page=wpseo_page_settings
• Verify the location of the upsell sidebar
• Verify the upsell footer' indenting of the list discs (inline with title, same distance from edge)
• Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-features
• Verify the lock in the locked buttons are slightly towards the "start"
• Verify the learn more arrows are pointing towards the "end", away from the copy
• Verify the XML sitemaps' icon is pointing towards the "end"
• Activate Premium
• Deactivate Local
• Verify any badges are at the "end" of the cards
• Go to the site representation: /wp-admin/admin.php?page=wpseo_page_settings#/site-representation
• Verify the position of the link to add a new user
• Verify the space between the premium badge and text (Mastadon label + two organization section headers)
• Verify the plus icon for the Add another profile is slightly towards the "start" of the button
• With a change:
  • Verify the spacing between the save and discard buttons
  • Click the discard changes button
  • Verify the distance between the alert icon and the title + description is there
  • Verify the title + description is aligned to the start -- (no need to test, but centered on mobile/small screen)
  • Also already tested above: the close button
• Activate Local
• Fill in some non-urls and/or unsupported characters in the a couple social profiles
• Try to save
• Verify the list discs are aligned properly
  
• Look at the search in the menu
  
• Verify the icon spacing and the shortcut is at the end
• Open the search dialog
• Verify the icon and button spacing again, including closing at the end
• Search for breadcrumbs in the language you are testing with as the search is translated (פירורי לחם in Hebrew )
• Verify the space between the post type code and text (Note: I didn't use ms class here as that failed 🤯 )
  
• Go to the breadcrumbs page (click on the search?)
• Verify the labels also have the correct space between the text and post type code for both post types and taxonomies
• Go to /wp-admin/admin.php?page=wpseo_page_settings#/crawl-optimization#input-wpseo-deny_google_extended_crawling
• Verify the space between the label' text and premium badge
• Verify the same for the label of /wp-admin/admin.php?page=wpseo_page_settings#/site-basics#input-wpseo_titles-publishing_principles_id
• Verify the same for the label of /wp-admin/admin.php?page=wpseo_page_settings&d=rtl#/post-type/posts#input-wpseo_titles-page-analyse-extra-post

Installation page

• Go to /wp-admin/admin.php?page=wpseo_installation_successful_free
• Verify the arrows are pointing away from the text / to the purple card
• Verify the start FTC button has the correct spacing between the text and the arrow
  

Academy page

• Go to /wp-admin/admin.php?page=wpseo_page_academy
• Verify the external link icon is pointing up and away from the text
• Verify the external link icon has slightly more distance from the text and less from the edge/end (weird to spot with centering)
• Verify the premium badge is at the top and end of the cards
• Disable Premium and refresh the academy page
• Verify the lock icon is slighly more to the start of the button

Editor

• Edit a post in the block or classic editor
• Deactivate Premium
• Verify the metabox buttons' icon spacing and text alignment
  
• For the metabox: verify the space between the lock icon and the text within the Premium badge too
• Ensure you have an introduction text that does not have the focus keyphrase in it (change focus keyphrase?)
• Go to the SEO analysis
• Click an fix assessments upsell button (magic wand with tiny lock icon)
• In that upsell modal:
  • Verify the beta badge' position (at the "end")
  • Verify the lock icon is spaced correctly and a tiny bit towards the edge
  • Click to see the video
  • Verify the beta badge again
• Click on the SEO title or descriptions' Use AI button
• In that upsell modal, verify the same as above for the fix assessments modal; Just the position of the beta itself is within the image now
• Activate Premium
• Check again for the Premium ones
• Unresolved: Primary taxonomy picker's external link icon (due to WP component + styling)
• Deactivate Premium
• Deactivate Yoast WooCommerce SEO
• Edit a product
• Verify the lock icon tiny bit to the "start" for the upsell in
• Activate Yoast WooCommerce SEO
• Edit a post in Elementor
• Make sure you get a highlighting suggestion (long sentences?)
• Verify the lock icon on the eye/highlight button is at the "end", towards the page content
  
• Activate Premium again
• Note: please ignore the text-right on the semrush table tooltip. Will be fixed later by removing fixed widths so it relies on the justify-end.

Integration page

• Go to /wp-admin/admin.php?page=wpseo_integrations
• Non devs might need a multisite and some playing around with the network activated to really test all the badges, but I reckon this is overkill 😅
• Badges to verify are located at the "end": Network disabled, New
• For a Algolia, WooCommerce, any togglable and any non-toggleable integration
• Disable Premium
• Verify the lock icon spacing and should be tiny bit towards the "start" of the button

Support page

• Deactivate Premium
• Go to /wp-admin/admin.php?page=wpseo_page_support
• Verify the sidebar placement
• Verify the arrows and spacing between them and the text in the list, in the cards and in the support button at the bottom
• Verify the lock on the bottom support upsell spacing and slighty towards the start (away from the text)

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

• All the Tailwind, UI library and related keyphrases (Semrush) styling. And in particular when using a RTL locale.

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes #21887

[coveralls]

Pull Request Test Coverage Report for Build b83a4d73bfedd29bf04a2f5f80cb98ff760c77cf

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 0 of 2 (0.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 54.626%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/first-time-configuration/tailwind-components/base/text-input.js	0	2	0.0%

Totals
Change from base Build a4a6bf599784a0a4d234c7594880f0ca4bcabcf7:	0.0%
Covered Lines:	30105
Relevant Lines:	55467

---

💛 - Coveralls

[vraja-pro]

CR & AC ✅

[vraja-pro]

For the Premium badge isn RTL, we can keep it as is.
Great work!

[hardikgohil7988]

Checked all above listed scenarios with RTL languages like Hebrew and Arabic.