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

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

@@ -1,8 +1,9 @@
+@use "@wordpress/base-styles/variables" as *;
+
 // This creates a "slot" where the block you're dragging appeared.
 // We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
-	opacity: 0.1 !important;
-	border-radius: $radius-small !important;
+	opacity: 0.1;
 
 	iframe {
 		pointer-events: none;

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-draggable-chip-wrapper {
 	position: absolute;
 	// Offset position so that cursor is centered over the drag handle.

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

@@ -22,10 +22,10 @@ import { useCallback, useContext, useMemo } from '@wordpress/element';
 import BlockContext from '../block-context';
 import isURLLike from '../link-control/is-url-like';
 import {
-	canBindAttribute,
 	hasPatternOverridesDefaultBinding,
 	replacePatternOverridesDefaultBinding,
 } from '../../utils/block-bindings';
+import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 /**
@@ -56,6 +56,8 @@ const Edit = ( props ) => {
 
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
+const EMPTY_ARRAY = [];
+
 const EditWithGeneratedProps = ( props ) => {
 	const { name, clientId, attributes, setAttributes } = props;
 	const registry = useRegistry();
@@ -66,6 +68,17 @@ const EditWithGeneratedProps = ( props ) => {
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources(),
 		[]
 	);
+	const bindableAttributes = useSelect(
+		( select ) => {
+			const { __experimentalBlockBindingsSupportedAttributes } =
+				select( blockEditorStore ).getSettings();
+			return (
+				__experimentalBlockBindingsSupportedAttributes?.[ name ] ||
+				EMPTY_ARRAY
+			);
+		},
+		[ name ]
+	);
 
 	const { blockBindings, context, hasPatternOverrides } = useMemo( () => {
 		// Assign context values using the block type's declared context needs.
@@ -90,8 +103,8 @@ const EditWithGeneratedProps = ( props ) => {
 		}
 		return {
 			blockBindings: replacePatternOverridesDefaultBinding(
-				name,
-				attributes?.metadata?.bindings
+				attributes?.metadata?.bindings,
+				bindableAttributes
 			),
 			context: computedContext,
 			hasPatternOverrides: hasPatternOverridesDefaultBinding(
@@ -120,7 +133,10 @@ const EditWithGeneratedProps = ( props ) => {
 			) ) {
 				const { source: sourceName, args: sourceArgs } = binding;
 				const source = registeredSources[ sourceName ];
-				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
+				if (
+					! source ||
+					! bindableAttributes.includes( attributeName )
+				) {
 					continue;
 				}
 
@@ -172,6 +188,7 @@ const EditWithGeneratedProps = ( props ) => {
 		},
 		[
 			attributes,
+			bindableAttributes,
 			blockBindings,
 			clientId,
 			context,
@@ -197,7 +214,7 @@ const EditWithGeneratedProps = ( props ) => {
 				) ) {
 					if (
 						! blockBindings[ attributeName ] ||
-						! canBindAttribute( name, attributeName )
+						! bindableAttributes.includes( attributeName )
 					) {
 						continue;
 					}
@@ -250,6 +267,7 @@ const EditWithGeneratedProps = ( props ) => {
 			} );
 		},
 		[
+			bindableAttributes,
 			blockBindings,
 			clientId,
 			context,

package/src/components/block-icon/content.scss

@@ -1,3 +1,10 @@
+@use "sass:math";
+@use "@wordpress/base-styles/animations" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-icon {
 	display: flex;
 	align-items: center;

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

@@ -1,3 +1,10 @@
+@use "sass:math";
+@use "@wordpress/base-styles/animations" as *;
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-icon {
 	display: flex;
 	align-items: center;

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

@@ -147,11 +147,34 @@ function BlockInspector() {
 			const descendants = getClientIdsOfDescendants(
 				selectedBlockClientId
 			);
-			return descendants.filter(
-				( current ) =>
+
+			// Temporary workaround for issue #71991
+			// Exclude Navigation block children from Content sidebar until proper
+			// drill-down experience is implemented (see #65699)
+			// This prevents a poor UX where all Nav block sub-items are shown
+			// when the parent block is in contentOnly mode.
+			// Build a Set of all navigation block descendants for efficient lookup
+			const navigationDescendants = new Set();
+			descendants.forEach( ( clientId ) => {
+				if ( getBlockName( clientId ) === 'core/navigation' ) {
+					const navChildren = getClientIdsOfDescendants( clientId );
+					navChildren.forEach( ( childId ) =>
+						navigationDescendants.add( childId )
+					);
+				}
+			} );
+
+			return descendants.filter( ( current ) => {
+				// Exclude navigation block children
+				if ( navigationDescendants.has( current ) ) {
+					return false;
+				}
+
+				return (
 					getBlockName( current ) !== 'core/list-item' &&
 					getBlockEditingMode( current ) === 'contentOnly'
-			);
+				);
+			} );
 		},
 		[ isSectionBlock, selectedBlockClientId ]
 	);
@@ -301,6 +324,7 @@ const BlockInspectorSingleBlock = ( {
 			<BlockCard
 				{ ...blockInformation }
 				className={ isBlockSynced && 'is-synced' }
+				allowParentNavigation
 			>
 				{ window?.__experimentalContentOnlyPatternInsertion && (
 					<EditContentsButton clientId={ clientId } />

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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 .block-editor-block-inspector {
 	p:not(.components-base-control__help) {
 		margin-top: 0;

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

@@ -624,6 +624,7 @@ function BlockListBlockProvider( props ) {
 					? getBlockDefaultClassName( blockName )
 					: undefined,
 				blockTitle: blockType?.title,
+				isBlockHidden: attributes?.metadata?.blockVisibility === false,
 			};
 
 			// When in preview mode, we can avoid a lot of selection and
@@ -632,6 +633,9 @@ function BlockListBlockProvider( props ) {
 				return previewContext;
 			}
 
+			const { isBlockHidden: _isBlockHidden } = unlock(
+				select( blockEditorStore )
+			);
 			const _isSelected = isBlockSelected( clientId );
 			const canRemove = canRemoveBlock( clientId );
 			const canMove = canMoveBlock( clientId );
@@ -705,6 +709,7 @@ function BlockListBlockProvider( props ) {
 				originalBlockClientId: isInvalid
 					? blocksWithSameName[ 0 ]
 					: false,
+				isBlockHidden: _isBlockHidden( clientId ),
 			};
 		},
 		[ clientId, rootClientId ]
@@ -747,6 +752,7 @@ function BlockListBlockProvider( props ) {
 		className,
 		defaultClassName,
 		originalBlockClientId,
+		isBlockHidden,
 	} = selectedProps;
 
 	// Users of the editor.BlockListBlock filter used to be able to
@@ -795,8 +801,18 @@ function BlockListBlockProvider( props ) {
 		originalBlockClientId,
 		themeSupportsLayout,
 		canMove,
+		isBlockHidden,
 	};
 
+	if (
+		isBlockHidden &&
+		! isSelected &&
+		! isMultiSelected &&
+		! hasChildSelected
+	) {
+		return null;
+	}
+
 	// Here we separate between the props passed to BlockListBlock and any other
 	// information we selected for internal use. BlockListBlock is a filtered
 	// component and thus ALL the props are PUBLIC API.

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

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 // This remove the margins set here: https://github.com/WordPress/gutenberg/blob/17e5c2d870d84fb6de48dcd5bc3c38cd0c0fb0d0/packages/block-library/src/editor.scss#L56
 // It removes the margins around blocks when a BlockPreview is rendered in the block style selector
 .block-editor-block-styles .block-editor-block-list__block {
@@ -93,6 +98,25 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 		}
 	}
 
+
+	// Hidden blocks.
+	// In order for the block toolbar to render correctly, blocks cannot be hidden.
+	// Instead, use styles to visually hide blocks.
+	.block-editor-block-list__block.is-block-hidden {
+		visibility: hidden;
+		overflow: hidden;
+		height: 0;
+		border: none !important;
+		padding: 0 !important;
+	}
+
+	&.is-layout-flex:not(.is-vertical) > .is-block-hidden {
+		width: 0;
+		height: auto;
+		align-self: stretch;
+		white-space: nowrap !important;
+	}
+
 	// Re-enable it on components inside.
 	[class^="components-"] {
 		user-select: text;
@@ -187,20 +211,24 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	&[data-clear="true"] {
 		float: none;
 	}
-}
-
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
-	&.is-selected,
-	&.is-hovered {
+	&:not([draggable="true"]),
+	&:not([data-draggable="true"]) {
 		cursor: default;
+	}
 
-		&.rich-text,
-		.rich-text {
-			cursor: auto;
-		}
+	&[draggable="true"],
+	&[data-draggable="true"] {
+		cursor: grab;
+	}
+
+	&[contenteditable],
+	[contenteditable] {
+		cursor: text;
 	}
+}
 
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered:not(.is-selected),
 	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
@@ -441,3 +469,4 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 .is-dragging {
 	cursor: grabbing;
 }
+

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/index.js

@@ -29,7 +29,6 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
-import { canBindBlock } from '../../../utils/block-bindings';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
@@ -102,6 +101,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		defaultClassName,
 		isSectionBlock,
 		canMove,
+		isBlockHidden,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -128,14 +128,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	const blockEditContext = useBlockEditContext();
 	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
-	const bindingsStyle =
-		hasBlockBindings && canBindBlock( name )
-			? {
-					'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
-					'--wp-admin-theme-color--rgb':
-						'var(--wp-block-synced-color--rgb)',
-			  }
-			: {};
+	const bindingsStyle = hasBlockBindings
+		? {
+				'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
+				'--wp-admin-theme-color--rgb':
+					'var(--wp-block-synced-color--rgb)',
+		  }
+		: {};
 
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
@@ -185,6 +184,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'has-negative-margin': hasNegativeMargin,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
+				'is-block-hidden': isBlockHidden,
 			},
 			className,
 			props.className,

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");
 }