Skip to content

Refine overlay edit button UI: move to link variant and add tooltip #73957

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
getdave wants to merge 9 commits into
base: trunk
Choose a base branch
from
+65 −55
Open

Refine overlay edit button UI: move to link variant and add tooltip #73957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bde8088
Update button style and text
getdave Dec 12, 2025
750ca23
Add tooltip
getdave Dec 12, 2025
da24005
Refine overlay edit button UI: use HStack with flex-start alignment
getdave Dec 16, 2025
c8f8f11
Shorten overlay selector help text to prevent wrapping
getdave Dec 16, 2025
ddb7a76
Update test to match shortened help text
getdave Dec 16, 2025
f3cbca2
Fix duplicate css rule from rebase
jeryj Dec 17, 2025
2241077
Remove unnecessary aria-label
jeryj Dec 17, 2025
3ddf6c3
Refactor edit button disabled code
jeryj Dec 17, 2025
3fa8e12
Update unit test
jeryj Dec 17, 2025
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
97 changes: 52 additions & 45 deletions packages/block-library/src/navigation/edit/overlay-template-part-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@
import { useMemo, useState, useCallback } from '@wordpress/element';
import { useEntityRecords } from '@wordpress/core-data';
import { useDispatch } from '@wordpress/data';
import { SelectControl, Button } from '@wordpress/components';
import {
SelectControl,
Button,
FlexBlock,
FlexItem,
__experimentalHStack as HStack,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import { store as noticesStore } from '@wordpress/notices';
Expand Down Expand Up @@ -162,23 +168,29 @@ export default function OverlayTemplatePartSelector( {
createErrorNotice,
] );

const isEditButtonDisabled =
! overlay ||
! hasResolved ||
! selectedTemplatePart ||
! onNavigateToEntityRecord ||
isResolving;

const isCreateButtonDisabled = isResolving || isCreating;

// Build help text
const helpText = useMemo( () => {
if ( overlayTemplateParts.length === 0 && hasResolved ) {
return __( 'No overlays found.' );
}
return __( 'Select an overlay to use for the navigation.' );
return __( 'Select an overlay for navigation.' );
}, [ overlayTemplateParts.length, hasResolved ] );

// Tooltip/aria-label text for the edit button
const editButtonLabel = useMemo( () => {
return selectedTemplatePart
? sprintf(
/* translators: %s: Overlay title. */
__( 'Edit overlay: %s' ),
selectedTemplatePart.title?.rendered
? decodeEntities( selectedTemplatePart.title.rendered )
: selectedTemplatePart.slug
)
: __( 'Edit overlay' );
}, [ selectedTemplatePart ] );

return (
<div className="wp-block-navigation__overlay-selector">
<Button
Expand All @@ -192,42 +204,37 @@ export default function OverlayTemplatePartSelector( {
showTooltip
className="wp-block-navigation__overlay-create-button"
/>
<SelectControl
__next40pxDefaultSize
label={ __( 'Overlay template' ) }
value={ overlay || '' }
options={ options }
onChange={ handleSelectChange }
disabled={ isResolving }
accessibleWhenDisabled
help={ helpText }
/>
{ overlay && ( ! hasResolved || selectedTemplatePart ) && (
<Button
__next40pxDefaultSize
variant="secondary"
onClick={ handleEditClick }
disabled={ isEditButtonDisabled }
accessibleWhenDisabled
aria-label={
selectedTemplatePart
? sprintf(
/* translators: %s: Overlay title. */
__( 'Edit overlay: %s' ),
selectedTemplatePart.title?.rendered
? decodeEntities(
selectedTemplatePart.title
.rendered
)
: selectedTemplatePart.slug
)
: __( 'Edit overlay' )
}
className="wp-block-navigation__overlay-edit-button"
>
{ __( 'Edit' ) }
</Button>
) }
<HStack alignment="flex-start">
<FlexBlock>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Overlay template' ) }
value={ overlay || '' }
options={ options }
onChange={ handleSelectChange }
disabled={ isResolving }
accessibleWhenDisabled
help={ helpText }
/>
</FlexBlock>
{ overlay && hasResolved && selectedTemplatePart && (
<FlexItem>
<Button
__next40pxDefaultSize
variant="secondary"
onClick={ handleEditClick }
disabled={ ! onNavigateToEntityRecord }
accessibleWhenDisabled
label={ editButtonLabel }
showTooltip
className="wp-block-navigation__overlay-edit-button"
>
{ __( 'Edit' ) }
</Button>
</FlexItem>
) }
</HStack>
</div>
);
}
17 changes: 9 additions & 8 deletions packages/block-library/src/navigation/edit/test/overlay-template-part-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ describe( 'OverlayTemplatePartSelector', () => {
expect( editButton ).not.toBeInTheDocument();
} );

it( 'should disable button when overlays are initially loading', () => {
it( 'should not display edit button while overlays templates are loading', () => {
useEntityRecords.mockReturnValue( {
records: [ templatePart1 ],
isResolving: true,
Expand All @@ -303,10 +303,13 @@ describe( 'OverlayTemplatePartSelector', () => {
} );
expect( select ).toBeDisabled();

const editButton = screen.getByRole( 'button', {
name: /Edit overlay/,
} );
expect( editButton ).toHaveAttribute( 'aria-disabled', 'true' );
// Expect Edit button to not be in the document
expect(
screen.queryByRole( 'button', {
name: ( accessibleName ) =>
accessibleName.startsWith( 'Edit overlay' ),
} )
).not.toBeInTheDocument();
} );

it( 'should be enabled when a valid overlay is selected', () => {
Expand Down Expand Up @@ -447,9 +450,7 @@ describe( 'OverlayTemplatePartSelector', () => {
render( <OverlayTemplatePartSelector { ...defaultProps } /> );

expect(
screen.getByText(
'Select an overlay to use for the navigation.'
)
screen.getByText( 'Select an overlay for navigation.' )
).toBeInTheDocument();
expect(
screen.getByRole( 'button', {
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -650,9 +650,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
grid-column: span 2;
}

// Nudge the edit button down to align with the select control input field.
// The SelectControl has a label above it, so we need to offset the button
// to align it with the input rather than the top of the control.
.wp-block-navigation__overlay-edit-button {
margin-top: $grid-unit-10;
width: fit-content;
margin-top: $grid-unit-30;
}

.wp-block-navigation__overlay-selector {
Expand Down
Loading