diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 80fe4c420d1e1f..35d075c1a99b78 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/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; diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss index 71ede90d25c0ca..361268fb2b37de 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/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; diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 47304a7d771747..59d78a6f0edc6c 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -60,6 +60,7 @@ const defaultRenderToggle = ( { return ( { 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(); diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 02ca1feceae555..f1c2e15537b99b 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/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 /> diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8227d9b894a979..7255888604ed12 100644 --- a/packages/components/CHANGELOG.md +++ b/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) diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx index 92f431dfb22fc7..ef37caf2f52140 100644 --- a/packages/components/src/navigation/index.tsx +++ b/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 diff --git a/packages/components/src/navigation/test/index.tsx b/packages/components/src/navigation/test/index.tsx index 20646a6c809bfc..fed939068c0bfd 100644 --- a/packages/components/src/navigation/test/index.tsx +++ b/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' ); diff --git a/packages/components/src/slot-fill/slot.tsx b/packages/components/src/slot-fill/slot.tsx index 82feaa04199f51..c1182562672c0b 100644 --- a/packages/components/src/slot-fill/slot.tsx +++ b/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 ); diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx index f849eca7c783f0..0031663ea10e78 100644 --- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx +++ b/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 ( = React.PropsWithChildren< { - field: NormalizedField< Item >; - data: Item; -} >; - -export default function FormFieldVisibility< Item >( { - data, - field, - children, -}: FormFieldVisibilityProps< Item > ) { - const isVisible = useMemo( () => { - if ( field.isVisible ) { - return field.isVisible( data ); - } - return true; - }, [ field.isVisible, data ] ); - - if ( ! isVisible ) { - return null; - } - return children; -} diff --git a/storybook/stories/playground/box/index.js b/storybook/stories/playground/box/index.js index cca522a90c1441..35656c7d6edc04 100644 --- a/storybook/stories/playground/box/index.js +++ b/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() { diff --git a/storybook/stories/playground/with-undo-redo/index.js b/storybook/stories/playground/with-undo-redo/index.js index b5a6067cad24b7..0952543679ce06 100644 --- a/storybook/stories/playground/with-undo-redo/index.js +++ b/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() { diff --git a/storybook/stories/playground/zoom-out/index.js b/storybook/stories/playground/zoom-out/index.js index 8b72a831d710e8..c4d9a716c90694 100644 --- a/storybook/stories/playground/zoom-out/index.js +++ b/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';