PoC adding the additional field to inline links only

WordPress · Dec 4, 2024 · c9e054a · c9e054a
1 parent 8ddab81
commit c9e054a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/link-control/settings.js b/packages/block-editor/src/components/link-control/settings.js
@@ -18,17 +18,26 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 		} );
 	};
 
-	const theSettings = settings.map( ( setting ) => (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-			help={ setting?.help }
-		/>
-	) );
+	const theSettings = settings.map( ( setting ) =>
+		setting.render ? (
+			<div
+				key={ setting.id }
+				className="block-editor-link-control__setting"
+			>
+				{ setting.render( setting, value, onChange ) }
+			</div>
+		) : (
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				className="block-editor-link-control__setting"
+				key={ setting.id }
+				label={ setting.title }
+				onChange={ handleSettingChange( setting ) }
+				checked={ value ? !! value[ setting.id ] : false }
+				help={ setting?.help }
+			/>
+		)
+	);
 
 	return (
 		<fieldset className="block-editor-link-control__settings">

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
@@ -4,7 +4,10 @@
 import { useMemo, createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { Popover } from '@wordpress/components';
+import {
+	Popover,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
 import { prependHTTP } from '@wordpress/url';
 import {
 	create,
@@ -36,6 +39,22 @@ const LINK_SETTINGS = [
 		id: 'nofollow',
 		title: __( 'Mark as nofollow' ),
 	},
+	{
+		id: 'cssClasses',
+		title: __( 'Additional CSS Classes' ),
+		render: ( setting, value, onChange ) => (
+			<InputControl
+				label={ setting.title }
+				value={ value?.cssClasses }
+				onChange={ ( cssClasses ) =>
+					onChange( { ...value, cssClasses } )
+				}
+				help={ setting?.help }
+				__next40pxDefaultSize
+				__unstableInputWidth="100%"
+			/>
+		),
+	},
 ];
 
 function InlineLinkUI( {
@@ -78,8 +97,10 @@ function InlineLinkUI( {
 			opensInNewTab: activeAttributes.target === '_blank',
 			nofollow: activeAttributes.rel?.includes( 'nofollow' ),
 			title: richTextText,
+			cssClasses: activeAttributes.className,
 		} ),
 		[
+			activeAttributes.className,
 			activeAttributes.id,
 			activeAttributes.rel,
 			activeAttributes.target,
@@ -116,6 +137,7 @@ function InlineLinkUI( {
 					: undefined,
 			opensInNewWindow: nextValue.opensInNewTab,
 			nofollow: nextValue.nofollow,
+			cssClasses: nextValue.cssClasses,
 		} );
 
 		const newText = nextValue.title || newUrl;

diff --git a/packages/format-library/src/link/utils.js b/packages/format-library/src/link/utils.js
@@ -86,6 +86,7 @@ export function isValidHref( href ) {
  * @param {string}  options.id               The ID of the link.
  * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.
  * @param {boolean} options.nofollow         Whether this link is marked as no follow relationship.
+ * @param {string}  options.cssClasses       The CSS classes to apply to the link.
  * @return {Object} The final format object.
  */
 export function createLinkFormat( {
@@ -94,6 +95,7 @@ export function createLinkFormat( {
 	id,
 	opensInNewWindow,
 	nofollow,
+	cssClasses,
 } ) {
 	const format = {
 		type: 'core/link',
@@ -122,6 +124,12 @@ export function createLinkFormat( {
 			: 'nofollow';
 	}
 
+	const trimmedCssClasses = cssClasses?.trim();
+
+	if ( trimmedCssClasses?.length ) {
+		format.attributes.className = trimmedCssClasses;
+	}
+
 	return format;
 }