Fix: Permalink editor rtl languages

[jorgefilipecosta]

Description

Fixes: #12729
Improves the permalink editors on RTL languages.
The new design follows the screens shared by @desrosj in #12729.

How has this been tested?

I switched to an RTL language and verified the result I got is the one rendered on the screenshots.

Screenshots

Before:

After:

Before:

After:

[youknowriad]

Ideally, we don't rely on body.rtl as these components can be shown anywhere and not only the editor pages. One way of doing this is to rely on the isRTL of the editor settings. But I'd like to understand why the default RTL handling was not working properly?

[jorgefilipecosta]

Ideally, we don't rely on body.rtl as these components can be shown anywhere and not only the editor pages.
True I will update to use a class conditionally added by isRTL.

But I'd like to understand why the default RTL handling was not working properly?

The default handling was working properly the problem we have is that it looks like even on RTL languages the permalink is not RTL so we trying to force LTR on this zone.

[youknowriad]

Is there a way we could solve this just by using /* rtl:begin:ignore */ as I assume these styles could apply similarily to both directions right?

[jorgefilipecosta]

Is there a way we could solve this just by using /* rtl:begin:ignore */ as I assume these styles could apply similarily to both directions right?

The problem is that direction rtl is inherited so the direction elements are rendered is changed and we need a rule to overwrite the direction in a specific zone.
I also verified that simply adding an ignore on the zone long-content-fade is used does not produces the ideal result. Probably that's the reason long-content-fade receives a direction parameter.

[youknowriad]

Can we force the direction here. Basically what I'm saying is: Can't we just keep these styles you added but remove body.rtl?

[jorgefilipecosta]

Hi Riad, I updated this PR going in the direction you are suggesting, we now don't use body.rtl. Thank you for the feedback 👍

[youknowriad]

Actually, this still appears broken to me when using RTL languages. I have this:

The URLS should show-up like the following screenshots (taken when using English in the dashboard)

[jorgefilipecosta]

Hi @youknowriad, on the RTL languages I'm getting this:

I think that is the expected result. The screenshots you provided look similar to what happens currently on master, maybe there was a caching issue?

[youknowriad]

@jorgefilipecosta you're not using rtl characters in your example, maybe that's related, try some random arabic word in the title/permalink.

[youknowriad]

Also, why your Gutenberg UI don't seem translated?

[swissspidy]

Also, why your Gutenberg UI don't seem translated?

WordPress plugin language packs have been missing the needed JSON files in the past, but this should be fixed now. Try updating your translations.

[youknowriad]

@jorgefilipecosta I wouldn't expect that result personally. I think the UI should still be reversed (from right to left) but the URL should not, the URL should always be shown from Left to Right.

[swissspidy]

Some feedback from actual RTL speakers might be beneficial here :-)

[youknowriad]

Well, I am 🤷‍♂️ an RTL speaker

[swissspidy]

@youknowriad How could I forget, sorry! 🤦‍♂️

[youknowriad]

No worries 😄

[jorgefilipecosta]

Hi @youknowriad this PR was updated following your suggestion:

[youknowriad]

From the mockup, the white gradient seems like it's going in the wrong direction.

[jorgefilipecosta]

Hi @youknowriad, I changed the mockup direction:

But, to make the gradient work as expected I needed to change the text-align, otherwise, the gradient would always cover part of the link even if the link was small:

I'm not sure if this change is something acceptable.

[youknowriad]

@senadir is this something you can help review? It's a bit old but it seemed ready?

[jorgefilipecosta]

I just did a rebase the PR still seems to be valid and review would be helpful :)

[senadir]

I took this in a long spin and it works great, ready to merge