Archived topic
Get rid of padding around groups in Gutenberg
2 replies · Started by JB on November 14, 2022
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
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
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.
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/
