@wordpress/block-editor 12.16.0 → 12.17.0

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

@@ -6,11 +6,6 @@ The block breadcrumb trail displays the hierarchy of the current block selection
 
 ![Image in column block breadcrumb](https://make.wordpress.org/core/files/2020/08/gutenberg-image-in-column-block-breadcrumb.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 #### Props

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

@@ -63,8 +63,6 @@ export function ExperimentalBlockCanvas( {
 				ref={ resetTypingRef }
 				contentRef={ contentRef }
 				style={ {
-					width: '100%',
-					height: '100%',
 					...iframeProps?.style,
 				} }
 				name="editor-canvas"

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

@@ -0,0 +1,6 @@
+iframe[name="editor-canvas"] {
+	width: 100%;
+	height: 100%;
+	background-color: $white;
+	display: block;
+}

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

@@ -4,11 +4,6 @@ The `BlockCaption` component renders block-level UI for adding and editing capti
 
 `BlockCaption` is used in several native blocks, including `Video`, `Image`, `Audio`, etc.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -6,11 +6,6 @@ In the editor, this component is displayed in two different places: in the block
 
 ![Heading block card in the block inspector](https://make.wordpress.org/core/files/2020/09/screenshot-wordpress.org-2020.09.08-14_19_21.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -56,7 +56,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 						{ minWidth: 24, padding: 0 }
 					}
 					icon={ isRTL() ? chevronRight : chevronLeft }
-					isSmall
+					size="small"
 				/>
 			) }
 			<BlockIcon icon={ icon } showColors />

package/src/components/block-draggable/draggable-chip.js

@@ -10,7 +10,12 @@ import { dragHandle } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 
-export default function BlockDraggableChip( { count, icon, isPattern } ) {
+export default function BlockDraggableChip( {
+	count,
+	icon,
+	isPattern,
+	fadeWhenDisabled,
+} ) {
 	const patternLabel = isPattern && __( 'Pattern' );
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
@@ -37,6 +42,11 @@ export default function BlockDraggableChip( { count, icon, isPattern } ) {
 					<FlexItem>
 						<BlockIcon icon={ dragHandle } />
 					</FlexItem>
+					{ fadeWhenDisabled && (
+						<FlexItem className="block-editor-block-draggable-chip__disabled">
+							<span className="block-editor-block-draggable-chip__disabled-icon"></span>
+						</FlexItem>
+					) }
 				</Flex>
 			</div>
 		</div>

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

@@ -5,6 +5,7 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
+import { throttle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -12,6 +13,8 @@ import { useEffect, useRef } from '@wordpress/element';
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
 	children,
@@ -19,16 +22,24 @@ const BlockDraggable = ( {
 	cloneClassname,
 	onDragStart,
 	onDragEnd,
+	fadeWhenDisabled = false,
 } ) => {
-	const { srcRootClientId, isDraggable, icon } = useSelect(
+	const {
+		srcRootClientId,
+		isDraggable,
+		icon,
+		visibleInserter,
+		getBlockType,
+	} = useSelect(
 		( select ) => {
 			const {
 				canMoveBlocks,
 				getBlockRootClientId,
 				getBlockName,
 				getBlockAttributes,
+				isBlockInsertionPointVisible,
 			} = select( blockEditorStore );
-			const { getBlockType, getActiveBlockVariation } =
+			const { getBlockType: _getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
@@ -40,15 +51,21 @@ const BlockDraggable = ( {
 			return {
 				srcRootClientId: rootClientId,
 				isDraggable: canMoveBlocks( clientIds, rootClientId ),
-				icon: variation?.icon || getBlockType( blockName )?.icon,
+				icon: variation?.icon || _getBlockType( blockName )?.icon,
+				visibleInserter: isBlockInsertionPointVisible(),
+				getBlockType: _getBlockType,
 			};
 		},
 		[ clientIds ]
 	);
+
 	const isDragging = useRef( false );
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
 
+	const { getAllowedBlocks, getBlockNamesByClientId, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+
 	const { startDraggingBlocks, stopDraggingBlocks } =
 		useDispatch( blockEditorStore );
 
@@ -61,6 +78,97 @@ const BlockDraggable = ( {
 		};
 	}, [] );
 
+	// Find the root of the editor iframe.
+	const blockRef = useBlockRef( clientIds[ 0 ] );
+	const editorRoot = blockRef.current?.closest( 'body' );
+
+	/*
+	 * Add a dragover event listener to the editor root to track the blocks being dragged over.
+	 * The listener has to be inside the editor iframe otherwise the target isn't accessible.
+	 */
+	useEffect( () => {
+		if ( ! editorRoot || ! fadeWhenDisabled ) {
+			return;
+		}
+
+		const onDragOver = ( event ) => {
+			if ( ! event.target.closest( '[data-block]' ) ) {
+				return;
+			}
+			const draggedBlockNames = getBlockNamesByClientId( clientIds );
+			const targetClientId = event.target
+				.closest( '[data-block]' )
+				.getAttribute( 'data-block' );
+
+			const allowedBlocks = getAllowedBlocks( targetClientId );
+			const targetBlockName = getBlockNamesByClientId( [
+				targetClientId,
+			] )[ 0 ];
+
+			/*
+			 * Check if the target is valid to drop in.
+			 * If the target's allowedBlocks is an empty array,
+			 * it isn't a container block, in which case we check
+			 * its parent's validity instead.
+			 */
+			let dropTargetValid;
+			if ( allowedBlocks?.length === 0 ) {
+				const targetRootClientId =
+					getBlockRootClientId( targetClientId );
+				const targetRootBlockName = getBlockNamesByClientId( [
+					targetRootClientId,
+				] )[ 0 ];
+				const rootAllowedBlocks =
+					getAllowedBlocks( targetRootClientId );
+				dropTargetValid = isDropTargetValid(
+					getBlockType,
+					rootAllowedBlocks,
+					draggedBlockNames,
+					targetRootBlockName
+				);
+			} else {
+				dropTargetValid = isDropTargetValid(
+					getBlockType,
+					allowedBlocks,
+					draggedBlockNames,
+					targetBlockName
+				);
+			}
+
+			/*
+			 * Update the body class to reflect if drop target is valid.
+			 * This has to be done on the document body because the draggable
+			 * chip is rendered outside of the editor iframe.
+			 */
+			if ( ! dropTargetValid && ! visibleInserter ) {
+				window?.document?.body?.classList?.add(
+					'block-draggable-invalid-drag-token'
+				);
+			} else {
+				window?.document?.body?.classList?.remove(
+					'block-draggable-invalid-drag-token'
+				);
+			}
+		};
+
+		const throttledOnDragOver = throttle( onDragOver, 200 );
+
+		editorRoot.addEventListener( 'dragover', throttledOnDragOver );
+
+		return () => {
+			editorRoot.removeEventListener( 'dragover', throttledOnDragOver );
+		};
+	}, [
+		clientIds,
+		editorRoot,
+		fadeWhenDisabled,
+		getAllowedBlocks,
+		getBlockNamesByClientId,
+		getBlockRootClientId,
+		getBlockType,
+		visibleInserter,
+	] );
+
 	if ( ! isDraggable ) {
 		return children( { draggable: false } );
 	}
@@ -102,7 +210,11 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ clientIds.length } icon={ icon } />
+				<BlockDraggableChip
+					count={ clientIds.length }
+					icon={ icon }
+					fadeWhenDisabled
+				/>
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {

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

@@ -9,7 +9,6 @@ import {
 import Animated, {
 	runOnJS,
 	runOnUI,
-	useAnimatedRef,
 	useAnimatedStyle,
 	useSharedValue,
 	withDelay,
@@ -39,7 +38,6 @@ import RCTAztecView from '@wordpress/react-native-aztec';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import DraggableChip from './draggable-chip';
 import { store as blockEditorStore } from '../../store';
-import { useBlockListContext } from '../block-list/block-list-context';
 import DroppingInsertionPoint from './dropping-insertion-point';
 import useBlockDropZone from '../use-block-drop-zone';
 import styles from './style.scss';
@@ -74,13 +72,10 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	const { selectBlock, startDraggingBlocks, stopDraggingBlocks } =
 		useDispatch( blockEditorStore );
 
-	const { scrollRef } = useBlockListContext();
-	const animatedScrollRef = useAnimatedRef();
 	const { left, right } = useSafeAreaInsets();
 	const { width } = useSafeAreaFrame();
 	const safeAreaOffset = left + right;
 	const contentWidth = width - safeAreaOffset;
-	animatedScrollRef( scrollRef );
 
 	const scroll = {
 		offsetY: useSharedValue( 0 ),

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

@@ -14,6 +14,7 @@
 	display: inline-flex;
 	height: $block-toolbar-height;
 	padding: 0 ( $grid-unit-15 + $border-width );
+	position: relative;
 	user-select: none;
 	width: max-content;
 
@@ -45,3 +46,37 @@
 		font-size: $default-font-size;
 	}
 }
+
+// Specificity bump to override native component style.
+.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: transparent;
+	transition: all 0.1s linear 0.1s;
+
+	.block-editor-block-draggable-chip__disabled-icon {
+		width: $grid-unit-50 * 0.5;
+		height: $grid-unit-50 * 0.5;
+		box-shadow: inset 0 0 0 1.5px $white;
+		border-radius: 50%;
+		display: inline-block;
+		padding: 0;
+		background: transparent linear-gradient(-45deg, transparent 47.5%, $white 47.5%, $white 52.5%, transparent 52.5%);
+
+	}
+}
+
+.block-draggable-invalid-drag-token {
+	.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
+		background-color: $gray-700;
+		opacity: 1;
+		box-shadow: 0 4px 8px rgba($black, 0.2);
+	}
+}

package/src/components/block-draggable/test/helpers.native.js

@@ -3,11 +3,12 @@
  */
 import {
 	act,
+	advanceAnimationByFrames,
 	fireEvent,
 	initializeEditor,
+	screen,
 	waitForStoreResolvers,
 	within,
-	advanceAnimationByFrames,
 } from 'test/helpers';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { State } from 'react-native-gesture-handler';
@@ -52,15 +53,15 @@ const DEFAULT_TOUCH_EVENTS = [
 export const initializeWithBlocksLayouts = async ( blocks ) => {
 	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
 
-	const screen = await initializeEditor( { initialHtml } );
-	const { getAllByLabelText } = screen;
+	await initializeEditor( { initialHtml } );
 
 	const waitPromises = [];
+	const blockListItems = screen.getAllByTestId( 'block-list-item-cell' );
+	// Check that rendered block list items match expected block count.
+	expect( blockListItems.length ).toBe( blocks.length );
+
 	blocks.forEach( ( block, index ) => {
-		const a11yLabel = new RegExp(
-			`${ block.name } Block\\. Row ${ index + 1 }`
-		);
-		const [ element ] = getAllByLabelText( a11yLabel );
+		const element = blockListItems[ index ];
 		// "onLayout" event will populate the blocks layouts data.
 		fireEvent( element, 'layout', {
 			nativeEvent: { layout: block.layout },

package/src/components/block-draggable/use-scroll-when-dragging.native.js

@@ -34,7 +34,7 @@ const VELOCITY_MULTIPLIER = 5000;
 export default function useScrollWhenDragging() {
 	const { scrollRef } = useBlockListContext();
 	const animatedScrollRef = useAnimatedRef();
-	animatedScrollRef( scrollRef );
+	animatedScrollRef( scrollRef?.scrollViewRef );
 
 	const { height: windowHeight } = useWindowDimensions();
 

package/src/components/block-editing-mode/index.js

@@ -2,13 +2,13 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useContext, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { BlockListBlockContext } from '../block-list/block-list-block-context';
+import { useBlockEditContext } from '../block-edit/context';
 
 /**
  * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
@@ -45,7 +45,7 @@ import { BlockListBlockContext } from '../block-list/block-list-block-context';
  * @return {BlockEditingMode} The current editing mode.
  */
 export function useBlockEditingMode( mode ) {
-	const { clientId = '' } = useContext( BlockListBlockContext ) ?? {};
+	const { clientId = '' } = useBlockEditContext();
 	const blockEditingMode = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlockEditingMode( clientId ),

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

@@ -6,11 +6,6 @@ The rendered an [Icon](https://github.com/WordPress/gutenberg/tree/HEAD/packages
 
 ![Image block icons in various places](https://make.wordpress.org/core/files/2020/08/image-block-icons-in-various-places.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -4,11 +4,6 @@ The Block inspector is one of the panels that is displayed in the editor; it is
 
 ![Paragraph block inspector](https://make.wordpress.org/core/files/2020/08/paragraph-block-inspector.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

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

@@ -92,7 +92,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			blockType: _blockType,
 			topLevelLockedBlock:
 				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				( _selectedBlockName === 'core/block' &&
+					window.__experimentalPatternPartialSyncing )
 					? _selectedBlockClientId
 					: undefined ),
 		};

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

@@ -52,7 +52,11 @@ function BlockListItemCell( { children, item: clientId, onLayout } ) {
 		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
 	);
 
-	return <View onLayout={ onCellLayout }>{ children }</View>;
+	return (
+		<View testID="block-list-item-cell" onLayout={ onCellLayout }>
+			{ children }
+		</View>
+	);
 }
 
 export default BlockListItemCell;