Button block produces a simple text Button

[aaflatooni]

We have GrapesJS with preset-newsletter implemented in our Vue3 application. When we try to add a button we only get an unformatted text saying button. We have noticed that the demo produces a nice looking button that can be edited. The style isn't being properly imported and wondering where we should look. Any ideas or suggestions would be greatly appreciated:

import grapesjs from "grapesjs";
import ckeditor from 'grapesjs-plugin-ckeditor';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs/dist/grapes.min.js';
import newsletter from 'grapesjs-preset-newsletter';
    mounted() {
        this.createGrapesJs();
        this.addSelectedToDefaults();
    },
    unmounted() {
        localStorage.removeItem('gjsProject');
    },
    methods: {
        change() {
            let content = editor.Commands.run('gjs-get-inlined-html');
            if (content) {
                // replace body tags with div so stylings appear in email
                content = content.replace(/<body/, '<div');
                content = content.replace(/<\/body>/, '</div>');
                this.form.html = content;
            }
            const config = localStorage.getItem('gjsProject');
            if(config) {
                this.form.config = config;
            }
        },
        async createGrapesJs(){
            await nextTick();
            editor = grapesjs.init({
                // Indicate where to init the editor. You can also pass an HTMLElement
                container: '#gjs',
                showToolbar: true,
                // Get the content for the canvas directly from the element
                // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
                fromElement: true,
                // Size of the editor
                height: '600px',
                width: 'auto',
                 cssComposer: {
                    // options
                },
                // assetManager: {
                //     assets: this.image_srcs
                // },
                storageManager: {
                    type: 'local', // Type of the storage, available: 'local' | 'remote'
                    autosave: true, // Store data automatically
                    autoload: true, // Autoload stored data on init
                    stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
                    options: {
                        local: { // Options for the `local` type
                            key: 'gjsProject', // The key for the local storage
                        },
                    }
                },
                styleManager: {
                    // With no defined sectors, the default list will be loaded
                    // sectors: [...],
                },
                plugins: [
                    editor => newsletter(editor, { /* options */ }),
                    editor => ckeditor(editor, {
                        options: {
                            startupFocus: true,
                            extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
                            allowedContent: true, // Disable auto-formatting, class removing, etc.
                            enterMode: 2, // CKEDITOR.ENTER_BR,
                            extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
                            toolbarGroups : [
                                { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
                                { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
                                { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
                                { name: 'forms' },
                                '/',
                                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
                                { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
                                { name: 'links' },
                                { name: 'insert' },
                                '/',
                                { name: 'styles' },
....

[artf]

Hi @aaflatooni here you can see the actual code of the button block https://github.com/GrapesJS/preset-newsletter/blob/7e537e98b9bc949ed322fa6726f8b9458ef369d3/src/blocks.ts#L91 As you can see there are no default styles (the demo uses its own styles).

I'd suggest adding your own plugin at the end which would allow you to update all added blocks programmatically

plugins: [
 // ...
 // add your plugin at the end
 (editor) => {
   const buttonBlock = editor.Blocks.get('button');
   buttonBlock.set({
     content: `
       <a class="button">Updated Button</a>
       <style>
        . button {...}
       </style>
     `,
   });
 }
]