@wordpress/block-editor 12.15.0 → 12.16.0

package/src/components/block-canvas/index.js

@@ -2,11 +2,13 @@
  * WordPress dependencies
  */
 import { useMergeRefs } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import BlockTools from '../block-tools';
 import EditorStyles from '../editor-styles';
 import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
@@ -23,11 +25,15 @@ export function ExperimentalBlockCanvas( {
 } ) {
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
-	const contentRef = useMergeRefs( [ contentRefProp, clearerRef ] );
+	const localRef = useRef();
+	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
 
 	if ( ! shouldIframe ) {
 		return (
-			<>
+			<BlockTools
+				__unstableContentRef={ localRef }
+				style={ { height, display: 'flex' } }
+			>
 				<EditorStyles
 					styles={ styles }
 					scope=".editor-styles-wrapper"
@@ -36,29 +42,37 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ { height } }
+					style={ {
+						height: '100%',
+						width: '100%',
+					} }
 				>
 					{ children }
 				</WritingFlow>
-			</>
+			</BlockTools>
 		);
 	}
 
 	return (
-		<Iframe
-			{ ...iframeProps }
-			ref={ resetTypingRef }
-			contentRef={ contentRef }
-			style={ {
-				width: '100%',
-				height,
-				...iframeProps?.style,
-			} }
-			name="editor-canvas"
+		<BlockTools
+			__unstableContentRef={ localRef }
+			style={ { height, display: 'flex' } }
 		>
-			<EditorStyles styles={ styles } />
-			{ children }
-		</Iframe>
+			<Iframe
+				{ ...iframeProps }
+				ref={ resetTypingRef }
+				contentRef={ contentRef }
+				style={ {
+					width: '100%',
+					height: '100%',
+					...iframeProps?.style,
+				} }
+				name="editor-canvas"
+			>
+				<EditorStyles styles={ styles } />
+				{ children }
+			</Iframe>
+		</BlockTools>
 	);
 }
 

package/src/components/block-caption/README.md

@@ -16,7 +16,7 @@ The `BlockCaption` component renders block-level UI for adding and editing capti
 Renders an editable caption field designed specifically for block-level use.
 
 ```jsx
-import { BlockCaption } from '@wordpress/block-editor';
+import { BlockCaption, RichText } from '@wordpress/block-editor';
 
 const MyBlockCaption = (
 	clientId,
@@ -29,7 +29,7 @@ const MyBlockCaption = (
 		clientId={ clientId }
 		accessible={ true }
 		accessibilityLabelCreator={ ( caption ) =>
-			! caption
+			RichText.isEmpty( caption )
 				? /* translators: accessibility text. Empty caption. */
 				  'Caption. Empty'
 				: sprintf(

package/src/components/block-card/index.js

@@ -62,9 +62,11 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			<BlockIcon icon={ icon } showColors />
 			<div className="block-editor-block-card__content">
 				<h2 className="block-editor-block-card__title">{ title }</h2>
-				<span className="block-editor-block-card__description">
-					{ description }
-				</span>
+				{ description && (
+					<span className="block-editor-block-card__description">
+						{ description }
+					</span>
+				) }
 			</div>
 		</div>
 	);

package/src/components/block-card/style.scss

@@ -1,24 +1,28 @@
 .block-editor-block-card {
-	display: flex;
 	align-items: flex-start;
+	color: $gray-900;
+	display: flex;
+	padding: $grid-unit-20;
 }
 
 .block-editor-block-card__content {
 	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
 }
 
 .block-editor-block-card__title {
 	font-weight: 500;
 
 	&.block-editor-block-card__title {
+		font-size: $default-font-size;
 		line-height: $button-size-small;
-		margin: 0 0 $grid-unit-05;
+		margin: 0;
 	}
 }
 
 .block-editor-block-card__description {
+	display: block;
 	font-size: $default-font-size;
+	margin-top: $grid-unit-05;
 }
 
 .block-editor-block-card .block-editor-block-icon {

package/src/components/block-controls/hook.js

@@ -1,45 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import groups from './groups';
-import { store as blockEditorStore } from '../../store';
-import { useBlockEditContext } from '../block-edit/context';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../block-edit/context';
 
 export default function useBlockControlsFill( group, shareWithChildBlocks ) {
-	const isDisplayed = useDisplayBlockControls();
-	const { clientId } = useBlockEditContext();
-	const isParentDisplayed = useSelect(
-		( select ) => {
-			if ( ! shareWithChildBlocks ) {
-				return false;
-			}
-
-			const { getBlockName, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-
-			return (
-				hasBlockSupport(
-					getBlockName( clientId ),
-					'__experimentalExposeControlsToChildren',
-					false
-				) && hasSelectedInnerBlock( clientId )
-			);
-		},
-		[ shareWithChildBlocks, clientId ]
-	);
-
-	if ( isDisplayed ) {
+	const context = useBlockEditContext();
+	if ( context[ mayDisplayControlsKey ] ) {
 		return groups[ group ]?.Fill;
 	}
-	if ( isParentDisplayed ) {
+	if ( context[ mayDisplayParentControlsKey ] && shareWithChildBlocks ) {
 		return groups.parent.Fill;
 	}
 	return null;

package/src/components/block-controls/test/index.js

@@ -59,7 +59,7 @@ describe( 'BlockControls', () => {
 	it( 'should render a dynamic toolbar of controls', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls controls={ controls }>
 						<p>Child</p>
 					</BlockControls>
@@ -84,7 +84,7 @@ describe( 'BlockControls', () => {
 	it( 'should render its children', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls controls={ controls }>
 						<p>Child</p>
 					</BlockControls>
@@ -99,7 +99,7 @@ describe( 'BlockControls', () => {
 	it( 'should a dynamic toolbar when passed as children', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls>
 						<ToolbarGroup controls={ controls } />
 					</BlockControls>

package/src/components/block-edit/context.js

@@ -3,6 +3,9 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
+export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
+export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',
 	isSelected: false,

package/src/components/block-edit/index.js

@@ -8,7 +8,12 @@ import { hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import Edit from './edit';
-import { BlockEditContextProvider, useBlockEditContext } from './context';
+import {
+	BlockEditContextProvider,
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from './context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -20,7 +25,13 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
  */
 export { useBlockEditContext };
 
-export default function BlockEdit( props ) {
+export default function BlockEdit( {
+	mayDisplayControls,
+	mayDisplayParentControls,
+	// The remaining props are passed through the BlockEdit filters and are thus
+	// public API!
+	...props
+} ) {
 	const {
 		name,
 		isSelected,
@@ -32,19 +43,34 @@ export default function BlockEdit( props ) {
 	const layoutSupport =
 		hasBlockSupport( name, 'layout', false ) ||
 		hasBlockSupport( name, '__experimentalLayout', false );
-	const context = {
-		name,
-		isSelected,
-		clientId,
-		layout: layoutSupport ? layout : null,
-		__unstableLayoutClassNames,
-	};
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
 			// changed to avoid  unnecessary rerenders.
 			// See https://reactjs.org/docs/context.html#caveats.
-			value={ useMemo( () => context, Object.values( context ) ) }
+			value={ useMemo(
+				() => ( {
+					name,
+					isSelected,
+					clientId,
+					layout: layoutSupport ? layout : null,
+					__unstableLayoutClassNames,
+					// We use symbols in favour of an __unstable prefix to avoid
+					// usage outside of the package (this context is exposed).
+					[ mayDisplayControlsKey ]: mayDisplayControls,
+					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+				} ),
+				[
+					name,
+					isSelected,
+					clientId,
+					layoutSupport,
+					layout,
+					__unstableLayoutClassNames,
+					mayDisplayControls,
+					mayDisplayParentControls,
+				]
+			) }
 		>
 			<Edit { ...props } />
 		</BlockEditContextProvider>

package/src/components/block-info-slot-fill/index.js

@@ -7,14 +7,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 
 const { createPrivateSlotFill } = unlock( componentsPrivateApis );
 const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
 
 const BlockInfo = ( props ) => {
-	const isDisplayed = useDisplayBlockControls();
-	if ( ! isDisplayed ) {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 	return <Fill { ...props } />;

package/src/components/block-inspector/style.scss

@@ -34,10 +34,6 @@
 		// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
 		margin-top: -$border-width;
 	}
-
-	.block-editor-block-card {
-		padding: $grid-unit-20;
-	}
 }
 
 .block-editor-block-inspector__no-blocks,

package/src/components/block-list/block.js

@@ -15,6 +15,7 @@ import {
 	switchToBlockType,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -53,10 +54,18 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA?.className && propsB?.className ) {
+	// May be set to undefined, so check if the property is set!
+	if (
+		propsA?.hasOwnProperty( 'className' ) &&
+		propsB?.hasOwnProperty( 'className' )
+	) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA?.style && propsB?.style ) {
+
+	if (
+		propsA?.hasOwnProperty( 'style' ) &&
+		propsB?.hasOwnProperty( 'style' )
+	) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 
@@ -95,21 +104,40 @@ function BlockListBlock( {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
+		mayDisplayControls,
+		mayDisplayParentControls,
 	} = useSelect(
 		( select ) => {
 			const {
 				getSettings,
 				__unstableGetTemporarilyEditingAsBlocks,
 				getBlockEditingMode,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
+				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
+			const { hasBlockSupport } = select( blocksStore );
 			return {
 				themeSupportsLayout: getSettings().supportsLayout,
 				isTemporarilyEditingAsBlocks:
 					__unstableGetTemporarilyEditingAsBlocks() === clientId,
 				blockEditingMode: getBlockEditingMode( clientId ),
+				mayDisplayControls:
+					isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === name
+						) ),
+				mayDisplayParentControls:
+					hasBlockSupport(
+						getBlockName( clientId ),
+						'__experimentalExposeControlsToChildren',
+						false
+					) && hasSelectedInnerBlock( clientId ),
 			};
 		},
-		[ clientId ]
+		[ clientId, isSelected, name ]
 	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
@@ -137,6 +165,8 @@ function BlockListBlock( {
 			__unstableParentLayout={
 				Object.keys( parentLayout ).length ? parentLayout : undefined
 			}
+			mayDisplayControls={ mayDisplayControls }
+			mayDisplayParentControls={ mayDisplayParentControls }
 		/>
 	);
 
@@ -161,6 +191,10 @@ function BlockListBlock( {
 		!! wrapperProps[ 'data-align' ] &&
 		! themeSupportsLayout;
 
+	// Support for sticky position in classic themes with alignment wrappers.
+
+	const isSticky = className?.includes( 'is-position-sticky' );
+
 	// For aligned blocks, provide a wrapper element so the block can be
 	// positioned relative to the block column.
 	// This is only kept for classic themes that don't support layout
@@ -172,7 +206,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className="wp-block"
+				className={ classnames( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -221,7 +255,7 @@ function BlockListBlock( {
 					isTemporarilyEditingAsBlocks,
 			},
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-			className
+			! ( dataAlign && isSticky ) && className
 		),
 		wrapperProps: restWrapperProps,
 		isAligned,

package/src/components/block-list/block.native.js

@@ -148,6 +148,7 @@ function BlockListBlock( {
 		isDescendentBlockSelected,
 		isParentSelected,
 		order,
+		mayDisplayControls,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -158,6 +159,9 @@ function BlockListBlock( {
 				getSelectedBlockClientId,
 				getSettings,
 				hasSelectedInnerBlock,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
 			} = select( blockEditorStore );
 			const currentBlockType = getBlockType( name || 'core/missing' );
 			const currentBlockCategory = currentBlockType?.category;
@@ -205,6 +209,12 @@ function BlockListBlock( {
 				isDescendentBlockSelected: descendentBlockSelected,
 				isParentSelected: parentSelected,
 				order: blockOrder,
+				mayDisplayControls:
+					isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === name
+						) ),
 			};
 		},
 		[ clientId, isSelected, name, rootClientId ]
@@ -243,10 +253,13 @@ function BlockListBlock( {
 	);
 
 	// Block level styles.
-	const wrapperProps = getWrapperProps(
-		attributes,
-		blockType.getEditWrapperProps
-	);
+	let wrapperProps = {};
+	if ( blockType?.getEditWrapperProps ) {
+		wrapperProps = getWrapperProps(
+			attributes,
+			blockType.getEditWrapperProps
+		);
+	}
 
 	// Inherited styles merged with block level styles.
 	const mergedStyle = useMemo( () => {
@@ -346,6 +359,7 @@ function BlockListBlock( {
 									: undefined
 							}
 							wrapperProps={ wrapperProps }
+							mayDisplayControls={ mayDisplayControls }
 						/>
 						<View onLayout={ onLayout } />
 					</GlobalStylesContext.Provider>

package/src/components/block-list/use-block-props/index.js

@@ -11,6 +11,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
+	isReusableBlock,
+	getBlockDefaultClassName,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
@@ -25,17 +27,12 @@ import { BlockListBlockContext } from '../block-list-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';
-import { useBlockClassNames } from './use-block-class-names';
-import { useBlockDefaultClassName } from './use-block-default-class-name';
-import { useBlockCustomClassName } from './use-block-custom-class-name';
-import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
-import useBlockOverlayActive from '../../block-content-overlay';
 import { unlock } from '../../../lock-unlock';
 
 /**
@@ -99,10 +96,15 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
+		isSelected,
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
 		isSubtreeDisabled,
+		isOutlineEnabled,
+		hasOverlay,
+		initialPosition,
+		classNames,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -117,9 +119,21 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
 				isBlockSubtreeDisabled,
+				getSettings,
+				isBlockHighlighted,
+				__unstableIsFullySelected,
+				__unstableSelectionHasUnmergeableBlock,
+				isBlockBeingDragged,
+				hasSelectedInnerBlock,
+				hasBlockMovingClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+				__unstableHasActiveBlockOverlayActive,
+				__unstableGetEditorMode,
+				getSelectedBlocksInitialCaretPosition,
 			} = unlock( select( blockEditorStore ) );
 			const { getActiveBlockVariation } = select( blocksStore );
-			const isSelected = isBlockSelected( clientId );
+			const _isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
 				isBlockMultiSelected( clientId ) ||
 				isAncestorMultiSelected( clientId );
@@ -127,6 +141,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			const blockType = getBlockType( blockName );
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
+			const { outlineMode } = getSettings();
+			const isMultiSelected = isBlockMultiSelected( clientId );
+			const checkDeep = true;
+			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+				clientId,
+				checkDeep
+			);
+			const typing = isTyping();
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const movingClientId = hasBlockMovingClientId();
 
 			return {
 				index: getBlockIndex( clientId ),
@@ -134,31 +158,62 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				name: blockName,
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				isPartOfSelection: isSelected || isPartOfMultiSelection,
+				isSelected: _isSelected,
+				isPartOfSelection: _isSelected || isPartOfMultiSelection,
 				adjustScrolling:
-					isSelected || isFirstMultiSelectedBlock( clientId ),
+					_isSelected || isFirstMultiSelectedBlock( clientId ),
 				enableAnimation:
-					! isTyping() &&
+					! typing &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
 				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
+				isOutlineEnabled: outlineMode,
+				hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
+				initialPosition:
+					_isSelected && __unstableGetEditorMode() === 'edit'
+						? getSelectedBlocksInitialCaretPosition()
+						: undefined,
+				classNames: classnames(
+					{
+						'is-selected': _isSelected,
+						'is-highlighted': isBlockHighlighted( clientId ),
+						'is-multi-selected': isMultiSelected,
+						'is-partially-selected':
+							isMultiSelected &&
+							! __unstableIsFullySelected() &&
+							! __unstableSelectionHasUnmergeableBlock(),
+						'is-reusable': isReusableBlock( blockType ),
+						'is-dragging': isBlockBeingDragged( clientId ),
+						'has-child-selected': isAncestorOfSelectedBlock,
+						'remove-outline': _isSelected && outlineMode && typing,
+						'is-block-moving-mode': !! movingClientId,
+						'can-insert-moving-block':
+							movingClientId &&
+							canInsertBlockType(
+								getBlockName( movingClientId ),
+								getBlockRootClientId( clientId )
+							),
+					},
+					hasLightBlockWrapper ? attributes.className : undefined,
+					hasLightBlockWrapper
+						? getBlockDefaultClassName( blockName )
+						: undefined
+				),
 			};
 		},
 		[ clientId ]
 	);
 
-	const hasOverlay = useBlockOverlayActive( clientId );
-
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 	const mergedRefs = useMergeRefs( [
 		props.ref,
-		useFocusFirstElement( clientId ),
+		useFocusFirstElement( { clientId, initialPosition } ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useEventHandlers( clientId ),
+		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered(),
+		useIsHovered( { isEnabled: isOutlineEnabled } ),
 		useIntersectionObserver(),
 		useMovingAnimation( {
 			isSelected: isPartOfSelection,
@@ -190,18 +245,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: classnames(
-			// The wp-block className is important for editor styles.
-			classnames( 'block-editor-block-list__block', {
+			'block-editor-block-list__block',
+			{
+				// The wp-block className is important for editor styles.
 				'wp-block': ! isAligned,
 				'has-block-overlay': hasOverlay,
-			} ),
+			},
 			className,
 			props.className,
 			wrapperProps.className,
-			useBlockClassNames( clientId ),
-			useBlockDefaultClassName( clientId ),
-			useBlockCustomClassName( clientId ),
-			useBlockMovingModeClassNames( clientId )
+			classNames
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};