[Support request] Get rid of padding around groups in Gutenberg

[JB]

Hi GP,

I have a number of pages where I made the float-right/left image with text wrapping change to float center by putting a div around the figure and using this CSS:

@media (max-width:769px) {
div>figure.alignleft, div>figure.alignright {
text-align: center;
width:100%;
margin-bottom: 20px ! important;
}
}

Works great, but the Gutenberg editor spits out “This block contains unexpected or invalid content.” It does not like having a

in there.

Good camper that I am, I learned about groups and managed to get the image and the paragraphs in a group, and this works for the image centering. The problem is that in the editor, and in the page, there is 40px of padding around things, and I can’t see why. Well, I can see why, in some inline CSS is the following code in the page source:

.wp-block-group__inner-container{padding:40px;}

but I have no idea where this is set. It looks like all the CSS from GP, but I can’t find it.

I can fix it in CSS, but if there is a setting, I would like to learn about it.

This fixes it, but not in the editor.

/* remove padding from groups */
.wp-block-group__inner-container {
padding: 0 ! important;
}

So, the question is:
Where is this padding set, or how can I fix it nicely so the editor matches the actual page, and there is no padding.

All CSS is in the top 16 lines of Simple CSS .

Thanks for your help.

JB Leep

[JB]

Let me clarify that the padding is set in about 6000 characters of inline CSS in the page source, but I don’t know where it is in the settings to get rid of it.

[Fernando]

Hi JB,

Can you place all code you share here in Code tags? Something you’re sharing is breaking this thread’s layout. Example: https://share.getcloudapp.com/WnuZRB1z

With regards to the padding, you’ll need custom code to alter WordPress Blocks. If you would like custom code to appear on the Editor, you’ll need to use a Child theme and add it manually. Example: https://generatepress.com/forums/topic/block-editor-page-colours/#post-1254303

You may also add a stylesheet.

What we would suggest is to use GenerateBlocks Container Block instead for ease of use. This displays Blocks setting in the frontend and backend. Reference: https://docs.generateblocks.com/article/container-overview/

[Author]

Posts