@wordpress/block-editor 10.5.0 → 11.1.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-select-button.js

@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**

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;
@@ -163,9 +176,8 @@
 	}
 
 	.block-editor-block-icon {
-		align-self: flex-start;
 		margin-right: $grid-unit-10;
-		width: $icon-size;
+		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -183,15 +195,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;
@@ -308,11 +318,6 @@
 
 	.block-editor-list-view-block-select-button__lock {
 		line-height: 0;
-		width: 24px;
-		min-width: 24px;
-		margin-left: auto;
-		padding: 0;
-		vertical-align: middle;
 	}
 }
 

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';
 
 /**
@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 function TestWrapper() {
@@ -32,6 +34,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 +69,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 +94,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 +119,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,98 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } 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';
+import { useInsertedBlock } from './use-inserted-block';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+export const Appender = forwardRef( ( props, ref ) => {
+	const [ insertedBlockClientId, setInsertedBlockClientId ] = 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,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	} = useInsertedBlock( insertedBlockClientId );
+
+	const maybeSetInsertedBlockOnInsertion = ( _insertedBlock ) => {
+		if ( ! _insertedBlock?.clientId ) {
+			return;
+		}
+
+		setInsertedBlockClientId( _insertedBlock?.clientId );
+	};
+
+	let maybeLinkUI;
+
+	if (
+		insertedBlockClientId &&
+		BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName )
+	) {
+		maybeLinkUI = (
+			<LinkUI
+				clientId={ insertedBlockClientId }
+				link={ insertedBlockAttributes }
+				onClose={ () => setInsertedBlockClientId( null ) }
+				hasCreateSuggestion={ false }
+				onChange={ ( updatedValue ) => {
+					updateAttributes(
+						updatedValue,
+						setInsertedBlockAttributes,
+						insertedBlockAttributes
+					);
+					setInsertedBlockClientId( 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={ maybeSetInsertedBlockOnInsertion }
+				__experimentalIsQuick
+				{ ...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-select-button.js

@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
@@ -79,7 +79,11 @@ function ListViewBlockSelectButton(
 				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"