GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

231 issues found

πŸ” general
#3304Mar 2, 2021by SyedHashimShah3 answers
2 reactions

How I can customize the UI of Grapesjs?

I want to customize the ui of Grapesjs but the js and css files are minified.Please tell me how can I do this? I just want to keep some specific blocks like images,text etc in my interface.

echobinod

Sass is used to generate the minified css files. You can change the style variables from here: src/styles/scss/

artf

@SyedHashimShah https://grapesjs.com/docs/getting-started.html

GJSBlock

Thanks for reporting this, @SyedHashimShah. Great question about How I can customize the UI of Grapesjs?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your spec...

#3303Mar 2, 2021by RutujaBadbe4 answers
1 reactions

Category order not displaying properly

Hi! I want to display the categories in block manager in certain sequence. I looked into docs and previous issues and found about order attribute. So, I tried setting order attribute. but it is not yet displaying in that order even though order attribute is getting set. Am I missing something? or doing something wrong...

Ju99ernaut

I guess you can make this a feature request, I'm not sure if something like this exists yet in grapesjs. Though the order of the blocks might be easier to manage if you split each category's blocks into different files then load those file...

Ju99ernaut

I think the order in which blocks are added is what determines category order.

RutujaBadbe

@Ju99ernaut hi! Thanks for the reply. yes. At the end I did that. but what if I want to do it dynamically? if there are many blocks, isn't it hard to maintain the order?

#3298Mar 1, 2021by neon123452 answers
1 reactions

Hide component labels while editing text

For text placed at the top of the page, component labels can overlap and hide the text while editing. Also the label can overlap the text editing tools when not at the top. Hiding the labels while editing text would avoid this.

RutujaBadbe

You can hide the labels using badgable : false https://grapesjs.com/docs/api/components.html#parameters-3

GJSBlock

Thanks for reporting this, @neon12345. Thanks for sharing your report about FEAT: hide component labels while editing text. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFid...

#3296Mar 1, 2021by RaresVlaiduc3 answers
1 reactions

Multiple pages plugin

Hello there! I've seen some discussions about some sort of multiple pages plugin in here. Is this still a thing? Is there something done regarding this or should I start my own plugin? Thanks!

Ju99ernaut

I've made a simple one for indexedDB but it can also be adapted for other storage types https://github.com/Ju99ernaut/grapesjs-indexeddb-ui however I plan on deprecating it in favour of a new plugin that has other storage types built in, a...

artf

Yeah, it's still quite in progress (I have no ETA, unfortunately) but for sure the PageManager will be in the core.

GJSBlock

Thanks for reporting this, @RaresVlaiduc. Great question about [QUESTION]: Multiple pages plugin. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module...

#3294Feb 27, 2021by server1024 answers
0 reactions

Adding options to properties list array in style manager

Hi, How can I add buildProps to properties list such that when an option is selected, the properties of that option will be displayed An example of what I am trying to achieve on the flex property.

Ju99ernaut

I believe you can move the build props out of the properties list and still achieve what you're trying, the built in flex box related properties only show when a component has display: flex. It's also important to note that buildProps are...

server102

Thank you. I tried it but the grid properties are not working. Might have to implement it manually but am not sure on how best to approach the problem.

Ju99ernaut

There's no buildProps for grid properties so you'll have to build those from scratch, unfortunately docs don't have much info on custom properties probably you'll have to piece things together from the API reference https://grapesjs.com/do...

#3293Feb 26, 2021by eikerd2 answers
0 reactions

Blockmanager: adding custom class gjs-block-category / gjs-title DIVs

I have a list of categories, and I want to mark some with a different style depending on if they are required or not. so ideally i could add a class to the div with class 'gjs-title' so that it says 'gjs-title required-field' this.editor.BlockManager.getCategories(); returns an array of all my block-categories, but my...

artf

Hi @eikerd by checking the code, at the moment, I don't see any other way of customizing block category DOMs if not doing something on your own with the DOM (once blocks are rendered). I'll probably add the view to the category model in th...

GJSBlock

Thanks for reporting this, @eikerd. Great question about Blockmanager: adding custom class gjs-block-category / gjs-title DIVs. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS docum...

#3285Feb 21, 2021by ashercoren4 answers
6 reactions

Doctype in the canvas iframe

Hi. This question has already been asked twice (here and here) but has never got an answer. Is there a way to add <!DOCTYPE html> as the beginning of the canvas iframe so that the iframe will be in standards mode. I need this since I am trying to use tinyMce as the custom RTE, and tinyMce requires standards mode.

artf

In the next release, I'll add a new event helper that will allow editing iframe content before load:

bgrand-ch

Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...

artf

Not really, but I'm open to solutions on how to make it customizable.

#3284Feb 20, 2021by mig84471 answer
0 reactions

Block rendering is being called twice

https://github.com/artf/grapesjs/blob/b199083f6a6128ecff41d20865493294f71fe0a1/src/block_manager/view/BlocksView.js#L142 This line makes the block to be re-rendered since rendering is listening for change events, but since this property does not affect the block rendering per-se the set should be silent as in:

GJSBlock

Thanks for reporting this, @mig8447. Thanks for sharing your report about Block rendering is being called twice. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your G...

#3283Feb 20, 2021by mig84474 answers
2 reactions

BlocksView rendering is being called twice

https://github.com/artf/grapesjs/blob/b199083f6a6128ecff41d20865493294f71fe0a1/src/block_manager/view/BlocksView.js#L186 The Block Manager is looking for a rendered property in the model to tell if the view did render already or not but this method doesn't set said property and therefore this function is called twice,...

mig8447

@RutujaBadbe This is the exact change you need: https://github.com/artf/grapesjs/commit/640661b0a44e5e2857b615559c1db27da3e17a6c

artf

Yeah, makes sense, thanks

RutujaBadbe

https://github.com/artf/grapesjs/blob/b199083f6a6128ecff41d20865493294f71fe0a1/src/block_manager/view/BlocksView.js#L186The Block Manager is looking for a rendered property in the model to tell if the view did render already or not but thi...

#3282Feb 20, 2021by ThomasPof2 answers
0 reactions

CleanId function not working with MJML code

CleanID is still not working for MJML code, even on latest version of grapesJS (0.16.41) It's related to this closed issue : https://github.com/artf/grapesjs/issues/3276 This function is not reading MJML tags : attrs are empty, and I cannot find why...

artf

The id issue should be solved already on the latest mjml plugin release

GJSBlock

Thanks for reporting this, @ThomasPof. Great question about CleanId function not working with MJML code. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

Browse all topics