Skip to content

Block Card: Make the parent block navigation generic, supports any block with list view support #74164

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
youknowriad merged 4 commits into from
Dec 24, 2025
Merged

Block Card: Make the parent block navigation generic, supports any block with list view support #74164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1046b2e
Block Card: Make the parent block navigation generic, supports any bl…
youknowriad Dec 22, 2025
e99f38b
Align description to the left
youknowriad Dec 23, 2025
1f713af
Fix e2e test
youknowriad Dec 23, 2025
9286d8b
Avoid cycle dependency
youknowriad Dec 24, 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
140 changes: 83 additions & 57 deletions packages/block-editor/src/components/block-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,19 @@ import {
Icon,
__experimentalText as Text,
__experimentalVStack as VStack,
__experimentalHStack as HStack,
privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import deprecated from '@wordpress/deprecated';
import { __, isRTL } from '@wordpress/i18n';
import { __, sprintf, isRTL } from '@wordpress/i18n';
import {
chevronLeft,
chevronRight,
arrowRight,
arrowLeft,
} from '@wordpress/icons';
import { getBlockType, hasBlockSupport } from '@wordpress/blocks';

/**
* Internal dependencies
Expand Down Expand Up @@ -103,18 +105,32 @@ function BlockCard( {
( { title, icon, description } = blockType );
}

const parentNavBlockClientId = useSelect(
const { parentBlockClientId, parentBlockName } = useSelect(
( select ) => {
if ( parentClientId || isChild || ! allowParentNavigation ) {
return;
return {};
}
const { getBlockParentsByBlockName } = select( blockEditorStore );
const { getBlockParents, getBlockName } =
select( blockEditorStore );

return getBlockParentsByBlockName(
clientId,
'core/navigation',
true
)[ 0 ];
// Find the closest parent block that is either:
// 1. A navigation block (special case for ad-hoc list view support)
// 2. Any block with listView support
const parents = getBlockParents( clientId, true );
const foundParentId = parents.find( ( parentId ) => {
const parentName = getBlockName( parentId );
return (
parentName === 'core/navigation' ||

@youknowriad youknowriad Dec 22, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

unfortunately the special case is still needed because the navigation block implements a very adhoc list view.

hasBlockSupport( parentName, 'listView' )
);
} );

return {
parentBlockClientId: foundParentId,
parentBlockName: foundParentId
? getBlockName( foundParentId )
: null,
};
},
[ clientId, allowParentNavigation, isChild, parentClientId ]
);
Expand All @@ -134,56 +150,66 @@ function BlockCard( {
className
) }
>
{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
<Button
onClick={ () => selectBlock( parentNavBlockClientId ) }
label={
parentNavBlockClientId
? __( 'Go to parent Navigation block' )
: // TODO - improve copy, not sure that we should use the term 'section'
__( 'Go to parent section' )
}
style={
// TODO: This style override is also used in ToolsPanelHeader.
// It should be supported out-of-the-box by Button.
{ minWidth: 24, padding: 0 }
}
icon={ isRTL() ? chevronRight : chevronLeft }
size="small"
/>
) }
{ isChild && (
<span className="block-editor-block-card__child-indicator-icon">
<Icon icon={ isRTL() ? arrowLeft : arrowRight } />
</span>
) }
<OptionalParentSelectButton
onClick={
parentClientId
? () => {
selectBlock( parentClientId );
}
: undefined
}
>
<BlockIcon icon={ icon } showColors />
<VStack spacing={ 1 }>
<TitleElement className="block-editor-block-card__title">
<span className="block-editor-block-card__name">
{ !! name?.length ? name : title }
<VStack>
<HStack justify="flex-start" spacing={ 0 }>
{ parentBlockClientId && (
<Button
onClick={ () => selectBlock( parentBlockClientId ) }
label={
parentBlockName
? sprintf(
/* translators: %s: The name of the parent block. */
__( 'Go to "%s" block' ),
getBlockType( parentBlockName )
?.title
)
: __( 'Go to parent block' )
}
style={
// TODO: This style override is also used in ToolsPanelHeader.
// It should be supported out-of-the-box by Button.
{ minWidth: 24, padding: 0 }
}
icon={ isRTL() ? chevronRight : chevronLeft }
size="small"
/>
) }
{ isChild && (
<span className="block-editor-block-card__child-indicator-icon">
<Icon icon={ isRTL() ? arrowLeft : arrowRight } />
</span>
{ ! parentClientId && ! isChild && !! name?.length && (
<Badge>{ title }</Badge>
) }
</TitleElement>
{ ! parentClientId && ! isChild && description && (
<Text className="block-editor-block-card__description">
{ description }
</Text>
) }
{ children }
</VStack>
</OptionalParentSelectButton>
<OptionalParentSelectButton
onClick={
parentClientId
? () => {
selectBlock( parentClientId );
}
: undefined
}
>
<BlockIcon icon={ icon } showColors />
<VStack spacing={ 1 }>
<TitleElement className="block-editor-block-card__title">
<span className="block-editor-block-card__name">
{ !! name?.length ? name : title }
</span>
{ ! parentClientId &&
! isChild &&
!! name?.length && (
<Badge>{ title }</Badge>
) }
</TitleElement>
{ children }
</VStack>
</OptionalParentSelectButton>
</HStack>
{ ! parentClientId && ! isChild && description && (
<Text className="block-editor-block-card__description">
{ description }
</Text>
) }
</VStack>
</div>
);
}
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/components/block-card/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
@use "@wordpress/base-styles/colors" as *;

.block-editor-block-card {
align-items: flex-start;
color: $gray-900;
display: flex;
padding: $grid-unit-20;

&.is-parent {
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/blocks/navigation-list-view.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ test.describe( 'Navigation block - List view editing', () => {
// Click the back button to go back to the Nav block.
await blockSettings
.getByRole( 'button', {
name: 'Go to parent Navigation block',
name: 'Go to "Navigation" block',
} )
.click();

Expand Down
Loading