Allow for hooking into conversion from classic Menu to Nav block

[getdave]

As per #36576 (comment) there is a requirement for developers to be able to hook into the process which converts classic menus into navigation blocks.

Currently this is handled on the JS side in the following method of the Navigation block:

gutenberg/packages/block-library/src/navigation/menu-items-to-blocks.js

Line 33 in b8fd765

function mapMenuItemsToBlocks( menuItems ) {

Use case

The use case driving this issue is illustrated below. Specifically this point:

...in Polylang plugin we have a specific language switcher menu item we can use in the classic menu. It is specific because it is not a menu item as the other ones because it doesn't generate a simple link but several links (one per language).

Whilst this is specific to Polylang there are likely other Plugins that will need to control the mapping process.

Potential Approaches

Looking at the code it looks as though if the classic menu item is saved with a type field of block then it will be automatically parsed as a block. In this case the content field of the menu item should be a serialized block. As a result when the block is parsed it will be detected as a valid block.

gutenberg/packages/block-library/src/navigation/menu-items-to-blocks.js

Lines 40 to 50 in b8fd765

	if ( menuItem.type === 'block' ) {
	const [ block ] = parse( menuItem.content.raw );
	if ( ! block ) {
	return createBlock( 'core/freeform', {
	content: menuItem.content,
	} );
	}
	return block;
	}

If this approach is too difficult for Plugin authors then we may need to introduce a hook to allow them to manually create the block equivalent from a given menu item.

---

Original Issue

In fact, in Polylang plugin we have a specific language switcher menu item we can use in the classic menu. It is specific because it is not a menu item as the other ones because it doesn't generate a simple link but several links (one per language).

The current migration feature when we use the new navigation block produce for all the menu items a navigation-link block.
For our specific menu-item, it's wrong: it should be converted to our naviagtion-language-switcher block.

We were looking for a solution when I asked a question on slack to know where the current conversion is done.
Surely here, I suppose 🤔https://github.com/WordPress/gutenberg/blob/v11.9.1/packages/block-library/src/navigation/menu-items-to-blocks.js

I push here the video I previously pushed on slack to better illustrate what I explain.
https://user-images.githubusercontent.com/1003778/142417108-4d3961f0-6ab9-4b1c-b32b-c4085a362e77.mp4

I would see an alternative: open the navigation block conversion to make it extensible and make possible to decide how to convert some menu-item. It's just an idea and what we were looking for at the beginning.

Originally posted by @manooweb in #36576 (comment)

[getdave]

Potential Approaches

@manooweb Apologies. I just re-read the above and actually I can't see how this would work. You would need to save your Menu Item in classic land with a type field of block. That's never going to be achievable as the UI will then look very strange on the classic Menu screen.

I'll ponder on this a bit more and see if I can come up with some concrete solutions. If there's a way I can setup Polylang on my local machine to test out your specific issue that would help.

[adamziel]

If my understanding is correct, the problem goes like this:

1. Polylang has a special menu item called "Language switcher". Whenever a menu is rendered or returned by an API endpoint, that menu item is turned into many items like "English, French, Spanish" by a filter..
2. Gutenberg migrates menu items to blocks one by one based on the REST API output. Language switcher is represented as many links, so instead of ending up with a single "language switcher" block, it ends up with one navigation link block per language.

I wonder if it would be enough to have a frontend filter like after_migration_from_menu_items_to_blocks where any plugin could reorganize the end result as needed? In this case, the language switcher blocks could be marked in a specific way and collapsed back into a single block. cc @getdave @manooweb

[adamziel]

I proposed a way forward in #36950. LMK if you think that would work @getdave @manooweb

[manooweb]

Tested and OK for me See #36950 (comment)

[getdave]

@adamziel can this be closed out?

[manooweb]

@getdave for me is yes. The PR has been merged and backported in WordPress 5.9 👍

[getdave]

Ok closing for now. @adamziel can reopen if he feels he needs to do any follow up here.