CSS Class Names: Add dropdown to choose from block styles

packages/block-editor/src/components/custom-class-name-control/index.js

@@ -0,0 +1,155 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	TextControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { check, moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../';
+import { getActiveStyle, replaceActiveStyle } from '../block-styles/utils';
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * @typedef  {Object}   CustomClassNameMenuDropDownMenuProps
+ * @property {string}   activeStyle            The currently active style.
+ * @property {Object}   blockStyles            A collection of Block Styles.
+ * @property {Function} onSelectStyleClassName An onClick handler.
+ */
+
+/**
+ * Returns a DropDownMenu component.
+ *
+ * @param {CustomClassNameMenuDropDownMenuProps} props The component.
+ * @return {WPComponent}                        The menu item component.
+ */
+function CustomClassNameMenuDropDownMenu( {
+	activeStyle,
+	blockStyles,
+	onSelectStyleClassName,
+} ) {
+	return (
+		<DropdownMenu
+			className="additional-class-name-control__block-style-dropdown"
+			icon={ moreVertical }
+			label={ __( 'Existing Styles' ) }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup label={ __( 'Block style classes' ) }>
+					{ blockStyles.map( ( style ) => {
+						const isSelected = activeStyle?.name === style.name;
+						const icon = isSelected ? check : null;
+						return (
+							<MenuItem
+								key={ style?.label }
+								icon={ icon }
+								isSelected={ isSelected }
+								onClick={ () => {
+									onSelectStyleClassName( style );
+									onClose();
+								} }
+								role="menuitemcheckbox"
+							>
+								{ style?.label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+/**
+ * @typedef  {Object}   CustomClassNameControlProps
+ * @property {string}   clientId      Selected Block clientId.
+ * @property {string}   name          Selected Block name.
+ * @property {Object}   attributes    Selected Block's attributes.
+ * @property {Function} setAttributes Set attributes callback.
+ */
+
+/**
+ * Control to display custom class name control dropdown and text input.
+ *
+ * @param {CustomClassNameControlProps} props Component props.
+ *
+ * @return {WPElement} Font appearance control.
+ */
+export default function CustomClassNameControl( {
+	clientId,
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const blockStyles = useSelect(
+		( select ) => select( blocksStore ).getBlockStyles( name ),
+		[ name, attributes.className ]
+	);
+
+	const hasBlockStyles = blockStyles && !! blockStyles.length;
+
+	const activeStyle = hasBlockStyles
+		? getActiveStyle( blockStyles, attributes.className || '' )
+		: null;
+
+	const onSelectStyleClassName = ( style ) => {
+		const styleClassName = replaceActiveStyle(
+			attributes.className,
+			activeStyle,
+			style
+		);
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+	};
+
+	const additionalClassNameContainerClasses = classnames(
+		'additional-class-name-control__container',
+		{
+			'has-block-styles': hasBlockStyles,
+		}
+	);
+
+	return (
+		<InspectorControls __experimentalGroup="advanced">
+			<div className={ additionalClassNameContainerClasses }>
+				<TextControl
+					className="additional-class-name-control__text-control"
+					autoComplete="off"
+					label={ __( 'Additional CSS class(es)' ) }
+					value={ attributes.className || '' }
+					onChange={ ( nextValue ) => {
+						setAttributes( {
+							className: nextValue !== '' ? nextValue : undefined,
+						} );
+					} }
+					help={ __( 'Separate multiple classes with spaces.' ) }
+				>
+					{ hasBlockStyles && (
+						<CustomClassNameMenuDropDownMenu
+							activeStyle={ activeStyle }
+							blockStyles={ blockStyles }
+							onSelectStyleClassName={ onSelectStyleClassName }
+						/>
+					) }
+				</TextControl>
+			</div>
+		</InspectorControls>
+	);
+}

packages/block-editor/src/components/custom-class-name-control/style.scss

@@ -0,0 +1,28 @@
+.additional-class-name-control__container.has-block-styles {
+	.additional-class-name-control__text-control > .components-base-control__field {
+		position: relative;
+	}
+}
+
+.additional-class-name-control__block-style-dropdown {
+	position: absolute;
+	top: auto;
+	right: 2px;
+	bottom: 2px;
+	background: $white;
+
+	button.components-button.has-icon {
+		min-width: 24px;
+		height: 24px;
+		padding: 0;
+
+		svg {
+			height: 27px;
+			width: 27px;
+			@include break-medium() {
+				height: 18px;
+				width: 18px;
+			}
+		}
+	}
+}

packages/block-editor/src/hooks/custom-class-name.js

@@ -7,15 +7,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { InspectorControls } from '../components';
+import CustomClassNameControl from '../components/custom-class-name-control';
 
 /**
  * Filters registered block settings, extending attributes with anchor using ID
@@ -55,28 +53,12 @@ export const withInspectorControl = createHigherOrderComponent(
 				'customClassName',
 				true
 			);
+
 			if ( hasCustomClassName && props.isSelected ) {
 				return (
 					<>
 						<BlockEdit { ...props } />
-						<InspectorControls __experimentalGroup="advanced">
-							<TextControl
-								autoComplete="off"
-								label={ __( 'Additional CSS class(es)' ) }
-								value={ props.attributes.className || '' }
-								onChange={ ( nextValue ) => {
-									props.setAttributes( {
-										className:
-											nextValue !== ''
-												? nextValue
-												: undefined,
-									} );
-								} }
-								help={ __(
-									'Separate multiple classes with spaces.'
-								) }
-							/>
-						</InspectorControls>
+						<CustomClassNameControl { ...props } />
 					</>
 				);
 			}

packages/block-editor/src/style.scss

@@ -29,6 +29,7 @@
 @import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
+@import "./components/custom-class-name-control/style.scss";
 @import "./components/default-block-appender/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";

packages/components/src/text-control/README.md

@@ -132,6 +132,13 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### children
+
+The content to be displayed within the `BaseControl`, and as a sibling of `input`.
+
+-   Type: `Element`
+-   Required: No
+
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.

packages/components/src/text-control/index.js

@@ -18,6 +18,7 @@ import BaseControl from '../base-control';
  * @property {string}                  [className]           Classname passed to BaseControl wrapper
  * @property {(value: string) => void} onChange              Handle changes.
  * @property {string}                  [type='text']         Type of the input.
+ * @property {WPElement[]}             children              Children.
  */
 
 /** @typedef {OwnProps & import('react').ComponentProps<'input'>} Props */
@@ -36,6 +37,7 @@ function TextControl(
 		className,
 		onChange,
 		type = 'text',
+		children,
 		...props
 	},
 	ref
@@ -65,6 +67,7 @@ function TextControl(
 				ref={ ref }
 				{ ...props }
 			/>
+			{ children }
 		</BaseControl>
 	);
 }

packages/components/src/text-control/stories/index.js

@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import TextControl from '../';
+import Button from '../../button';
 
 export default {
 	title: 'Components/TextControl',
@@ -22,18 +23,34 @@ export default {
 };
 
 const TextControlWithState = ( props ) => {
-	const [ value, setValue ] = useState();
+	const [ value, setValue ] = useState( '' );
 
 	return <TextControl { ...props } value={ value } onChange={ setValue } />;
 };
 
-export const _default = () => {
-	const label = text( 'Label', 'Label Text' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
-	const help = text( 'Help Text', 'Help text to explain the input.' );
-	const type = text( 'Input Type', 'text' );
-	const className = text( 'Class Name', '' );
+const TextControlWithStateAndChildren = ( props ) => {
+	const [ value, setValue ] = useState( '' );
 
+	return (
+		<TextControl { ...props } value={ value } onChange={ setValue }>
+			<Button
+				disabled={ ! value }
+				variant="primary"
+				onClick={ () => setValue( '' ) }
+			>
+				Clear input
+			</Button>
+		</TextControl>
+	);
+};
+
+const label = text( 'Label', 'Label Text' );
+const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
+const help = text( 'Help Text', 'Help text to explain the input.' );
+const type = text( 'Input Type', 'text' );
+const className = text( 'Class Name', '' );
+
+export const _default = () => {
 	return (
 		<TextControlWithState
 			label={ label }
@@ -44,3 +61,15 @@ export const _default = () => {
 		/>
 	);
 };
+
+export const withChildren = () => {
+	return (
+		<TextControlWithStateAndChildren
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			type={ type }
+			className={ className }
+		/>
+	);
+};