[QUESTION] Unique ID on block content without inline style

[adamwpe]

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:

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:

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?

[pouyamiralayi]

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

[adamwpe]

Thanks @pouyamiralayi

That seems to have created an ID when required :) (By setting private to true).

But, it seems to still be amending a class, 'row' immediately after dropping the component into the canvas. It doesn't seem to be doing that to other classes, so I assume that this is because of the webpack plugin, so I removed the styling from the grapes-js-preset-webpage.min.js (i.e. display:flex etc), but it still adds all that code. So, not too sure where this css is coming from.

The problem is that 'row' is a fairly fundamental class in bootstrap, and it kind of break my components :(

Is there a way to excluded certain classes from being amended?

[adamwpe]

Not related to the 'grapesjs-preset-webpage' plugin, I removed it, and it still added the row CSS.

[pouyamiralayi]

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

[adamwpe]

@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! :)