Issue #2288Opened September 24, 2019by hellocaio3 reactions

[QUESTION] Why stylable and unstylable props not working?

Question

First of all, excellent project! I love it! Very complete all-around. I've been reading and re-reading the doc and it is a steep learning curve.

Anyway, I would like to serve a template to the user with restrictions in styling. I have been trying to use stylable and unstylable props like this:

<h1 data-gjs-unstylable={["float"]}>Title</h1>

But yet the float style shows in the style manager. Why?

Is there any other way to customize the style manager based on the component? For example, if #site-logo is selected, the style manager shows the asset uploader and a text field (fallback).

Answers (3)

pouyamiralayiSeptember 24, 20191 reactions

Hi there! for your first problem: i think this property must be specified on your component type definition. for your case it would be something like this:

 editor.DomComponents.addType('my-h1',{
            isComponent:(el) => {
              if(el.tagName === 'H1'){
                  return true
              }
            },
            model:{
                defaults:{
                    tagName:'h1',
                    unstylable:['float'],
                }
            }
        })

for your second problem, see if this can help you out. cheers.

hellocaioSeptember 24, 20191 reactions

I see! Thanks man! I will give it a go. :)

artfSeptember 28, 20191 reactions

@ColdTuna You wrote the attribute incorrectly, it should be <h1 data-gjs-unstylable="[\"float\"]">Title</h1>

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.