Implement Toggleable control for CSS classes

WordPress · Dec 17, 2024 · ba65cee · ba65cee
1 parent 78d2e70
commit ba65cee
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 13 deletions.
diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
@@ -1,12 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, createInterpolateElement } from '@wordpress/element';
+import {
+	useState,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
 	Popover,
 	__experimentalInputControl as InputControl,
+	CheckboxControl,
 } from '@wordpress/components';
 import { prependHTTP } from '@wordpress/url';
 import {
@@ -33,6 +38,52 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
 import { link as settings } from './index';
 
+const TogglableSettingComponent = ( { setting, value, onChange } ) => {
+	const hasValue = value ? value?.cssClasses?.length > 0 : false;
+	const [ inputVisible, setInputVisible ] = useState( hasValue );
+
+	const handleSettingChange = ( newValue ) => {
+		onChange( {
+			...value,
+			[ setting.id ]: newValue,
+		} );
+	};
+
+	const handleCheckboxChange = () => {
+		if ( inputVisible ) {
+			if ( hasValue ) {
+				// Reset the value.
+				handleSettingChange( '' );
+			}
+			setInputVisible( false );
+		} else {
+			setInputVisible( true );
+		}
+	};
+
+	return (
+		<div className="block-editor-link-control__toggleable-setting">
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				label={ setting.title }
+				onChange={ handleCheckboxChange }
+				checked={ inputVisible || hasValue }
+				help={ setting?.help }
+			/>
+			{ inputVisible && (
+				<InputControl
+					label={ setting.title }
+					value={ value?.cssClasses }
+					onChange={ handleSettingChange }
+					help={ __( 'Separate multiple classes with spaces.' ) }
+					__unstableInputWidth="100%"
+					__next40pxDefaultSize
+				/>
+			) }
+		</div>
+	);
+};
+
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
 	{
@@ -42,18 +93,15 @@ const LINK_SETTINGS = [
 	{
 		id: 'cssClasses',
 		title: __( 'Additional CSS class(es)' ),
-		render: ( setting, value, onChange ) => (
-			<InputControl
-				label={ setting.title }
-				value={ value?.cssClasses }
-				onChange={ ( cssClasses ) =>
-					onChange( { ...value, cssClasses } )
-				}
-				help={ __( 'Separate multiple classes with spaces.' ) }
-				__unstableInputWidth="100%"
-				__next40pxDefaultSize
-			/>
-		),
+		render: ( setting, value, onChange ) => {
+			return (
+				<TogglableSettingComponent
+					setting={ setting }
+					value={ value }
+					onChange={ onChange }
+				/>
+			);
+		},
 	},
 ];
 

diff --git a/packages/format-library/src/link/style.scss b/packages/format-library/src/link/style.scss
@@ -17,3 +17,9 @@
 		color: $alert-red;
 	}
 }
+
+.block-editor-link-control__toggleable-setting {
+	display: flex;
+	flex-direction: column;
+	gap: $grid-unit-20 0;
+}