[Resolved] Gutenberg editor can’t remove padding between blocks.

[Charles]

I know you didn’t create this editor but I hate hate hate it. Why you can’t combine a heading with it’s text in one block and control the font size of heading without it affecting the entire block is beyond me. That’s just normal coding behaviour.

Anyway, how can I remove the space between the heading “Fieldstone Managers” and the list of managers on this page? I’ve tried all kinds of CSS, and even tried to override it in my CSS with !important but nothing overrides fortress Gutenberg.

Thanks
Charles

[Tom]

Hi Charles,

That spacing is the paragraph spacing.

We didn’t create Gutenberg, but we did build GenerateBlocks: https://generateblocks.com

It allows you to control things like the spacing below paragraphs etc.. if you use the Headline block.

It may take some of the headaches out of the editor for you 🙂

[Charles]

Thanks. It looks great, but can I use it on a page already created? The demo video just shows how to access it by clicking on the plus sign, but I can’t find GenerateBlocks on the sidebar or any of the other existing menu options.

[Leo]

It looks great, but can I use it on a page already created?

If the page is using Gutenberg then yes.

Should be in the block selector:
https://www.screencast.com/t/S4pGPril

[Charles]

Yes but you’re showing the plus sign beside a new block. What about the text above that. It’s already created and there doesn’t seem to be any option to use the plugin on text that is already created. I don’t see any GenerateBlocks options.

[Tom]

Have you already installed and activated GenerateBlocks?

If so, click the Paragraph icon (first item in the toolbar you’ve opened in the screenshot above) and transform it into a “Headline” block.

Then you can set the Headline block to be a paragraph and style it as needed.

[Charles]

Thanks but it’s not acceptable to anyone who uses CSS to format content, that the only block with adjustable padding and margins is Headings, when CSS is meant to control any element on the page. You can not even override Gutenberg with your own CSS even with !important. So I’ve disabled it with the Disable Gutenberg plugin which works perfectly. Not your fault. I’m still a huge fan of your theme and continue to use it on all of my websites.

Also, I was unable to click Paragraph to convert it to Headline. There is no clickable option that I could find. It does work on a new block if you start by setting it to Headline.

Charles
P.S. Can you change my typo in the Topic to “Gutenberg” – thanks.

[Tom]

No problem! You should be able to use CSS to customize a block just like any other HTML element, it just needs to be specific enough.

Sometimes the Classic editor makes sense to use as well.

Topic title changed.

Thanks!

[Charles]

Thanks Tom. They have that one tiny little field to put CSS in which is useless. I suspect my CSS file in the GeneratePress child theme is being overtaken in the hierarchy by theirs. I tried testing it with something as simple as adding enormous padding and margins in my CSS file with !important to the <p> tag which they use – but it didn’t do anything.

[Tom]

Feel free to link me to an example if you’d like me to take a look 🙂

[Charles]

Thanks for the offer Tom, but I already went ahead and installed Disable Gutenberg. It will be easier for the user of the website since I don’t update content on it. I’ll get back to you next time if I need help.

Charles
P.S. I see you finally updated your picture! That kid of yours in the old one must be a teen by now 😉

[Tom]

No problem!

Ha! She acts like it 🙂

[Author]

Posts