[pull] trunk from WordPress:trunk

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

@@ -78,6 +78,7 @@
 		color: $white;
 		padding: 0;
 
+		// TODO: Consider passing size="small" to the Inserter toggle instead.
 		// Special dimensions for this button.
 		min-width: $button-size-small;
 		height: $button-size-small;

packages/block-editor/src/components/default-block-appender/content.scss

@@ -42,6 +42,7 @@
 		color: $white;
 		padding: 0;
 
+		// TODO: Consider passing size="small" to the Inserter toggle instead.
 		// Special dimensions for this button.
 		min-width: $button-size-small;
 		height: $button-size-small;

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

@@ -60,6 +60,7 @@ const defaultRenderToggle = ( {
 
 	return (
 		<Wrapper
+			__next40pxDefaultSize={ toggleProps.as ? undefined : true }
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"

packages/block-library/src/cover/test/edit.js

@@ -200,9 +200,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'heading', {
-						name: 'Settings',
-					} )
+					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
 			} );
 		} );
@@ -216,7 +214,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Fixed background' )
+				await screen.findByLabelText( 'Fixed background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'has-parallax'
@@ -232,7 +230,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Repeated background' )
+				await screen.findByLabelText( 'Repeated background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'is-repeated'
@@ -245,7 +243,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
-			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
 			expect(
@@ -262,7 +260,7 @@ describe( 'Cover block', () => {
 
 			await selectBlock( 'Block: Cover' );
 			await userEvent.type(
-				screen.getByLabelText( 'Alternative text' ),
+				await screen.findByLabelText( 'Alternative text' ),
 				'Me'
 			);
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();

packages/block-library/src/paragraph/edit.js

@@ -20,14 +20,16 @@ import {
 	useBlockProps,
 	useSettings,
 	useBlockEditingMode,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
+import { unlock } from '../lock-unlock';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
@@ -109,7 +111,11 @@ function ParagraphBlock( {
 	isSelected: isSingleSelected,
 	name,
 } ) {
-	const { align, content, direction, dropCap, placeholder } = attributes;
+	const isZoomOut = useSelect( ( select ) =>
+		unlock( select( blockEditorStore ) ).isZoomOut()
+	);
+
+	const { align, content, direction, dropCap } = attributes;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {
@@ -119,6 +125,12 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	let { placeholder } = attributes;
+	if ( isZoomOut ) {
+		placeholder = '';
+	} else if ( ! placeholder ) {
+		placeholder = __( 'Type / to choose a block' );
+	}
 
 	return (
 		<>
@@ -170,8 +182,10 @@ function ParagraphBlock( {
 						: __( 'Block: Paragraph' )
 				}
 				data-empty={ RichText.isEmpty( content ) }
-				placeholder={ placeholder || __( 'Type / to choose a block' ) }
-				data-custom-placeholder={ placeholder ? true : undefined }
+				placeholder={ placeholder }
+				data-custom-placeholder={
+					placeholder && ! isZoomOut ? true : undefined
+				}
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
 			/>

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 -   `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)).
 -   `RadioGroup`: Log deprecation warning ([#68067](https://github.com/WordPress/gutenberg/pull/68067)).
 -   Soft deprecate `ButtonGroup` component. Use `ToggleGroupControl` instead ([#65429](https://github.com/WordPress/gutenberg/pull/65429)).
+-   `Navigation`: Log deprecation warning for removal in WP 7.1. Use `Navigator` instead ([#68158](https://github.com/WordPress/gutenberg/pull/68158)).
 
 ### Bug Fixes
 
@@ -28,6 +29,7 @@
 
 -   `SlotFill`: rewrite the non-portal version to use `observableMap` ([#67400](https://github.com/WordPress/gutenberg/pull/67400)).
 -   `DatePicker`: Prepare day buttons for 40px default size ([#68156](https://github.com/WordPress/gutenberg/pull/68156)).
+-   `SlotFill`: register slots in a layout effect ([#68176](https://github.com/WordPress/gutenberg/pull/68176)).
 
 ## 29.0.0 (2024-12-11)
 

packages/components/src/navigation/index.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
@@ -79,6 +80,12 @@ export function Navigation( {
 	const navigationTree = useCreateNavigationTree();
 	const defaultSlideOrigin = isRTL() ? 'right' : 'left';
 
+	deprecated( 'wp.components.Navigation (and all subcomponents)', {
+		since: '6.8',
+		version: '7.1',
+		alternative: 'wp.components.Navigator',
+	} );
+
 	const setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (
 		menuId,
 		slideInOrigin = defaultSlideOrigin

packages/components/src/navigation/test/index.tsx

@@ -176,6 +176,10 @@ describe( 'Navigation', () => {
 
 		const menuItems = screen.getAllByRole( 'listitem' );
 
+		expect( console ).toHaveWarnedWith(
+			'wp.components.Navigation (and all subcomponents) is deprecated since version 6.8 and will be removed in version 7.1. Please use wp.components.Navigator instead.'
+		);
+
 		expect( menuItems ).toHaveLength( 4 );
 		expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
 		expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );

packages/components/src/slot-fill/slot.tsx

@@ -9,7 +9,7 @@ import type { ReactElement, ReactNode, Key } from 'react';
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
-	useEffect,
+	useLayoutEffect,
 	useRef,
 	Children,
 	cloneElement,
@@ -54,7 +54,7 @@ function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
 
 	const { name, children, fillProps = {} } = props;
 
-	useEffect( () => {
+	useLayoutEffect( () => {
 		const instance = instanceRef.current;
 		registry.registerSlot( name, instance );
 		return () => registry.unregisterSlot( name, instance );

packages/dataviews/src/components/dataviews-item-actions/index.tsx

@@ -145,13 +145,6 @@ export function ActionsMenuGroup< Item >( {
 	);
 }
 
-function hasOnlyOneActionAndIsPrimary< Item >(
-	primaryActions: Action< Item >[],
-	actions: Action< Item >[]
-) {
-	return primaryActions.length === 1 && actions.length === 1;
-}
-
 export default function ItemActions< Item >( {
 	item,
 	actions,
@@ -184,7 +177,8 @@ export default function ItemActions< Item >( {
 		);
 	}
 
-	if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) {
+	// If all actions are primary, there is no need to render the dropdown.
+	if ( primaryActions.length === eligibleActions.length ) {
 		return (
 			<PrimaryActions
 				item={ item }

storybook/stories/playground/box/index.js

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import editorStyles from '../editor-styles';
+import { editorStyles } from '../editor-styles';
 import './style.css';
 
 export default function EditorBox() {

storybook/stories/playground/with-undo-redo/index.js

@@ -15,7 +15,7 @@ import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import editorStyles from '../editor-styles';
+import { editorStyles } from '../editor-styles';
 import './style.css';
 
 export default function EditorWithUndoRedo() {

storybook/stories/playground/zoom-out/index.js

@@ -16,7 +16,7 @@ import { parse } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import editorStyles from '../editor-styles';
+import { editorStyles } from '../editor-styles';
 // eslint-disable-next-line @wordpress/dependency-group
 import contentCss from '!!raw-loader!../../../../packages/block-editor/build-style/content.css';
 import { pattern } from './pattern';