Issue #2734💬 AnsweredOpened April 25, 2020by grodriguez882 reactions

GrapesJS Block Attributes not shows in config when I load the HTML and CSS

快速解答by Ju99ernaut1

Reference issue #2691

Read full answer below ↓

Question

Hi, I'm beginner in GrapesJS, I want just create a block with some custome attributes, when I drag and drop the block and I select the block, if I see the config menu I've the new attribute than I've added: twitter title and I can modify it, but when I save the HTML and the CSS and I've reload the page, the HTML and CSS are loaded right, but if I select the block I can not change the twitter title attribute, I let you the code. Thanks

 const editor = grapesjs.init({
            container: '#gjs',
            fromElement: true,
            height: '600px',
            width: 'auto',
            storageManager: false,
            blockManager: {
                appendTo: '#blocks',
                blocks: []
            }
        });

 var blockManager = editor.BlockManager;

 //Add Twitter Feed Block
        blockManager.add('twitter', {
            name: 'Twitter Feed',
            category: 'Blocks',
            label: '<b>Twitter Feed</b>',
            name: 'twittertitle',
            content: {
                attributes: {
                    'wac-block': 'twitter',
                },
                traits: [{
                    label: 'Twitter',
                    name: 'twitter-title',
                    type: 'text',
                    value: '{{ platform.title }}'
                }],
                activeOnRender: 1,
                content: `<div class="block">Twitter Feed</div>`,
            },
            attributes: {
                class: 'fab fa-twitter fa-1x'
            }
        });

For save the code I do this:

textarea_css.value =  editor.getCss();
textarea_html.value = editor.getHtml();

Answers (2)

Ju99ernautApril 25, 2020

Reference issue #2691

grodriguez88April 25, 2020

@Ju99ernaut thanks a lot, that's works for me

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.