Add a Custom Block Within the Core Navigation Block in WordPress

`Note`: To follow along this you already know how to create a plugin custom block in WordPress 6.6. If you don't, you can check out the [official documentation](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/).

If you want to jump straight to the main point, see the 3 step [index.js](#3-add-the-block-to-the-navigation-block) file.

Introduction

By default in WordPress, you can't add a custom block within the core navigation block. Here I'll show you the key steps to add add your block within the core navigation block. Bear in mind that this is a simplified version of the process, we are not going to going to create a whole block from scratch, but rather add a custom block to the navigation block.

Block structure:

wp-content/
└── plugins/
    └── my-plugin/
        ├── my-plugin.php
        └── block-example/
            ├── block.json
            ├── edit.js
            ├── editor.scss
            ├── index.js
            ├── render.php
            ├── script.js
            ├── style.scss
            └── view.js

1. Configure block.json

`block.json`:

{
	"name": "my-plugin/block-example",
	"version": "0.1.0",
	"title": "Example Block",
	"category": "design",
	"textdomain": "my-plugin",
	"description": "Add the Example Block within the navbar",
	"parent": [ "core/navigation" ], <- Don't forget this
	"attributes": {
		"blockId": {
			"type": "string",
			"default": ""
		}
	},
...Everything else
}

2. Register your block

`my-plugin.php`:

3. Add the block to the Navigation block

`index.js`:

import { registerBlockType } from '@wordpress/blocks';

import './style.scss';
import './editor.scss';

import Edit from './edit';
import metadata from './block.json';

registerBlockType(metadata.name, {
	edit: Edit,
	icon: 'admin-site',
});

/**
 * Make the Example Block available to Navigation blocks.
 *
 * @since 0.1.0
 *
 * @param {Object} blockSettings The original settings of the block.
 * @param {string} blockName     The name of the block being modified.
 * @return {Object} The modified settings for the Navigation block or the original settings for other blocks.
 */
const addToNavigation = ( blockSettings, blockName ) => {
	if ( blockName === 'core/navigation' ) {
		return {
			...blockSettings,
			allowedBlocks: [
				...( blockSettings.allowedBlocks ?? [] ),
				'my-plugin/block-example', // Change this to the actual block name in block.json
			],
		};
	}
	return blockSettings;
};
addFilter(
	'blocks.registerBlockType',
	'my-plugin-block-example-add-to-navigation', // Change this to a unique name for your filter.
	addToNavigation
);

Conclusion

The main file that allows us to insert a custom block inside the navigation block is `index.js`. This file is responsible for registering the block and adding the block to the navigation block. The `block.json` file is also important because it defines the block's metadata, including the parent block. Finally, the `my-plugin.php` file registers the block and its assets.