Skip to content

Tooltip migration: block-editor + block-directory consumers (1/5) #78411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 1 commit into from
May 22, 2026
Merged

Tooltip migration: block-editor + block-directory consumers (1/5) #78411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 71 additions & 66 deletions packages/block-directory/src/components/downloadable-block-list-item/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,13 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import {
Tooltip as WCTooltip,
Spinner,
Composite,
} from '@wordpress/components';
import { Spinner, Composite } from '@wordpress/components';
import { createInterpolateElement } from '@wordpress/element';
import { decodeEntities } from '@wordpress/html-entities';
import { getBlockType } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { VisuallyHidden } from '@wordpress/ui';
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
import { VisuallyHidden, Tooltip } from '@wordpress/ui';

/**
* Internal dependencies
Expand Down Expand Up @@ -101,68 +98,76 @@ function DownloadableBlockListItem( { item, onClick } ) {
} );

return (
<WCTooltip placement="top" text={ itemLabel }>
<Composite.Item
className={ clsx(
'block-directory-downloadable-block-list-item',
isInstalling && 'is-installing'
) }
accessibleWhenDisabled
disabled={ isInstalling || ! isInstallable }
onClick={ ( event ) => {
event.preventDefault();
onClick();
} }
aria-label={ itemLabel }
type="button"
role="option"
>
<div className="block-directory-downloadable-block-list-item__icon">
<DownloadableBlockIcon icon={ icon } title={ title } />
{ isInstalling ? (
<span className="block-directory-downloadable-block-list-item__spinner">
<Spinner />
</span>
) : (
<BlockRatings rating={ rating } />
) }
</div>
<span className="block-directory-downloadable-block-list-item__details">
<span className="block-directory-downloadable-block-list-item__title">
{ createInterpolateElement(
sprintf(
/* translators: 1: block title. 2: author name. */
__( '%1$s <span>by %2$s</span>' ),
decodeEntities( title ),
author
),
{
span: (
<span className="block-directory-downloadable-block-list-item__author" />
),
}
<Tooltip.Root>
Comment thread
ciampo marked this conversation as resolved.
Copy link
Copy Markdown
Contributor Author

@ciampo ciampo May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

<Tooltip.Trigger
render={
<Composite.Item
className={ clsx(
'block-directory-downloadable-block-list-item',
isInstalling && 'is-installing'
) }
</span>
{ hasNotice ? (
<DownloadableBlockNotice block={ item } />
) : (
<>
<span className="block-directory-downloadable-block-list-item__desc">
{ !! statusText
? statusText
: decodeEntities( description ) }
</span>
{ isInstallable &&
! ( isInstalled || isInstalling ) && (
<VisuallyHidden>
{ __( 'Install block' ) }
</VisuallyHidden>
accessibleWhenDisabled
disabled={ isInstalling || ! isInstallable }
onClick={ ( event ) => {
event.preventDefault();
onClick();
} }
aria-label={ itemLabel }
type="button"
role="option"
>
<div className="block-directory-downloadable-block-list-item__icon">
<DownloadableBlockIcon
icon={ icon }
title={ title }
/>
{ isInstalling ? (
<span className="block-directory-downloadable-block-list-item__spinner">
<Spinner />
</span>
) : (
<BlockRatings rating={ rating } />
) }
</div>
<span className="block-directory-downloadable-block-list-item__details">
<span className="block-directory-downloadable-block-list-item__title">
{ createInterpolateElement(
sprintf(
/* translators: 1: block title. 2: author name. */
__( '%1$s <span>by %2$s</span>' ),
decodeEntities( title ),
author
),
{
span: (
<span className="block-directory-downloadable-block-list-item__author" />
),
}
) }
</>
) }
</span>
</Composite.Item>
</WCTooltip>
</span>
{ hasNotice ? (
<DownloadableBlockNotice block={ item } />
) : (
<>
<span className="block-directory-downloadable-block-list-item__desc">
{ !! statusText
? statusText
: decodeEntities( description ) }
</span>
{ isInstallable &&
! ( isInstalled || isInstalling ) && (
<VisuallyHidden>
{ __( 'Install block' ) }
</VisuallyHidden>
) }
</>
) }
</span>
</Composite.Item>
}
/>
<Tooltip.Popup>{ itemLabel }</Tooltip.Popup>
</Tooltip.Root>
);
}

Expand Down
11 changes: 8 additions & 3 deletions packages/block-editor/src/components/block-patterns-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import { cloneBlock } from '@wordpress/blocks';
import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
import {
Composite,
Tooltip as WCTooltip,
__experimentalHStack as HStack,
} from '@wordpress/components';
import { VisuallyHidden, Text } from '@wordpress/ui';
// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
import { VisuallyHidden, Text, Tooltip } from '@wordpress/ui';
import { useInstanceId } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { Icon, symbol } from '@wordpress/icons';
Expand All @@ -28,7 +28,12 @@ import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';

const WithToolTip = ( { showTooltip, title, children } ) => {
if ( showTooltip ) {
return <WCTooltip text={ title }>{ children }</WCTooltip>;
return (
<Tooltip.Root>
Copy link
Copy Markdown
Contributor Author

@ciampo ciampo May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

<Tooltip.Trigger render={ children } />
<Tooltip.Popup>{ title }</Tooltip.Popup>
</Tooltip.Root>
);
Comment thread
ciampo marked this conversation as resolved.
}
return <>{ children }</>;
};
Expand Down
48 changes: 29 additions & 19 deletions packages/block-editor/src/components/global-styles/shadow-panel-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
FlexItem,
Dropdown,
Composite,
Tooltip as WCTooltip,
} from '@wordpress/components';
import { useMemo, useRef } from '@wordpress/element';
import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
Expand All @@ -21,6 +20,9 @@ import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
*/
import clsx from 'clsx';

// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
import { Tooltip } from '@wordpress/ui';

/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation.
Expand Down Expand Up @@ -82,31 +84,39 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {

export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
return (
<WCTooltip text={ label }>
<Composite.Item
role="option"
aria-label={ label }
aria-selected={ isActive }
className={ clsx( 'block-editor-global-styles__shadow__item', {
'is-active': isActive,
} ) }
<Tooltip.Root>
Copy link
Copy Markdown
Contributor Author

@ciampo ciampo May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

<Tooltip.Trigger
render={
<button
<Composite.Item
role="option"
aria-label={ label }
aria-selected={ isActive }
className={ clsx(
'block-editor-global-styles__shadow-indicator',
'block-editor-global-styles__shadow__item',
{
unset: type === 'unset',
'is-active': isActive,
}
) }
onClick={ onSelect }
style={ { boxShadow: shadow } }
aria-label={ label }
>
{ isActive && <Icon icon={ check } /> }
</button>
render={
<button
className={ clsx(
'block-editor-global-styles__shadow-indicator',
{
unset: type === 'unset',
}
) }
onClick={ onSelect }
style={ { boxShadow: shadow } }
aria-label={ label }
>
{ isActive && <Icon icon={ check } /> }
</button>
}
/>
}
/>
</WCTooltip>
<Tooltip.Popup>{ label }</Tooltip.Popup>
</Tooltip.Root>
);
}

Expand Down
49 changes: 29 additions & 20 deletions packages/block-editor/src/components/inserter/media-tab/media-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import {
Tooltip as WCTooltip,
DropdownMenu,
MenuGroup,
MenuItem,
Expand All @@ -28,6 +27,9 @@ import { store as noticesStore } from '@wordpress/notices';
import { isBlobURL } from '@wordpress/blob';
import { getFilename } from '@wordpress/url';

// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
import { Tooltip } from '@wordpress/ui';

/**
* Internal dependencies
*/
Expand Down Expand Up @@ -261,27 +263,34 @@ export function MediaPreview( { media, onClick, category } ) {
onMouseEnter={ onMouseEnter }
onMouseLeave={ onMouseLeave }
>
<WCTooltip text={ title }>
<Composite.Item
<Tooltip.Root>
Copy link
Copy Markdown
Contributor Author

@ciampo ciampo May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

<Tooltip.Trigger
render={
<div
aria-label={ title }
role="option"
className="block-editor-inserter__media-list__item"
/>
}
onClick={ () => onMediaInsert( block ) }
>
<div className="block-editor-inserter__media-list__item-preview">
{ preview }
{ isInserting && (
<div className="block-editor-inserter__media-list__item-preview-spinner">
<Spinner />
<Composite.Item
render={
<div
aria-label={ title }
role="option"
className="block-editor-inserter__media-list__item"
/>
}
onClick={ () =>
onMediaInsert( block )
}
>
<div className="block-editor-inserter__media-list__item-preview">
{ preview }
{ isInserting && (
<div className="block-editor-inserter__media-list__item-preview-spinner">
<Spinner />
</div>
) }
</div>
) }
</div>
</Composite.Item>
</WCTooltip>
</Composite.Item>
}
/>
<Tooltip.Popup>{ title }</Tooltip.Popup>
</Tooltip.Root>
{ ! isInserting && (
<MediaPreviewOptions
category={ category }
Expand Down
10 changes: 7 additions & 3 deletions packages/block-editor/src/components/inspector-controls-tabs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@
*/
import {
Icon as WCIcon,
Tooltip as WCTooltip,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useEffect, useState, useRef } from '@wordpress/element';
import { store as preferencesStore } from '@wordpress/preferences';
import { useSelect, useDispatch } from '@wordpress/data';

// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
import { Tooltip } from '@wordpress/ui';

/**
* Internal dependencies
*/
Expand Down Expand Up @@ -175,14 +177,16 @@ export default function InspectorControlsTabs( {
{ tab.title }
</Tabs.Tab>
) : (
<WCTooltip text={ tab.title } key={ tab.name }>
<Tooltip.Root key={ tab.name }>
Copy link
Copy Markdown
Contributor Author

@ciampo ciampo May 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

<Tabs.Tab
tabId={ tab.name }
aria-label={ tab.title }
render={ <Tooltip.Trigger /> }
>
<WCIcon icon={ tab.icon } />
</Tabs.Tab>
</WCTooltip>
<Tooltip.Popup>{ tab.title }</Tooltip.Popup>
</Tooltip.Root>
)
) }
</Tabs.TabList>
Expand Down
Loading
Loading