@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/link-control/use-internal-input-value.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+export default function useInternalInputValue( value ) {
+	const [ internalInputValue, setInternalInputValue ] = useState(
+		value || ''
+	);
+
+	useEffect( () => {
+		/**
+		 * If the value changes then sync this
+		 * back up with state.
+		 */
+		if ( value && value !== internalInputValue ) {
+			setInternalInputValue( value );
+		}
+	}, [ value ] );
+
+	return [ internalInputValue, setInternalInputValue ];
+}

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

@@ -54,12 +54,13 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
+	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
 
-	const { isLocked, isContentLocked } = useBlockLock( clientId );
+	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
 		( select ) => {
 			if ( isSelected ) {
@@ -76,6 +77,7 @@ function ListViewBlock( {
 		[ isContentLocked, clientId, isSelected ]
 	);
 
+	const canExpand = isContentLocked ? false : canEdit;
 	const isFirstSelectedBlock =
 		forceSelectionContentLock ||
 		( isSelected && selectedClientIds[ 0 ] === clientId );
@@ -204,8 +206,10 @@ function ListViewBlock( {
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
+		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
+		'is-synced': blockInformation.isSynced,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
@@ -229,7 +233,7 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
-			isExpanded={ isContentLocked ? undefined : isExpanded }
+			isExpanded={ canExpand ? isExpanded : undefined }
 			aria-selected={ !! isSelected || forceSelectionContentLock }
 		>
 			<TreeGridCell
@@ -238,7 +242,7 @@ function ListViewBlock( {
 				ref={ cellRef }
 				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ isContentLocked ? undefined : isExpanded }
+				aria-expanded={ canExpand ? isExpanded : undefined }
 				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (

package/src/components/list-view/branch.js

@@ -4,9 +4,6 @@
 import { memo } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */
@@ -14,6 +11,7 @@ import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 /**
  * Given a block, returns the total number of blocks in that subtree. This is used to help determine
@@ -78,10 +76,12 @@ const countReducer =
 		return count + 1;
 	};
 
+const noop = () => {};
+
 function ListViewBranch( props ) {
 	const {
 		blocks,
-		selectBlock,
+		selectBlock = noop,
 		showBlockMovers,
 		selectedClientIds,
 		level = 1,
@@ -92,22 +92,31 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		isSyncedBranch = false,
 	} = props;
 
-	const isContentLocked = useSelect(
+	const parentBlockInformation = useBlockDisplayInformation( parentId );
+	const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced;
+
+	const canParentExpand = useSelect(
 		( select ) => {
-			return !! (
-				parentId &&
+			if ( ! parentId ) {
+				return true;
+			}
+
+			const isContentLocked =
 				select( blockEditorStore ).getTemplateLock( parentId ) ===
-					'contentOnly'
-			);
+				'contentOnly';
+			const canEdit = select( blockEditorStore ).canEditBlock( parentId );
+
+			return isContentLocked ? false : canEdit;
 		},
 		[ parentId ]
 	);
 
 	const { expandedState, draggedClientIds } = useListViewContext();
 
-	if ( isContentLocked ) {
+	if ( ! canParentExpand ) {
 		return null;
 	}
 
@@ -174,6 +183,7 @@ function ListViewBranch( props ) {
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 						{ ! showBlock && (
@@ -194,6 +204,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 					</AsyncModeProvider>
@@ -203,8 +214,4 @@ function ListViewBranch( props ) {
 	);
 }
 
-ListViewBranch.defaultProps = {
-	selectBlock: () => {},
-};
-
 export default memo( ListViewBranch );

package/src/components/list-view/style.scss

@@ -19,6 +19,12 @@
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
+	&.is-selected.is-synced td {
+		background: var(--wp-block-synced-color);
+	}
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
+		color: var(--wp-block-synced-color);
+	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
 		color: $white;
@@ -37,6 +43,13 @@
 				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
+		&::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+		}
+	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
@@ -58,11 +71,11 @@
 	&.is-last-selected td:last-child {
 		border-bottom-right-radius: $radius-block-ui;
 	}
-	&.is-branch-selected:not(.is-selected) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
+	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+	&.is-synced-branch:not(.is-selected) {
+		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
 		border-top-left-radius: $radius-block-ui;
@@ -99,7 +112,6 @@
 		height: auto;
 		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
-		color: $gray-900;
 		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;
@@ -142,6 +154,7 @@
 			}
 		}
 	}
+
 	// Fix focus styling width when one row has fewer cells.
 	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
 		right: 0;
@@ -183,15 +196,13 @@
 		@include reduce-motion("transition");
 
 		> * {
+			will-change: opacity;
 			opacity: 0;
 		}
 
 		// Show on hover, visible, and show above to keep the hit area size.
 		&:hover,
 		&.is-visible {
-			position: relative;
-			z-index: 1;
-
 			> * {
 				opacity: 1;
 				@include edit-post__fade-in-animation;

package/src/components/media-replace-flow/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -32,6 +32,16 @@ function TestWrapper() {
 	);
 }
 
+/**
+ * Returns the first found popover element up the DOM tree.
+ *
+ * @param {HTMLElement} element Element to start with.
+ * @return {HTMLElement|null} Popover element, or `null` if not found.
+ */
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
 		render( <TestWrapper /> );
@@ -57,11 +67,15 @@ describe( 'General media replace flow', () => {
 				name: 'Replace',
 			} )
 		);
-
 		const uploadMenu = screen.getByRole( 'menu' );
 
-		expect( uploadMenu ).toBeInTheDocument();
-		expect( uploadMenu ).not.toBeVisible();
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( uploadMenu )
+			).toBePositionedPopover()
+		);
+
+		await waitFor( () => expect( uploadMenu ).toBeVisible() );
 	} );
 
 	it( 'displays media URL', async () => {
@@ -78,11 +92,15 @@ describe( 'General media replace flow', () => {
 			} )
 		);
 
-		expect(
-			screen.getByRole( 'link', {
-				name: 'example.media (opens in a new tab)',
-			} )
-		).toHaveAttribute( 'href', 'https://example.media' );
+		const link = screen.getByRole( 'link', {
+			name: 'example.media (opens in a new tab)',
+		} );
+
+		await waitFor( () =>
+			expect( getWrappingPopoverElement( link ) ).toBePositionedPopover()
+		);
+
+		expect( link ).toHaveAttribute( 'href', 'https://example.media' );
 	} );
 
 	it( 'edits media URL', async () => {
@@ -99,6 +117,16 @@ describe( 'General media replace flow', () => {
 			} )
 		);
 
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement(
+					screen.getByRole( 'link', {
+						name: 'example.media (opens in a new tab)',
+					} )
+				)
+			).toBePositionedPopover()
+		);
+
 		await user.click(
 			screen.getByRole( 'button', {
 				name: 'Edit',

package/src/components/media-upload/test/index.native.js

@@ -1,3 +1,5 @@
+/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expect*"] }] */
+
 /**
  * External dependencies
  */

package/src/components/off-canvas-editor/README.md

@@ -0,0 +1,5 @@
+# Experimental Off Canvas Editor
+
+The __ExperimentalOffCanvasEditor component is a modified ListView compoent. It provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. It enables editing of hierarchy and addition of elements in the block tree without selecting the block instance on the canvas.
+
+It is an experimental component which may end up completely merged into the ListView component via configuration props.

package/src/components/off-canvas-editor/appender.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { forwardRef, useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import Inserter from '../inserter';
+import { LinkUI } from './link-ui';
+import { updateAttributes } from './update-attributes';
+
+export const Appender = forwardRef( ( props, ref ) => {
+	const [ insertedBlock, setInsertedBlock ] = useState();
+
+	const { hideInserter, clientId } = useSelect( ( select ) => {
+		const {
+			getTemplateLock,
+			__unstableGetEditorMode,
+			getSelectedBlockClientId,
+		} = select( blockEditorStore );
+
+		const _clientId = getSelectedBlockClientId();
+
+		return {
+			clientId: getSelectedBlockClientId(),
+			hideInserter:
+				!! getTemplateLock( _clientId ) ||
+				__unstableGetEditorMode() === 'zoom-out',
+		};
+	}, [] );
+
+	const { insertedBlockAttributes } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			return {
+				insertedBlockAttributes: getBlockAttributes( insertedBlock ),
+			};
+		},
+		[ insertedBlock ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setAttributes =
+		( insertedBlockClientId ) => ( _updatedAttributes ) => {
+			updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+		};
+
+	let maybeLinkUI;
+
+	if ( insertedBlock ) {
+		maybeLinkUI = (
+			<LinkUI
+				clientId={ insertedBlock }
+				link={ insertedBlockAttributes }
+				onClose={ () => setInsertedBlock( null ) }
+				hasCreateSuggestion={ false }
+				onChange={ ( updatedValue ) => {
+					updateAttributes(
+						updatedValue,
+						setAttributes( insertedBlock ),
+						insertedBlockAttributes
+					);
+					setInsertedBlock( null );
+				} }
+			/>
+		);
+	}
+
+	if ( hideInserter ) {
+		return null;
+	}
+
+	return (
+		<div className="offcanvas-editor__appender">
+			{ maybeLinkUI }
+			<Inserter
+				ref={ ref }
+				rootClientId={ clientId }
+				position="bottom right"
+				isAppender={ true }
+				selectBlockOnInsert={ false }
+				onSelectOrClose={ ( { insertedBlockId } ) => {
+					setInsertedBlock( insertedBlockId );
+				} }
+				{ ...props }
+			/>
+		</div>
+	);
+} );

package/src/components/off-canvas-editor/block-contents.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ListViewBlockSelectButton from './block-select-button';
+import BlockDraggable from '../block-draggable';
+import { store as blockEditorStore } from '../../store';
+
+const ListViewBlockContents = forwardRef(
+	(
+		{
+			onClick,
+			onToggleExpanded,
+			block,
+			isSelected,
+			position,
+			siblingBlockCount,
+			level,
+			isExpanded,
+			selectedClientIds,
+			...props
+		},
+		ref
+	) => {
+		const { clientId } = block;
+
+		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
+			( select ) => {
+				const { hasBlockMovingClientId, getSelectedBlockClientId } =
+					select( blockEditorStore );
+				return {
+					blockMovingClientId: hasBlockMovingClientId(),
+					selectedBlockInBlockEditor: getSelectedBlockClientId(),
+				};
+			},
+			[ clientId ]
+		);
+
+		const isBlockMoveTarget =
+			blockMovingClientId && selectedBlockInBlockEditor === clientId;
+
+		const className = classnames( 'block-editor-list-view-block-contents', {
+			'is-dropping-before': isBlockMoveTarget,
+		} );
+
+		// Only include all selected blocks if the currently clicked on block
+		// is one of the selected blocks. This ensures that if a user attempts
+		// to drag a block that isn't part of the selection, they're still able
+		// to drag it and rearrange its position.
+		const draggableClientIds = selectedClientIds.includes( clientId )
+			? selectedClientIds
+			: [ clientId ];
+
+		return (
+			<BlockDraggable clientIds={ draggableClientIds }>
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<ListViewBlockSelectButton
+						ref={ ref }
+						className={ className }
+						block={ block }
+						onClick={ onClick }
+						onToggleExpanded={ onToggleExpanded }
+						isSelected={ isSelected }
+						position={ position }
+						siblingBlockCount={ siblingBlockCount }
+						level={ level }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+						isExpanded={ isExpanded }
+						{ ...props }
+					/>
+				) }
+			</BlockDraggable>
+		);
+	}
+);
+
+export default ListViewBlockContents;

package/src/components/off-canvas-editor/block-edit-button.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { edit } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default forwardRef( function BlockEditButton(
+	{ clientId, ...props },
+	ref
+) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	const onClick = () => {
+		selectBlock( clientId );
+	};
+
+	return (
+		<Button { ...props } ref={ ref } icon={ edit } onClick={ onClick } />
+	);
+} );

package/src/components/off-canvas-editor/block-select-button.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { Icon, lock } from '@wordpress/icons';
+import { SPACE, ENTER } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import ListViewExpander from './expander';
+import { useBlockLock } from '../block-lock';
+
+function ListViewBlockSelectButton(
+	{
+		className,
+		block: { clientId },
+		onClick,
+		onToggleExpanded,
+		tabIndex,
+		onFocus,
+		onDragStart,
+		onDragEnd,
+		draggable,
+	},
+	ref
+) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const { isLocked } = useBlockLock( clientId );
+
+	// The `href` attribute triggers the browser's native HTML drag operations.
+	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
+	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
+	// inside the `useOnBlockDrop` hook.
+	const onDragStartHandler = ( event ) => {
+		event.dataTransfer.clearData();
+		onDragStart?.( event );
+	};
+
+	function onKeyDownHandler( event ) {
+		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
+			onClick( event );
+		}
+	}
+
+	return (
+		<>
+			<Button
+				className={ classnames(
+					'block-editor-list-view-block-select-button',
+					className
+				) }
+				onClick={ onClick }
+				onKeyDown={ onKeyDownHandler }
+				ref={ ref }
+				tabIndex={ tabIndex }
+				onFocus={ onFocus }
+				onDragStart={ onDragStartHandler }
+				onDragEnd={ onDragEnd }
+				draggable={ draggable }
+				href={ `#block-${ clientId }` }
+				aria-hidden={ true }
+			>
+				<ListViewExpander onClick={ onToggleExpanded } />
+				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<HStack
+					alignment="center"
+					className="block-editor-list-view-block-select-button__label-wrapper"
+					justify="flex-start"
+					spacing={ 1 }
+				>
+					<span className="block-editor-list-view-block-select-button__title">
+						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
+					</span>
+					{ blockInformation?.anchor && (
+						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+							<Truncate
+								className="block-editor-list-view-block-select-button__anchor"
+								ellipsizeMode="auto"
+							>
+								{ blockInformation.anchor }
+							</Truncate>
+						</span>
+					) }
+					{ isLocked && (
+						<span className="block-editor-list-view-block-select-button__lock">
+							<Icon icon={ lock } />
+						</span>
+					) }
+				</HStack>
+			</Button>
+		</>
+	);
+}
+
+export default forwardRef( ListViewBlockSelectButton );