@wordpress/block-editor 15.5.0 → 15.5.1-next.47f435fc9.0

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

@@ -43,16 +43,23 @@ export const IntersectionObserver = createContext();
 IntersectionObserver.displayName = 'IntersectionObserverContext';
 
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
+const delayedBlockVisibilityDebounceOptions = {
+	trailing: true,
+};
 
 function Root( { className, ...settings } ) {
 	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
 		useSelect( ( select ) => {
-			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
-				unlock( select( blockEditorStore ) );
+			const {
+				getSettings,
+				getTemporarilyEditingAsBlocks,
+				isTyping,
+				hasBlockSpotlight,
+			} = unlock( select( blockEditorStore ) );
 			const { outlineMode, focusMode } = getSettings();
 			return {
 				isOutlineMode: outlineMode && ! isTyping(),
-				isFocusMode: focusMode,
+				isFocusMode: focusMode || hasBlockSpotlight(),
 				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
 			};
 		}, [] );
@@ -70,9 +77,7 @@ function Root( { className, ...settings } ) {
 			setBlockVisibility( updates );
 		}, [ registry ] ),
 		300,
-		{
-			trailing: true,
-		}
+		delayedBlockVisibilityDebounceOptions
 	);
 	const intersectionObserver = useMemo( () => {
 		const { IntersectionObserver: Observer } = window;

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -5,15 +5,16 @@ import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
-import { createRoot } from '@wordpress/element';
-import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
-import BlockDraggableChip from '../../../components/block-draggable/draggable-chip';
+
+function isColorTransparent( color ) {
+	return ! color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
+}
 
 /**
  * Adds block behaviour:
@@ -24,9 +25,9 @@ import BlockDraggableChip from '../../../components/block-draggable/draggable-ch
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockType } = useSelect( blocksStore );
-	const { getBlockRootClientId, isZoomOut, hasMultiSelection, getBlockName } =
-		unlock( useSelect( blockEditorStore ) );
+	const { getBlockRootClientId, isZoomOut, hasMultiSelection } = unlock(
+		useSelect( blockEditorStore )
+	);
 	const {
 		insertAfterBlock,
 		removeBlock,
@@ -105,20 +106,6 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				const selection = defaultView.getSelection();
 				selection.removeAllRanges();
 
-				const domNode = document.createElement( 'div' );
-				const root = createRoot( domNode );
-				root.render(
-					<BlockDraggableChip
-						icon={ getBlockType( getBlockName( clientId ) ).icon }
-					/>
-				);
-				document.body.appendChild( domNode );
-				domNode.style.position = 'absolute';
-				domNode.style.top = '0';
-				domNode.style.left = '0';
-				domNode.style.zIndex = '1000';
-				domNode.style.pointerEvents = 'none';
-
 				// Setting the drag chip as the drag image actually works, but
 				// the behaviour is slightly different in every browser. In
 				// Safari, it animates, in Firefox it's slightly transparent...
@@ -134,31 +121,141 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				ownerDocument.body.appendChild( dragElement );
 				event.dataTransfer.setDragImage( dragElement, 0, 0 );
 
-				let offset = { x: 0, y: 0 };
+				const rect = node.getBoundingClientRect();
+
+				const clone = node.cloneNode( true );
+				clone.style.visibility = 'hidden';
+				// Maybe remove the clone now that it's relative?
+				clone.style.display = 'none';
+
+				// Remove the id and leave it on the clone so that drop target
+				// calculations are correct.
+				const id = node.id;
+				node.id = null;
 
-				if ( document !== ownerDocument ) {
-					const frame = defaultView.frameElement;
-					if ( frame ) {
-						const rect = frame.getBoundingClientRect();
-						offset = { x: rect.left, y: rect.top };
+				let _scale = 1;
+
+				{
+					let parentElement = node;
+					while ( ( parentElement = parentElement.parentElement ) ) {
+						const { scale } =
+							defaultView.getComputedStyle( parentElement );
+						if ( scale && scale !== 'none' ) {
+							_scale = parseFloat( scale );
+							break;
+						}
 					}
 				}
 
-				// chip handle offset
-				offset.x -= 58;
+				const inverted = 1 / _scale;
 
-				function over( e ) {
-					domNode.style.transform = `translate( ${
-						e.clientX + offset.x
-					}px, ${ e.clientY + offset.y }px )`;
+				node.after( clone );
+
+				const originalNodeProperties = {};
+				for ( const property of [
+					'transform',
+					'transformOrigin',
+					'transition',
+					'zIndex',
+					'position',
+					'top',
+					'left',
+					'pointerEvents',
+					'opacity',
+					'backgroundColor',
+				] ) {
+					originalNodeProperties[ property ] = node.style[ property ];
+				}
+
+				// Get scroll position.
+				const originScrollTop = defaultView.scrollY;
+				const originScrollLeft = defaultView.scrollX;
+				const originClientX = event.clientX;
+				const originClientY = event.clientY;
+
+				// We can't use position fixed because it will behave different
+				// if the html element is scaled or transformed (position will
+				// no longer be relative to the viewport). The downside of
+				// relative is that we have to listen to scroll events. On the
+				// upside we don't have to clone to keep a space. Absolute
+				// positioning might be weird because it will be based on the
+				// positioned parent, but it might be worth a try.
+				node.style.position = 'relative';
+				node.style.top = `${ 0 }px`;
+				node.style.left = `${ 0 }px`;
+
+				const originX = event.clientX - rect.left;
+				const originY = event.clientY - rect.top;
+
+				// Scale everything to 200px.
+				const dragScale = rect.height > 200 ? 200 / rect.height : 1;
+
+				node.style.zIndex = '1000';
+				node.style.transformOrigin = `${ originX * inverted }px ${
+					originY * inverted
+				}px`;
+				node.style.transition = 'transform 0.2s ease-out';
+				node.style.transform = `scale(${ dragScale })`;
+				node.style.opacity = '0.9';
+
+				// If the block has no background color, use the parent's
+				// background color.
+				if (
+					isColorTransparent(
+						defaultView.getComputedStyle( node ).backgroundColor
+					)
+				) {
+					let bgColor = 'transparent';
+					let parentElement = node;
+					while ( ( parentElement = parentElement.parentElement ) ) {
+						const { backgroundColor } =
+							defaultView.getComputedStyle( parentElement );
+						if ( ! isColorTransparent( backgroundColor ) ) {
+							bgColor = backgroundColor;
+							break;
+						}
+					}
+
+					node.style.backgroundColor = bgColor;
 				}
 
-				over( event );
+				let hasStarted = false;
+
+				function over( e ) {
+					if ( ! hasStarted ) {
+						hasStarted = true;
+						node.style.pointerEvents = 'none';
+					}
+					const scrollTop = defaultView.scrollY;
+					const scrollLeft = defaultView.scrollX;
+					node.style.top = `${
+						( e.clientY -
+							originClientY +
+							scrollTop -
+							originScrollTop ) *
+						inverted
+					}px`;
+					node.style.left = `${
+						( e.clientX -
+							originClientX +
+							scrollLeft -
+							originScrollLeft ) *
+						inverted
+					}px`;
+				}
 
 				function end() {
 					ownerDocument.removeEventListener( 'dragover', over );
 					ownerDocument.removeEventListener( 'dragend', end );
-					domNode.remove();
+					ownerDocument.removeEventListener( 'drop', end );
+					ownerDocument.removeEventListener( 'scroll', over );
+					for ( const [ property, value ] of Object.entries(
+						originalNodeProperties
+					) ) {
+						node.style[ property ] = value;
+					}
+					clone.remove();
+					node.id = id;
 					dragElement.remove();
 					stopDraggingBlocks();
 					document.body.classList.remove(
@@ -172,6 +269,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				ownerDocument.addEventListener( 'dragover', over );
 				ownerDocument.addEventListener( 'dragend', end );
 				ownerDocument.addEventListener( 'drop', end );
+				ownerDocument.addEventListener( 'scroll', over );
 
 				startDraggingBlocks( [ clientId ] );
 				// Important because it hides the block toolbar.

package/src/components/block-list-appender/content.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 // For vertical flex containers, a 100% width ensures correct alignment.
 .is-vertical .block-list-appender {
 	width: $icon-size;

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

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .block-editor-block-lock-modal {
 	z-index: z-index(".block-editor-block-lock-modal");
 }

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

@@ -3,7 +3,11 @@
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { SearchControl, Button } from '@wordpress/components';
+import {
+	SearchControl,
+	CheckboxControl,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
@@ -21,11 +25,13 @@ import BlockManagerCategory from './category';
  * @param {Array}    props.blockTypes         An array of blocks.
  * @param {Array}    props.selectedBlockTypes An array of selected blocks.
  * @param {Function} props.onChange           Function to be called when the selected blocks change.
+ * @param {boolean}  props.showSelectAll      Whether to show the select all checkbox.
  */
 export default function BlockManager( {
 	blockTypes,
 	selectedBlockTypes,
 	onChange,
+	showSelectAll = true,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ search, setSearch ] = useState( '' );
@@ -36,15 +42,17 @@ export default function BlockManager( {
 		};
 	}, [] );
 
-	function enableAllBlockTypes() {
-		onChange( blockTypes );
-	}
-
 	const filteredBlockTypes = blockTypes.filter( ( blockType ) => {
 		return ! search || isMatchingSearchTerm( blockType, search );
 	} );
 
-	const numberOfHiddenBlocks = blockTypes.length - selectedBlockTypes.length;
+	const isIndeterminate =
+		selectedBlockTypes.length > 0 &&
+		selectedBlockTypes.length !== blockTypes.length;
+
+	const isAllChecked =
+		blockTypes.length > 0 &&
+		selectedBlockTypes.length === blockTypes.length;
 
 	// Announce search results on change
 	useEffect( () => {
@@ -61,27 +69,7 @@ export default function BlockManager( {
 	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
 
 	return (
-		<div className="block-editor-block-manager__content">
-			{ !! numberOfHiddenBlocks && (
-				<div className="block-editor-block-manager__disabled-blocks-count">
-					{ sprintf(
-						/* translators: %d: number of blocks. */
-						_n(
-							'%d block is hidden.',
-							'%d blocks are hidden.',
-							numberOfHiddenBlocks
-						),
-						numberOfHiddenBlocks
-					) }
-					<Button
-						__next40pxDefaultSize
-						variant="link"
-						onClick={ enableAllBlockTypes }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</div>
-			) }
+		<VStack className="block-editor-block-manager__content" spacing={ 4 }>
 			<SearchControl
 				__nextHasNoMarginBottom
 				label={ __( 'Search for a block' ) }
@@ -90,6 +78,22 @@ export default function BlockManager( {
 				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
 				className="block-editor-block-manager__search"
 			/>
+			{ showSelectAll && (
+				<CheckboxControl
+					className="block-editor-block-manager__select-all"
+					label={ __( 'Select all' ) }
+					checked={ isAllChecked }
+					onChange={ () => {
+						if ( isAllChecked ) {
+							onChange( [] );
+						} else {
+							onChange( blockTypes );
+						}
+					} }
+					indeterminate={ isIndeterminate }
+					__nextHasNoMarginBottom
+				/>
+			) }
 			<div
 				tabIndex="0"
 				role="region"
@@ -122,6 +126,6 @@ export default function BlockManager( {
 					onChange={ onChange }
 				/>
 			</div>
-		</div>
+		</VStack>
 	);
 }

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

@@ -1,35 +1,13 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .block-editor-block-manager__no-results {
 	font-style: italic;
 	padding: $grid-unit-30 0;
 	text-align: center;
 }
 
-.block-editor-block-manager__search {
-	margin: $grid-unit-20 0;
-}
-
-.block-editor-block-manager__disabled-blocks-count {
-	border: $border-width solid $gray-300;
-	border-width: $border-width 0;
-	// Cover up horizontal areas off the sides of the box rectangle
-	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
-	padding: $grid-unit-10;
-	background-color: $white;
-	text-align: center;
-	position: sticky;
-	// When sticking, tuck the top border beneath the modal header border
-	top: ($grid-unit-05 + 1) * -1;
-	z-index: z-index(".block-editor-block-manager__disabled-blocks-count");
-
-	// Stick the category titles to the bottom
-	~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
-		top: $grid-unit-40 - 1;
-	}
-	.is-link {
-		margin-left: 12px;
-	}
-}
-
 .block-editor-block-manager__category {
 	margin: 0 0 $grid-unit-30 0;
 }

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .block-editor-block-mover__move-button-container {
 	display: flex;
 	padding: 0;

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-navigation__container {
 	min-width: 280px;
 }

package/src/components/block-pattern-setup/style.scss

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .block-editor-block-pattern-setup {
 	display: flex;
 	flex-direction: column;

package/src/components/block-patterns-list/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
 	margin-bottom: $grid-unit-20;

package/src/components/block-patterns-paging/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-patterns__grid-pagination-wrapper {
 
 	.block-editor-patterns__grid-pagination {

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

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
 
 .components-popover.block-editor-block-popover {
 	z-index: z-index(".block-editor-block-popover");

package/src/components/block-rename/modal.js

@@ -19,6 +19,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
+import { cleanEmptyObject } from '../../hooks/utils';
 
 export default function BlockRenameModal( { clientId, onClose } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState();
@@ -75,10 +76,10 @@ export default function BlockRenameModal( { clientId, onClose } ) {
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
 		updateBlockAttributes( [ clientId ], {
-			metadata: {
+			metadata: cleanEmptyObject( {
 				...metadata,
 				name: newName,
-			},
+			} ),
 		} );
 
 		// Immediate close avoids ability to hit save multiple times.

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

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/z-index" as *;
+
 .block-editor-block-rename-modal {
 	z-index: z-index(".block-editor-block-rename-modal");
 }

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

@@ -88,7 +88,6 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
-		isNavigationMode,
 		isZoomOut,
 	} = useSelect(
 		( select ) => {
@@ -100,7 +99,6 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
-				isNavigationMode: _isNavigationMode,
 				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
@@ -126,7 +124,6 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
-				isNavigationMode: _isNavigationMode(),
 				isZoomOut: _isZoomOut(),
 			};
 		},
@@ -158,7 +155,6 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
-	const isContentOnlyWriteMode = isNavigationMode && isContentOnly;
 
 	async function updateSelectionAfterDuplicate( clientIdsPromise ) {
 		if ( ! __experimentalSelectBlock ) {
@@ -282,14 +278,14 @@ export function BlockSettingsDropdown( {
 											clientId={ firstBlockClientId }
 										/>
 									) }
-									{ ! isContentOnlyWriteMode && (
+									{ ! isContentOnly && (
 										<CopyMenuItem
 											clientIds={ clientIds }
 											onCopy={ onCopy }
 											shortcut={ shortcuts.copy }
 										/>
 									) }
-									{ ! isContentOnlyWriteMode && (
+									{ ! isContentOnly && (
 										<CopyMenuItem
 											clientIds={ clientIds }
 											label={ __( 'Cut' ) }
@@ -338,9 +334,11 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
-									<CommentIconSlotFill.Slot
-										fillProps={ { onClose } }
-									/>
+									{ count === 1 && (
+										<CommentIconSlotFill.Slot
+											fillProps={ { onClose } }
+										/>
+									) }
 								</MenuGroup>
 								{ canCopyStyles && ! isContentOnly && (
 									<MenuGroup>

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

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .block-editor-block-styles__preview-panel {
 	display: none;
 	// Same layer as the sidebar from which it's triggered.

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-switcher {
 	position: relative;
 

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

@@ -76,8 +76,6 @@ export function PrivateBlockToolbar( {
 		showLockButtons,
 		showBlockVisibilityButton,
 		showSwitchSectionStyleButton,
-		hasFixedToolbar,
-		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -89,10 +87,8 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-			getSettings,
 			getParentSectionBlock,
 			isZoomOut,
-			isNavigationMode: _isNavigationMode,
 			isSectionBlock,
 		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
@@ -103,7 +99,6 @@ export function PrivateBlockToolbar( {
 		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
-		const isNavigationModeEnabled = _isNavigationMode();
 		const _isDefaultEditingMode = editingMode === 'default';
 		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
@@ -133,12 +128,8 @@ export function PrivateBlockToolbar( {
 		// The switch style button appears more prominently with the
 		// content only pattern experiment.
 		const _showSwitchSectionStyleButton =
-			window?.__experimentalContentOnlyPatternInsertion
-				? _isZoomOut || isSectionBlock( selectedBlockClientId )
-				: _isZoomOut ||
-				  ( isNavigationModeEnabled &&
-						editingMode === 'contentOnly' &&
-						isSectionBlock( selectedBlockClientId ) );
+			window?.__experimentalContentOnlyPatternInsertion &&
+			( _isZoomOut || isSectionBlock( selectedBlockClientId ) );
 
 		return {
 			blockClientId: selectedBlockClientId,
@@ -167,8 +158,6 @@ export function PrivateBlockToolbar( {
 			showLockButtons: ! _isZoomOut,
 			showBlockVisibilityButton: ! _isZoomOut,
 			showSwitchSectionStyleButton: _showSwitchSectionStyleButton,
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-			isNavigationMode: isNavigationModeEnabled,
 		};
 	}, [] );
 
@@ -195,7 +184,6 @@ export function PrivateBlockToolbar( {
 	// Shifts the toolbar to make room for the parent block selector.
 	const classes = clsx( 'block-editor-block-contextual-toolbar', {
 		'has-parent': showParentSelector,
-		'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar,
 	} );
 
 	const innerClasses = clsx( 'block-editor-block-toolbar', {

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

@@ -1,7 +1,11 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 /**
  * Block Toolbar
  */
-
 .block-editor-block-toolbar {
 	display: flex;
 	flex-grow: 1;