@wordpress/format-library 4.32.0 → 4.34.0

package/build-style/style.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.32.0",
+	"version": "4.34.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,18 +26,18 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.55.0",
-		"@wordpress/block-editor": "^12.23.0",
-		"@wordpress/components": "^27.3.0",
-		"@wordpress/compose": "^6.32.0",
-		"@wordpress/data": "^9.25.0",
-		"@wordpress/element": "^5.32.0",
-		"@wordpress/html-entities": "^3.55.0",
-		"@wordpress/i18n": "^4.55.0",
-		"@wordpress/icons": "^9.46.0",
-		"@wordpress/private-apis": "^0.37.0",
-		"@wordpress/rich-text": "^6.32.0",
-		"@wordpress/url": "^3.56.0"
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/rich-text": "^6.34.0",
+		"@wordpress/url": "^3.58.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/link/index.js

@@ -38,36 +38,17 @@ function Edit( {
 	onFocus,
 	contentRef,
 } ) {
-	const [ editingLink, setEditingLink ] = useState( false );
-	const [ creatingLink, setCreatingLink ] = useState( false );
+	const [ addingLink, setAddingLink ] = useState( false );
 
 	// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.
 	const [ openedBy, setOpenedBy ] = useState( null );
 
-	// Manages whether the Link UI popover should autofocus when shown.
-	const [ shouldAutoFocus, setShouldAutoFocus ] = useState( true );
-
-	function setIsEditingLink( isEditing, { autoFocus = true } = {} ) {
-		setEditingLink( isEditing );
-		setShouldAutoFocus( autoFocus );
-	}
-
-	function setIsCreatingLink( isCreating ) {
-		// Don't add a new link if there is already an active link.
-		// The two states are mutually exclusive.
-		if ( isCreating === true && isActive ) {
-			return;
-		}
-		setCreatingLink( isCreating );
-	}
-
 	useEffect( () => {
 		// When the link becomes inactive (i.e. isActive is false), reset the editingLink state
 		// and the creatingLink state. This means that if the Link UI is displayed and the link
 		// becomes inactive (e.g. used arrow keys to move cursor outside of link bounds), the UI will close.
 		if ( ! isActive ) {
-			setEditingLink( false );
-			setCreatingLink( false );
+			setAddingLink( false );
 		}
 	}, [ isActive ] );
 
@@ -84,15 +65,19 @@ function Edit( {
 			// This causes the `editingLink` state to be set to `true` and the link UI
 			// to be rendered in "creating" mode. We need to check isActive to see if
 			// we have an active link format.
+			const link = event.target.closest( '[contenteditable] a' );
 			if (
-				! event.target.closest( '[contenteditable] a' ) || // other formats (e.g. bold) may be nested within the link.
+				! link || // other formats (e.g. bold) may be nested within the link.
 				! isActive
 			) {
-				setIsEditingLink( false );
 				return;
 			}
 
-			setIsEditingLink( true, { autoFocus: false } );
+			setAddingLink( true );
+			setOpenedBy( {
+				el: link,
+				action: 'click',
+			} );
 		}
 
 		editableContentElement.addEventListener( 'click', handleClick );
@@ -103,7 +88,6 @@ function Edit( {
 	}, [ contentRef, isActive ] );
 
 	function addLink( target ) {
-		setShouldAutoFocus( true );
 		const text = getTextContent( slice( value ) );
 
 		if ( ! isActive && text && isURL( text ) && isValidHref( text ) ) {
@@ -122,13 +106,12 @@ function Edit( {
 			);
 		} else {
 			if ( target ) {
-				setOpenedBy( target );
-			}
-			if ( ! isActive ) {
-				setIsCreatingLink( true );
-			} else {
-				setIsEditingLink( true );
+				setOpenedBy( {
+					el: target,
+					action: null, // We don't need to distinguish between click or keyboard here
+				} );
 			}
+			setAddingLink( true );
 		}
 	}
 
@@ -147,12 +130,11 @@ function Edit( {
 		// Otherwise, we rely on the passed in onFocus to return focus to the rich text field.
 
 		// Close the popover
-		setIsEditingLink( false );
-		setIsCreatingLink( false );
+		setAddingLink( false );
 
 		// Return focus to the toolbar button or the rich text field
-		if ( openedBy?.tagName === 'BUTTON' ) {
-			openedBy.focus();
+		if ( openedBy?.el?.tagName === 'BUTTON' ) {
+			openedBy.el.focus();
 		} else {
 			onFocus();
 		}
@@ -167,8 +149,7 @@ function Edit( {
 	// 4. Press Escape
 	// 5. Focus should be on the Options button
 	function onFocusOutside() {
-		setIsEditingLink( false );
-		setIsCreatingLink( false );
+		setAddingLink( false );
 		setOpenedBy( null );
 	}
 
@@ -177,7 +158,10 @@ function Edit( {
 		speak( __( 'Link removed.' ), 'assertive' );
 	}
 
-	const isEditingActiveLink = editingLink && isActive;
+	// Only autofocus if we have clicked a link within the editor
+	const shouldAutoFocus = ! (
+		openedBy?.el?.tagName === 'A' && openedBy?.action === 'click'
+	);
 
 	return (
 		<>
@@ -194,13 +178,13 @@ function Edit( {
 				onClick={ ( event ) => {
 					addLink( event.currentTarget );
 				} }
-				isActive={ isActive || editingLink }
+				isActive={ isActive || addingLink }
 				shortcutType="primary"
 				shortcutCharacter="k"
 				aria-haspopup="true"
-				aria-expanded={ editingLink }
+				aria-expanded={ addingLink }
 			/>
-			{ ( isEditingActiveLink || creatingLink ) && (
+			{ addingLink && (
 				<InlineLinkUI
 					stopAddingLink={ stopAddingLink }
 					onFocusOutside={ onFocusOutside }

package/src/link/inline.js

@@ -252,10 +252,11 @@ function InlineLinkUI( {
 	return (
 		<Popover
 			anchor={ popoverAnchor }
+			animate={ false }
 			onClose={ stopAddingLink }
 			onFocusOutside={ onFocusOutside }
 			placement="bottom"
-			offset={ 10 }
+			offset={ 8 }
 			shift
 			focusOnMount={ focusOnMount }
 			constrainTabbing

package/src/link/utils.js

@@ -102,8 +102,12 @@ export function createLinkFormat( {
 		},
 	};
 
-	if ( type ) format.attributes.type = type;
-	if ( id ) format.attributes.id = id;
+	if ( type ) {
+		format.attributes.type = type;
+	}
+	if ( id ) {
+		format.attributes.id = id;
+	}
 
 	if ( opensInNewWindow ) {
 		format.attributes.target = '_blank';

package/src/text-color/inline.js

@@ -39,9 +39,15 @@ function parseCSS( css = '' ) {
 	return css.split( ';' ).reduce( ( accumulator, rule ) => {
 		if ( rule ) {
 			const [ property, value ] = rule.split( ':' );
-			if ( property === 'color' ) accumulator.color = value;
-			if ( property === 'background-color' && value !== transparentValue )
+			if ( property === 'color' ) {
+				accumulator.color = value;
+			}
+			if (
+				property === 'background-color' &&
+				value !== transparentValue
+			) {
 				accumulator.backgroundColor = value;
+			}
 		}
 		return accumulator;
 	}, {} );
@@ -108,8 +114,12 @@ function setColors( value, name, colorSettings, colors ) {
 		}
 	}
 
-	if ( styles.length ) attributes.style = styles.join( ';' );
-	if ( classNames.length ) attributes.class = classNames.join( ' ' );
+	if ( styles.length ) {
+		attributes.style = styles.join( ';' );
+	}
+	if ( classNames.length ) {
+		attributes.class = classNames.join( ' ' );
+	}
 
 	return applyFormat( value, { type: name, attributes } );
 }

package/src/text-color/inline.native.js

@@ -28,9 +28,15 @@ function parseCSS( css = '' ) {
 	return css.split( ';' ).reduce( ( accumulator, rule ) => {
 		if ( rule ) {
 			const [ property, value ] = rule.replace( / /g, '' ).split( ':' );
-			if ( property === 'color' ) accumulator.color = value;
-			if ( property === 'background-color' && value !== transparentValue )
+			if ( property === 'color' ) {
+				accumulator.color = value;
+			}
+			if (
+				property === 'background-color' &&
+				value !== transparentValue
+			) {
 				accumulator.backgroundColor = value;
+			}
 		}
 		return accumulator;
 	}, {} );
@@ -82,8 +88,12 @@ function setColors( value, name, colorSettings, colors, contentRef ) {
 		}
 	}
 
-	if ( styles.length ) attributes.style = styles.join( ';' );
-	if ( classNames.length ) attributes.class = classNames.join( ' ' );
+	if ( styles.length ) {
+		attributes.style = styles.join( ';' );
+	}
+	if ( classNames.length ) {
+		attributes.class = classNames.join( ' ' );
+	}
 
 	const format = { type: name, attributes };
 	const hasNoSelection = value.start === value.end;