From c9e054a438e29a3ab0233b19e036e747a0efb335 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 4 Dec 2024 09:57:34 +0000
Subject: [PATCH] PoC adding the additional field to inline links only

---
 .../src/components/link-control/settings.js   | 31 ++++++++++++-------
 packages/format-library/src/link/inline.js    | 24 +++++++++++++-
 packages/format-library/src/link/utils.js     |  8 +++++
 3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/settings.js b/packages/block-editor/src/components/link-control/settings.js
index e63ef926358fe9..bbec936d1641e1 100644
--- 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
index 3d2ee57567dc13..864f356d9436d3 100644
--- 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
index 314c8118713a43..ed379b3c4028db 100644
--- 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;
 }