Issue #2706✓ SolvedOpened April 7, 2020by adamwpe5 reactions

Unique ID on block content without inline style

快速解答by adamwpe3

@pouyamiralayi My bad - worked it out, I had some old 'CssComposer.setRule' still hanging about!!!!!! (since I had debug enabled on my development pc) That was appending the .row class. (That is embarrassing) Thanks for the point in the right direction regarding the selector 'private: false' - it's working a treat :)...

Read full answer below ↓

Question

Hi All,

I made a custom block manager element, but when the element is edited, it applies the style to the class, which means all the same elements are also impacted. If I set an inline style to the element, it then applies the style to the custom class / ID.

Without in line style: image

Code:


        editor.BlockManager.add('column_1', {
            label: 'Column 1',
            category: 'Basic',
            content: `
                    <div class="row gjs-row">
                        <div class='col-md-12 gjs-column'>
                        </div>
                     </div>`
        });


With inline style: image

Code:


        editor.BlockManager.add('column_1', {
            label: 'Column 1',
            category: 'Basic',
            content: `
                    <div class="row gjs-row" ${row_style}>
                        <div class='col-md-12 gjs-column' ${column_style}>
                        </div>
                     </div>`
        });

Is it possible to force the style manager (my be the wrong name) to create the custom ID / Class and then apply the style to that? Instead of amending the noncustom class?

Answers (3)

👍 Most helpfuladamwpeApril 8, 2020

@pouyamiralayi

My bad - worked it out, I had some old 'CssComposer.setRule' still hanging about!!!!!! (since I had debug enabled on my development pc) That was appending the .row class. (That is embarrassing)

Thanks for the point in the right direction regarding the selector 'private: false' - it's working a treat :) - keep uncovering more and more of this amazing project.

Case closed! :)

pouyamiralayiApril 8, 2020

Hi @adamwpe here are the approaches which block unwanted selectors: #1979 comment and #404 comment Cheers!

pouyamiralayiApril 8, 2020

@adamwpe can you confirm that by deactivating row selector: active:false in the add:selector event, you are still receiving the selector?

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

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.