@wordpress/block-editor 12.24.0 → 12.26.0

package/src/components/text-alignment-control/index.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	alignLeft,
+	alignCenter,
+	alignRight,
+	alignJustify,
+} from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
+const TEXT_ALIGNMENT_OPTIONS = [
+	{
+		label: __( 'Align text left' ),
+		value: 'left',
+		icon: alignLeft,
+	},
+	{
+		label: __( 'Align text center' ),
+		value: 'center',
+		icon: alignCenter,
+	},
+	{
+		label: __( 'Align text right' ),
+		value: 'right',
+		icon: alignRight,
+	},
+	{
+		label: __( 'Justify text' ),
+		value: 'justify',
+		icon: alignJustify,
+	},
+];
+
+const DEFAULT_OPTIONS = [ 'left', 'center', 'right' ];
+
+/**
+ * Control to facilitate text alignment selections.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected text alignment.
+ * @param {Function} props.onChange  Handles change in text alignment selection.
+ * @param {string[]} props.options   Array of text alignment options to display.
+ *
+ * @return {Element} Text alignment control.
+ */
+export default function TextAlignmentControl( {
+	className,
+	value,
+	onChange,
+	options = DEFAULT_OPTIONS,
+} ) {
+	const validOptions = useMemo(
+		() =>
+			TEXT_ALIGNMENT_OPTIONS.filter( ( option ) =>
+				options.includes( option.value )
+			),
+		[ options ]
+	);
+
+	if ( ! validOptions.length ) {
+		return null;
+	}
+
+	return (
+		<SegmentedTextControl
+			label={ __( 'Text alignment' ) }
+			options={ validOptions }
+			className={ clsx(
+				'block-editor-text-alignment-control',
+				className
+			) }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
+	);
+}

package/src/components/text-alignment-control/stories/index.story.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextAlignmentControl from '../';
+
+export default {
+	title: 'BlockEditor/TextAlignmentControl',
+	component: TextAlignmentControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		className: { control: 'text' },
+		options: {
+			control: 'check',
+			options: [ 'left', 'center', 'right', 'justify' ],
+		},
+		value: { control: { type: null } },
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextAlignmentControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

package/src/components/text-decoration-control/index.js

@@ -1,28 +1,32 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const TEXT_DECORATIONS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Underline' ),
+		label: __( 'Underline' ),
 		value: 'underline',
 		icon: formatUnderline,
 	},
 	{
-		name: __( 'Strikethrough' ),
+		label: __( 'Strikethrough' ),
 		value: 'line-through',
 		icon: formatStrikethrough,
 	},
@@ -31,10 +35,10 @@ const TEXT_DECORATIONS = [
 /**
  * Control to facilitate text decoration selections.
  *
- * @param {Object}   props             Component props.
- * @param {string}   props.value       Currently selected text decoration.
- * @param {Function} props.onChange    Handles change in text decoration selection.
- * @param {string}   [props.className] Additional class name to apply.
+ * @param {Object}   props           Component props.
+ * @param {string}   props.value     Currently selected text decoration.
+ * @param {Function} props.onChange  Handles change in text decoration selection.
+ * @param {string}   props.className Additional class name to apply.
  *
  * @return {Element} Text decoration control.
  */
@@ -44,34 +48,17 @@ export default function TextDecorationControl( {
 	className,
 } ) {
 	return (
-		<fieldset
-			className={ classnames(
+		<SegmentedTextControl
+			label={ __( 'Decoration' ) }
+			options={ TEXT_DECORATIONS }
+			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
 			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Decoration' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-decoration-control__buttons">
-				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-					return (
-						<Button
-							key={ textDecoration.value }
-							icon={ textDecoration.icon }
-							label={ textDecoration.name }
-							isPressed={ textDecoration.value === value }
-							onClick={ () => {
-								onChange(
-									textDecoration.value === value
-										? undefined
-										: textDecoration.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }

package/src/components/text-transform-control/index.js

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	reset,
@@ -15,24 +14,29 @@ import {
 	formatUppercase,
 } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const TEXT_TRANSFORMS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Uppercase' ),
+		label: __( 'Uppercase' ),
 		value: 'uppercase',
 		icon: formatUppercase,
 	},
 	{
-		name: __( 'Lowercase' ),
+		label: __( 'Lowercase' ),
 		value: 'lowercase',
 		icon: formatLowercase,
 	},
 	{
-		name: __( 'Capitalize' ),
+		label: __( 'Capitalize' ),
 		value: 'capitalize',
 		icon: formatCapitalize,
 	},
@@ -50,34 +54,17 @@ const TEXT_TRANSFORMS = [
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<fieldset
-			className={ classnames(
+		<SegmentedTextControl
+			label={ __( 'Letter case' ) }
+			options={ TEXT_TRANSFORMS }
+			className={ clsx(
 				'block-editor-text-transform-control',
 				className
 			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							label={ textTransform.name }
-							isPressed={ textTransform.value === value }
-							onClick={ () => {
-								onChange(
-									textTransform.value === value
-										? undefined
-										: textTransform.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }

package/src/components/url-input/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -441,7 +441,7 @@ class URLInput extends Component {
 		const controlProps = {
 			id: inputId, // Passes attribute to label for the for attribute
 			label,
-			className: classnames( 'block-editor-url-input', className, {
+			className: clsx( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
 			hideLabelFromVision,
@@ -546,7 +546,7 @@ class URLInput extends Component {
 			<Popover placement="bottom" focusOnMount={ false }>
 				<div
 					{ ...suggestionsListProps }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-url-input__suggestions',
 						`${ className }__suggestions`
 					) }
@@ -555,7 +555,7 @@ class URLInput extends Component {
 						<Button
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
-							className={ classnames(
+							className={ clsx(
 								'block-editor-url-input__suggestion',
 								{
 									'is-selected': index === selectedSuggestion,

package/src/components/url-popover/link-editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,7 +24,7 @@ export default function LinkEditor( {
 } ) {
 	return (
 		<form
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-editor',
 				className
 			) }

package/src/components/url-popover/link-viewer-url.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,7 +10,7 @@ import { ExternalLink } from '@wordpress/components';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 export default function LinkViewerURL( { url, urlLabel, className } ) {
-	const linkClassName = classnames(
+	const linkClassName = clsx(
 		className,
 		'block-editor-url-popover__link-viewer-url'
 	);

package/src/components/url-popover/link-viewer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function LinkViewer( {
 } ) {
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-viewer',
 				className
 			) }

package/src/components/use-block-display-information/index.js

@@ -68,14 +68,18 @@ function getPositionTypeLabel( attributes ) {
 export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
-			if ( ! clientId ) return null;
+			if ( ! clientId ) {
+				return null;
+			}
 			const { getBlockName, getBlockAttributes } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
-			if ( ! blockType ) return null;
+			if ( ! blockType ) {
+				return null;
+			}
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
@@ -95,7 +99,9 @@ export default function useBlockDisplayInformation( clientId ) {
 				positionType: attributes?.style?.position?.type,
 				name: attributes?.metadata?.name,
 			};
-			if ( ! match ) return blockTypeInfo;
+			if ( ! match ) {
+				return blockTypeInfo;
+			}
 
 			return {
 				isSynced,

package/src/components/use-on-block-drop/index.js

@@ -252,7 +252,9 @@ export default function useOnBlockDrop(
 			initialPosition = 0,
 			clientIdsToReplace = []
 		) => {
-			if ( ! Array.isArray( blocks ) ) blocks = [ blocks ];
+			if ( ! Array.isArray( blocks ) ) {
+				blocks = [ blocks ];
+			}
 
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];

package/src/components/warning/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { moreVertical } from '@wordpress/icons';
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
 		<div style={ { display: 'contents', all: 'initial' } }>
-			<div className={ classnames( className, 'block-editor-warning' ) }>
+			<div className={ clsx( className, 'block-editor-warning' ) }>
 				<div className="block-editor-warning__contents">
 					<p className="block-editor-warning__message">
 						{ children }

package/src/components/writing-flow/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
 			<div
 				{ ...props }
 				ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-				className={ classNames(
+				className={ clsx(
 					props.className,
 					'block-editor-writing-flow'
 				) }