Skip to content

Commit 2589b09

Browse files
ciampociampo
committed
Tooltip migration: block-editor + block-directory consumers (1/5)
Migrates 7 consumer call sites in `@wordpress/block-directory` and `@wordpress/block-editor` from the legacy `Tooltip` exported by `@wordpress/components` to the compositional `Tooltip` exported by `@wordpress/ui` (built on top of base-ui under the hood): - block-directory/downloadable-block-list-item - block-editor/block-patterns-list (WithToolTip) - block-editor/global-styles/shadow-panel-components - block-editor/inserter/media-tab/media-preview - block-editor/inspector-controls-tabs - block-editor/list-view/block-select-button (non-interactive trigger; flagged for a11y follow-up) - block-editor/preset-input-control/custom-value-controls Also lands the jscodeshift codemod used to perform the mechanical rewrite across all 5 PRs of the migration (tools/codemods/tooltip-components-to-ui.js): npx jscodeshift -t tools/codemods/tooltip-components-to-ui.js \ --extensions=js,jsx,ts,tsx --parser=tsx \ packages/<scope> Per-call-site `Tooltip.Provider`s are *not* introduced by the codemod; group-coordination is handled by shell-level `<Tooltip.Provider>`s mounted in the edit-post / edit-site / boot PRs. Part of the broader migration tracked in #78095 (the new @wordpress/ui Tooltip API).
1 parent 7ffa85d commit 2589b09

8 files changed

Lines changed: 620 additions & 126 deletions

File tree

‎packages/block-directory/src/components/downloadable-block-list-item/index.js‎

Lines changed: 71 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,13 @@ import clsx from 'clsx';
77
* WordPress dependencies
88
*/
99
import { __, _n, sprintf } from '@wordpress/i18n';
10-
import {
11-
Tooltip as WCTooltip,
12-
Spinner,
13-
Composite,
14-
} from '@wordpress/components';
10+
import { Spinner, Composite } from '@wordpress/components';
1511
import { createInterpolateElement } from '@wordpress/element';
1612
import { decodeEntities } from '@wordpress/html-entities';
1713
import { getBlockType } from '@wordpress/blocks';
1814
import { useSelect } from '@wordpress/data';
19-
import { VisuallyHidden } from '@wordpress/ui';
15+
// 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.
16+
import { VisuallyHidden, Tooltip } from '@wordpress/ui';
2017

2118
/**
2219
* Internal dependencies
@@ -101,68 +98,76 @@ function DownloadableBlockListItem( { item, onClick } ) {
10198
} );
10299

103100
return (
104-
<WCTooltip placement="top" text={ itemLabel }>
105-
<Composite.Item
106-
className={ clsx(
107-
'block-directory-downloadable-block-list-item',
108-
isInstalling && 'is-installing'
109-
) }
110-
accessibleWhenDisabled
111-
disabled={ isInstalling || ! isInstallable }
112-
onClick={ ( event ) => {
113-
event.preventDefault();
114-
onClick();
115-
} }
116-
aria-label={ itemLabel }
117-
type="button"
118-
role="option"
119-
>
120-
<div className="block-directory-downloadable-block-list-item__icon">
121-
<DownloadableBlockIcon icon={ icon } title={ title } />
122-
{ isInstalling ? (
123-
<span className="block-directory-downloadable-block-list-item__spinner">
124-
<Spinner />
125-
</span>
126-
) : (
127-
<BlockRatings rating={ rating } />
128-
) }
129-
</div>
130-
<span className="block-directory-downloadable-block-list-item__details">
131-
<span className="block-directory-downloadable-block-list-item__title">
132-
{ createInterpolateElement(
133-
sprintf(
134-
/* translators: 1: block title. 2: author name. */
135-
__( '%1$s <span>by %2$s</span>' ),
136-
decodeEntities( title ),
137-
author
138-
),
139-
{
140-
span: (
141-
<span className="block-directory-downloadable-block-list-item__author" />
142-
),
143-
}
101+
<Tooltip.Root>
102+
<Tooltip.Trigger
103+
render={
104+
<Composite.Item
105+
className={ clsx(
106+
'block-directory-downloadable-block-list-item',
107+
isInstalling && 'is-installing'
144108
) }
145-
</span>
146-
{ hasNotice ? (
147-
<DownloadableBlockNotice block={ item } />
148-
) : (
149-
<>
150-
<span className="block-directory-downloadable-block-list-item__desc">
151-
{ !! statusText
152-
? statusText
153-
: decodeEntities( description ) }
154-
</span>
155-
{ isInstallable &&
156-
! ( isInstalled || isInstalling ) && (
157-
<VisuallyHidden>
158-
{ __( 'Install block' ) }
159-
</VisuallyHidden>
109+
accessibleWhenDisabled
110+
disabled={ isInstalling || ! isInstallable }
111+
onClick={ ( event ) => {
112+
event.preventDefault();
113+
onClick();
114+
} }
115+
aria-label={ itemLabel }
116+
type="button"
117+
role="option"
118+
>
119+
<div className="block-directory-downloadable-block-list-item__icon">
120+
<DownloadableBlockIcon
121+
icon={ icon }
122+
title={ title }
123+
/>
124+
{ isInstalling ? (
125+
<span className="block-directory-downloadable-block-list-item__spinner">
126+
<Spinner />
127+
</span>
128+
) : (
129+
<BlockRatings rating={ rating } />
130+
) }
131+
</div>
132+
<span className="block-directory-downloadable-block-list-item__details">
133+
<span className="block-directory-downloadable-block-list-item__title">
134+
{ createInterpolateElement(
135+
sprintf(
136+
/* translators: 1: block title. 2: author name. */
137+
__( '%1$s <span>by %2$s</span>' ),
138+
decodeEntities( title ),
139+
author
140+
),
141+
{
142+
span: (
143+
<span className="block-directory-downloadable-block-list-item__author" />
144+
),
145+
}
160146
) }
161-
</>
162-
) }
163-
</span>
164-
</Composite.Item>
165-
</WCTooltip>
147+
</span>
148+
{ hasNotice ? (
149+
<DownloadableBlockNotice block={ item } />
150+
) : (
151+
<>
152+
<span className="block-directory-downloadable-block-list-item__desc">
153+
{ !! statusText
154+
? statusText
155+
: decodeEntities( description ) }
156+
</span>
157+
{ isInstallable &&
158+
! ( isInstalled || isInstalling ) && (
159+
<VisuallyHidden>
160+
{ __( 'Install block' ) }
161+
</VisuallyHidden>
162+
) }
163+
</>
164+
) }
165+
</span>
166+
</Composite.Item>
167+
}
168+
/>
169+
<Tooltip.Popup>{ itemLabel }</Tooltip.Popup>
170+
</Tooltip.Root>
166171
);
167172
}
168173

‎packages/block-editor/src/components/block-patterns-list/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ import { cloneBlock } from '@wordpress/blocks';
1010
import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
1111
import {
1212
Composite,
13-
Tooltip as WCTooltip,
1413
__experimentalHStack as HStack,
1514
} from '@wordpress/components';
16-
import { VisuallyHidden, Text } from '@wordpress/ui';
15+
// 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.
16+
import { VisuallyHidden, Text, Tooltip } from '@wordpress/ui';
1717
import { useInstanceId } from '@wordpress/compose';
1818
import { __ } from '@wordpress/i18n';
1919
import { Icon, symbol } from '@wordpress/icons';
@@ -28,7 +28,12 @@ import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
2828

2929
const WithToolTip = ( { showTooltip, title, children } ) => {
3030
if ( showTooltip ) {
31-
return <WCTooltip text={ title }>{ children }</WCTooltip>;
31+
return (
32+
<Tooltip.Root>
33+
<Tooltip.Trigger render={ children } />
34+
<Tooltip.Popup>{ title }</Tooltip.Popup>
35+
</Tooltip.Root>
36+
);
3237
}
3338
return <>{ children }</>;
3439
};

‎packages/block-editor/src/components/global-styles/shadow-panel-components.js‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
FlexItem,
1212
Dropdown,
1313
Composite,
14-
Tooltip as WCTooltip,
1514
} from '@wordpress/components';
1615
import { useMemo, useRef } from '@wordpress/element';
1716
import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
@@ -21,6 +20,9 @@ import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
2120
*/
2221
import clsx from 'clsx';
2322

23+
// 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.
24+
import { Tooltip } from '@wordpress/ui';
25+
2426
/**
2527
* Shared reference to an empty array for cases where it is important to avoid
2628
* returning a new array reference on every invocation.
@@ -82,31 +84,39 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
8284

8385
export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
8486
return (
85-
<WCTooltip text={ label }>
86-
<Composite.Item
87-
role="option"
88-
aria-label={ label }
89-
aria-selected={ isActive }
90-
className={ clsx( 'block-editor-global-styles__shadow__item', {
91-
'is-active': isActive,
92-
} ) }
87+
<Tooltip.Root>
88+
<Tooltip.Trigger
9389
render={
94-
<button
90+
<Composite.Item
91+
role="option"
92+
aria-label={ label }
93+
aria-selected={ isActive }
9594
className={ clsx(
96-
'block-editor-global-styles__shadow-indicator',
95+
'block-editor-global-styles__shadow__item',
9796
{
98-
unset: type === 'unset',
97+
'is-active': isActive,
9998
}
10099
) }
101-
onClick={ onSelect }
102-
style={ { boxShadow: shadow } }
103-
aria-label={ label }
104-
>
105-
{ isActive && <Icon icon={ check } /> }
106-
</button>
100+
render={
101+
<button
102+
className={ clsx(
103+
'block-editor-global-styles__shadow-indicator',
104+
{
105+
unset: type === 'unset',
106+
}
107+
) }
108+
onClick={ onSelect }
109+
style={ { boxShadow: shadow } }
110+
aria-label={ label }
111+
>
112+
{ isActive && <Icon icon={ check } /> }
113+
</button>
114+
}
115+
/>
107116
}
108117
/>
109-
</WCTooltip>
118+
<Tooltip.Popup>{ label }</Tooltip.Popup>
119+
</Tooltip.Root>
110120
);
111121
}
112122

‎packages/block-editor/src/components/inserter/media-tab/media-preview.js‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import clsx from 'clsx';
77
* WordPress dependencies
88
*/
99
import {
10-
Tooltip as WCTooltip,
1110
DropdownMenu,
1211
MenuGroup,
1312
MenuItem,
@@ -28,6 +27,9 @@ import { store as noticesStore } from '@wordpress/notices';
2827
import { isBlobURL } from '@wordpress/blob';
2928
import { getFilename } from '@wordpress/url';
3029

30+
// 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.
31+
import { Tooltip } from '@wordpress/ui';
32+
3133
/**
3234
* Internal dependencies
3335
*/
@@ -261,27 +263,34 @@ export function MediaPreview( { media, onClick, category } ) {
261263
onMouseEnter={ onMouseEnter }
262264
onMouseLeave={ onMouseLeave }
263265
>
264-
<WCTooltip text={ title }>
265-
<Composite.Item
266+
<Tooltip.Root>
267+
<Tooltip.Trigger
266268
render={
267-
<div
268-
aria-label={ title }
269-
role="option"
270-
className="block-editor-inserter__media-list__item"
271-
/>
272-
}
273-
onClick={ () => onMediaInsert( block ) }
274-
>
275-
<div className="block-editor-inserter__media-list__item-preview">
276-
{ preview }
277-
{ isInserting && (
278-
<div className="block-editor-inserter__media-list__item-preview-spinner">
279-
<Spinner />
269+
<Composite.Item
270+
render={
271+
<div
272+
aria-label={ title }
273+
role="option"
274+
className="block-editor-inserter__media-list__item"
275+
/>
276+
}
277+
onClick={ () =>
278+
onMediaInsert( block )
279+
}
280+
>
281+
<div className="block-editor-inserter__media-list__item-preview">
282+
{ preview }
283+
{ isInserting && (
284+
<div className="block-editor-inserter__media-list__item-preview-spinner">
285+
<Spinner />
286+
</div>
287+
) }
280288
</div>
281-
) }
282-
</div>
283-
</Composite.Item>
284-
</WCTooltip>
289+
</Composite.Item>
290+
}
291+
/>
292+
<Tooltip.Popup>{ title }</Tooltip.Popup>
293+
</Tooltip.Root>
285294
{ ! isInserting && (
286295
<MediaPreviewOptions
287296
category={ category }

‎packages/block-editor/src/components/inspector-controls-tabs/index.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
*/
44
import {
55
Icon as WCIcon,
6-
Tooltip as WCTooltip,
76
privateApis as componentsPrivateApis,
87
} from '@wordpress/components';
98
import { useEffect, useState, useRef } from '@wordpress/element';
109
import { store as preferencesStore } from '@wordpress/preferences';
1110
import { useSelect, useDispatch } from '@wordpress/data';
1211

12+
// 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.
13+
import { Tooltip } from '@wordpress/ui';
14+
1315
/**
1416
* Internal dependencies
1517
*/
@@ -175,14 +177,16 @@ export default function InspectorControlsTabs( {
175177
{ tab.title }
176178
</Tabs.Tab>
177179
) : (
178-
<WCTooltip text={ tab.title } key={ tab.name }>
180+
<Tooltip.Root key={ tab.name }>
179181
<Tabs.Tab
180182
tabId={ tab.name }
181183
aria-label={ tab.title }
184+
render={ <Tooltip.Trigger /> }
182185
>
183186
<WCIcon icon={ tab.icon } />
184187
</Tabs.Tab>
185-
</WCTooltip>
188+
<Tooltip.Popup>{ tab.title }</Tooltip.Popup>
189+
</Tooltip.Root>
186190
)
187191
) }
188192
</Tabs.TabList>

0 commit comments

Comments
 (0)