@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.15.0",
+	"version": "12.16.1-next.79a6196f.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.47.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/blob": "^3.47.0",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/commands": "^0.18.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/date": "^4.47.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/escape-html": "^2.47.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/html-entities": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/is-shallow-equal": "^4.47.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/rich-text": "^6.24.0",
-		"@wordpress/style-engine": "^1.30.0",
-		"@wordpress/token-list": "^2.47.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/warning": "^2.47.0",
-		"@wordpress/wordcount": "^3.47.0",
+		"@wordpress/a11y": "^3.48.1-next.79a6196f.0",
+		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
+		"@wordpress/blob": "^3.48.1-next.79a6196f.0",
+		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
+		"@wordpress/commands": "^0.19.1-next.79a6196f.0",
+		"@wordpress/components": "^25.15.1-next.79a6196f.0",
+		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
+		"@wordpress/data": "^9.18.1-next.79a6196f.0",
+		"@wordpress/date": "^4.48.1-next.79a6196f.0",
+		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
+		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
+		"@wordpress/element": "^5.25.1-next.79a6196f.0",
+		"@wordpress/escape-html": "^2.48.1-next.79a6196f.0",
+		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
+		"@wordpress/html-entities": "^3.48.1-next.79a6196f.0",
+		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
+		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
+		"@wordpress/is-shallow-equal": "^4.48.1-next.79a6196f.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.1-next.79a6196f.0",
+		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
+		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
+		"@wordpress/preferences": "^3.25.1-next.79a6196f.0",
+		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
+		"@wordpress/rich-text": "^6.25.1-next.79a6196f.0",
+		"@wordpress/style-engine": "^1.31.1-next.79a6196f.0",
+		"@wordpress/token-list": "^2.48.1-next.79a6196f.0",
+		"@wordpress/url": "^3.49.1-next.79a6196f.0",
+		"@wordpress/warning": "^2.48.1-next.79a6196f.0",
+		"@wordpress/wordcount": "^3.48.1-next.79a6196f.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
+	"gitHead": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
 }

package/src/components/alignment-control/README.md

@@ -6,11 +6,6 @@ This component is mostly used for blocks that display text, such as Heading, Par
 
 ![Post Title block alignment options](https://make.wordpress.org/core/files/2020/09/post-title-block-alignment-options.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/block-alignment-control/README.md

@@ -4,11 +4,6 @@ The `BlockAlignmentToolbar` component is used to render block alignment options
 
 ![Image block alignment options](https://make.wordpress.org/core/files/2020/09/image-block-alignment-options.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage

package/src/components/block-alignment-matrix-control/README.md

@@ -4,16 +4,6 @@ The alignment matrix control allows users to quickly adjust inner block alignmen
 
 ![Button components](https://i.imgur.com/PxYkgL5.png)
 
-## Table of contents
-
--   [Alignment Matrix Control](#alignment-matrix-control)
-    -   [Table of contents](#table-of-contents)
-    -   [Design guidelines](#design-guidelines)
-        -   [Usage](#usage)
-    -   [Development guidelines](#development-guidelines)
-        -   [Usage](#usage-1)
-        -   [Props](#props)
-
 ## Design guidelines
 
 ### Usage

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

@@ -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,35 @@ 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={ {
+					...iframeProps?.style,
+				} }
+				name="editor-canvas"
+			>
+				<EditorStyles styles={ styles } />
+				{ children }
+			</Iframe>
+		</BlockTools>
 	);
 }
 

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
@@ -16,7 +11,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 +24,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/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,15 +56,17 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 						{ minWidth: 24, padding: 0 }
 					}
 					icon={ isRTL() ? chevronRight : chevronLeft }
-					isSmall
+					size="small"
 				/>
 			) }
 			<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-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 ),