Add lang and dir attributes to text-formatting tools (#49985)

* WIP - lang attribute

* applying attributes

* Porting of JB plugin.

* lang & dir are defined in the upper scope

* add translation icon

* rename to language

* migrate to useAnchor

* Use the title

* rename function to Edit

* Strings tweaks

* Fix styles

* a11y tweak - add aria-describedby to the paragraph

* Use "help" instead of a paragraph

* Remove aria-describedby

* Add missing role="menuitemcheckbox"

* Update packages/format-library/src/language/index.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update packages/format-library/src/language/index.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* move the language format definition before the component

* change anchorRef to popoverAnchor

* Revert "move the language format definition before the component"

This reverts commit 560fcbb.

* Move language above Edit

* change class to has-language

* Use a form

* change classnames for the form and the popover

* Update packages/format-library/src/language/index.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* Update packages/format-library/src/language/index.js

Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

* CS fix

* Add event.preventDefault()

* Update icon

* Use a dropdown & automate RTL

* Revert "Use a dropdown & automate RTL"

This reverts commit df5bb36.

* rename icon from "translation" to "language"

* right-align the button

---------

Co-authored-by: Andrea Fercia <a.fercia@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

packages/format-library/src/default-formats.js

@@ -13,6 +13,7 @@ import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
 import { unknown } from './unknown';
+import { language } from './language';
 
 export default [
 	bold,
@@ -27,4 +28,5 @@ export default [
 	superscript,
 	keyboard,
 	unknown,
+	language,
 ];

packages/format-library/src/language/index.js

@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * WordPress dependencies
+ */
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import {
+	TextControl,
+	SelectControl,
+	Button,
+	Popover,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
+import { language as languageIcon } from '@wordpress/icons';
+
+const name = 'core/language';
+const title = __( 'Language' );
+
+export const language = {
+	name,
+	tagName: 'span',
+	className: 'has-language',
+	edit: Edit,
+	title,
+};
+
+function Edit( props ) {
+	const { contentRef, isActive, onChange, value } = props;
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: language,
+	} );
+
+	const [ lang, setLang ] = useState( '' );
+	const [ dir, setDir ] = useState( 'ltr' );
+
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+	const togglePopover = () => {
+		setIsPopoverVisible( ( state ) => ! state );
+		setLang( '' );
+		setDir( 'ltr' );
+	};
+
+	return (
+		<>
+			<RichTextToolbarButton
+				icon={ languageIcon }
+				label={ title }
+				title={ title }
+				onClick={ () => {
+					if ( isActive ) {
+						onChange( removeFormat( value, name ) );
+					} else {
+						togglePopover();
+					}
+				} }
+				isActive={ isActive }
+				role="menuitemcheckbox"
+			/>
+
+			{ isPopoverVisible && (
+				<Popover
+					className="block-editor-format-toolbar__language-popover"
+					anchor={ popoverAnchor }
+					placement="bottom"
+					onClose={ togglePopover }
+				>
+					<form
+						className="block-editor-format-toolbar__language-container-content"
+						onSubmit={ ( event ) => {
+							onChange(
+								applyFormat( value, {
+									type: name,
+									attributes: {
+										lang,
+										dir,
+									},
+								} )
+							);
+							togglePopover();
+							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 ) }
+						/>
+						<HStack alignment="right">
+							<Button
+								variant="primary"
+								type="submit"
+								text={ __( 'Apply' ) }
+							/>
+						</HStack>
+					</form>
+				</Popover>
+			) }
+		</>
+	);
+}

packages/format-library/src/language/style.scss

@@ -0,0 +1,6 @@
+.block-editor-format-toolbar__language-popover {
+	.components-popover__content {
+		width: auto;
+		padding: 1rem;
+	}
+}

packages/format-library/src/style.scss

@@ -1,3 +1,4 @@
 @import "./image/style.scss";
 @import "./link/style.scss";
 @import "./text-color/style.scss";
+@import "./language/style.scss";

packages/icons/src/index.js

@@ -119,6 +119,7 @@ export { default as justifyStretch } from './library/justify-stretch';
 export { default as key } from './library/key';
 export { default as keyboardClose } from './library/keyboard-close';
 export { default as keyboardReturn } from './library/keyboard-return';
+export { default as language } from './library/language';
 export { default as layout } from './library/layout';
 export { default as levelUp } from './library/level-up';
 export { default as lifesaver } from './library/lifesaver';

packages/icons/src/library/language.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const language = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M17.5 10h-1.7l-3.7 10.5h1.7l.9-2.6h3.9l.9 2.6h1.7L17.5 10zm-2.2 6.3 1.4-4 1.4 4h-2.8zm-4.8-3.8c1.6-1.8 2.9-3.6 3.7-5.7H16V5.2h-5.8V3H8.8v2.2H3v1.5h9.6c-.7 1.6-1.8 3.1-3.1 4.6C8.6 10.2 7.8 9 7.2 8H5.6c.6 1.4 1.7 2.9 2.9 4.4l-2.4 2.4c-.3.4-.7.8-1.1 1.2l1 1 1.2-1.2c.8-.8 1.6-1.5 2.3-2.3.8.9 1.7 1.7 2.5 2.5l.6-1.5c-.7-.6-1.4-1.3-2.1-2z" />
+	</SVG>
+);
+
+export default language;