Link Relation: Clarify label & add help text with the link (#70451)

coderGtm · coderGtm · Mamaduka · web-flow · commit 9f492ef20870 · 2025-09-16T07:59:17.000+02:00
Co-authored-by: coderGtm &lt;gautam23@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: joedolson &lt;joedolson@git.wordpress.org&gt;
Co-authored-by: yyppsk &lt;pranjalpratapsingh@git.wordpress.org&gt;
Co-authored-by: karmatosed &lt;karmatosed@git.wordpress.org&gt;
Co-authored-by: skorasaurus &lt;skorasaurus@git.wordpress.org&gt;
Co-authored-by: Soean &lt;soean@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import {
+	useRef,
+	useEffect,
+	useState,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import {
 	ToolbarButton,
@@ -12,6 +17,7 @@ import {
 	ToggleControl,
 	TextControl,
 	__experimentalVStack as VStack,
+	ExternalLink,
 } from '@wordpress/components';
 import {
 	Icon,
@@ -230,9 +236,19 @@ const ImageURLInputUI = ( {
 			<TextControl
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
-				label={ __( 'Link rel' ) }
+				label={ __( 'Link relation' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
+				help={ createInterpolateElement(
+					__(
+						'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+					),
+					{
+						a: (
+							<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+						),
+					}
+				) }
 			/>
 			<TextControl
 				__next40pxDefaultSize
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -27,6 +27,7 @@ import {
 	TextControl,
 	ToolbarButton,
 	Popover,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
@@ -474,7 +475,17 @@ function ButtonEdit( props ) {
 					<TextControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Link rel' ) }
+						label={ __( 'Link relation' ) }
+						help={ createInterpolateElement(
+							__(
+								'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+							),
+							{
+								a: (
+									<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+								),
+							}
+						) }
 						value={ rel || '' }
 						onChange={ ( newRel ) =>
 							setAttributes( { rel: newRel } )
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -180,7 +180,7 @@ function ButtonEdit( props ) {
 			label: __( 'Open in new tab' ),
 		},
 		linkRel: {
-			label: __( 'Link Rel' ),
+			label: __( 'Link relation' ),
 			placeholder: _x( 'None', 'Link rel attribute value placeholder' ),
 		},
 	};
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -147,7 +147,7 @@ function LinkSettings( {
 			label: __( 'Open in new tab' ),
 		},
 		linkRel: {
-			label: __( 'Link Rel' ),
+			label: __( 'Link relation' ),
 			placeholder: _x( 'None', 'Link rel attribute value placeholder' ),
 		},
 	};
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -15,6 +15,7 @@ import {
 	Button,
 	Spinner,
 	TextControl,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -30,7 +31,12 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useMemo, useEffect, useState } from '@wordpress/element';
+import {
+	useMemo,
+	useEffect,
+	useState,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -316,7 +322,7 @@ export default function PostFeaturedImageEdit( {
 						) }
 						{ isLink && (
 							<ToolsPanelItem
-								label={ __( 'Link rel' ) }
+								label={ __( 'Link relation' ) }
 								isShownByDefault
 								hasValue={ () => !! rel }
 								onDeselect={ () =>
@@ -328,7 +334,17 @@ export default function PostFeaturedImageEdit( {
 								<TextControl
 									__next40pxDefaultSize
 									__nextHasNoMarginBottom
-									label={ __( 'Link rel' ) }
+									label={ __( 'Link relation' ) }
+									help={ createInterpolateElement(
+										__(
+											'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+										),
+										{
+											a: (
+												<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+											),
+										}
+									) }
 									value={ rel }
 									onChange={ ( newRel ) =>
 										setAttributes( { rel: newRel } )
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -18,13 +18,15 @@ import {
 import {
 	ToggleControl,
 	TextControl,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -205,7 +207,7 @@ export default function PostTitleEdit( {
 										/>
 									</ToolsPanelItem>
 									<ToolsPanelItem
-										label={ __( 'Link rel' ) }
+										label={ __( 'Link relation' ) }
 										isShownByDefault
 										hasValue={ () => !! rel }
 										onDeselect={ () =>
@@ -215,7 +217,17 @@ export default function PostTitleEdit( {
 										<TextControl
 											__next40pxDefaultSize
 											__nextHasNoMarginBottom
-											label={ __( 'Link rel' ) }
+											label={ __( 'Link relation' ) }
+											help={ createInterpolateElement(
+												__(
+													'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+												),
+												{
+													a: (
+														<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+													),
+												}
+											) }
 											value={ rel }
 											onChange={ ( newRel ) =>
 												setAttributes( { rel: newRel } )
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
@@ -14,11 +14,12 @@ import {
 	ToggleControl,
 	ToolbarGroup,
 	TextControl,
+	ExternalLink,
 	__experimentalInputControl as InputControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { createInterpolateElement, useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
@@ -301,7 +302,17 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<TextControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
+					label={ __( 'Link relation' ) }
+					help={ createInterpolateElement(
+						__(
+							'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+						),
+						{
+							a: (
+								<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+							),
+						}
+					) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -17,13 +17,14 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useState, useRef } from '@wordpress/element';
+import { useState, useRef, createInterpolateElement } from '@wordpress/element';
 import {
 	Icon,
 	Button,
 	Dropdown,
 	TextControl,
 	ToolbarButton,
+	ExternalLink,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
@@ -243,7 +244,17 @@ const SocialLinkEdit = ( {
 				<TextControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
+					label={ __( 'Link relation' ) }
+					help={ createInterpolateElement(
+						__(
+							'The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document.'
+						),
+						{
+							a: (
+								<ExternalLink href="https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" />
+							),
+						}
+					) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
