@wordpress/format-library 4.10.0 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.10.0",
+	"version": "4.12.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,17 +26,17 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.33.0",
-		"@wordpress/block-editor": "^12.1.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/compose": "^6.10.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/html-entities": "^3.33.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/rich-text": "^6.10.0",
-		"@wordpress/url": "^3.34.0"
+		"@wordpress/a11y": "^3.35.0",
+		"@wordpress/block-editor": "^12.3.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/html-entities": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/rich-text": "^6.12.0",
+		"@wordpress/url": "^3.36.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

package/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,
 ];

package/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: 'bdo',
+	className: null,
+	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>
+			) }
+		</>
+	);
+}

package/src/language/style.scss

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

package/src/link/index.native.js

@@ -37,6 +37,7 @@ export const link = {
 	attributes: {
 		url: 'href',
 		target: 'target',
+		rel: 'rel',
 	},
 	edit: withSpokenMessages(
 		class LinkEdit extends Component {

package/src/link/modal.native.js

@@ -19,6 +19,7 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => {
 				hideHeader
 				onClose={ restProps.onClose }
 				hasNavigation
+				testID="link-settings-modal"
 			>
 				<BottomSheet.NavigationContainer animate main>
 					<BottomSheet.NavigationScreen name={ screens.settings }>

package/src/style.scss

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