Skip to content

Tooltip migration: editor + edit-post + edit-site consumers (2/5) #78466

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

Open
ciampo wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Tooltip migration: editor + edit-post + edit-site consumers (2/5) #78466

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
123 changes: 66 additions & 57 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ import { store as coreStore } from '@wordpress/core-data';
import {
Icon as WCIcon,
SlotFillProvider,
Tooltip as WCTooltip,
__unstableUseNavigateRegions as useNavigateRegions,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
Expand All @@ -50,7 +49,8 @@ import {
useRefEffect,
useViewportMatch,
} from '@wordpress/compose';
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 { Tooltip, VisuallyHidden } from '@wordpress/ui';

/**
* Internal dependencies
Expand Down Expand Up @@ -328,16 +328,21 @@ function MetaBoxesMain( { isLegacy } ) {
// The separator button that provides a11y for resizing.
const separator = ! isShort && (
<>
<WCTooltip text={ __( 'Drag to resize' ) }>
<button
ref={ separatorRef }
role="separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
aria-valuenow={ usedAriaValueNow }
aria-label={ __( 'Drag to resize' ) }
aria-describedby={ separatorHelpId }
{ ...bindDragGesture() }
<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
ref={ separatorRef }
role="separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
aria-valuenow={ usedAriaValueNow }
aria-label={ __( 'Drag to resize' ) }
aria-describedby={ separatorHelpId }
{ ...bindDragGesture() }
/>
}
/>
</WCTooltip>
<Tooltip.Popup>{ __( 'Drag to resize' ) }</Tooltip.Popup>
</Tooltip.Root>
<VisuallyHidden id={ separatorHelpId }>
{ __(
'Use up and down arrow keys to resize the meta box pane.'
Expand Down Expand Up @@ -572,52 +577,56 @@ function Layout( {

return (
<SlotFillProvider>
<ErrorBoundary canCopyContent>
<WelcomeGuide postType={ currentPostType } />
<div { ...navigateRegionsProps }>
<Editor
settings={ editorSettings }
initialEdits={ initialEdits }
postType={ currentPostType }
postId={ currentPostId }
templateId={ templateId }
className={ className }
forceIsDirty={ hasActiveMetaboxes }
disableIframe={ ! shouldIframe }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
onActionPerformed={ onActionPerformed }
extraSidebarPanels={
showMetaBoxes && <MetaBoxes location="side" />
}
extraContent={
! isDistractionFree &&
showMetaBoxes && (
<MetaBoxesMain isLegacy={ isDevicePreview } />
)
}
>
<PostLockedModal />
<EditorInitialization />
<FullscreenMode isActive={ isFullscreenActive } />
<BrowserURL />
<UnsavedChangesWarning />
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<BlockKeyboardShortcuts />
{ currentPostType === 'wp_block' && (
<InitPatternModal />
) }
<PluginArea onError={ onPluginAreaError } />
<PostEditorMoreMenu />
{ backButton }
<SnackbarNotices className="edit-post-layout__snackbar" />
</Editor>
</div>
</ErrorBoundary>
<Tooltip.Provider>
<ErrorBoundary canCopyContent>
<WelcomeGuide postType={ currentPostType } />
<div { ...navigateRegionsProps }>
<Editor
settings={ editorSettings }
initialEdits={ initialEdits }
postType={ currentPostType }
postId={ currentPostId }
templateId={ templateId }
className={ className }
forceIsDirty={ hasActiveMetaboxes }
disableIframe={ ! shouldIframe }
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={ ! isWelcomeGuideVisible }
onActionPerformed={ onActionPerformed }
extraSidebarPanels={
showMetaBoxes && <MetaBoxes location="side" />
}
extraContent={
! isDistractionFree &&
showMetaBoxes && (
<MetaBoxesMain
isLegacy={ isDevicePreview }
/>
)
}
>
<PostLockedModal />
<EditorInitialization />
<FullscreenMode isActive={ isFullscreenActive } />
<BrowserURL />
<UnsavedChangesWarning />
<AutosaveMonitor />
<LocalAutosaveMonitor />
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<BlockKeyboardShortcuts />
{ currentPostType === 'wp_block' && (
<InitPatternModal />
) }
<PluginArea onError={ onPluginAreaError } />
<PostEditorMoreMenu />
{ backButton }
<SnackbarNotices className="edit-post-layout__snackbar" />
</Editor>
</div>
</ErrorBoundary>
</Tooltip.Provider>
</SlotFillProvider>
);
}
Expand Down
10 changes: 7 additions & 3 deletions packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ import { PluginArea } from '@wordpress/plugins';
import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as preferencesStore } from '@wordpress/preferences';
// 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 @@ -282,9 +284,11 @@ export default function LayoutWithGlobalStylesProvider( props ) {

return (
<SlotFillProvider>
{ /** This needs to be within the SlotFillProvider */ }
<PluginArea onError={ onPluginAreaError } />
<Layout { ...props } />
<Tooltip.Provider>
{ /** This needs to be within the SlotFillProvider */ }
<PluginArea onError={ onPluginAreaError } />
<Layout { ...props } />
</Tooltip.Provider>
</SlotFillProvider>
);
}
65 changes: 38 additions & 27 deletions packages/edit-site/src/components/resizable-frame/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import clsx from 'clsx';
import { useState, useRef } from '@wordpress/element';
import {
ResizableBox,
Tooltip as WCTooltip,
__unstableMotion as motion,
} from '@wordpress/components';
import { useInstanceId, useReducedMotion } from '@wordpress/compose';
Expand All @@ -18,6 +17,8 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { addQueryArgs } 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 @@ -294,34 +295,44 @@ function ResizableFrame( {
handleComponent={ {
[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
<>
<WCTooltip text={ __( 'Drag to resize' ) }>
{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
<motion.button
key="handle"
role="separator"
aria-orientation="vertical"
className={ clsx(
'edit-site-resizable-frame__handle',
{ 'is-resizing': isResizing }
) }
variants={ resizeHandleVariants }
animate={ currentResizeHandleVariant }
aria-label={ __( 'Drag to resize' ) }
aria-describedby={ resizableHandleHelpId }
aria-valuenow={
frameRef.current?.resizable?.offsetWidth ||
undefined
<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={
/* role="separator" does in fact support aria-valuenow */
Copy link
Copy Markdown
Member

@mirka mirka May 22, 2026

Choose a reason for hiding this comment

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

Is this comment still needed? Looks like it was just there to justify the eslint-disable.

<motion.button
key="handle"
role="separator"
aria-orientation="vertical"
className={ clsx(
'edit-site-resizable-frame__handle',
{ 'is-resizing': isResizing }
) }
variants={ resizeHandleVariants }
animate={ currentResizeHandleVariant }
aria-label={ __( 'Drag to resize' ) }
aria-describedby={
resizableHandleHelpId
}
aria-valuenow={
frameRef.current?.resizable
?.offsetWidth || undefined
}
aria-valuemin={ FRAME_MIN_WIDTH }
aria-valuemax={ defaultSize.width }
onKeyDown={
handleResizableHandleKeyDown
}
initial="hidden"
exit="hidden"
whileFocus="active"
whileHover="active"
/>
}
aria-valuemin={ FRAME_MIN_WIDTH }
aria-valuemax={ defaultSize.width }
onKeyDown={ handleResizableHandleKeyDown }
initial="hidden"
exit="hidden"
whileFocus="active"
whileHover="active"
/>
</WCTooltip>
<Tooltip.Popup>
{ __( 'Drag to resize' ) }
</Tooltip.Popup>
</Tooltip.Root>
<div hidden id={ resizableHandleHelpId }>
{ __(
'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'
Expand Down
25 changes: 15 additions & 10 deletions packages/editor/src/components/collab-sidebar/note-byline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
import { Tooltip as WCTooltip } from '@wordpress/components';
import { Stack } 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 { Stack, Tooltip } from '@wordpress/ui';
import { __, _x } from '@wordpress/i18n';
import {
dateI18n,
Expand Down Expand Up @@ -95,14 +95,19 @@ export function NoteByline( { avatar, name, date, userId } ) {
{ name ?? currentUserName }
</span>
{ date && (
<WCTooltip text={ tooltipText }>
<time
dateTime={ commentDateTime }
className="editor-collab-sidebar-panel__user-time"
>
{ commentDateText }
</time>
</WCTooltip>
<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.

Add a note on a block, and hover on the "time ago" small text (no keyboard interaction)

Image

<Tooltip.Trigger
render={
<time
dateTime={ commentDateTime }
className="editor-collab-sidebar-panel__user-time"
>
{ commentDateText }
</time>
}
/>
<Tooltip.Popup>{ tooltipText }</Tooltip.Popup>
</Tooltip.Root>
) }
</Stack>
</>
Expand Down
11 changes: 9 additions & 2 deletions packages/editor/src/components/collaborators-presence/avatar/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ extend( [ a11yPlugin ] );
/**
* WordPress dependencies
*/
import { Icon as WCIcon, Tooltip as WCTooltip } from '@wordpress/components';
import { Icon as WCIcon } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
// 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 @@ -114,7 +116,12 @@ function Avatar( {
);

if ( name && ( ! showBadge || label ) ) {
return <WCTooltip text={ name }>{ avatar }</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.

Open the same post in two separate tabs

Image

<Tooltip.Trigger render={ avatar } />
<Tooltip.Popup>{ name }</Tooltip.Popup>
</Tooltip.Root>
);
}

return avatar;
Expand Down
Loading
Loading