@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/src/components/rich-text/format-toolbar-container.js

@@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	isCollapsed,
 	getActiveFormats,
-	useAnchorRef,
+	useAnchor,
 	store as richTextStore,
 } from '@wordpress/rich-text';
 
@@ -17,28 +17,32 @@ import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
+function InlineSelectionToolbar( {
+	value,
+	editableContentElement,
+	activeFormats,
+} ) {
 	const lastFormat = activeFormats[ activeFormats.length - 1 ];
 	const lastFormatType = lastFormat?.type;
 	const settings = useSelect(
 		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
 		[ lastFormatType ]
 	);
-	const selectionRef = useAnchorRef( {
-		ref: anchorRef,
+	const popoverAnchor = useAnchor( {
+		editableContentElement,
 		value,
 		settings,
 	} );
 
-	return <InlineToolbar anchorRef={ selectionRef } />;
+	return <InlineToolbar popoverAnchor={ popoverAnchor } />;
 }
 
-function InlineToolbar( { anchorRef } ) {
+function InlineToolbar( { popoverAnchor } ) {
 	return (
 		<Popover
 			position="top center"
 			focusOnMount={ false }
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			className="block-editor-rich-text__inline-format-toolbar"
 			__unstableSlotName="block-toolbar"
 		>
@@ -51,14 +55,18 @@ function InlineToolbar( { anchorRef } ) {
 	);
 }
 
-const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+const FormatToolbarContainer = ( {
+	inline,
+	editableContentElement,
+	value,
+} ) => {
 	const hasInlineToolbar = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
 		[]
 	);
 
 	if ( inline ) {
-		return <InlineToolbar anchorRef={ anchorRef } />;
+		return <InlineToolbar popoverAnchor={ editableContentElement } />;
 	}
 
 	if ( hasInlineToolbar ) {
@@ -70,7 +78,7 @@ const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
 
 		return (
 			<InlineSelectionToolbar
-				anchorRef={ anchorRef }
+				editableContentElement={ editableContentElement }
 				value={ value }
 				activeFormats={ activeFormats }
 			/>

package/src/components/rich-text/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -61,25 +60,27 @@ export const inputEventContext = createContext();
  * @return {Object} Filtered props.
  */
 function removeNativeProps( props ) {
-	return omit( props, [
-		'__unstableMobileNoFocusOnMount',
-		'deleteEnter',
-		'placeholderTextColor',
-		'textAlign',
-		'selectionColor',
-		'tagsToEliminate',
-		'rootTagsToEliminate',
-		'disableEditingMenu',
-		'fontSize',
-		'fontFamily',
-		'fontWeight',
-		'fontStyle',
-		'minWidth',
-		'maxWidth',
-		'setRef',
-		'disableSuggestions',
-		'disableAutocorrection',
-	] );
+	const {
+		__unstableMobileNoFocusOnMount,
+		deleteEnter,
+		placeholderTextColor,
+		textAlign,
+		selectionColor,
+		tagsToEliminate,
+		rootTagsToEliminate,
+		disableEditingMenu,
+		fontSize,
+		fontFamily,
+		fontWeight,
+		fontStyle,
+		minWidth,
+		maxWidth,
+		setRef,
+		disableSuggestions,
+		disableAutocorrection,
+		...restProps
+	} = props;
+	return restProps;
 }
 
 function RichTextWrapper(
@@ -327,11 +328,11 @@ function RichTextWrapper(
 	}
 
 	function onFocus() {
-		anchorRef.current.focus();
+		anchorRef.current?.focus();
 	}
 
 	const TagName = tagName;
-	const content = (
+	return (
 		<>
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
@@ -353,7 +354,7 @@ function RichTextWrapper(
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
-					anchorRef={ anchorRef }
+					editableContentElement={ anchorRef.current }
 					value={ value }
 				/>
 			) }
@@ -423,19 +424,6 @@ function RichTextWrapper(
 			/>
 		</>
 	);
-
-	if ( ! wrapperClassName ) {
-		return content;
-	}
-
-	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
-		since: '5.4',
-		alternative: 'className prop or create your own wrapper div',
-		version: '6.2',
-	} );
-
-	const className = classnames( 'block-editor-rich-text', wrapperClassName );
-	return <div className={ className }>{ content }</div>;
 }
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
@@ -460,7 +448,8 @@ ForwardedRichTextContainer.Content = ( {
 	const content = <RawHTML>{ value }</RawHTML>;
 
 	if ( Tag ) {
-		return <Tag { ...omit( props, [ 'format' ] ) }>{ content }</Tag>;
+		const { format, ...restProps } = props;
+		return <Tag { ...restProps }>{ content }</Tag>;
 	}
 
 	return content;

package/src/components/rich-text/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +36,6 @@ import {
 	toHTMLString,
 	slice,
 } from '@wordpress/rich-text';
-import deprecated from '@wordpress/deprecated';
 import { isURL } from '@wordpress/url';
 
 /**
@@ -59,7 +57,6 @@ import {
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
 
-const wrapperClasses = 'block-editor-rich-text';
 const classes = 'block-editor-rich-text__editable';
 
 function RichTextWrapper(
@@ -114,6 +111,7 @@ function RichTextWrapper(
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
+		onEnter: onCustomEnter,
 		...props
 	},
 	forwardedRef
@@ -345,6 +343,10 @@ function RichTextWrapper(
 				}
 			}
 
+			if ( onCustomEnter ) {
+				onCustomEnter();
+			}
+
 			if ( multiline ) {
 				if ( shiftKey ) {
 					if ( ! disableLineBreaks ) {
@@ -578,7 +580,7 @@ function RichTextWrapper(
 
 	const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
 
-	const content = (
+	return (
 		<RichText
 			clientId={ clientId }
 			identifier={ identifier }
@@ -706,22 +708,6 @@ function RichTextWrapper(
 			) }
 		</RichText>
 	);
-
-	if ( ! wrapperClassName ) {
-		return content;
-	}
-
-	deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
-		since: '5.4',
-		alternative: 'className prop or create your own wrapper div',
-		version: '6.2',
-	} );
-
-	return (
-		<div className={ classnames( wrapperClasses, wrapperClassName ) }>
-			{ content }
-		</div>
-	);
 }
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
@@ -746,7 +732,8 @@ ForwardedRichTextContainer.Content = ( {
 	const content = <RawHTML>{ value }</RawHTML>;
 
 	if ( Tag ) {
-		return <Tag { ...omit( props, [ 'format' ] ) }>{ content }</Tag>;
+		const { format, ...restProps } = props;
+		return <Tag { ...restProps }>{ content }</Tag>;
 	}
 
 	return content;

package/src/components/spacing-sizes-control/linked-button.js

@@ -6,16 +6,15 @@ import { __ } from '@wordpress/i18n';
 import { Button, Tooltip } from '@wordpress/components';
 
 export default function LinkedButton( { isLinked, onClick } ) {
-	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
 		<Tooltip text={ label }>
 			<span className="component-spacing-sizes-control__linked-button">
 				<Button
-					variant={ isLinked ? 'primary' : 'secondary' }
 					isSmall
 					icon={ isLinked ? link : linkOff }
-					iconSize={ 16 }
+					iconSize={ 24 }
 					aria-label={ label }
 					onClick={ onClick }
 				/>

package/src/components/spacing-sizes-control/style.scss

@@ -46,10 +46,13 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		margin-right: $grid-unit-05;
 		padding: 0;
 	}
 
+	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
+		margin-right: $grid-unit-05;
+	}
+
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;

package/src/components/spacing-sizes-control/utils.js

@@ -211,12 +211,5 @@ export function isValuesDefined( values ) {
 	if ( values === undefined || values === null ) {
 		return false;
 	}
-	return ! isEmpty(
-		Object.values( values ).filter(
-			// Switching units when input is empty causes values only
-			// containing units. This gives false positive on mixed values
-			// unless filtered.
-			( value ) => !! value && /\d/.test( value )
-		)
-	);
+	return ! isEmpty( Object.values( values ).filter( ( value ) => !! value ) );
 }

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

@@ -6,14 +6,16 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-} from '@wordpress/components';
-import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
+import { BaseControl, Button } from '@wordpress/components';
+import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 const TEXT_DECORATIONS = [
+	{
+		name: __( 'None' ),
+		value: 'none',
+		icon: reset,
+	},
 	{
 		name: __( 'Underline' ),
 		value: 'underline',
@@ -40,30 +42,36 @@ export default function TextDecorationControl( {
 	value,
 	onChange,
 	className,
-	...props
 } ) {
 	return (
-		<ToggleGroupControl
-			{ ...props }
+		<fieldset
 			className={ classnames(
 				'block-editor-text-decoration-control',
 				className
 			) }
-			__experimentalIsIconGroup
-			label={ __( 'Decoration' ) }
-			value={ value }
-			onChange={ onChange }
 		>
-			{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-				return (
-					<ToggleGroupControlOptionIcon
-						key={ textDecoration.value }
-						value={ textDecoration.value }
-						icon={ textDecoration.icon }
-						label={ textDecoration.name }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+			<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>
 	);
 }

package/src/components/text-decoration-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-text-decoration-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	.block-editor-text-decoration-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/text-transform-control/index.js

@@ -1,21 +1,26 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-} from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
+	reset,
 	formatCapitalize,
 	formatLowercase,
 	formatUppercase,
 } from '@wordpress/icons';
 
 const TEXT_TRANSFORMS = [
+	{
+		name: __( 'None' ),
+		value: 'none',
+		icon: reset,
+	},
 	{
 		name: __( 'Uppercase' ),
 		value: 'uppercase',
@@ -36,32 +41,43 @@ const TEXT_TRANSFORMS = [
 /**
  * Control to facilitate text transform selections.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected text transform.
- * @param {Function} props.onChange Handles change in text transform selection.
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected text transform.
+ * @param {Function} props.onChange  Handles change in text transform selection.
  *
  * @return {WPElement} Text transform control.
  */
-export default function TextTransformControl( { value, onChange, ...props } ) {
+export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<ToggleGroupControl
-			{ ...props }
-			className="block-editor-text-transform-control"
-			__experimentalIsIconGroup
-			label={ __( 'Letter case' ) }
-			value={ value }
-			onChange={ onChange }
+		<fieldset
+			className={ classnames(
+				'block-editor-text-transform-control',
+				className
+			) }
 		>
-			{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-				return (
-					<ToggleGroupControlOptionIcon
-						key={ textTransform.value }
-						value={ textTransform.value }
-						icon={ textTransform.icon }
-						label={ textTransform.name }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+			<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>
 	);
 }

package/src/components/text-transform-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-text-transform-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	.block-editor-text-transform-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/tool-selector/index.js

@@ -31,15 +31,11 @@ const selectIcon = (
 );
 
 function ToolSelector( props, ref ) {
-	const isNavigationTool = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
+	const mode = useSelect(
+		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { setNavigationMode } = useDispatch( blockEditorStore );
-
-	const onSwitchMode = ( mode ) => {
-		setNavigationMode( mode === 'edit' ? false : true );
-	};
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 
 	return (
 		<Dropdown
@@ -47,7 +43,7 @@ function ToolSelector( props, ref ) {
 				<Button
 					{ ...props }
 					ref={ ref }
-					icon={ isNavigationTool ? selectIcon : editIcon }
+					icon={ mode === 'navigation' ? selectIcon : editIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -60,8 +56,10 @@ function ToolSelector( props, ref ) {
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
 						<MenuItemsChoice
-							value={ isNavigationTool ? 'select' : 'edit' }
-							onSelect={ onSwitchMode }
+							value={
+								mode === 'navigation' ? 'navigation' : 'edit'
+							}
+							onSelect={ __unstableSetEditorMode }
 							choices={ [
 								{
 									value: 'edit',
@@ -73,7 +71,7 @@ function ToolSelector( props, ref ) {
 									),
 								},
 								{
-									value: 'select',
+									value: 'navigation',
 									label: (
 										<>
 											{ selectIcon }