@wordpress/format-library 4.12.0 → 4.12.1

package/build-module/link/modal.native.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -30,9 +29,10 @@ const ModalLinkUI = ({
       main: true
     }, createElement(BottomSheet.NavigationScreen, {
       name: screens.settings
-    }, createElement(LinkSettingsScreen, _extends({
-      isVisible: isVisible
-    }, restProps))), createElement(BottomSheet.NavigationScreen, {
+    }, createElement(LinkSettingsScreen, {
+      isVisible: isVisible,
+      ...restProps
+    })), createElement(BottomSheet.NavigationScreen, {
       name: screens.picker,
       isScrollable: true,
       fullScreen: true

package/build-module/link/modal.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/link/modal.native.js"],"names":["useMemo","BottomSheet","withSpokenMessages","screens","LinkSettingsScreen","LinkPickerScreen","ModalLinkUI","isVisible","restProps","onClose","settings","picker"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AACA,SAASC,WAAT,EAAsBC,kBAAtB,QAAgD,uBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,OAAOC,kBAAP,MAA+B,sCAA/B;AACA,OAAOC,gBAAP,MAA6B,oCAA7B;;AAEA,MAAMC,WAAW,GAAG,CAAE;AAAEC,EAAAA,SAAF;AAAa,KAAGC;AAAhB,CAAF,KAAmC;AACtD,SAAOR,OAAO,CAAE,MAAM;AACrB,WACC,cAAC,WAAD;AACC,MAAA,SAAS,EAAGO,SADb;AAEC,MAAA,UAAU,MAFX;AAGC,MAAA,OAAO,EAAGC,SAAS,CAACC,OAHrB;AAIC,MAAA,aAAa,MAJd;AAKC,MAAA,MAAM,EAAC;AALR,OAOC,cAAC,WAAD,CAAa,mBAAb;AAAiC,MAAA,OAAO,MAAxC;AAAyC,MAAA,IAAI;AAA7C,OACC,cAAC,WAAD,CAAa,gBAAb;AAA8B,MAAA,IAAI,EAAGN,OAAO,CAACO;AAA7C,OACC,cAAC,kBAAD;AACC,MAAA,SAAS,EAAGH;AADb,OAEMC,SAFN,EADD,CADD,EAOC,cAAC,WAAD,CAAa,gBAAb;AACC,MAAA,IAAI,EAAGL,OAAO,CAACQ,MADhB;AAEC,MAAA,YAAY,MAFb;AAGC,MAAA,UAAU;AAHX,OAKC,cAAC,gBAAD,OALD,CAPD,CAPD,CADD;AAyBA,GA1Ba,EA0BX,CAAEJ,SAAF,CA1BW,CAAd;AA2BA,CA5BD;;AA8BA,eAAeL,kBAAkB,CAAEI,WAAF,CAAjC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { BottomSheet, withSpokenMessages } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport screens from './modal-screens/screens';\nimport LinkSettingsScreen from './modal-screens/link-settings-screen';\nimport LinkPickerScreen from './modal-screens/link-picker-screen';\n\nconst ModalLinkUI = ( { isVisible, ...restProps } ) => {\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isVisible }\n\t\t\t\thideHeader\n\t\t\t\tonClose={ restProps.onClose }\n\t\t\t\thasNavigation\n\t\t\t\ttestID=\"link-settings-modal\"\n\t\t\t>\n\t\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t\t<BottomSheet.NavigationScreen name={ screens.settings }>\n\t\t\t\t\t\t<LinkSettingsScreen\n\t\t\t\t\t\t\tisVisible={ isVisible }\n\t\t\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\t\tname={ screens.picker }\n\t\t\t\t\t\tisScrollable\n\t\t\t\t\t\tfullScreen\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkPickerScreen />\n\t\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t</BottomSheet.NavigationContainer>\n\t\t\t</BottomSheet>\n\t\t);\n\t}, [ isVisible ] );\n};\n\nexport default withSpokenMessages( ModalLinkUI );\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/link/modal.native.js"],"names":["useMemo","BottomSheet","withSpokenMessages","screens","LinkSettingsScreen","LinkPickerScreen","ModalLinkUI","isVisible","restProps","onClose","settings","picker"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AACA,SAASC,WAAT,EAAsBC,kBAAtB,QAAgD,uBAAhD;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,OAAOC,kBAAP,MAA+B,sCAA/B;AACA,OAAOC,gBAAP,MAA6B,oCAA7B;;AAEA,MAAMC,WAAW,GAAG,CAAE;AAAEC,EAAAA,SAAF;AAAa,KAAGC;AAAhB,CAAF,KAAmC;AACtD,SAAOR,OAAO,CAAE,MAAM;AACrB,WACC,cAAC,WAAD;AACC,MAAA,SAAS,EAAGO,SADb;AAEC,MAAA,UAAU,MAFX;AAGC,MAAA,OAAO,EAAGC,SAAS,CAACC,OAHrB;AAIC,MAAA,aAAa,MAJd;AAKC,MAAA,MAAM,EAAC;AALR,OAOC,cAAC,WAAD,CAAa,mBAAb;AAAiC,MAAA,OAAO,MAAxC;AAAyC,MAAA,IAAI;AAA7C,OACC,cAAC,WAAD,CAAa,gBAAb;AAA8B,MAAA,IAAI,EAAGN,OAAO,CAACO;AAA7C,OACC,cAAC,kBAAD;AACC,MAAA,SAAS,EAAGH,SADb;AAAA,SAEMC;AAFN,MADD,CADD,EAOC,cAAC,WAAD,CAAa,gBAAb;AACC,MAAA,IAAI,EAAGL,OAAO,CAACQ,MADhB;AAEC,MAAA,YAAY,MAFb;AAGC,MAAA,UAAU;AAHX,OAKC,cAAC,gBAAD,OALD,CAPD,CAPD,CADD;AAyBA,GA1Ba,EA0BX,CAAEJ,SAAF,CA1BW,CAAd;AA2BA,CA5BD;;AA8BA,eAAeL,kBAAkB,CAAEI,WAAF,CAAjC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { BottomSheet, withSpokenMessages } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport screens from './modal-screens/screens';\nimport LinkSettingsScreen from './modal-screens/link-settings-screen';\nimport LinkPickerScreen from './modal-screens/link-picker-screen';\n\nconst ModalLinkUI = ( { isVisible, ...restProps } ) => {\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isVisible }\n\t\t\t\thideHeader\n\t\t\t\tonClose={ restProps.onClose }\n\t\t\t\thasNavigation\n\t\t\t\ttestID=\"link-settings-modal\"\n\t\t\t>\n\t\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t\t<BottomSheet.NavigationScreen name={ screens.settings }>\n\t\t\t\t\t\t<LinkSettingsScreen\n\t\t\t\t\t\t\tisVisible={ isVisible }\n\t\t\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\t\tname={ screens.picker }\n\t\t\t\t\t\tisScrollable\n\t\t\t\t\t\tfullScreen\n\t\t\t\t\t>\n\t\t\t\t\t\t<LinkPickerScreen />\n\t\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t</BottomSheet.NavigationContainer>\n\t\t\t</BottomSheet>\n\t\t);\n\t}, [ isVisible ] );\n};\n\nexport default withSpokenMessages( ModalLinkUI );\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.12.0",
+	"version": "4.12.1",
 	"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.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"
+		"@wordpress/a11y": "^3.35.1",
+		"@wordpress/block-editor": "^12.3.1",
+		"@wordpress/components": "^25.1.1",
+		"@wordpress/compose": "^6.12.1",
+		"@wordpress/data": "^9.5.1",
+		"@wordpress/element": "^5.12.1",
+		"@wordpress/html-entities": "^3.35.1",
+		"@wordpress/i18n": "^4.35.1",
+		"@wordpress/icons": "^9.26.1",
+		"@wordpress/rich-text": "^6.12.1",
+		"@wordpress/url": "^3.36.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
+	"gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
 }

package/src/language/index.js

@@ -29,21 +29,10 @@ export const language = {
 	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' );
-
+function Edit( { isActive, value, onChange, contentRef } ) {
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const togglePopover = () => {
 		setIsPopoverVisible( ( state ) => ! state );
-		setLang( '' );
-		setDir( 'ltr' );
 	};
 
 	return (
@@ -62,63 +51,81 @@ function Edit( props ) {
 				isActive={ isActive }
 				role="menuitemcheckbox"
 			/>
-
 			{ isPopoverVisible && (
-				<Popover
-					className="block-editor-format-toolbar__language-popover"
-					anchor={ popoverAnchor }
-					placement="bottom"
+				<InlineLanguageUI
+					value={ value }
+					onChange={ onChange }
 					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>
+					contentRef={ contentRef }
+				/>
 			) }
 		</>
 	);
 }
+
+function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: language,
+	} );
+
+	const [ lang, setLang ] = useState( '' );
+	const [ dir, setDir ] = useState( 'ltr' );
+
+	return (
+		<Popover
+			className="block-editor-format-toolbar__language-popover"
+			anchor={ popoverAnchor }
+			placement="bottom"
+			onClose={ onClose }
+		>
+			<form
+				className="block-editor-format-toolbar__language-container-content"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					onChange(
+						applyFormat( value, {
+							type: name,
+							attributes: {
+								lang,
+								dir,
+							},
+						} )
+					);
+					onClose();
+				} }
+			>
+				<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/link/index.js

@@ -60,9 +60,11 @@ function Edit( {
 		}
 	}
 
-	function stopAddingLink() {
+	function stopAddingLink( returnFocus = true ) {
 		setAddingLink( false );
-		onFocus();
+		if ( returnFocus ) {
+			onFocus();
+		}
 	}
 
 	function onRemoveFormat() {

package/src/link/inline.js

@@ -255,6 +255,7 @@ function InlineLinkUI( {
 			anchor={ popoverAnchor }
 			focusOnMount={ focusOnMount.current }
 			onClose={ stopAddingLink }
+			onFocusOutside={ () => stopAddingLink( false ) }
 			placement="bottom"
 			shift
 		>