Use a dropdown & automate RTL

WordPress · May 5, 2023 · df5bb36 · df5bb36
1 parent efb9211
commit df5bb36
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 26 deletions.
diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php
@@ -39,7 +39,7 @@ function gutenberg_find_first_block( $block_name, $blocks ) {
 function gutenberg_get_block_editor_settings_experimental( $settings ) {
 	$is_block_theme = wp_is_block_theme();
 
-	global $post_ID;
+	global $post_ID, $wp_version;
 
 	if ( ! $is_block_theme || ! $post_ID ) {
 		return $settings;
@@ -83,6 +83,39 @@ function gutenberg_get_block_editor_settings_experimental( $settings ) {
 		}
 	}
 
+	// Add languages to the settings.
+	if ( ! function_exists( 'translations_api' ) ) {
+		require_once ABSPATH . 'wp-admin/includes/translation-install.php';
+	}
+	$api           = translations_api( 'core', array( 'version' => $wp_version ) );
+	$all_languages = array();
+	foreach ( $api['translations'] as $translation ) {
+		$all_languages[] = array(
+			'label' => $translation['native_name'],
+			'value' => str_replace( '_', '-', $translation['language'] ),
+		);
+	}
+	// Add US English option.
+	$all_languages[] = array(
+		'label' => __( 'English (United States)', 'gutenberg' ),
+		'value' => 'en-US',
+	);
+	// Sort languages by value.
+	usort(
+		$all_languages,
+		function( $a, $b ) {
+			return strnatcasecmp( $a['value'], $b['value'] );
+		}
+	);
+	// Add "Other" option.
+	$all_languages[] = array(
+		'label' => __( 'Other', 'gutenberg' ),
+		'value' => '',
+	);
+
+	$settings['languages']  = $all_languages;
+	$settings['userLocale'] = get_user_locale();
+
 	return $settings;
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
@@ -31,6 +31,7 @@
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.js
@@ -16,6 +16,8 @@ import {
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
 import { translation } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 const name = 'core/language';
 const title = __( 'Language' );
@@ -39,12 +41,85 @@ function Edit( props ) {
 	const [ dir, setDir ] = useState( 'ltr' );
 
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+	const { languages, userLocale } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const editorSettings = getEditorSettings();
+		const definedLanguages = editorSettings.languages;
+		return {
+			languages: definedLanguages,
+			userLocale: editorSettings.userLocale.replace( '_', '-' ),
+		};
+	}, [] );
+
+	// Remove duplicates.
+
+	const isStandardLanguage =
+		languages.find( ( l ) => l.value === lang ) && lang !== '';
+	const isRTL = ( checkLanguage ) => {
+		// List of RTL language codes extrapolated from https://github.com/GlotPress/GlotPress/blob/cd8b6c49f9fc7e41020fdb7831a85ae16c576f8b/locales/locales.php
+		const RTLlanguages = [
+			'ar',
+			'arq',
+			'ary',
+			'az',
+			'azb',
+			'bcc',
+			'bgn',
+			'ckb',
+			'dv',
+			'fa',
+			'fas',
+			'ha',
+			'haz',
+			'he',
+			'kmr',
+			'ku',
+			'nqo',
+			'ps',
+			'pus',
+			'sd',
+			'skr',
+			'snd',
+			'ug',
+			'uig',
+			'ur',
+			'urd',
+			'yi',
+			'yid',
+		];
+		return (
+			'' !== checkLanguage &&
+			RTLlanguages.includes( checkLanguage.split[ '-' ][ 0 ] )
+		);
+	};
+
 	const togglePopover = () => {
 		setIsPopoverVisible( ( state ) => ! state );
-		setLang( '' );
-		setDir( 'ltr' );
+		setLang( userLocale );
+		setDir( isRTL ? 'rtl' : 'ltr' );
 	};
 
+	if ( isStandardLanguage ) {
+		if ( isRTL ) {
+			applyFormat( value, {
+				type: name,
+				attributes: {
+					lang,
+					dir: 'rtl',
+				},
+			} );
+		} else {
+			applyFormat( value, {
+				type: name,
+				attributes: {
+					lang,
+					dir: 'ltr',
+				},
+			} );
+		}
+	}
+
 	return (
 		<>
 			<RichTextToolbarButton
@@ -85,29 +160,42 @@ function Edit( props ) {
 							event.preventDefault();
 						} }
 					>
-						<TextControl
-							label={ title }
-							value={ lang }
-							onChange={ ( val ) => setLang( val ) }
-							help={ __(
-								'A valid language attribute, like "en" or "fr".'
-							) }
-						/>
-						<SelectControl
-							label={ __( 'Text direction' ) }
-							value={ dir }
-							options={ [
-								{
-									label: __( 'Left to right' ),
-									value: 'ltr',
-								},
-								{
-									label: __( 'Right to left' ),
-									value: 'rtl',
-								},
-							] }
-							onChange={ ( val ) => setDir( val ) }
-						/>
+						{ ! isStandardLanguage && (
+							<TextControl
+								label={ title }
+								value={ lang }
+								onChange={ ( val ) => setLang( val ) }
+								help={ __(
+									'A valid language attribute, like "en" or "fr".'
+								) }
+								options={ languages }
+							/>
+						) }
+						{ isStandardLanguage && (
+							<SelectControl
+								label={ title }
+								value={ lang }
+								onChange={ ( val ) => setLang( val ) }
+								options={ languages }
+							/>
+						) }
+						{ ! isStandardLanguage && (
+							<SelectControl
+								label={ __( 'Text direction' ) }
+								value={ dir }
+								options={ [
+									{
+										label: __( 'Left to right' ),
+										value: 'ltr',
+									},
+									{
+										label: __( 'Right to left' ),
+										value: 'rtl',
+									},
+								] }
+								onChange={ ( val ) => setDir( val ) }
+							/>
+						) }
 						<Button
 							variant="primary"
 							type="submit"