Skip to content
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

Navigation: Surface menu name in the List View next to the Navigation block #68446

Merged
merged 12 commits into from
Jan 13, 2025
Merged

Navigation: Surface menu name in the List View next to the Navigation block #68446

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
54b9364
Add menuTitle attribute to navigation block and update label display
yogeshbhutkar Jan 1, 2025
9e5240d
Refactor: label updation logic to use refs
yogeshbhutkar Jan 9, 2025
453a690
Update navigation title rendering to include block title and decode H…
yogeshbhutkar Jan 9, 2025
1273df0
Refactor: use `getEditedEntityRecord` instead of `getEntityRecord`
yogeshbhutkar Jan 9, 2025
1706ef7
Test Cases: Fix failing tests
yogeshbhutkar Jan 9, 2025
68dee39
Refactor: enhance __experimentalLabel logic to handle end cases
yogeshbhutkar Jan 10, 2025
77e23ec
Refactor: simplify navigation title check logic
yogeshbhutkar Jan 10, 2025
9c254e4
Refactor: simplify navigation title rendering logic
yogeshbhutkar Jan 10, 2025
d7faa4a
Test case: fix failing tests
yogeshbhutkar Jan 10, 2025
a9fcb8b
Refactor: remove `context` limitations
yogeshbhutkar Jan 13, 2025
32824a2
Test Cases: update failing test cases
yogeshbhutkar Jan 13, 2025
9653966
Refactor: replace `getByLabel` to `getByRole`
yogeshbhutkar Jan 13, 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
27 changes: 26 additions & 1 deletion packages/block-library/src/navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { navigation as icon } from '@wordpress/icons';
import { select } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
Expand Down Expand Up @@ -52,6 +55,28 @@ export const settings = {
},
edit,
save,
__experimentalLabel: ( { ref }, { context } ) => {
if ( ! ref || context !== 'list-view' ) {
return;
}

const navigation = select( coreStore ).getEditedEntityRecord(
'postType',
'wp_navigation',
ref
);

if ( ! navigation?.title || navigation.title === metadata.title ) {
Copy link
Member

Choose a reason for hiding this comment

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

The navigation.title === metadata.title condition will never be true. The Navigation block has its renaming system and disabled renaming support.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If the block title and navigation name are the same, display Navigation.

I was attempting to achieve this. It works fine when both the texts are Navigation but if the label is changed using the following snippet, it fails:

function change_navigation_block_name( $args, $block_type ) {
	if ( 'core/navigation' !== $block_type ) {
		return $args;
	}
	$args['title'] = __( 'My Navigation!' );
	return $args;
}
add_filter( "register_block_type_args", "change_navigation_block_name", 10, 2 );

Copy link
Member

Choose a reason for hiding this comment

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

@Mamaduka I think this is for the case when the Navigation menu is named Navigation (which is the default name).

Because we don't want the label to read Navigation (Navigation)

So that is what this comparison is for

Copy link
Contributor Author

@yogeshbhutkar yogeshbhutkar Jan 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I feel we can use the runtime title for navigation block:

const runtimeBlockTitle =
	select( blocksStore ).getBlockType( 'core/navigation' )?.title;

This way, even if the filter updates the title, we can accommodate for the changes.

Like, if the title becomes My Navigation, then My Navigation (My Navigation) => My Navigation case will be covered. However, the above condition works just fine if we want to check Navigation itself, as the name is relatively static. I'm not sure if we should accommodate for the title changes on the fly (via filter) for this one. If so, this is the way to go.

What are your thoughts?

Copy link
Member

@Mamaduka Mamaduka Jan 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I think we should just drop the block title from here and only display the navigation title. No other block (Template Part, Synced Pattern) does this. Let's keep the behavior consistent.

@t-hamano, also suggested the same: #68446 (comment).

Let's just use this logic. What do you think?

return decodeEntities( navigation.title );

Copy link
Contributor Author

@yogeshbhutkar yogeshbhutkar Jan 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Looks good @Mamaduka. The icon can convey the meaning of the block IMO.

Copy link
Member

Choose a reason for hiding this comment

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

The icon can convey the meaning of the block IMO.

That's the current convention in the List View, and the Block Card in the right sidebar displays a badge with the original block title.

return;
}

return sprintf(
// translators: %1$s: block title, %2$s: navigation title.
__( '%1$s (%2$s)' ),
metadata.title,
decodeEntities( navigation.title )
);
},
deprecated,
};

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 @@ -555,7 +555,7 @@ test.describe( 'Navigation block - List view editing', () => {

await editor.openDocumentSettingsSidebar();

await page.getByLabel( 'Test Menu' ).click();
await page.getByLabel( 'Test Menu', { exact: true } ).click();

await page.keyboard.press( 'ArrowUp' );

Expand Down
6 changes: 5 additions & 1 deletion test/e2e/specs/site-editor/navigation-editor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ test.describe( 'Editing Navigation Menus', () => {
canvas: 'edit',
} );

await expect(
page.getByRole( 'button', { name: 'Document Overview' } )
).toBeVisible();

// Open List View.
await pageUtils.pressKeys( 'access+o' );

Expand All @@ -54,7 +58,7 @@ test.describe( 'Editing Navigation Menus', () => {
await expect( listView ).toBeVisible();

const navBlockNode = listView.getByRole( 'link', {
name: 'Navigation',
name: 'Navigation (Primary Menu)',
exact: true,
} );

Expand Down
Loading