Navigation editing: simplify edit/view buttons#75819
Merged
Conversation
jasmussen
added
[Type] Enhancement
jasmussen
requested review from
getdave and
jeryj
and removed request for
ajitbohra and
fabiankaegy
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jasmussen! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
jasmussen
removed
the
First-time Contributor
|
Size Change: +356 B (+0.01%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
getdave
added
[Type] Bug
Contributor
|
I defiantly think this should be in 7.0. It qualifies as a Bug because the text breaks in other languages. I trust you won't mind me switching out the labels. |
getdave
reviewed
Feb 23, 2026
Comment on lines
255
to
258
| style={ { | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| } } |
Contributor
There was a problem hiding this comment.
Is there a way to avoid passing inline styles?
Contributor
Author
There was a problem hiding this comment.
I looked a bit to see if there was, but nothing occurred to me. @ciampo would you have instincts?
Contributor
There was a problem hiding this comment.
We can switch to Sass styles, although it will involve a little CSS specificity hack because of how Button is implemented internally
diff --git i/packages/block-library/src/navigation-link/editor.scss w/packages/block-library/src/navigation-link/editor.scss
index 1c3cee2ad2f..e1de2ae9c44 100644
--- i/packages/block-library/src/navigation-link/editor.scss
+++ w/packages/block-library/src/navigation-link/editor.scss
@@ -150,3 +150,18 @@
.navigation-link-control__error-text {
color: $alert-red;
}
+
+.navigation-link-to__actions {
+ grid-column: 1 / -1;
+}
+
+.navigation-link-to__action-button {
+ // Artificially increase specificity to override `justify-content` styles.
+ // Not ideal, but it shouldn't be necessary once switching to the new `Button`
+ // component from `@wordpress/ui`.
+ &#{&}#{&} {
+ flex: 1;
+ justify-content: center;
+ }
+}
+
diff --git i/packages/block-library/src/navigation-link/shared/controls.js w/packages/block-library/src/navigation-link/shared/controls.js
index 6dd950acd97..1b9f42c1c96 100644
--- i/packages/block-library/src/navigation-link/shared/controls.js
+++ w/packages/block-library/src/navigation-link/shared/controls.js
@@ -236,7 +236,6 @@ export function Controls( {
<HStack
className="navigation-link-to__actions"
alignment="stretch"
- style={ { gridColumn: '1 / -1' } }
>
{ hasUrlBinding &&
isBoundEntityAvailable &&
@@ -252,10 +251,7 @@ export function Controls( {
} );
} }
__next40pxDefaultSize
- style={ {
- flex: 1,
- justifyContent: 'center',
- } }
+ className="navigation-link-to__action-button"
>
{ __( 'Edit' ) }
</Button>
@@ -268,10 +264,7 @@ export function Controls( {
icon={ external }
iconPosition="right"
__next40pxDefaultSize
- style={ {
- flex: 1,
- justifyContent: 'center',
- } }
+ className="navigation-link-to__action-button"
>
{ __( 'View' ) }
</Button>
Still, an improvement over inline styles IMO.
Contributor
Author
There was a problem hiding this comment.
Is that actually an improvement over inline styles? I had hoped we could do something like an HStack and the pure buttons inside. Do you know if that's possible?
Contributor
There was a problem hiding this comment.
I had hoped we could do something like an HStack and the pure buttons inside. Do you know if that's possible?
Not possible, for two reasons:
HStackuses flexbox. Flexbox parents (in this case,HStack) don't decide how the children will occupy available space. In other words, theflex: 1style needs to be applied to the buttons.- We could try to use the
FlexItemcomponent instead, although I don't recommend it (plus, we're officially markingFlexand its related components as "Not recommended" in Storybook) - Alternatively, we could move away from
HStackand use a CSS grid container, which would allow to set the button's width as a container rule (ie. no need to apply rules on the button themselves). Although I'm not sure it's a net positive improvement, since we'd still need to apply custom styles to those buttons for centering the text (see next point)
- We could try to use the
- In order to align the text, we need to set
justify-content: centeron theButtons, and that's a separate CSS concern, unrelated from wrapping them inHStack.- When we switch to the
Buttonfrom@wordpress/ui, we will be able to remove thejustify-contentoverrides (the new component already center aligns text by default in all circumstances) and the specificity hack.
- When we switch to the
Is that actually an improvement over inline styles?
I 100% agree that this is not the prettiest code, although IMO still better than inline styles (plus, it should get better as we transition to @wordpress/ui
Contributor
Author
There was a problem hiding this comment.
Thanks for responding. It looks like even if we used grid with 1fr 1fr values to capture the buttons, we'd still need the text alignment.
And looking at this quick edit example, it looks like it also writes CSS to make this work:
I'll see about pushing your proposed changes when I get a moment. To note: if you already have this working locally, feel free to push it, otherwise I'll get to it.
Contributor
There was a problem hiding this comment.
There is actually also another option — since ToolsPanel actually implements a grid layout, we could get rid of the HStack wrapper altogether
Suggested code changes
diff --git i/packages/block-library/src/navigation-link/editor.scss w/packages/block-library/src/navigation-link/editor.scss
index 1c3cee2ad2f..58b38763b93 100644
--- i/packages/block-library/src/navigation-link/editor.scss
+++ w/packages/block-library/src/navigation-link/editor.scss
@@ -150,3 +150,21 @@
.navigation-link-control__error-text {
color: $alert-red;
}
+
+.navigation-link-to__action-button {
+ grid-column: auto;
+ // When this is the last button AND in an odd position among its class
+ // siblings, it's unpaired — span the full grid row.
+ &:nth-last-child(1 of #{&}):nth-child(odd of #{&}) {
+ grid-column: 1 / -1;
+ }
+
+ // Artificially increase specificity to override `justify-content` styles.
+ // Not ideal, but it shouldn't be necessary once switching to the new `Button`
+ // component from `@wordpress/ui`.
+ &#{&}#{&} {
+ justify-content: center;
+ }
+
+}
+
diff --git i/packages/block-library/src/navigation-link/shared/controls.js w/packages/block-library/src/navigation-link/shared/controls.js
index 6dd950acd97..a04d5a485db 100644
--- i/packages/block-library/src/navigation-link/shared/controls.js
+++ w/packages/block-library/src/navigation-link/shared/controls.js
@@ -5,7 +5,6 @@ import {
Button,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
- __experimentalHStack as HStack,
CheckboxControl,
TextControl,
TextareaControl,
@@ -150,7 +149,7 @@ export function Controls( {
// Check if URL is viewable (not hash link or other relative path like ./ or ../)
const isViewableUrl =
- url &&
+ !! url &&
( ! isHashLink( url ) ||
( isRelativePath( url ) && ! url.startsWith( '/' ) ) );
@@ -231,52 +230,38 @@ export function Controls( {
}
/>
</ToolsPanelItem>
-
- { url && (
- <HStack
- className="navigation-link-to__actions"
- alignment="stretch"
- style={ { gridColumn: '1 / -1' } }
+ { !! url &&
+ hasUrlBinding &&
+ isBoundEntityAvailable &&
+ entityRecord?.id &&
+ attributes.kind === 'post-type' &&
+ onNavigateToEntityRecord && (
+ <Button
+ variant="secondary"
+ onClick={ () => {
+ onNavigateToEntityRecord( {
+ postId: entityRecord.id,
+ postType: attributes.type,
+ } );
+ } }
+ __next40pxDefaultSize
+ className="navigation-link-to__action-button"
+ >
+ { __( 'Edit' ) }
+ </Button>
+ ) }
+ { isViewableUrl && (
+ <Button
+ variant="secondary"
+ href={ viewUrl }
+ target="_blank"
+ icon={ external }
+ iconPosition="right"
+ __next40pxDefaultSize
+ className="navigation-link-to__action-button"
>
- { hasUrlBinding &&
- isBoundEntityAvailable &&
- entityRecord?.id &&
- attributes.kind === 'post-type' &&
- onNavigateToEntityRecord && (
- <Button
- variant="secondary"
- onClick={ () => {
- onNavigateToEntityRecord( {
- postId: entityRecord.id,
- postType: attributes.type,
- } );
- } }
- __next40pxDefaultSize
- style={ {
- flex: 1,
- justifyContent: 'center',
- } }
- >
- { __( 'Edit' ) }
- </Button>
- ) }
- { isViewableUrl && (
- <Button
- variant="secondary"
- href={ viewUrl }
- target="_blank"
- icon={ external }
- iconPosition="right"
- __next40pxDefaultSize
- style={ {
- flex: 1,
- justifyContent: 'center',
- } }
- >
- { __( 'View' ) }
- </Button>
- ) }
- </HStack>
+ { __( 'View' ) }
+ </Button>
) }
</>
) }
I think this is the cleanest solution style-wise (and it will also get cleaner when switching to @wordpress/ui)
Comment on lines
247
to
260
| { sprintf( | ||
| /* translators: %s: entity type (e.g., "page", "post", "category") */ | ||
| __( 'Edit %s' ), | ||
| entityTypeName | ||
| ) } | ||
| { __( 'Edit' ) } |
Contributor
There was a problem hiding this comment.
I much prefer this simplification.
| isShownByDefault | ||
| > | ||
| <CheckboxControl | ||
| label={ __( 'Open in new tab' ) } |
Contributor
There was a problem hiding this comment.
I see the logic in removing this and in general I would support it now we have the full editable Link UI in the sidebar.
Just adding context that people feel very strongly about this particular piece of UI because it's often quite tightly integrated into their editorial workflows. Having to open up the Link UI is another few clicks which might introduce friction for a subset of users.
I wanted to raise this before the PR gets merged. Removal might be better as a standalone PR in order that it would be reverted later if required.
Contributor
Author
There was a problem hiding this comment.
Just to be sure! This shouldn't be removed, just moved. It's now above the button instead of below. LMK if I missed a beat or got something wrong here.
jeryj
approved these changes
Feb 24, 2026
Contributor
jeryj
left a comment
jeryj
left a comment
There was a problem hiding this comment.
I think this is a good enhancement. I'm approving so you can merge once the flex/grid/alignment is addressed.
jasmussen
force-pushed
the
polish/view-page-button
branch
from
ce8d170 to
2d6325e
Compare
Contributor
Author
|
Okay, rebased and addressed feedback. 
|
Contributor
Author
|
Not sure why the unit tests are failing on this one. |
jasmussen
added
the
Backported to WP Core
Contributor
Author
|
Tentatively adding the backport label, but a lead will confirm if that's valid, and remove it otherwise. |
jasmussen
added
Backport to WP 7.0 Beta/RC
github-actions
bot
removed
the
Backport to WP 7.0 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Feb 25, 2026
Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: jeryj <jeryj@git.wordpress.org>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: e602683 |
Contributor
|
I support this needing to be backported to 7.0. It's clearly a bug fix as well as an enhancement because it resolves issues around translated strings. So we should bring this in, it's not purely visual or aesthetic. Thanks for all the work here 🎉 |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Feb 26, 2026
CI run: #11059. See #64595. --- I've included a log of the Gutenberg changes with the following command: git log --reverse --format="- %s" 23b566c72e9c4a36219ef5d6e62890f05551f6cb..022d8dd3d461f91b15c1f0410649d3ebb027207f | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy - Pattern Editing: Fix nested patterns/sections (WordPress/gutenberg#75772) - QuickEdit: rename status label and remove extra labels in popup (WordPress/gutenberg#75824) - Fix block editing modes not recomputing when isolated editor value changes (WordPress/gutenberg#75821) - Synced patterns: Fix block editing mode of synced pattern content when nested in an unsynced pattern (WordPress/gutenberg#75818) - Block Support: Fix custom CSS not saved when style schema is not defined (WordPress/gutenberg#75797) - Gallery: Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab. (WordPress/gutenberg#75852) - Navigation Overlay Close: Set Close as default text, rather than using a placeholder (WordPress/gutenberg#75692) - RTC: Fix entity save call / initial persistence. (WordPress/gutenberg#75841) - Real-time collaboration: Improve collaboration within the same rich text (WordPress/gutenberg#75703) - Client Side Media: Add device/browser capability detection (WordPress/gutenberg#75863) - Navigation editing: simplify edit/view buttons (WordPress/gutenberg#75819) - Add core/icon block to theme.json schema (WordPress/gutenberg#75813) - Fix error when undoing newly added pattern (WordPress/gutenberg#75850) - Page List Item: Replace RawHTML with dangerouslySetInnerHTML for label and title (WordPress/gutenberg#75890) - REST API: Make filter_wp_unique_filename() static to match core, plus avoid duplicate routes (WordPress/gutenberg#75782) - RichText: useAnchor: Fix TypeError in virtual element (WordPress/gutenberg#75900) - DataViews: Remove menu divider again. (WordPress/gutenberg#75908) - Theme: Add build plugins to inject design token fallbacks (WordPress/gutenberg#75901) - Theme: Remove global stylesheet (WordPress/gutenberg#75879) - Real-time collaboration: Remove ghost awareness state explicitly when refreshing (WordPress/gutenberg#75883) - Real-time collaboration: Expand mergeCrdtBlocks() automated testing (WordPress/gutenberg#75923) - Fix client-side media file naming (WordPress/gutenberg#75817) - Add: Connectors screen (WordPress/gutenberg#75833) - Merge document meta into state map (WordPress/gutenberg#75830) - Move WordPress meta key from sync package to core-data (WordPress/gutenberg#75846) - Bugfix: Fix casing of getPersistedCRDTDoc (WordPress/gutenberg#75922) - Add debug logging to SyncManager (WordPress/gutenberg#75924) - DataForm: fix label colors (WordPress/gutenberg#75730) - DataViews: minimize padding for primary action buttons (WordPress/gutenberg#75721) (WordPress/gutenberg#75947) - Connectors: Add `_ai_` prefix to connector setting names and fix naming inconsistencies (WordPress/gutenberg#75948) - Connectors: Unhook Core callbacks in Gutenberg coexistence (WordPress/gutenberg#75935) - Unsynced patterns: Rename 'Disconnect pattern' to 'Detach pattern' in context menu (WordPress/gutenberg#75807) - Editor: Remove View dropdown and pinned items from revisions header (WordPress/gutenberg#75951) - Fix: Template revisions infinite spinner (WordPress/gutenberg#75953) - Backport: Avoid flickering while refreshing (WordPress/gutenberg#74572) (WordPress/gutenberg#75952) - Add wp_ prefix to real time collaberation option. (WordPress/gutenberg#75837) git-svn-id: https://develop.svn.wordpress.org/trunk@61750 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Feb 26, 2026
CI run: WordPress/wordpress-develop#11059. See #64595. --- I've included a log of the Gutenberg changes with the following command: git log --reverse --format="- %s" 23b566c72e9c4a36219ef5d6e62890f05551f6cb..022d8dd3d461f91b15c1f0410649d3ebb027207f | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy - Pattern Editing: Fix nested patterns/sections (WordPress/gutenberg#75772) - QuickEdit: rename status label and remove extra labels in popup (WordPress/gutenberg#75824) - Fix block editing modes not recomputing when isolated editor value changes (WordPress/gutenberg#75821) - Synced patterns: Fix block editing mode of synced pattern content when nested in an unsynced pattern (WordPress/gutenberg#75818) - Block Support: Fix custom CSS not saved when style schema is not defined (WordPress/gutenberg#75797) - Gallery: Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab. (WordPress/gutenberg#75852) - Navigation Overlay Close: Set Close as default text, rather than using a placeholder (WordPress/gutenberg#75692) - RTC: Fix entity save call / initial persistence. (WordPress/gutenberg#75841) - Real-time collaboration: Improve collaboration within the same rich text (WordPress/gutenberg#75703) - Client Side Media: Add device/browser capability detection (WordPress/gutenberg#75863) - Navigation editing: simplify edit/view buttons (WordPress/gutenberg#75819) - Add core/icon block to theme.json schema (WordPress/gutenberg#75813) - Fix error when undoing newly added pattern (WordPress/gutenberg#75850) - Page List Item: Replace RawHTML with dangerouslySetInnerHTML for label and title (WordPress/gutenberg#75890) - REST API: Make filter_wp_unique_filename() static to match core, plus avoid duplicate routes (WordPress/gutenberg#75782) - RichText: useAnchor: Fix TypeError in virtual element (WordPress/gutenberg#75900) - DataViews: Remove menu divider again. (WordPress/gutenberg#75908) - Theme: Add build plugins to inject design token fallbacks (WordPress/gutenberg#75901) - Theme: Remove global stylesheet (WordPress/gutenberg#75879) - Real-time collaboration: Remove ghost awareness state explicitly when refreshing (WordPress/gutenberg#75883) - Real-time collaboration: Expand mergeCrdtBlocks() automated testing (WordPress/gutenberg#75923) - Fix client-side media file naming (WordPress/gutenberg#75817) - Add: Connectors screen (WordPress/gutenberg#75833) - Merge document meta into state map (WordPress/gutenberg#75830) - Move WordPress meta key from sync package to core-data (WordPress/gutenberg#75846) - Bugfix: Fix casing of getPersistedCRDTDoc (WordPress/gutenberg#75922) - Add debug logging to SyncManager (WordPress/gutenberg#75924) - DataForm: fix label colors (WordPress/gutenberg#75730) - DataViews: minimize padding for primary action buttons (WordPress/gutenberg#75721) (WordPress/gutenberg#75947) - Connectors: Add `_ai_` prefix to connector setting names and fix naming inconsistencies (WordPress/gutenberg#75948) - Connectors: Unhook Core callbacks in Gutenberg coexistence (WordPress/gutenberg#75935) - Unsynced patterns: Rename 'Disconnect pattern' to 'Detach pattern' in context menu (WordPress/gutenberg#75807) - Editor: Remove View dropdown and pinned items from revisions header (WordPress/gutenberg#75951) - Fix: Template revisions infinite spinner (WordPress/gutenberg#75953) - Backport: Avoid flickering while refreshing (WordPress/gutenberg#74572) (WordPress/gutenberg#75952) - Add wp_ prefix to real time collaberation option. (WordPress/gutenberg#75837) Built from https://develop.svn.wordpress.org/trunk@61750 git-svn-id: http://core.svn.wordpress.org/trunk@61056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Followup from here: #75194 (comment)
Why?
The existing functionality is good, but can be refined slightly to better match existing patterns. Here's what exists:
The combination of compact and inline-width buttons is not broadly used, however full-size/full-width buttons are used in a few cases:
Finally, the "Open in new tab" option, although in the link dialog it's hidden inside an "Advanced" section, it usually follows the URL immediately.
How?
This PR does a few things:
Additionally, I removed the "type" indicator, so it's now "View" and "Edit" instead of "View page" and "Edit page". This reduces some duplication; if both buttons have a "page" suffix, and there's a "Page" badge right above in the link to, it's arguably redundant.
But the main motivation is in fact to ensure legibility in translated contexts. These labels show "Edit [cpt]", which could be as long as "Edit category". In German, translations usually get longer: "Kategorie anziegen", which in this case breaks the layout:
Testing Instructions
Test using a block theme that has a Header template part, a navigation inside. Ideally this navigation was created recently, so that Pages are linked, as opposed to just custom links as they were before a 6.9 improvement. Now click the template part, click Edit navigation, then click the links in the list panel.