[QUESTION] Body sectors

Hi @verloka & @pouyamiralayi,

The sectors list seems to be common to all applications components.

However, components hold a list of attributes that can be edited through the style manager panel when they are selected, which is used to filter the application sectors.

From the Component API Reference, you can use the stylable, & unstylable properties to include and / or exclude editable attributes.

By default, the "Body" element (referred to as "Wrapper"), holds the following stylable property: ["background", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "background-size"] (from its default configuration), which is why even with default sectors, it only shows the "Decorations" one on the style manager.

You'd need to edit its stylable property in order to add the "Dimension" related ones, which could be achieved like so:

• Via initialization configuration:

// ...

grapesjs.init({
    // ...
    domComponents: {
        // ...
        wrapper: {
            stylable: [
                // Default attributes
                'background',
                'background-color',
                'background-image',
                'background-repeat',
                'background-attachment',
                'background-position',
                'background-size',

                // Add the "Dimension" sector attributes
                'width',
                'height', 
                'max-width',
                'min-height', 
                'margin', 
                'margin-top', 
                'margin-right', 
                'margin-bottom', 
                'margin-left', 
                'padding', 
                'padding-top', 
                'padding-right', 
                'padding-bottom', 
                'padding-left'
            ]
        }
    }
});

• At runtime: editor.getWrapper().set('stylable', editor.getWrapper().get('stylable').concat(['width', 'height', 'max-width', 'min-height', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left']));

EDITED: added missing top / right / bottom / left properties EDITED2: added 2nd solution via initialization configuration

@verloka based on @mcottret answer, you can bring back the whole styling options like this:

editor.on('load', function () {
            editor.getWrapper().set('stylable',true)
            //...

Cheers!

Hi @verloka & @pouyamiralayi, The sectors list seems to be common to all applications components. However, components hold a list of attributes that can be edited through the style manager panel when they are selected, which is used to filter the application sectors. From the Component API Reference, you can use the stylable, & unstylable properties to include and / or exclude editable attributes. By default, the "Body" element (referred to as "Wrapper"), seems to hold the following stylable property: ["background", "background-color", "background-image", "background-repeat", "background-attachment", "background-position", "background-size"], which is why even with default sectors, it only shows the "Decorations" one on the style manager. You'd need to edit its stylable property in order to add the "Dimension" related ones, which could be achieved like so: editor.getWrapper().set('stylable', editor.getWrapper().get('stylable').concat(['width', 'height', 'max-width', 'min-height', 'margin', 'padding']));

Ok, this is better BUT https://codepen.io/verloka/pen/BaNrrzL look at margins for the Body and other element in the Dimensions sector

My answer was indeed incomplete, sorry. Just adding margin or padding to the stylable array only adds the corresponding label & form group, you still have to specify which properties to add inside it (eg margin-top, margin-right etc ...). This can be useful in case you don't want the whole styling options like mentioned previously.

I also updated my answer with a working snippet, thank you :)