Adding a plugin-more-menu-item

  • larsejaas

    (@larsejaas)


    2 years, 8 months ago

    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.ww.wp.xz.cn/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:

    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.
    • This topic was modified 2 years, 8 months ago by larsejaas.
    • This topic was modified 2 years, 8 months ago by larsejaas.
    • This topic was modified 2 years, 8 months ago by larsejaas.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter larsejaas

    (@larsejaas)

    2 years, 8 months ago

    This is my component:

    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 (
    <PluginMoreMenuItem icon={ SunHigh } onClick={ HandleToggleMode }>
      Toggle light or dark mode
    </PluginMoreMenuItem>
  );
};

registerPlugin( "menu-dark-theme-toggle", {
  render: MenuDarkthemeToggle,
  icon: SunHigh,
} );

    I have tried stripping all logic away inside the component and only render the basic <PluginMoreMenuItem> component – but I keep getting the error.

    Thread Starter larsejaas

    (@larsejaas)

    2 years, 8 months ago

    I think this is actually might be related to a bug: 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.