i18n: Add isRTL function

[sirreal]

Description

Add isRTL function for checking whether the locale is right-to-left.

This follows the implementation of WP_Locale::is_rtl().

https://developer.wordpress.org/reference/classes/wp_locale/is_rtl/

Part of #19212.

The unit tests have been slightly restructured to provide isolation of the i18n module between tests.

How has this been tested?

Includes unit tests.

Types of changes

New feature (non-breaking change which adds functionality)

Add isRTL function to @wordpress/i18n.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[simison]

Code looks good, thanks for adding docs and improving tests!

I haven't tested this in any way other than confirming that tests run.

[youknowriad]

Interesting way of checking the rtl direction :)
We have a few different ways of doing it already in the code base, do you think we should update our existing checks to use this new function?

[sirreal]

Interesting way of checking the rtl direction :)

It seems to be the canonical way of specifying direction in WordPress. See https://github.com/WordPress/WordPress/blob/511a297fb4b89ad32e89ea0373347cf92367e1c3/wp-includes/class-wp-locale.php#L217-L219

We have a few different ways of doing it already in the code base, do you think we should update our existing checks to use this new function?

That's what #19212 suggests. I agree that there's value in having a single, well-defined way of checking the text direction.

[simison]

We have a few different ways of doing it already in the code base, do you think we should update our existing checks to use this new function?

Spotted here:

gutenberg/packages/components/src/utils/rtl.js

Lines 6 to 8 in 61e936c

	function getRtl() {
	return !! ( document && document.documentElement.dir === 'rtl' );
	}

[youknowriad]

yes, we also have a setting in the block-editor store I believe and another check in the Popover component.

[simison]

@youknowriad would you expect to see those uses updated in this PR or good for follow-ups?

[youknowriad]

I'm totally fine if we merge this as is :)

But I've been promised follow-ups in the past and sometimes they just don't happen :P

[sirreal]

I'll merge this in the next few days unless there are issues or there's a good reason to wait.

I didn't plan to modify anything beyond @wordpress/i18n with this, but I can certainly help to migrate existing functionality to use isRTL in follow-up changes.

[aduth]

Arriving to this late since I'm only recently returning from AFK, but seems like a reasonable addition to me 👍

[sirreal]

We have a few different ways of doing it already in the code base, do you think we should update our existing checks to use this new function?

I started to look at this and have some concerns. There's currently a mix of reactive (re-renders as necessary) and non-reactive RTL lookups.

For example, this "hook" looks reactive, but isn't:

gutenberg/packages/components/src/utils/rtl.js

Lines 6 to 15 in a46cd2f

	function getRtl() {
	return !! ( document && document.documentElement.dir === 'rtl' );
	}
	/**
	* Simple hook to retrieve RTL direction value
	*/
	export function useRtl() {
	return getRtl();
	}

This is reactive, but doesn't know anything about RTL and is reading a value from a data store:

gutenberg/packages/block-library/src/paragraph/edit.js

Lines 37 to 39 in 67e2df7

	const isRTL = useSelect( ( select ) => {
	return !! select( 'core/block-editor' ).getSettings().isRTL;
	}, [] );

Then there are straightforward cases like this:

gutenberg/packages/components/src/range-control/rail.js

Line 51 in a46cd2f

const isRTL = document.documentElement.dir === 'rtl';

---

Replacing the reactive RTL setting lookups with isRTL at this time seems undesirable. Would the isRTL setting disappear from block-editor?

gutenberg/lib/edit-site-page.php

Lines 65 to 71 in 320f460

	$settings = array(
	'disableCustomColors' => get_theme_support( 'disable-custom-colors' ),
	'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
	'imageSizes' => $available_image_sizes,
	'isRTL' => is_rtl(),
	'maxUploadFileSize' => $max_upload_size,
	);

I'd like to see RTL information come from the locale and be updated in a reactive way. Perhaps is worth waiting for #19210 to be resolved?

[youknowriad]

Replacing the reactive RTL setting lookups with isRTL at this time seems undesirable. Would the isRTL setting disappear from block-editor?

I think it's fine, we just need to add a dev note about it. It's unlikely that anyone aside us is using that setting right now.

[sirreal]

I've started some work on using isRTL throughout Gutenberg: #22806