Issue #2670πŸ’¬ AnsweredOpened March 19, 2020by kohki-shikata1 reactions

Doesn't appear HTML class name of a custom block on editor

Quick answerby artf❀ 1

Classes should be placed in classes

Read full answer below ↓

Question

I added my block like this below Then drag this block and drop to canvas, and show HTML code with export-template command. πŸ‘†OK, this is what I expected. BUT, HTML class doesn't appear on the element inside of the editor, so it's not applied style for .main-title. <img width="793" alt="γ‚Ήγ‚―γƒͺγƒΌγƒ³γ‚·γƒ§γƒƒγƒˆ 2020-03-20 2 36 53" src="https://user-images.githubusercontent.com/4133263/77097455-2a6ff980-6a54-11ea-9e74-f5af7982b1b4.png"> <img width="706" alt="γ‚Ήγ‚―γƒͺγƒΌγƒ³γ‚·γƒ§γƒƒγƒˆ 2020-03-20 2 37 45" src="https://user-images.githubusercontent.com/4133263/77097417-1b894700-6a54-11ea-9e90-6d9e9ea0970d.png"> I need to set ht...

Answers (1)

artfβ€’ March 20, 2020

Classes should be placed in classes

content: {
          type: 'text',
          tagName: 'p',
		  classes: 'main-title',
          content: 'This is Main title. To click here to edit this'          
        }
View full discussion on GitHub β†’

Related Questions and Answers

Continue research with similar issue discussions.

Issue #1965

Custom content type

@artf Instead of using plugins js files, can we create our own content using html as I have done below. Is it a correct way to do it? Sorry...

3 answersUpdated April 15, 2020

Issue #3207

Form is not submitting

I am trying to create as custom block. But the form is not submitting when i use components inside content. I am able to get all the form d...

4 answersUpdated May 24, 2023

Issue #2417

API in Component not working after Deployment

Block.js => Component.js => We are able to call the API and it works in Deployment when we are passing the whole html with script, body, st...

3 answersUpdated July 21, 2022

Issue #2057

Media Queries do not apply on a custom block I wrote

I wrote a simple div block like so blockManager.add('simple-div', { label: 'Container', content: '"<!––<div class="simple-div"></div> ––>"'...

2 answersUpdated December 6, 2019

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 β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders