Question, Block content from file
Question
Hi, this is not really an issue but more a question. I'm currently using custom blocks in my GrapesJS editor. This is how I create them :
editor.BlockManager.add('block-title', {
label: `<div class="gjs-fonts gjs-f-b1 gjs-one-bg gjs-four-color-h"><div class="gjs-block-label">Bloc Titre</div></div>`,
content:
`<style>
.mdc_title {
height: 500px;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
.mdc_title h1 {
color: #fff;
background-color: #00bab9;
display: inline-block;
padding: 10px 80px;
margin-left: 1px;
}
@media screen and (max-width: 585px){
.mdc_title h1 {
font-size: 28px;
padding: 10px 20px;
}
}
</style>
<div class="mdc_title" data-gjs-custom-name="Bloc Titre">
<h1 data-gjs-custom-name="Titre">Tendance Cuisine</h1>
</div>`,
attributes: {
title: ''
}
});
It works fine but for file optimization is it possible to load the content of the block like this :
editor.BlockManager.add('block-title', {
label: `<div class="gjs-fonts gjs-f-b1 gjs-one-bg gjs-four-color-h"><div class="gjs-block-label">Bloc Titre</div></div>`,
content:
`../myblock.html`,
attributes: {
title: ''
}
});
Can't achieve this.. Thanks for answers !
Answers (2)
No @ThomasLaigneau you have to manage that by yourself, eg.
fetch(`../myblock.html`)
.then(res => res.text())
.then(html => {
editor.BlockManager.add...
})
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1034
insert element or block inside parent element
Good day, i have component, have block i have Trait on listen changes, how can I add "h1 " inside that block "'<div class="container" style...
Issue #1545
[Question] How I Get ID From Block?
Hi, i have my block and I get print in Div id results from my javascript class component... How i get ID from my block ??? editor.BlockMana...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #1722
[QUESTION] how to make my custom tag as selectable and editable inside of canvas ?
Hi, I try to change my custom tag of ion-item has div in view properties but It doesn't work for me as I expected. my custom Blocks is my c...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.