@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,6 +11,7 @@ import {
 	useCallback,
 	forwardRef,
 	createContext,
+	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
@@ -20,6 +21,7 @@ import {
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -38,6 +40,7 @@ import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -108,12 +111,19 @@ export function RichTextWrapper(
 ) {
 	props = removeNativeProps( props );
 
-	const instanceId = useInstanceId( RichTextWrapper );
+	if ( onSplit ) {
+		deprecated( 'wp.blockEditor.RichText onSplit prop', {
+			since: '6.4',
+			alternative: 'block.json support key: "splitting"',
+		} );
+	}
 
+	const instanceId = useInstanceId( RichTextWrapper );
 	const anchorRef = useRef();
 	const context = useBlockEditContext();
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
+	const blockContext = useContext( BlockContext );
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -163,7 +173,7 @@ export function RichTextWrapper(
 				const { getBlockBindingsSource } = unlock(
 					select( blocksStore )
 				);
-				for ( const [ attribute, args ] of Object.entries(
+				for ( const [ attribute, binding ] of Object.entries(
 					blockBindings
 				) ) {
 					if (
@@ -173,13 +183,16 @@ export function RichTextWrapper(
 						break;
 					}
 
-					// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+					// If the source is not defined, or if its value of `canUserEditValue` is `false`, disable it.
 					const blockBindingsSource = getBlockBindingsSource(
-						args.source
+						binding.source
 					);
 					if (
-						! blockBindingsSource ||
-						blockBindingsSource.lockAttributesEditing
+						! blockBindingsSource?.canUserEditValue( {
+							select,
+							context: blockContext,
+							args: binding.args,
+						} )
 					) {
 						_disableBoundBlocks = true;
 						break;
@@ -419,7 +432,7 @@ export function RichTextWrapper(
 				] ) }
 				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning
-				className={ classnames(
+				className={ clsx(
 					'block-editor-rich-text__editable',
 					props.className,
 					'rich-text'

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -644,7 +644,7 @@ export function RichTextWrapper(
 										  }
 										: editableProps.style
 								}
-								className={ classnames(
+								className={ clsx(
 									classes,
 									props.className,
 									editableProps.className

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

@@ -3,7 +3,9 @@
  */
 import { forwardRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -33,6 +35,8 @@ function RichTextMultiline(
 	} );
 
 	const { clientId } = useBlockEditContext();
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
 
 	const multilineTagName = getMultilineTag( multiline );
@@ -68,8 +72,32 @@ function RichTextMultiline(
 							_onChange( newValues );
 						} }
 						isSelected={ undefined }
-						onSplit={ ( v ) => v }
-						onReplace={ ( array ) => {
+						onKeyDown={ ( event ) => {
+							if ( event.keyCode !== ENTER ) {
+								return;
+							}
+
+							event.preventDefault();
+
+							const { offset: start } = getSelectionStart();
+							const { offset: end } = getSelectionEnd();
+
+							// Cannot split if there is no selection.
+							if (
+								typeof start !== 'number' ||
+								typeof end !== 'number'
+							) {
+								return;
+							}
+
+							const richTextValue = create( { html: _value } );
+							richTextValue.start = start;
+							richTextValue.end = end;
+
+							const array = split( richTextValue ).map( ( v ) =>
+								toHTMLString( { value: v } )
+							);
+
 							const newValues = values.slice();
 							newValues.splice( index, 1, ...array );
 							_onChange( newValues );

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

@@ -402,7 +402,8 @@ export class RichText extends Component {
 		this.comesFromAztec = true;
 		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
 		const value = this.createRecord();
-		const { start, end, text } = value;
+		const { start, end, text, activeFormats } = value;
+		const hasActiveFormats = activeFormats && !! activeFormats.length;
 		let newValue;
 
 		// Always handle full content deletion ourselves.
@@ -415,8 +416,8 @@ export class RichText extends Component {
 
 		// Only process delete if the key press occurs at an uncollapsed edge.
 		if (
-			! onDelete ||
 			! isCollapsed( value ) ||
+			hasActiveFormats ||
 			( isReverse && start !== 0 ) ||
 			( ! isReverse && end !== text.length )
 		) {

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

@@ -151,7 +151,7 @@ describe( '<RichText/>', () => {
 			const expectedFontSize = 16;
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } />
+				<RichText accessibilityLabel="editor" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -164,8 +164,8 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
-					fontSize={ 'min(2em, 3em)' }
+					accessibilityLabel="editor"
+					fontSize="min(2em, 3em)"
 				/>
 			);
 			// Assert.
@@ -179,7 +179,7 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: 'min(2em, 3em)' } }
 				/>
 			);
@@ -195,7 +195,7 @@ describe( '<RichText/>', () => {
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="div" />
+				<RichText accessibilityLabel="editor" tagName="div" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -209,7 +209,7 @@ describe( '<RichText/>', () => {
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="p" />
+				<RichText accessibilityLabel="editor" tagName="p" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -224,7 +224,7 @@ describe( '<RichText/>', () => {
 				mockGlobalSettings( { fontSize: unit } );
 				// Act.
 				const { getByLabelText } = render(
-					<RichText accessibilityLabel={ 'editor' } tagName="p" />
+					<RichText accessibilityLabel="editor" tagName="p" />
 				);
 				// Assert.
 				const actualFontSize =
@@ -241,9 +241,9 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: '1' } }
-					fontSize={ '2' }
+					fontSize="2"
 					tagName="p"
 				/>
 			);
@@ -260,7 +260,7 @@ describe( '<RichText/>', () => {
 			// Act.
 			const { getByLabelText } = render(
 				<RichText
-					accessibilityLabel={ 'editor' }
+					accessibilityLabel="editor"
 					style={ { fontSize: '1' } }
 					tagName="p"
 				/>
@@ -276,7 +276,7 @@ describe( '<RichText/>', () => {
 			Dimensions.set( { window: { ...window, width: 300 } } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vw' } />
+				<RichText accessibilityLabel="editor" fontSize="1vw" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -289,7 +289,7 @@ describe( '<RichText/>', () => {
 			Dimensions.set( { window: { ...window, height: 300 } } );
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vh' } />
+				<RichText accessibilityLabel="editor" fontSize="1vh" />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
@@ -335,7 +335,7 @@ describe( '<RichText/>', () => {
 			const style = { lineHeight: 0.2 };
 			// Act.
 			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } style={ style } />
+				<RichText accessibilityLabel="editor" style={ style } />
 			);
 			// Assert.
 			const actualFontSize = getByLabelText( 'editor' ).props.lineHeight;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -36,7 +36,7 @@ export default function SegmentedTextControl( {
 } ) {
 	return (
 		<fieldset
-			className={ classnames(
+			className={ clsx(
 				'block-editor-segmented-text-control',
 				className
 			) }

package/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js

@@ -1,28 +1,60 @@
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useSettings } from '../../use-settings';
+import { RANGE_CONTROL_MAX_SIZE } from '../utils';
+
+const EMPTY_ARRAY = [];
+
+const compare = new Intl.Collator( 'und', { numeric: true } ).compare;
 
 export default function useSpacingSizes() {
-	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
-
-	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
-	if ( settingsSizes ) {
-		spacingSizes.push( ...settingsSizes );
-	}
-
-	if ( spacingSizes.length > 8 ) {
-		spacingSizes.unshift( {
-			name: __( 'Default' ),
-			slug: 'default',
-			size: undefined,
-		} );
-	}
-
-	return spacingSizes;
+	const [
+		customSpacingSizes,
+		themeSpacingSizes,
+		defaultSpacingSizes,
+		defaultSpacingSizesEnabled,
+	] = useSettings(
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.theme',
+		'spacing.spacingSizes.default',
+		'spacing.defaultSpacingSizes'
+	);
+
+	const customSizes = customSpacingSizes ?? EMPTY_ARRAY;
+
+	const themeSizes = themeSpacingSizes ?? EMPTY_ARRAY;
+
+	const defaultSizes =
+		defaultSpacingSizes && defaultSpacingSizesEnabled !== false
+			? defaultSpacingSizes
+			: EMPTY_ARRAY;
+
+	return useMemo( () => {
+		const sizes = [
+			{ name: __( 'None' ), slug: '0', size: 0 },
+			...customSizes,
+			...themeSizes,
+			...defaultSizes,
+		].sort( ( a, b ) => compare( a.slug, b.slug ) );
+
+		return sizes.length > RANGE_CONTROL_MAX_SIZE
+			? [
+					{
+						name: __( 'Default' ),
+						slug: 'default',
+						size: undefined,
+					},
+					...sizes,
+			  ]
+			: // See https://github.com/WordPress/gutenberg/pull/44247 for reasoning
+			  // to use the index as the name in the range control.
+			  sizes.map( ( { slug, size }, i ) => ( { name: i, slug, size } ) );
+	}, [ customSizes, themeSizes, defaultSizes ] );
 }

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

@@ -23,6 +23,7 @@ import { settings } from '@wordpress/icons';
 import { useSettings } from '../../use-settings';
 import { store as blockEditorStore } from '../../../store';
 import {
+	RANGE_CONTROL_MAX_SIZE,
 	ALL_SIDES,
 	LABELS,
 	getSliderValueFromPreset,
@@ -79,7 +80,7 @@ export default function SpacingInputControl( {
 	value = getPresetValueFromCustomValue( value, spacingSizes );
 
 	let selectListSizes = spacingSizes;
-	const showRangeControl = spacingSizes.length <= 8;
+	const showRangeControl = spacingSizes.length <= RANGE_CONTROL_MAX_SIZE;
 
 	const disableCustomSpacingSizes = useSelect( ( select ) => {
 		const editorSettings = select( blockEditorStore ).getSettings();
@@ -230,7 +231,7 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						onDragStart={ () => {
 							if ( value?.charAt( 0 ) === '-' ) {
 								setMinValue( 0 );
@@ -312,7 +313,7 @@ export default function SpacingInputControl( {
 					options={ options }
 					label={ ariaLabel }
 					hideLabelFromVision
-					size={ '__unstable-large' }
+					size="__unstable-large"
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					onFocus={ onMouseOver }

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

@@ -12,6 +12,8 @@ import {
 	sidesVertical,
 } from '@wordpress/icons';
 
+export const RANGE_CONTROL_MAX_SIZE = 8;
+
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 
 export const DEFAULT_VALUES = {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,7 +78,7 @@ export default function TextAlignmentControl( {
 		<SegmentedTextControl
 			label={ __( 'Text alignment' ) }
 			options={ validOptions }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-alignment-control',
 				className
 			) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export default function TextDecorationControl( {
 		<SegmentedTextControl
 			label={ __( 'Decoration' ) }
 			options={ TEXT_DECORATIONS }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
 			) }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -57,7 +57,7 @@ export default function TextTransformControl( { className, value, onChange } ) {
 		<SegmentedTextControl
 			label={ __( 'Letter case' ) }
 			options={ TEXT_TRANSFORMS }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-text-transform-control',
 				className
 			) }

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/video-player/index.native.js

@@ -99,7 +99,7 @@ class Video extends Component {
 					// So we are setting controls=false and adding a play button that
 					// will trigger presentFullscreenPlayer()
 					controls={ false }
-					ignoreSilentSwitch={ 'ignore' }
+					ignoreSilentSwitch="ignore"
 					paused={ ! isFullScreen }
 					onLayout={ this.onVideoLayout }
 					onFullscreenPlayerWillPresent={ () => {

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'
 				) }