@wordpress/block-editor 9.6.0 → 9.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.6.0",
+	"version": "9.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.14.0",
-		"@wordpress/api-fetch": "^6.11.0",
-		"@wordpress/blob": "^3.14.0",
-		"@wordpress/blocks": "^11.13.0",
-		"@wordpress/components": "^19.16.0",
-		"@wordpress/compose": "^5.12.0",
-		"@wordpress/data": "^6.14.0",
-		"@wordpress/date": "^4.14.0",
-		"@wordpress/deprecated": "^3.14.0",
-		"@wordpress/dom": "^3.14.0",
-		"@wordpress/element": "^4.12.0",
-		"@wordpress/hooks": "^3.14.0",
-		"@wordpress/html-entities": "^3.14.0",
-		"@wordpress/i18n": "^4.14.0",
-		"@wordpress/icons": "^9.5.0",
-		"@wordpress/is-shallow-equal": "^4.14.0",
-		"@wordpress/keyboard-shortcuts": "^3.12.0",
-		"@wordpress/keycodes": "^3.14.0",
-		"@wordpress/notices": "^3.14.0",
-		"@wordpress/rich-text": "^5.12.0",
-		"@wordpress/shortcode": "^3.14.0",
-		"@wordpress/style-engine": "^0.13.0",
-		"@wordpress/token-list": "^2.14.0",
-		"@wordpress/url": "^3.15.0",
-		"@wordpress/warning": "^2.14.0",
-		"@wordpress/wordcount": "^3.14.0",
+		"@wordpress/a11y": "^3.16.0",
+		"@wordpress/api-fetch": "^6.13.0",
+		"@wordpress/blob": "^3.16.0",
+		"@wordpress/blocks": "^11.15.0",
+		"@wordpress/components": "^20.0.0",
+		"@wordpress/compose": "^5.14.0",
+		"@wordpress/data": "^7.0.0",
+		"@wordpress/date": "^4.16.0",
+		"@wordpress/deprecated": "^3.16.0",
+		"@wordpress/dom": "^3.16.0",
+		"@wordpress/element": "^4.14.0",
+		"@wordpress/hooks": "^3.16.0",
+		"@wordpress/html-entities": "^3.16.0",
+		"@wordpress/i18n": "^4.16.0",
+		"@wordpress/icons": "^9.7.0",
+		"@wordpress/is-shallow-equal": "^4.16.0",
+		"@wordpress/keyboard-shortcuts": "^3.14.0",
+		"@wordpress/keycodes": "^3.16.0",
+		"@wordpress/notices": "^3.16.0",
+		"@wordpress/rich-text": "^5.14.0",
+		"@wordpress/shortcode": "^3.16.0",
+		"@wordpress/style-engine": "^0.15.0",
+		"@wordpress/token-list": "^2.16.0",
+		"@wordpress/url": "^3.17.0",
+		"@wordpress/warning": "^2.16.0",
+		"@wordpress/wordcount": "^3.16.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -68,6 +69,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
 		"rememo": "^4.0.0",
+		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
+	"gitHead": "171b87c7465b93e685e081c5f57f153507363c95"
 }

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

@@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
-	if ( layoutType.name !== 'default' ) {
+	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds } ) {
+	// Edit visually only works for single block selection.
+	const clientId = clientIds.length === 1 ? clientIds[ 0 ] : undefined;
+	const canEditVisually = useSelect(
+		( select ) =>
+			!! clientId &&
+			select( blockEditorStore ).getBlockMode( clientId ) === 'html',
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
+	if ( ! canEditVisually ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ () => {
+					toggleBlockMode( clientId );
+				} }
+			>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

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

@@ -18,6 +18,7 @@ import {
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
+	switchToBlockType,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import {
@@ -291,8 +292,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 			insertBlocks( blocks, index + 1, rootClientId );
 		},
 		onMerge( forward ) {
-			const { clientId } = ownProps;
-			const { getPreviousBlockClientId, getNextBlockClientId } =
+			const { clientId, rootClientId } = ownProps;
+			const { getPreviousBlockClientId, getNextBlockClientId, getBlock } =
 				select( blockEditorStore );
 
 			if ( forward ) {
@@ -305,6 +306,16 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 					getPreviousBlockClientId( clientId );
 				if ( previousBlockClientId ) {
 					mergeBlocks( previousBlockClientId, clientId );
+				} else if ( rootClientId ) {
+					// Attempt to "unwrap" the block contents when there's no
+					// preceding block to merge with.
+					const replacement = switchToBlockType(
+						getBlock( rootClientId ),
+						'*'
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( rootClientId, replacement, 0 );
+					}
 				}
 			}
 		},

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

@@ -469,7 +469,7 @@ class EmptyListComponent extends Component {
 			renderFooterAppender,
 		} = this.props;
 
-		if ( renderFooterAppender ) {
+		if ( renderFooterAppender || renderAppender === false ) {
 			return null;
 		}
 

package/src/components/block-popover/inbetween.js

@@ -154,7 +154,10 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement || ! isVisible ) {
+	// If there's either a previous or a next element, show the inbetween popover.
+	// Note that drag and drop uses the inbetween popover to show the drop indicator
+	// before the first block and after the last block.
+	if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 		return null;
 	}
 
@@ -180,6 +183,7 @@ function BlockPopoverInbetween( {
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
+				'block-editor-block-popover__inbetween',
 				props.className
 			) }
 			__unstableForcePosition

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

@@ -6,8 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,19 +16,25 @@ import { useMemo } from '@wordpress/element';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
-export default function BlockPopover( {
-	clientId,
-	bottomClientId,
-	children,
-	__unstableRefreshSize,
-	__unstableCoverTarget = false,
-	__unstablePopoverSlot,
-	__unstableContentRef,
-	...props
-} ) {
+function BlockPopover(
+	{
+		clientId,
+		bottomClientId,
+		children,
+		__unstableRefreshSize,
+		__unstableCoverTarget = false,
+		__unstablePopoverSlot,
+		__unstableContentRef,
+		...props
+	},
+	ref
+) {
 	const selectedElement = useBlockElement( clientId );
 	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const mergedRefs = useMergeRefs( [
+		ref,
+		usePopoverScroll( __unstableContentRef ),
+	] );
 	const style = useMemo( () => {
 		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
 			return {};
@@ -51,7 +58,7 @@ export default function BlockPopover( {
 
 	return (
 		<Popover
-			ref={ popoverScrollRef }
+			ref={ mergedRefs }
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
@@ -74,3 +81,5 @@ export default function BlockPopover( {
 		</Popover>
 	);
 }
+
+export default forwardRef( BlockPopover );

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

@@ -18,11 +18,34 @@
 
 		// Allow clicking through the toolbar holder.
 		pointer-events: none;
+	}
 
-		// Position the block toolbar.
-		> * {
+	// Enable pointer events for the toolbar's content.
+	&:not(.block-editor-block-popover__inbetween) .components-popover__content {
+		* {
 			pointer-events: all;
 		}
 	}
 }
 
+.components-popover.block-editor-block-popover__inbetween {
+	// Disable pointer events for dragging and dropping.
+	// Without this the insertion point interferes with the
+	// drop zone.
+	pointer-events: none;
+
+	* {
+		pointer-events: none;
+	}
+
+	// Re-enable pointer events when the inbetween inserter has a '+' button.
+	//
+	// Needs specificity, do not simplify.
+	.is-with-inserter {
+		pointer-events: all;
+
+		* {
+			pointer-events: all;
+		}
+	}
+}

package/src/components/block-settings-menu/index.js

@@ -7,24 +7,20 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<>
-			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
-			<ToolbarGroup>
-				<ToolbarItem>
-					{ ( toggleProps ) => (
-						<BlockSettingsDropdown
-							clientIds={ clientIds }
-							toggleProps={ toggleProps }
-							{ ...props }
-						/>
-					) }
-				</ToolbarItem>
-			</ToolbarGroup>
-		</>
+		<ToolbarGroup>
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<BlockSettingsDropdown
+						clientIds={ clientIds }
+						toggleProps={ toggleProps }
+						{ ...props }
+					/>
+				) }
+			</ToolbarItem>
+		</ToolbarGroup>
 	);
 }
 

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

@@ -11,7 +11,7 @@ import { useState, useLayoutEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
-	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
 	Slot,
 	Fill,
 } from '@wordpress/components';
@@ -117,15 +117,12 @@ function BlockStyles( {
 							onClick={ () => onSelectStylePreview( style ) }
 							aria-current={ activeStyle.name === style.name }
 						>
-							<Text
-								as="span"
-								limit={ 12 }
-								ellipsizeMode="tail"
+							<Truncate
+								numberOfLines={ 1 }
 								className="block-editor-block-styles__item-text"
-								truncate
 							>
 								{ buttonText }
-							</Text>
+							</Truncate>
 						</Button>
 					);
 				} ) }

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

@@ -64,6 +64,16 @@
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-block-styles__item-text {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
 }
 
 // To prevent overflow in the preview container,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, uniq } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,10 +28,10 @@ import { copy } from '@wordpress/icons';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import BlockTitle from '../block-title';
 import BlockTransformationsMenu from './block-transformations-menu';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -41,7 +41,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		canRemove,
 		hasBlockStyles,
 		icon,
-		blockTitle,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -64,7 +63,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				_icon = blockInformation?.icon; // Take into account active block variations.
 			} else {
 				const isSelectionOfSameType =
-					uniq( blocks.map( ( { name } ) => name ) ).length === 1;
+					new Set( blocks.map( ( { name } ) => name ) ).size === 1;
 				// When selection consists of blocks of multiple types, display an
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType
@@ -79,7 +78,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -89,6 +87,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
 
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
+		maximumLength: 35,
+	} );
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
@@ -119,10 +121,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 							<BlockIcon icon={ icon } showColors />
 							{ ( isReusable || isTemplate ) && (
 								<span className="block-editor-block-switcher__toggle-text">
-									<BlockTitle
-										clientId={ clientIds }
-										maximumLength={ 35 }
-									/>
+									{ blockTitle }
 								</span>
 							) }
 						</>
@@ -176,10 +175,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								/>
 								{ ( isReusable || isTemplate ) && (
 									<span className="block-editor-block-switcher__toggle-text">
-										<BlockTitle
-											clientId={ clientIds }
-											maximumLength={ 35 }
-										/>
+										{ blockTitle }
 									</span>
 								) }
 							</>

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

@@ -18,6 +18,7 @@ import { copy } from '@wordpress/icons';
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {

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

@@ -23,6 +23,7 @@ import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
+import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
@@ -159,6 +160,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 					</__unstableBlockNameContext.Provider>
 				</>
 			) }
+			<BlockEditVisuallyButton clientIds={ blockClientIds } />
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);

package/src/components/block-tools/selected-block-popover.js

@@ -20,6 +20,7 @@ import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 
 function selector( select ) {
 	const {
@@ -113,6 +114,11 @@ function SelectedBlockPopover( {
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
 	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
 		return null;
 	}
@@ -126,6 +132,7 @@ function SelectedBlockPopover( {
 			} ) }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
+			{ ...popoverProps }
 		>
 			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+
+// By default the toolbar sets the `shift` prop. If the user scrolls the page
+// down the toolbar will stay on screen by adopting a sticky position at the
+// top of the viewport.
+const DEFAULT_PROPS = { __unstableForcePosition: true, __unstableShift: true };
+
+// When there isn't enough height between the top of the block and the editor
+// canvas, the `shift` prop is set to `false`, as it will cause the block to be
+// obscured. The `flip` behavior is enabled (by setting `forcePosition` to
+// `false`), which positions the toolbar below the block.
+const RESTRICTED_HEIGHT_PROPS = {
+	__unstableForcePosition: false,
+	__unstableShift: false,
+};
+
+/**
+ * Get the popover props for the block toolbar, determined by the space at the top of the canvas and the toolbar height.
+ *
+ * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
+ * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ *
+ * @return {Object} The popover props used to determine the position of the toolbar.
+ */
+function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+	if ( ! contentElement || ! selectedBlockElement ) {
+		return DEFAULT_PROPS;
+	}
+
+	const blockRect = selectedBlockElement.getBoundingClientRect();
+	const contentRect = contentElement.getBoundingClientRect();
+
+	if ( blockRect.top - contentRect.top > toolbarHeight ) {
+		return DEFAULT_PROPS;
+	}
+
+	return RESTRICTED_HEIGHT_PROPS;
+}
+
+/**
+ * Determines the desired popover positioning behavior, returning a set of appropriate props.
+ *
+ * @param {Object}  elements
+ * @param {Element} elements.contentElement The DOM element that represents the editor content or canvas.
+ * @param {string}  elements.clientId       The clientId of the first selected block.
+ *
+ * @return {Object} The popover props used to determine the position of the toolbar.
+ */
+export default function useBlockToolbarPopoverProps( {
+	contentElement,
+	clientId,
+} ) {
+	const selectedBlockElement = useBlockElement( clientId );
+	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
+	const [ props, setProps ] = useState( () =>
+		getProps( contentElement, selectedBlockElement, toolbarHeight )
+	);
+	const blockIndex = useSelect(
+		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+		[ clientId ]
+	);
+
+	const popoverRef = useRefEffect( ( popoverNode ) => {
+		setToolbarHeight( popoverNode.offsetHeight );
+	}, [] );
+
+	const updateProps = useCallback(
+		() =>
+			setProps(
+				getProps( contentElement, selectedBlockElement, toolbarHeight )
+			),
+		[ contentElement, selectedBlockElement, toolbarHeight ]
+	);
+
+	// Update props when the block is moved. This also ensures the props are
+	// correct on initial mount, and when the selected block or content element
+	// changes (since the callback ref will update).
+	useLayoutEffect( updateProps, [ blockIndex, updateProps ] );
+
+	// Update props when the viewport is resized or the block is resized.
+	useLayoutEffect( () => {
+		if ( ! contentElement || ! selectedBlockElement ) {
+			return;
+		}
+
+		// Update the toolbar props on viewport resize.
+		const contentView = contentElement?.ownerDocument?.defaultView;
+		contentView?.addEventHandler?.( 'resize', updateProps );
+
+		// Update the toolbar props on block resize.
+		let resizeObserver;
+		const blockView = selectedBlockElement?.ownerDocument?.defaultView;
+		if ( blockView.ResizeObserver ) {
+			resizeObserver = new blockView.ResizeObserver( updateProps );
+			resizeObserver.observe( selectedBlockElement );
+		}
+
+		return () => {
+			contentView?.removeEventHandler?.( 'resize', updateProps );
+
+			if ( resizeObserver ) {
+				resizeObserver.disconnect();
+			}
+		};
+	}, [ updateProps, contentElement, selectedBlockElement ] );
+
+	return {
+		...props,
+		ref: popoverRef,
+	};
+}

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

@@ -41,7 +41,7 @@ function BlockTypesList( {
 							) }
 							onSelect={ onSelect }
 							onHover={ onHover }
-							isDraggable={ isDraggable }
+							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
 						/>
 					) ) }