Block row attributes reflection

[hadronix]

hi @tschortsch,

is there a reason why noGutters, horizontalGutters and verticalGutters will not reflect in the DOM? My problem is if you change those attributes you'll always have to look at frontend to see how the change looks.

    getEditWrapperProps( attributes ) {
        return {
            'data-alignment': attributes.alignment,
            'data-vertical-alignment': attributes.verticalAlignment,
            'data-editor-stack-columns': attributes.editorStackColumns,
                         // add this 
                          'data-vertical-gutters': attributes.verticalGutters,
            'data-horizontal-gutters': attributes.horizontalGutters,
            'data-no-gutter': attributes.noGutters,
        };
    },

This attributes could be added and extend the editor.scss with the spacing. Or am I overlooking something and it should be implemented differently?

great plugin!

best regards

[tschortsch]

We once decided to only implement "important" styling in the block editor since it's pretty difficult keeping them compatible to multiple versions of WordPress/Gutenberg. But you're right it probably makes sense to reflect the gutters (at least the verticalGutters) in the editor since we're adding a padding-left and padding-right to the columns. I'll try to add those styles in the next release.

[tschortsch]

Hi @gocsp. We just released v4.2.0 of the plugin which now reflects (at least) the "no gutters" and "none horizontal gutters" state (see: https://github.com/liip/bootstrap-blocks-wordpress-plugin/releases/tag/4.2.0). We can't really reflect specific gutter states since those gutters can be added or removed dynamically by a filter. Hope this helps your use case anyway.

[hadronix]

hi @tschortsch, thank you very much! The no gutters option works perfect. i got your point regarding the verticalGutters. I tested the horizontalGutters too and one thing caught my eye. You implemented the option for the column background color (which is great) but there is a difference between editor and frontend. In the frontend you create a child div with the color class, this child div is not in the editor. For this reason the horizontalGutters and backgroundColor do not work together. It is the same like with the padding (inside) before. Is it possible to also render this child div to avoid those problems?

thank you!