How add more blocks

[phpiando]

How do I add more blocks beyond the 3 that already come as default? (link-block, qyote, text-basic).

import grapesjs from 'grapesjs'
  import 'grapesjs/dist/css/grapes.min.css'
  import 'grapesjs/dist/grapes.min.js'
  import plugin from 'grapesjs-preset-webpage';

  export default {
   name: 'BuilderHtml',

   mounted(){
     grapesjs.init({
       container: '#gjs',
       height: '900px',
       width: '100%',
       plugins: [plugin],        
       storageManager: {
         id: 'gjs-',
         type: 'local',
         autosave: true,
         storeComponents: true,
         storeStyles: true,
         storeHtml: true,
         storeCss: true,
       },
       deviceManager: {
         devices:
         [
           {
             id: 'desktop',
             name: 'Desktop',
             width: '',
           },
           {
             id: 'tablet',
             name: 'Tablet',
             width: '768px',
             widthMedia: '992px',
           },
           {
             id: 'mobilePortrait',
             name: 'Mobile portrait',
             width: '320px',
             widthMedia: '575px',
           },
         ]
       },
       pluginsOpts: {
         [plugin]: {
            blocksBasicOpts: {
                blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video'],
                flexGrid: 1,
           },          
           blocks: ['link-block', 'quote', 'text-basic', 'column3'],
         },
       }
     })
   }
  }

I'm trying to add this configuration below, but no new block is appearing, did I do something wrong?

[artf]

From the v1.* we don't include other plugins in this one anymore, so if you need them, you have to include them manually in your project. If you want to replicate the editor from the demo, please check the source of the demo here

[mohannadhanafi]

@artf How can I include other plugins using React?