Simplify api for link UI abstraction to use a single prop for the val…

…ue (#46189) * Refactor to link prop for all link related data * Apply same refactor to originalk code in Nav Link block
WordPress · Nov 30, 2022 · 153983b · 153983b
1 parent ae560c8
commit 153983b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 61 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -52,20 +52,10 @@ export const Appender = forwardRef( ( props, ref ) => {
 	let maybeLinkUI;
 
 	if ( insertedBlock ) {
-		const link = {
-			url: insertedBlockAttributes.url,
-			opensInNewTab: insertedBlockAttributes.opensInNewTab,
-			title: insertedBlockAttributes.label,
-		};
 		maybeLinkUI = (
 			<LinkUI
 				clientId={ insertedBlock }
-				value={ link }
-				linkAttributes={ {
-					type: insertedBlockAttributes.type,
-					url: insertedBlockAttributes.url,
-					kind: insertedBlockAttributes.kind,
-				} }
+				link={ insertedBlockAttributes }
 				onClose={ () => setInsertedBlock( null ) }
 				hasCreateSuggestion={ false }
 				onChange={ ( updatedValue ) => {

diff --git a/packages/block-editor/src/components/off-canvas-editor/link-ui.js b/packages/block-editor/src/components/off-canvas-editor/link-ui.js
@@ -123,6 +123,12 @@ function LinkControlTransforms( { clientId } ) {
 }
 
 export function LinkUI( props ) {
+	const link = {
+		url: props.link.url,
+		opensInNewTab: props.link.opensInNewTab,
+		title: props.link.label,
+	};
+
 	return (
 		<Popover
 			placement="bottom"
@@ -131,22 +137,22 @@ export function LinkUI( props ) {
 			shift
 		>
 			<LinkControl
-				className={ props.className }
 				hasTextControl
 				hasRichPreviews
-				value={ props?.value }
+				className={ props.className }
+				value={ link }
 				showInitialSuggestions={ true }
 				withCreateSuggestion={ props?.hasCreateSuggestion }
-				noDirectEntry={ !! props?.linkAttributes?.type }
-				noURLSuggestion={ !! props?.linkAttributes?.type }
+				noDirectEntry={ !! props.link?.type }
+				noURLSuggestion={ !! props.link?.type }
 				suggestionsQuery={ getSuggestionsQuery(
-					props?.linkAttributes?.type,
-					props?.linkAttributes?.kind
+					props.link?.type,
+					props.link?.kind
 				) }
 				onChange={ props.onChange }
 				onRemove={ props.onRemove }
 				renderControlBottom={
-					! props?.linkAttributes?.url
+					! props.link?.url
 						? () => (
 								<LinkControlTransforms
 									clientId={ props?.clientId }

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -211,22 +211,6 @@ function getMissingText( type ) {
 	return missingText;
 }
 
-/**
- * Removes HTML from a given string.
- * Note the does not provide XSS protection or otherwise attempt
- * to filter strings with malicious intent.
- *
- * See also: https://github.com/WordPress/gutenberg/pull/35539
- *
- * @param {string} html the string from which HTML should be removed.
- * @return {string} the "cleaned" string.
- */
-function navStripHTML( html ) {
-	const doc = document.implementation.createHTMLDocument( '' );
-	doc.body.innerHTML = html;
-	return doc.body.textContent || '';
-}
-
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -237,27 +221,11 @@ export default function NavigationLinkEdit( {
 	context,
 	clientId,
 } ) {
-	const {
-		id,
-		label,
-		type,
-		opensInNewTab,
-		url,
-		description,
-		rel,
-		title,
-		kind,
-	} = attributes;
+	const { id, label, type, url, description, rel, title, kind } = attributes;
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
 
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
-	};
-
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
@@ -656,8 +624,7 @@ export default function NavigationLinkEdit( {
 						<LinkUI
 							className="wp-block-navigation-link__inline-link-input"
 							clientId={ clientId }
-							value={ link }
-							linkAttributes={ { type, url, kind } }
+							link={ attributes }
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							hasCreateSuggestion={ userCanCreate }

diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
@@ -116,11 +116,27 @@ function LinkControlTransforms( { clientId } ) {
 	);
 }
 
+/**
+ * Removes HTML from a given string.
+ * Note the does not provide XSS protection or otherwise attempt
+ * to filter strings with malicious intent.
+ *
+ * See also: https://github.com/WordPress/gutenberg/pull/35539
+ *
+ * @param {string} html the string from which HTML should be removed.
+ * @return {string} the "cleaned" string.
+ */
+function navStripHTML( html ) {
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = html;
+	return doc.body.textContent || '';
+}
+
 export function LinkUI( props ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	async function handleCreate( pageTitle ) {
-		const postType = props.linkAttributes.type || 'page';
+		const postType = props.link.type || 'page';
 
 		const page = await saveEntityRecord( 'postType', postType, {
 			title: pageTitle,
@@ -146,6 +162,12 @@ export function LinkUI( props ) {
 		};
 	}
 
+	const link = {
+		url: props.link.url,
+		opensInNewTab: props.link.opensInNewTab,
+		title: props.link.label && navStripHTML( props.link.label ),
+	};
+
 	return (
 		<Popover
 			placement="bottom"
@@ -157,14 +179,14 @@ export function LinkUI( props ) {
 				hasTextControl
 				hasRichPreviews
 				className={ props.className }
-				value={ props.value }
+				value={ link }
 				showInitialSuggestions={ true }
 				withCreateSuggestion={ props.hasCreateSuggestion }
 				createSuggestion={ handleCreate }
 				createSuggestionButtonText={ ( searchTerm ) => {
 					let format;
 
-					if ( props.linkAttributes.type === 'post' ) {
+					if ( props.link.type === 'post' ) {
 						/* translators: %s: search term. */
 						format = __( 'Create draft post: <mark>%s</mark>' );
 					} else {
@@ -179,16 +201,16 @@ export function LinkUI( props ) {
 						}
 					);
 				} }
-				noDirectEntry={ !! props.linkAttributes.type }
-				noURLSuggestion={ !! props.linkAttributes.type }
+				noDirectEntry={ !! props.link.type }
+				noURLSuggestion={ !! props.link.type }
 				suggestionsQuery={ getSuggestionsQuery(
-					props.linkAttributes.type,
-					props.linkAttributes.kind
+					props.link.type,
+					props.link.kind
 				) }
 				onChange={ props.onChange }
 				onRemove={ props.onRemove }
 				renderControlBottom={
-					! props.linkAttributes.url
+					! props.link.url
 						? () => (
 								<LinkControlTransforms
 									clientId={ props.clientId }