How to add block plugins to grapesjs?

Question

This is my code and I have installed the node module too but it's not working.

var editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',
        height: '100%',
        fromElement: true,
        plugins: ["gjs-blocks-basic"],
        pluginsOpts: {
          "gjs-blocks-basic": {
            block: {
              category: 'basic',
            }
          }
        },

Answer 1

I think you have an extra key block inside plugin options, it should be category.

const editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload: 0,
        container: '#gjs',
        height: '100%',
        fromElement: true,
        plugins: ["gjs-blocks-basic"],
        pluginsOpts: {
          "gjs-blocks-basic": {
            category: "Basic"
          }
        });

Answer 2

customize plugin doesn't add in single quote

const editor = grapesjs.init({
        showOffsets: 1,
        noticeOnUnload:0,
        container: '#gjs',
        plugins: ['gjs-preset-webpage',myPlugin,'myNewComponentTypes' ],
        pluginsOpts: {
            'grapesjs-plugin-export': { /*option*/ },
             'myPlugin':{ category: "myPlugin"},
        },

Make plugin in function Reference

 //PLUGIN

    
    function myPlugin(editor) {
        editor.BlockManager.add('my-block',{
            label:'Plug',
            category: 'Basic',
            content:'<div class="my-block"><p>Plugin Success</p></div>',
        });
    }

Answer 3

Try this:

    const editor = grapesjs.init({
      container: "#editor",
      fromElement: true,
      width: "auto",
      storeManager: false,
      plugins: [gjsBlockBasic],
      pluginsOpts: {
        gjsBlockBasic: {},
      },
      blockManager: {
        appendTo: "#blocks",
      },
    })

Add "blocks" to a div where you want to display block basic options.

    <div id="blocks"/>