Title: Adding a plugin-more-menu-item
Last modified: October 1, 2023
---
# Adding a plugin-more-menu-item
* [larsejaas](https://wordpress.org/support/users/larsejaas/)
* (@larsejaas)
* [2 years, 8 months ago](https://wordpress.org/support/topic/https-developer-wordpress-org-block-editor-reference-guides-slotfills-plugin-m/)
* Hi everyone.
I am trying to add a **plugin-more-menu-item** entry to the more-
menu/settings menu ⋮ in the upper right corner of the editor. I have read this
guide (as well as the rest of the block-editor handbook): [https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-more-menu-item/](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-more-menu-item/)
However, I keep getting a minified React error: **Element type is invalid: expected
a string (for built-in components) or a class/function (for composite components)
but got: undefined.**But as the stack-trace refers to minified code, it is rather
hard to know why the React Component is not available. I am writing my code in
TypeScript and transpiling it to ES5 JS. I have tried turning minification off
in my Webpack configuration – but I still get a minified error back. The error
is thrown as soon as I click the three red dots in the upper right corner. I
have also tried the **PluginSidebar** component and that actually works, but
I get the same error (and a breaking editor) as soon as I click the menu/settings
menu ⋮.I have a suspicion that I am registering the item wrong in my plugin-code.
I use the ‘enqueue_block_editor_assets’ hook like this:`add_action('enqueue_block_editor_assets',[
$this, 'add_darkmode_toggle']);`and then:
* ```wp-block-code
public function add_darkmode_toggle()
{
$dir = dirname(__FILE__);
$script_asset_path = "$dir/public/add_darkmode_toggle.asset.php";
if (!file_exists($script_asset_path)) {
throw new \Exception(
'You need to run npm start or npm run build inside the headless-plugin to transpile the necessary asset file'
);
}
$script_asset = require($script_asset_path);
if (is_admin()) {
//Enqueue script with dependencies and version
wp_enqueue_script(
'add_darkmode_toggle',
untrailingslashit(plugin_dir_url(__FILE__)) . '/public/add_darkmode_toggle.js',
$script_asset['dependencies'],
$script_asset['version'],
);
}
}
```
* I use a class for my plugin – so this is why I refer to the function using the“
this” keyword. Any tips on debugging?
Is it correctly understood that all WordPress
dependencies are accessible inside WordPress? I use the packages: `@wordpress/
plugins`, `@wordpress/edit-post` and `@wordpress/element`I am a bit lost on how
to continue from here…
- This topic was modified 2 years, 8 months ago by [larsejaas](https://wordpress.org/support/users/larsejaas/).
- This topic was modified 2 years, 8 months ago by [larsejaas](https://wordpress.org/support/users/larsejaas/).
- This topic was modified 2 years, 8 months ago by [larsejaas](https://wordpress.org/support/users/larsejaas/).
- This topic was modified 2 years, 8 months ago by [larsejaas](https://wordpress.org/support/users/larsejaas/).
Viewing 2 replies - 1 through 2 (of 2 total)
* Thread Starter [larsejaas](https://wordpress.org/support/users/larsejaas/)
* (@larsejaas)
* [2 years, 8 months ago](https://wordpress.org/support/topic/https-developer-wordpress-org-block-editor-reference-guides-slotfills-plugin-m/#post-17091509)
* This is my component:
* ```wp-block-code
import { PluginMoreMenuItem } from "@wordpress/edit-post";
import { useEffect } from "@wordpress/element";
import { registerPlugin } from "@wordpress/plugins";
import { PluginMoreMenuItem } from "@wordpress/edit-post";
import { useEffect } from "@wordpress/element";
import SunHigh from "./sun_high";
const prefersDarkMode =
typeof window !== "undefined" &&
window.matchMedia &&
window.matchMedia( "(prefers-color-scheme: dark)" ).matches;
const body = typeof window !== "undefined" ? document.body : undefined;
const MenuDarkthemeToggle = () => {
useEffect( () => {
if ( body?.hasAttribute( "data-dark-mode" ) ) {
return;
}
body &&
body.setAttribute( "data-dark-mode", prefersDarkMode ? "true" : "false" );
}, [] );
const HandleToggleMode = () => {
const darkMode = body?.getAttribute( "data-dark-mode" ) as
| "true"
| "false"
| null;
const themeMode = darkMode === "true" ? "dark" : "light";
document.body.setAttribute(
"data_darkmode",
themeMode === "light" ? "dark" : "light"
);
};
return (
Toggle light or dark mode
);
};
registerPlugin( "menu-dark-theme-toggle", {
render: MenuDarkthemeToggle,
icon: SunHigh,
} );
```
* I have tried stripping all logic away inside the component and only render the
basic `` component – but I keep getting the error.
* Thread Starter [larsejaas](https://wordpress.org/support/users/larsejaas/)
* (@larsejaas)
* [2 years, 8 months ago](https://wordpress.org/support/topic/https-developer-wordpress-org-block-editor-reference-guides-slotfills-plugin-m/#post-17094214)
* I think this is actually might be related to a bug: [https://github.com/WordPress/gutenberg/issues/54252](https://github.com/WordPress/gutenberg/issues/54252)
Looks like things will fails as soon as you import anything from ‘@wordpress/
edit-post’.
Viewing 2 replies - 1 through 2 (of 2 total)
The topic ‘Adding a plugin-more-menu-item’ is closed to new replies.
* In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
* 2 replies
* 1 participant
* Last reply from: [larsejaas](https://wordpress.org/support/users/larsejaas/)
* Last activity: [2 years, 8 months ago](https://wordpress.org/support/topic/https-developer-wordpress-org-block-editor-reference-guides-slotfills-plugin-m/#post-17094214)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics