@wordpress/block-editor 12.24.0 → 12.25.0

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

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, Button } from '@wordpress/components';
+
+/**
+ * @typedef {Object} Option
+ * @property {string} label The label of the option.
+ * @property {string} value The value of the option.
+ * @property {string} icon  The icon of the option.
+ */
+
+/**
+ * Control to facilitate selecting a text style from a set of options.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.label     A label for the option.
+ * @param {string}   props.value     Currently selected value.
+ * @param {Function} props.onChange  Callback to handle onChange.
+ * @param {Option[]} props.options   Array of options to display.
+ * @param {string}   props.className Additional class name to apply.
+ *
+ * @return {Element} Element to render.
+ */
+export default function SegmentedTextControl( {
+	label,
+	value,
+	options,
+	onChange,
+	className,
+} ) {
+	return (
+		<fieldset
+			className={ classnames(
+				'block-editor-segmented-text-control',
+				className
+			) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-segmented-text-control__buttons">
+				{ options.map( ( option ) => {
+					return (
+						<Button
+							size="compact"
+							key={ option.value }
+							icon={ option.icon }
+							label={ option.label }
+							isPressed={ option.value === value }
+							onClick={ () => onChange( option.value ) }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
+	);
+}

package/src/components/{writing-mode-control → segmented-text-control}/style.scss

@@ -1,18 +1,15 @@
-.block-editor-writing-mode-control {
+.block-editor-segmented-text-control {
 	border: 0;
 	margin: 0;
 	padding: 0;
 
-	.block-editor-writing-mode-control__buttons {
+	.block-editor-segmented-text-control__buttons {
 		// 4px of padding makes the row 40px high, same as an input.
 		padding: $grid-unit-05 0;
 		display: flex;
 	}
 
 	.components-button.has-icon {
-		height: $grid-unit-40;
 		margin-right: $grid-unit-05;
-		min-width: $grid-unit-40;
-		padding: 0;
 	}
 }

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -92,6 +92,8 @@ export default function SpacingInputControl( {
 			! isValueSpacingPreset( value )
 	);
 
+	const [ minValue, setMinValue ] = useState( minimumCustomValue );
+
 	const previousValue = usePrevious( value );
 	if (
 		!! value &&
@@ -222,13 +224,26 @@ export default function SpacingInputControl( {
 						}
 						value={ currentValue }
 						units={ units }
-						min={ minimumCustomValue }
+						min={ minValue }
 						placeholder={ allPlaceholder }
 						disableUnits={ isMixed }
 						label={ ariaLabel }
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size={ '__unstable-large' }
+						onDragStart={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDrag={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDragEnd={ () => {
+							setMinValue( minimumCustomValue );
+						} }
 					/>
 					<RangeControl
 						onMouseOver={ onMouseOver }

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

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * 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={ classnames(
+				'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

@@ -6,23 +6,27 @@ import classnames from 'classnames';
 /**
  * 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
+		<SegmentedTextControl
+			label={ __( 'Decoration' ) }
+			options={ TEXT_DECORATIONS }
 			className={ classnames(
 				'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

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * 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
+		<SegmentedTextControl
+			label={ __( 'Letter case' ) }
+			options={ TEXT_TRANSFORMS }
 			className={ classnames(
 				'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/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/writing-flow/use-drag-selection.js

@@ -18,7 +18,9 @@ import { store as blockEditorStore } from '../../store';
 function setContentEditableWrapper( node, value ) {
 	node.contentEditable = value;
 	// Firefox doesn't automatically move focus.
-	if ( value ) node.focus();
+	if ( value ) {
+		node.focus();
+	}
 }
 
 /**

package/src/components/writing-flow/use-tab-nav.js

@@ -118,7 +118,9 @@ export default function useTabNav() {
 				// do it again here because after clearing block selection,
 				// focus land on the writing flow container and pressing Tab
 				// will no longer send focus through the focus capture element.
-				if ( event.target === node ) setNavigationMode( true );
+				if ( event.target === node ) {
+					setNavigationMode( true );
+				}
 				return;
 			}
 

package/src/components/writing-mode-control/index.js

@@ -6,18 +6,22 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import SegmentedTextControl from '../segmented-text-control';
+
 const WRITING_MODES = [
 	{
-		name: __( 'Horizontal' ),
+		label: __( 'Horizontal' ),
 		value: 'horizontal-tb',
 		icon: textHorizontal,
 	},
 	{
-		name: __( 'Vertical' ),
+		label: __( 'Vertical' ),
 		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
 		icon: textVertical,
 	},
@@ -35,34 +39,17 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<fieldset
+		<SegmentedTextControl
+			label={ __( 'Orientation' ) }
+			options={ WRITING_MODES }
 			className={ classnames(
 				'block-editor-writing-mode-control',
 				className
 			) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Orientation' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-writing-mode-control__buttons">
-				{ WRITING_MODES.map( ( writingMode ) => {
-					return (
-						<Button
-							key={ writingMode.value }
-							icon={ writingMode.icon }
-							label={ writingMode.name }
-							isPressed={ writingMode.value === value }
-							onClick={ () => {
-								onChange(
-									writingMode.value === value
-										? undefined
-										: writingMode.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		/>
 	);
 }

package/src/hooks/duotone.js

@@ -291,7 +291,9 @@ function useDuotoneStyles( {
 	const blockElement = useBlockElement( clientId );
 
 	useEffect( () => {
-		if ( ! isValidFilter ) return;
+		if ( ! isValidFilter ) {
+			return;
+		}
 
 		// Safari does not always update the duotone filter when the duotone colors
 		// are changed. When using Safari, force the block element to be repainted by

package/src/hooks/utils.js

@@ -135,7 +135,13 @@ export function shouldSkipSerialization(
 
 const pendingStyleOverrides = new WeakMap();
 
-export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
+export function useStyleOverride( {
+	id,
+	css,
+	assets,
+	__unstableType,
+	clientId,
+} = {} ) {
 	const { setStyleOverride, deleteStyleOverride } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -143,7 +149,9 @@ export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
 	const fallbackId = useId();
 	useEffect( () => {
 		// Unmount if there is CSS and assets are empty.
-		if ( ! css && ! assets ) return;
+		if ( ! css && ! assets ) {
+			return;
+		}
 
 		const _id = id || fallbackId;
 		const override = {
@@ -151,6 +159,7 @@ export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
 			css,
 			assets,
 			__unstableType,
+			clientId,
 		};
 		// Batch updates to style overrides to avoid triggering cascading renders
 		// for each style override block included in a tree and optimize initial render.
@@ -187,6 +196,7 @@ export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
 	}, [
 		id,
 		css,
+		clientId,
 		assets,
 		__unstableType,
 		fallbackId,
@@ -213,6 +223,7 @@ export function useBlockSettings( name, parentLayout ) {
 		customFontFamilies,
 		defaultFontFamilies,
 		themeFontFamilies,
+		defaultFontSizesEnabled,
 		customFontSizes,
 		defaultFontSizes,
 		themeFontSizes,
@@ -265,6 +276,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'typography.fontFamilies.custom',
 		'typography.fontFamilies.default',
 		'typography.fontFamilies.theme',
+		'typography.defaultFontSizes',
 		'typography.fontSizes.custom',
 		'typography.fontSizes.default',
 		'typography.fontSizes.theme',
@@ -359,6 +371,7 @@ export function useBlockSettings( name, parentLayout ) {
 					theme: themeFontSizes,
 				},
 				customFontSize,
+				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -398,6 +411,7 @@ export function useBlockSettings( name, parentLayout ) {
 		customFontFamilies,
 		defaultFontFamilies,
 		themeFontFamilies,
+		defaultFontSizesEnabled,
 		customFontSizes,
 		defaultFontSizes,
 		themeFontSizes,

package/src/private-apis.js

@@ -15,7 +15,7 @@ import {
 } from './components/inserter/search-items';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import { useShowBlockTools } from './components/block-tools/use-show-block-tools';
+import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
@@ -23,6 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
 import { useLayoutClasses, useLayoutStyles } from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
+import TextAlignmentControl from './components/text-alignment-control';
 import {
 	default as ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
@@ -56,7 +57,7 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	useShowBlockTools,
+	useHasBlockToolbar,
 	cleanEmptyObject,
 	useStyleOverride,
 	BlockQuickNavigation,
@@ -66,6 +67,7 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	TextAlignmentControl,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 	usesContextKey,