Skip to content

Hide 'Add block' control in Link UI when Navigation Link block is in contentOnly mode #71213

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
getdave merged 2 commits into from
Sep 3, 2025
Merged

Hide 'Add block' control in Link UI when Navigation Link block is in contentOnly mode #71213

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f09ea7
Hide 'Add block' control when Navigation Link block is in contentOnly…
getdave Aug 14, 2025
a6776a0
Adjust editing mode check
getdave Sep 1, 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
Next Next commit
Hide 'Add block' control when Navigation Link block is in contentOnly… 
… mode

- Import useBlockEditingMode hook from @wordpress/block-editor
- Check if block is in contentOnly mode using useBlockEditingMode()
- Conditionally render LinkUITools only when not in contentOnly mode
- Improves UX by hiding non-content UI when appropriate
  • Loading branch information
@getdave
getdave committed Sep 3, 2025
commit 3f09ea7208bbb897c21c9c191c5f051f6683c025
8 changes: 7 additions & 1 deletion packages/block-library/src/navigation-link/link-ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
LinkControl,
store as blockEditorStore,
privateApis as blockEditorPrivateApis,
useBlockEditingMode,
} from '@wordpress/block-editor';
import {
createInterpolateElement,
Expand Down Expand Up @@ -157,6 +158,10 @@ function UnforwardedLinkUI( props, ref ) {
name: postType,
} );

// Check if we're in contentOnly mode
const blockEditingMode = useBlockEditingMode();
const isContentOnlyMode = blockEditingMode === 'contentOnly';
Copy link
Contributor

@andrewserong andrewserong Aug 15, 2025

Choose a reason for hiding this comment

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

I notice in some of the other blocks we're doing a truthy check for === 'default' when showing controls, rather than an "not contentOnly", e.g. in the post title block. Would that be a better fit here?

Copy link
Contributor

@scruffian scruffian Aug 15, 2025

Choose a reason for hiding this comment

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

Could we just extract a shared hook, useIsContentOnlyMode?

Copy link
Contributor Author

@getdave getdave Sep 1, 2025

Choose a reason for hiding this comment

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

@andrewserong I've adjusted. It's probably a better check because it's more about allowing certain functionality only in default editing mode rather than restricting it for contentOnly.


async function handleCreate( pageTitle ) {
const page = await saveEntityRecord( 'postType', postType, {
title: pageTitle,
Expand Down Expand Up @@ -261,7 +266,8 @@ function UnforwardedLinkUI( props, ref ) {
onRemove={ props.onRemove }
onCancel={ props.onCancel }
renderControlBottom={ () =>
! link?.url?.length && (
! link?.url?.length &&
! isContentOnlyMode && (
<LinkUITools
focusAddBlockButton={ focusAddBlockButton }
setAddingBlock={ () => {
Expand Down