prep build 03/25

packages/block-editor/src/components/block-mover/button.js

@@ -65,6 +65,7 @@ const BlockMoverButton = forwardRef(
 			? clientIds
 			: [ clientIds ];
 		const blocksCount = normalizedClientIds.length;
+		const { disabled } = props;
 
 		const {
 			blockType,
@@ -98,7 +99,9 @@ const BlockMoverButton = forwardRef(
 
 				return {
 					blockType: block ? getBlockType( block.name ) : null,
-					isDisabled: direction === 'up' ? isFirstBlock : isLastBlock,
+					isDisabled:
+						disabled ||
+						( direction === 'up' ? isFirstBlock : isLastBlock ),
 					rootClientId: blockRootClientId,
 					firstIndex: firstBlockIndex,
 					isFirst: isFirstBlock,

packages/block-editor/src/components/block-mover/index.js

@@ -19,7 +19,12 @@ import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 import { store as blockEditorStore } from '../../store';
 
-function BlockMover( { clientIds, hideDragHandle } ) {
+function BlockMover( {
+	clientIds,
+	hideDragHandle,
+	isBlockMoverUpButtonDisabled,
+	isBlockMoverDownButtonDisabled,
+} ) {
 	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
 		( select ) => {
 			const {
@@ -83,6 +88,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverUpButton
+							disabled={ isBlockMoverUpButtonDisabled }
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>
@@ -91,6 +97,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				<ToolbarItem>
 					{ ( itemProps ) => (
 						<BlockMoverDownButton
+							disabled={ isBlockMoverDownButtonDisabled }
 							clientIds={ clientIds }
 							{ ...itemProps }
 						/>

packages/block-editor/src/components/block-preview/style.scss

@@ -48,3 +48,31 @@
 	bottom: 0;
 	z-index: 1;
 }
+
+// Restrict these shadows to the context of the inspector.
+.interface-interface-skeleton__sidebar {
+	.block-editor-block-patterns-list__list-item {
+		.block-editor-block-preview__container {
+			box-shadow: 0 0 $border-width rgba($black, 0.1);
+		}
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px $gray-900;
+			}
+		}
+	}
+}
+
+// Restrict these shadows to the context of the inserter.
+.editor-inserter-sidebar {
+	.block-editor-block-patterns-list__list-item {
+		.block-editor-block-preview__container {
+			box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
+		}
+		&:hover {
+			.block-editor-block-preview__container {
+				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+			}
+		}
+	}
+}

packages/block-editor/src/components/block-switcher/index.js

@@ -182,7 +182,9 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => {
 			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
 				return { invalidBlocks: true };
 			}
-			const rootClientId = getBlockRootClientId( clientIds );
+			const rootClientId = getBlockRootClientId(
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
+			);
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );

packages/block-editor/src/components/block-tools/block-selection-button.js

@@ -60,6 +60,8 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 				__unstableGetEditorMode,
+				getNextBlockClientId,
+				getPreviousBlockClientId,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -69,6 +71,26 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			const orientation =
 				getBlockListSettings( rootClientId )?.orientation;
 			const match = getActiveBlockVariation( name, attributes );
+			const isBlockTemplatePart =
+				blockType?.name === 'core/template-part';
+
+			let isNextBlockTemplatePart = false;
+			const nextClientId = getNextBlockClientId();
+			if ( nextClientId ) {
+				const { name: nextName } = getBlock( nextClientId );
+				const nextBlockType = getBlockType( nextName );
+				isNextBlockTemplatePart =
+					nextBlockType?.name === 'core/template-part';
+			}
+
+			let isPrevBlockTemplatePart = false;
+			const prevClientId = getPreviousBlockClientId();
+			if ( prevClientId ) {
+				const { name: prevName } = getBlock( prevClientId );
+				const prevBlockType = getBlockType( prevName );
+				isPrevBlockTemplatePart =
+					prevBlockType?.name === 'core/template-part';
+			}
 
 			return {
 				blockMovingMode: hasBlockMovingClientId(),
@@ -80,11 +102,22 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					index + 1,
 					orientation
 				),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { label, icon, blockMovingMode, editorMode } = selected;
+	const {
+		label,
+		icon,
+		blockMovingMode,
+		editorMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -252,8 +285,17 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					{ editorMode === 'zoom-out' && (
-						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
+						/>
 					) }
 					{ editorMode === 'navigation' && (
 						<BlockDraggable clientIds={ [ clientId ] }>

packages/block-editor/src/components/inserter/style.scss

@@ -318,17 +318,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-block-patterns-list__list-item {
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-	}
-	&:hover {
-		.block-editor-block-preview__container {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
-}
-
 .block-editor-inserter__patterns-category-panel {
 	padding: 0 $grid-unit-20;
 	display: flex;

packages/block-library/src/navigation/index.php

@@ -1520,6 +1520,14 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 		return $post;
 	}
 
+	/**
+	 * Skip meta generation when consumers intentionally update specific Navigation fields
+	 * and omit the content update.
+	 */
+	if ( ! isset( $post->post_content ) ) {
+		return $post;
+	}
+
 	/*
 	 * We run the Block Hooks mechanism to inject the `metadata.ignoredHookedBlocks` attribute into
 	 * all anchor blocks. For the root level, we create a mock Navigation and extract them from there.

packages/block-library/src/navigation/view.js

@@ -62,11 +62,20 @@ const { state, actions } = store(
 					// Only open on hover if the overlay is closed.
 					Object.values( overlayOpenedBy || {} ).filter( Boolean )
 						.length === 0
-				)
+				) {
 					actions.openMenu( 'hover' );
+				}
 			},
 			closeMenuOnHover() {
-				actions.closeMenu( 'hover' );
+				const { type, overlayOpenedBy } = getContext();
+				if (
+					type === 'submenu' &&
+					// Only close on hover if the overlay is closed.
+					Object.values( overlayOpenedBy || {} ).filter( Boolean )
+						.length === 0
+				) {
+					actions.closeMenu( 'hover' );
+				}
 			},
 			openMenuOnClick() {
 				const ctx = getContext();

packages/block-library/src/social-links/editor.scss

@@ -67,7 +67,6 @@
 .wp-block-social-links .wp-block-social-links__social-prompt {
 	min-height: $button-size-small;
 	list-style: none;
-	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
 	// Show as block UI.
 	font-family: $default-font;

packages/block-library/src/template-part/edit/index.js

@@ -301,7 +301,7 @@ export default function TemplatePartEdit( {
 					( partsAsPatterns.length > 0 ||
 						blockPatterns.length > 0 ) && (
 						<InspectorControls>
-							<PanelBody title={ __( 'Replace' ) }>
+							<PanelBody title={ __( 'Design' ) }>
 								<TemplatesList
 									availableTemplates={ partsAsPatterns }
 									onSelect={ ( pattern ) => {

packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx

@@ -388,8 +388,10 @@ describe.each( [
 			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
 
-			await type( 'aq' );
+			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
+			await type( 'a' );
 
 			expect(
 				screen.queryByRole( 'listbox', {
@@ -398,8 +400,10 @@ describe.each( [
 				} )
 			).not.toBeInTheDocument();
 
+			// This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser
 			await press.Enter();
-			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {

packages/components/src/custom-select-control-v2/test/index.tsx

@@ -175,8 +175,10 @@ describe.each( [
 			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
 
-			await type( 'aq' );
+			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
+			await type( 'a' );
 
 			expect(
 				screen.queryByRole( 'listbox', {
@@ -185,8 +187,10 @@ describe.each( [
 				} )
 			).not.toBeInTheDocument();
 
+			// This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser
 			await press.Enter();
-			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {

packages/dataviews/src/style.scss

@@ -465,8 +465,6 @@
 		line-height: $grid-unit-20;
 
 		.dataviews-view-list__field {
-			margin: 0;
-
 			&:has(.dataviews-view-list__field-value:empty) {
 				display: none;
 			}

packages/dataviews/src/view-list.js

@@ -98,7 +98,7 @@ function ListItem( {
 									id={ descriptionId }
 								>
 									{ visibleFields.map( ( field ) => (
-										<p
+										<div
 											key={ field.id }
 											className="dataviews-view-list__field"
 										>
@@ -111,7 +111,7 @@ function ListItem( {
 											<span className="dataviews-view-list__field-value">
 												{ field.render( { item } ) }
 											</span>
-										</p>
+										</div>
 									) ) }
 								</div>
 							</VStack>

packages/edit-site/src/components/page-pages/index.js

@@ -377,27 +377,17 @@ export default function PagePages() {
 	);
 
 	const [ showAddPageModal, setShowAddPageModal ] = useState( false );
-	const openModal = useCallback( () => {
-		if ( ! showAddPageModal ) {
-			setShowAddPageModal( true );
-		}
-	}, [ showAddPageModal ] );
-	const closeModal = useCallback( () => {
-		if ( showAddPageModal ) {
-			setShowAddPageModal( false );
-		}
-	}, [ showAddPageModal ] );
-	const handleNewPage = useCallback(
-		( { type, id } ) => {
-			history.push( {
-				postId: id,
-				postType: type,
-				canvas: 'edit',
-			} );
-			closeModal();
-		},
-		[ history ]
-	);
+
+	const openModal = () => setShowAddPageModal( true );
+	const closeModal = () => setShowAddPageModal( false );
+	const handleNewPage = ( { type, id } ) => {
+		history.push( {
+			postId: id,
+			postType: type,
+			canvas: 'edit',
+		} );
+		closeModal();
+	};
 
 	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
 	return (

packages/style-engine/class-wp-style-engine.php

@@ -444,6 +444,7 @@ protected static function get_classnames( $style_value, $style_definition ) {
 				foreach ( $style_definition['classnames'] as $classname => $property_key ) {
 					if ( true === $property_key ) {
 						$classnames[] = $classname;
+						continue;
 					}
 
 					$slug = static::get_slug_from_preset_value( $style_value, $property_key );