@wordpress/block-editor 10.5.0 → 11.0.0

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

@@ -10,11 +10,11 @@ export default function useInternalInputValue( value ) {
 
 	useEffect( () => {
 		/**
-		 * If the value's `text` property changes then sync this
+		 * If the value changes then sync this
 		 * back up with state.
 		 */
-		if ( value?.title && value.title !== internalInputValue ) {
-			setInternalInputValue( value.title );
+		if ( value && value !== internalInputValue ) {
+			setInternalInputValue( value );
 		}
 	}, [ value ] );
 

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

@@ -54,6 +54,7 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
+	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -205,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

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,8 +92,12 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		isSyncedBranch = false,
 	} = props;
 
+	const parentBlockInformation = useBlockDisplayInformation( parentId );
+	const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced;
+
 	const canParentExpand = useSelect(
 		( select ) => {
 			if ( ! parentId ) {
@@ -179,6 +183,7 @@ function ListViewBranch( props ) {
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 						{ ! showBlock && (
@@ -199,6 +204,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								isSyncedBranch={ syncedBranch }
 							/>
 						) }
 					</AsyncModeProvider>
@@ -208,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/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-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.js

@@ -6,10 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import { createBlock, hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
+	MenuItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
@@ -33,6 +34,7 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
+import BlockEditButton from './block-edit-button';
 import { useListViewContext } from './context';
 import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -58,7 +60,7 @@ function ListViewBlock( {
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId } = block;
+	const { clientId, attributes } = block;
 
 	const { isLocked, isContentLocked } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -85,7 +87,8 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
+	const { replaceBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockName = useSelect(
@@ -132,8 +135,17 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
+	const editAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Edit %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Edit' );
+
 	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
+	const isEditable = block.name !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
@@ -146,6 +158,11 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
+	const listViewBlockEditClassName = classnames(
+		'block-editor-list-view-block__menu-cell',
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
+	);
+
 	// If ListView has experimental features related to the Persistent List View,
 	// only focus the selected list item on mount; otherwise the list would always
 	// try to steal the focus from the editor canvas.
@@ -307,26 +324,75 @@ function ListViewBlock( {
 			) }
 
 			{ showBlockActions && (
-				<TreeGridCell
-					className={ listViewBlockSettingsClassName }
-					aria-selected={ !! isSelected || forceSelectionContentLock }
-				>
-					{ ( { ref, tabIndex, onFocus } ) => (
-						<BlockSettingsDropdown
-							clientIds={ dropdownClientIds }
-							icon={ moreVertical }
-							label={ settingsAriaLabel }
-							toggleProps={ {
-								ref,
-								className: 'block-editor-list-view-block__menu',
-								tabIndex,
-								onFocus,
-							} }
-							disableOpenOnArrowDown
-							__experimentalSelectBlock={ updateSelection }
-						/>
+				<>
+					{ isEditable && (
+						<TreeGridCell
+							className={ listViewBlockEditClassName }
+							aria-selected={
+								!! isSelected || forceSelectionContentLock
+							}
+						>
+							{ ( props ) => (
+								<BlockEditButton
+									{ ...props }
+									label={ editAriaLabel }
+									clientId={ clientId }
+								/>
+							) }
+						</TreeGridCell>
 					) }
-				</TreeGridCell>
+					<TreeGridCell
+						className={ listViewBlockSettingsClassName }
+						aria-selected={
+							!! isSelected || forceSelectionContentLock
+						}
+						colSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
+					>
+						{ ( { ref, tabIndex, onFocus } ) => (
+							<BlockSettingsDropdown
+								clientIds={ dropdownClientIds }
+								icon={ moreVertical }
+								label={ settingsAriaLabel }
+								toggleProps={ {
+									ref,
+									className:
+										'block-editor-list-view-block__menu',
+									tabIndex,
+									onFocus,
+								} }
+								disableOpenOnArrowDown
+								__experimentalSelectBlock={ updateSelection }
+							>
+								{ ( { onClose } ) => (
+									<MenuItem
+										onClick={ () => {
+											const newLink = createBlock(
+												'core/navigation-link'
+											);
+											const newSubmenu = createBlock(
+												'core/navigation-submenu',
+												attributes,
+												block.innerBlocks
+													? [
+															...block.innerBlocks,
+															newLink,
+													  ]
+													: [ newLink ]
+											);
+											replaceBlock(
+												clientId,
+												newSubmenu
+											);
+											onClose();
+										} }
+									>
+										{ __( 'Add a submenu item' ) }
+									</MenuItem>
+								) }
+							</BlockSettingsDropdown>
+						) }
+					</TreeGridCell>
+				</>
 			) }
 		</ListViewLeaf>
 	);

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

@@ -75,10 +75,12 @@ const countReducer =
 		return count + 1;
 	};
 
+const noop = () => {};
+
 function ListViewBranch( props ) {
 	const {
 		blocks,
-		selectBlock,
+		selectBlock = noop,
 		showBlockMovers,
 		selectedClientIds,
 		level = 1,
@@ -203,8 +205,4 @@ function ListViewBranch( props ) {
 	);
 }
 
-ListViewBranch.defaultProps = {
-	selectBlock: () => {},
-};
-
 export default memo( ListViewBranch );