GrapesJS Block Attributes not shows in config when I load the HTML and CSS
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)
Reference issue #2691
@Ju99ernaut thanks a lot, that's works for me
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1661
I've created html table and cannot drag new elements to table cells
Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell: But next code...
Issue #912
[BUG]: HTML attributes/traits not escaped
When double quotes are added to an attribute it breaks the HTML.https://jsfiddle.net/szLp8h4n/Drag in the link block.Click the link in the...
Issue #2644
[HELP] GrapesJS load html/css from Database
Hi there, We are using grapesjs in our Angular app. We have managed to create and save the grapesjs html/css in our database. One of the th...
Issue #2378
[QUESTION] Modifying global CSS in style manager
We want to achieve the following:Mark our block HTML elements with some classes like:Add some styles that define CSS classes like:Using Gra...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.