@wordpress/block-editor 7.0.2 → 8.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "7.0.2",
+	"version": "8.0.1",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,32 +32,34 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.2",
+		"@react-spring/web": "^9.2.4",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/api-fetch": "^5.2.5",
 		"@wordpress/blob": "^3.2.1",
-		"@wordpress/block-serialization-default-parser": "^4.2.1",
-		"@wordpress/blocks": "^11.1.0",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/data-controls": "^2.2.3",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/dom": "^3.2.3",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/hooks": "^3.2.0",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
+		"@wordpress/block-serialization-default-parser": "^4.2.2",
+		"@wordpress/blocks": "^11.1.3",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/data": "^6.1.3",
+		"@wordpress/deprecated": "^3.2.2",
+		"@wordpress/dom": "^3.2.6",
+		"@wordpress/element": "^4.0.3",
+		"@wordpress/hooks": "^3.2.1",
+		"@wordpress/html-entities": "^3.2.2",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.1.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.2",
-		"@wordpress/keycodes": "^3.2.2",
-		"@wordpress/notices": "^3.2.3",
-		"@wordpress/rich-text": "^5.0.2",
-		"@wordpress/shortcode": "^3.2.1",
-		"@wordpress/token-list": "^2.2.0",
-		"@wordpress/url": "^3.2.2",
-		"@wordpress/warning": "^2.2.1",
-		"@wordpress/wordcount": "^3.2.1",
+		"@wordpress/keyboard-shortcuts": "^3.0.5",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/notices": "^3.2.6",
+		"@wordpress/rich-text": "^5.0.5",
+		"@wordpress/shortcode": "^3.2.2",
+		"@wordpress/token-list": "^2.2.1",
+		"@wordpress/url": "^3.3.0",
+		"@wordpress/warning": "^2.2.2",
+		"@wordpress/wordcount": "^3.2.2",
 		"classnames": "^2.3.1",
+		"colord": "^2.7.0",
 		"css-mediaquery": "^0.1.2",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
@@ -65,14 +67,13 @@
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-spring": "^8.0.19",
+		"react-easy-crop": "^3.0.0",
 		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.2",
 		"traverse": "^0.6.6"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "f89b63995376fe6efe920d858b48268b510920e1"
 }

package/src/components/autocomplete/index.js

@@ -12,7 +12,7 @@ import {
 	__unstableUseAutocompleteProps as useAutocompleteProps,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { getDefaultBlockName } from '@wordpress/blocks';
+import { getDefaultBlockName, getBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -33,7 +33,10 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 	return useMemo( () => {
 		let filteredCompleters = completers;
 
-		if ( name === getDefaultBlockName() ) {
+		if (
+			name === getDefaultBlockName() ||
+			getBlockSupport( name, '__experimentalSlashInserter', false )
+		) {
 			filteredCompleters = filteredCompleters.concat( [
 				blockAutocompleter,
 			] );

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

@@ -28,11 +28,11 @@ export default function BlockActions( {
 		canInsertBlockType,
 		getBlockRootClientId,
 		getBlocksByClientId,
-		getTemplateLock,
-	} = useSelect( ( select ) => select( blockEditorStore ), [] );
+		canMoveBlocks,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } = useSelect(
-		( select ) => select( blocksStore ),
-		[]
+		blocksStore
 	);
 
 	const blocks = getBlocksByClientId( clientIds );
@@ -50,6 +50,9 @@ export default function BlockActions( {
 		rootClientId
 	);
 
+	const canMove = canMoveBlocks( clientIds, rootClientId );
+	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+
 	const {
 		removeBlocks,
 		replaceBlocks,
@@ -67,7 +70,8 @@ export default function BlockActions( {
 	return children( {
 		canDuplicate,
 		canInsertDefaultBlock,
-		isLocked: !! getTemplateLock( rootClientId ),
+		canMove,
+		canRemove,
 		rootClientId,
 		blocks,
 		onDuplicate() {

package/src/components/block-alignment-control/style.scss

@@ -0,0 +1,5 @@
+.block-editor-block-alignment-control__menu-group {
+	.components-menu-item__info {
+		margin-top: 0;
+	}
+}

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -4,6 +4,20 @@ exports[`BlockAlignmentUI should match snapshot 1`] = `
 <ToolbarGroup
   controls={
     Array [
+      Object {
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "None",
+      },
       Object {
         "icon": <SVG
           viewBox="0 0 24 24"
@@ -24,7 +38,7 @@ exports[`BlockAlignmentUI should match snapshot 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <Path
-            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+            d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
           />
         </SVG>,
         "isActive": false,

package/src/components/block-alignment-control/test/index.native.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentUI from '../ui';
+
+it( 'should call onChange with undefined when the control is already active', () => {
+	const onChangeMock = jest.fn();
+	const screen = render(
+		<BlockAlignmentUI value="right" onChange={ onChangeMock } />
+	);
+	const alignButton = screen.getByA11yLabel( 'Align' );
+	fireEvent.press( alignButton );
+	const rightAlignmentButton = screen.getByA11yLabel( 'Align right' );
+	fireEvent.press( rightAlignmentButton );
+
+	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+	expect( onChangeMock ).toHaveBeenCalledWith( undefined );
+} );
+
+it( 'should call onChange with alignment value when the control is inactive', () => {
+	const onChangeMock = jest.fn();
+	const screen = render(
+		<BlockAlignmentUI value="left" onChange={ onChangeMock } />
+	);
+	const alignButton = screen.getByA11yLabel( 'Align' );
+	fireEvent.press( alignButton );
+	const centerAlignmentButton = screen.getByA11yLabel( 'Align center' );
+	fireEvent.press( centerAlignmentButton );
+
+	expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+	expect( onChangeMock ).toHaveBeenCalledWith( 'center' );
+} );

package/src/components/block-alignment-control/ui.js

@@ -1,15 +1,27 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components';
 import {
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
+import {
+	alignNone,
 	positionCenter,
 	positionLeft,
 	positionRight,
 	stretchFullWidth,
 	stretchWide,
 } from '@wordpress/icons';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,6 +29,10 @@ import {
 import useAvailableAlignments from './use-available-alignments';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
+	none: {
+		icon: alignNone,
+		title: __( 'None' ),
+	},
 	left: {
 		icon: positionLeft,
 		title: __( 'Align left' ),
@@ -39,7 +55,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 	},
 };
 
-const DEFAULT_CONTROL = 'center';
+const DEFAULT_CONTROL = 'none';
 
 const POPOVER_PROPS = {
 	isAlternate: true,
@@ -53,12 +69,14 @@ function BlockAlignmentUI( {
 	isCollapsed = true,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
-	if ( enabledControls.length === 0 ) {
+	const hasEnabledControls = !! enabledControls.length;
+
+	if ( ! hasEnabledControls ) {
 		return null;
 	}
 
-	function applyOrUnset( align ) {
-		return () => onChange( value === align ? undefined : align );
+	function onChangeAlignment( align ) {
+		onChange( [ value, 'none' ].includes( align ) ? undefined : align );
 	}
 
 	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
@@ -66,29 +84,82 @@ function BlockAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const commonProps = {
+		popoverProps: POPOVER_PROPS,
+		icon: activeAlignmentControl
+			? activeAlignmentControl.icon
+			: defaultAlignmentControl.icon,
+		label: __( 'Align' ),
+		toggleProps: { describedBy: __( 'Change alignment' ) },
+	};
+	const extraProps =
+		isToolbar || Platform.isNative
+			? {
+					isCollapsed: isToolbar ? isCollapsed : undefined,
+					controls: enabledControls.map(
+						( { name: controlName } ) => {
+							return {
+								...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],
+								isActive:
+									value === controlName ||
+									( ! value && controlName === 'none' ),
+								role: isCollapsed ? 'menuitemradio' : undefined,
+								onClick: () => onChangeAlignment( controlName ),
+							};
+						}
+					),
+			  }
+			: {
+					children: ( { onClose } ) => {
+						return (
+							<>
+								<MenuGroup className="block-editor-block-alignment-control__menu-group">
+									{ enabledControls.map(
+										( { name: controlName, info } ) => {
+											const {
+												icon,
+												title,
+											} = BLOCK_ALIGNMENTS_CONTROLS[
+												controlName
+											];
+											// If no value is provided, mark as selected the `none` option.
+											const isSelected =
+												controlName === value ||
+												( ! value &&
+													controlName === 'none' );
+											return (
+												<MenuItem
+													key={ controlName }
+													icon={ icon }
+													iconPosition="left"
+													className={ classNames(
+														'components-dropdown-menu__menu-item',
+														{
+															'is-active': isSelected,
+														}
+													) }
+													isSelected={ isSelected }
+													onClick={ () => {
+														onChangeAlignment(
+															controlName
+														);
+														onClose();
+													} }
+													role="menuitemradio"
+													info={ info }
+												>
+													{ title }
+												</MenuItem>
+											);
+										}
+									) }
+								</MenuGroup>
+							</>
+						);
+					},
+			  };
 
-	return (
-		<UIComponent
-			popoverProps={ POPOVER_PROPS }
-			icon={
-				activeAlignmentControl
-					? activeAlignmentControl.icon
-					: defaultAlignmentControl.icon
-			}
-			label={ __( 'Align' ) }
-			toggleProps={ { describedBy: __( 'Change alignment' ) } }
-			controls={ enabledControls.map( ( control ) => {
-				return {
-					...BLOCK_ALIGNMENTS_CONTROLS[ control ],
-					isActive: value === control,
-					role: isCollapsed ? 'menuitemradio' : undefined,
-					onClick: applyOrUnset( control ),
-				};
-			} ) }
-			{ ...extraProps }
-		/>
-	);
+	return <UIComponent { ...commonProps } { ...extraProps } />;
 }
 
 export default BlockAlignmentUI;

package/src/components/block-alignment-control/use-available-alignments.js

@@ -10,10 +10,14 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
+const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
 export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
+	// Always add the `none` option if not exists.
+	if ( ! controls.includes( 'none' ) ) {
+		controls = [ 'none', ...controls ];
+	}
 	const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getSettings } = select( blockEditorStore );
@@ -30,9 +34,15 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	const layoutAlignments = layoutType.getAlignments( layout );
 
 	if ( themeSupportsLayout ) {
-		return layoutAlignments.filter( ( control ) =>
-			controls.includes( control )
+		const alignments = layoutAlignments.filter(
+			( { name: alignmentName } ) => controls.includes( alignmentName )
 		);
+		// While we treat `none` as an alignment, we shouldn't return it if no
+		// other alignments exist.
+		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
+			return [];
+		}
+		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
@@ -40,13 +50,24 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
-	const enabledControls = controls.filter(
-		( control ) =>
-			( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
-				wideControlsEnabled ||
-				! WIDE_CONTROLS.includes( control ) ) &&
-			availableAlignments.includes( control )
-	);
+	const enabledControls = controls
+		.filter(
+			( control ) =>
+				( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
+					wideControlsEnabled ||
+					! WIDE_CONTROLS.includes( control ) ) &&
+				availableAlignments.includes( control )
+		)
+		.map( ( enabledControl ) => ( { name: enabledControl } ) );
+
+	// While we treat `none` as an alignment, we shouldn't return it if no
+	// other alignments exist.
+	if (
+		enabledControls.length === 1 &&
+		enabledControls[ 0 ].name === 'none'
+	) {
+		return [];
+	}
 
 	return enabledControls;
 }

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

@@ -21,9 +21,12 @@ export default function BlockControlsFill( {
 	group = 'default',
 	controls,
 	children,
-	__experimentalExposeToChildren = false,
+	__experimentalShareWithChildBlocks = false,
 } ) {
-	const Fill = useBlockControlsFill( group, __experimentalExposeToChildren );
+	const Fill = useBlockControlsFill(
+		group,
+		__experimentalShareWithChildBlocks
+	);
 	if ( ! Fill ) {
 		return null;
 	}

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

@@ -12,7 +12,7 @@ import { store as blockEditorStore } from '../../store';
 import { useBlockEditContext } from '../block-edit/context';
 import useDisplayBlockControls from '../use-display-block-controls';
 
-export default function useBlockControlsFill( group, exposeToChildren ) {
+export default function useBlockControlsFill( group, shareWithChildBlocks ) {
 	const isDisplayed = useDisplayBlockControls();
 	const { clientId } = useBlockEditContext();
 	const isParentDisplayed = useSelect(
@@ -22,7 +22,7 @@ export default function useBlockControlsFill( group, exposeToChildren ) {
 			);
 			const { hasBlockSupport } = select( blocksStore );
 			return (
-				exposeToChildren &&
+				shareWithChildBlocks &&
 				hasBlockSupport(
 					getBlockName( clientId ),
 					'__experimentalExposeControlsToChildren',
@@ -31,7 +31,7 @@ export default function useBlockControlsFill( group, exposeToChildren ) {
 				hasSelectedInnerBlock( clientId )
 			);
 		},
-		[ exposeToChildren, clientId ]
+		[ shareWithChildBlocks, clientId ]
 	);
 
 	if ( isDisplayed ) {

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

@@ -45,8 +45,23 @@
 	}
 }
 
-// This hides the block being dragged.
-// The effect is that the block being dragged appears to be "lifted".
-.is-dragging {
-	display: none !important;
+// This creates a "slot" where the block you're dragging appeared.
+// We use !important as one of the rules are meant to be overriden.
+.block-editor-block-list__layout .is-dragging {
+	background-color: currentColor !important;
+	opacity: 0.05 !important;
+	border-radius: $radius-block-ui !important;
+
+	// Disabling pointer events during the drag event is necessary,
+	// lest the block might affect your drag operation.
+	pointer-events: none !important;
+
+	// Hide the multi selection indicator when dragging.
+	&::selection {
+		background: transparent !important;
+	}
+
+	&::after {
+		content: none !important;
+	}
 }

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

@@ -8,8 +8,9 @@ import classnames from 'classnames';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { memo } from '@wordpress/element';
 
-export default function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
@@ -35,3 +36,5 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
 		</span>
 	);
 }
+
+export default memo( BlockIcon );

package/src/components/block-icon/index.native.js

@@ -8,46 +8,40 @@ import { View } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-export function BlockIcon( {
-	icon,
-	fill,
-	size,
-	showColors = false,
-	getStylesFromColorScheme,
-} ) {
+export function BlockIcon( { icon, fill, size, showColors = false } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
+	const defaultFill = usePreferredColorSchemeStyle(
+		styles.iconPlaceholder,
+		styles.iconPlaceholderDark
+	)?.fill;
+	const iconForeground = showColors ? icon?.foreground : undefined;
+
 	const renderedIcon = (
 		<Icon
 			icon={ icon && icon.src ? icon.src : icon }
-			{ ...( fill && { fill } ) }
+			fill={ fill || iconForeground || defaultFill }
 			{ ...( size && { size } ) }
-			{ ...( ! fill &&
-				getStylesFromColorScheme(
-					styles.iconPlaceholder,
-					styles.iconPlaceholderDark
-				) ) }
 		/>
 	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,
-				color: icon && icon.foreground,
 		  }
 		: {};
 
 	return <View style={ style }>{ renderedIcon }</View>;
 }
 
-export default withPreferredColorScheme( BlockIcon );
+export default BlockIcon;

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

@@ -129,6 +129,16 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot
+				__experimentalGroup="typography"
+				bubblesVirtually={ bubblesVirtually }
+				label={ __( 'Typography' ) }
+			/>
+			<InspectorControls.Slot
+				__experimentalGroup="dimensions"
+				bubblesVirtually={ bubblesVirtually }
+				label={ __( 'Dimensions' ) }
+			/>
 			<div>
 				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
 			</div>

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

@@ -30,6 +30,11 @@ function BlockHTML( { clientId } ) {
 	const { updateBlock } = useDispatch( blockEditorStore );
 	const onChange = () => {
 		const blockType = getBlockType( block.name );
+
+		if ( ! blockType ) {
+			return;
+		}
+
 		const attributes = getBlockAttributes(
 			blockType,
 			html,

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

@@ -71,6 +71,7 @@ function Block( { children, isHtml, ...props } ) {
 function BlockListBlock( {
 	mode,
 	isLocked,
+	canRemove,
 	clientId,
 	isSelected,
 	isSelectionEnabled,
@@ -99,9 +100,9 @@ function BlockListBlock( {
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			insertBlocksAfter={ isLocked ? undefined : onInsertBlocksAfter }
-			onReplace={ isLocked ? undefined : onReplace }
-			onRemove={ isLocked ? undefined : onRemove }
-			mergeBlocks={ isLocked ? undefined : onMerge }
+			onReplace={ canRemove ? onReplace : undefined }
+			onRemove={ canRemove ? onRemove : undefined }
+			mergeBlocks={ canRemove ? onMerge : undefined }
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
@@ -191,10 +192,15 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 		isSelectionEnabled,
 		getTemplateLock,
 		__unstableGetBlockWithoutInnerBlocks,
+		canRemoveBlock,
+		canMoveBlock,
 	} = select( blockEditorStore );
 	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 	const isSelected = isBlockSelected( clientId );
 	const templateLock = getTemplateLock( rootClientId );
+	const canRemove = canRemoveBlock( clientId, rootClientId );
+	const canMove = canMoveBlock( clientId, rootClientId );
+
 	// The fallback to `{}` is a temporary fix.
 	// This function should never be called when a block is not present in
 	// the state. It happens now because the order in withSelect rendering
@@ -207,6 +213,8 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 		mode: getBlockMode( clientId ),
 		isSelectionEnabled: isSelectionEnabled(),
 		isLocked: !! templateLock,
+		canRemove,
+		canMove,
 		// Users of the editor.BlockListBlock filter used to be able to
 		// access the block prop.
 		// Ideally these blocks would rely on the clientId prop only.