Broken footer styling after GP (and Wordpress) version upgrade

Hi there,

did you have any Custom CSS or use and other plugins to add specific styles to those blocks ?

Hi, they weren't made with anything custom.

Just the built-in Gutenberg Group, Column, and Separator blocks.

No 3rd party plugin or custom CSS for the footer design.

To make sure, I removed all Additional CSS and the footer stayed the same.

For reference, you may see staging4.workgadgets.ph , which reflects the version before things were out of order.

Thanks!

Can you go to Customizer > General - switch the Dynamic CSS to External File and click the Regenerate CSS button.

Done and published to our live site: https://workgadgets.ph/

I can see that the footer looks the same at the moment.

Please let me know how to proceed.

Thanks!

Hello,

To validate the issue, I simply updated GeneratePress (the theme itself) on https://staging4.workgadgets.ph/

This one change (not touching any other CSS or plugin) broke the footer like on the live site, messing up margins/paddings.

Can confirm that it's the GP update that modified the styling.

Btw, for what it's worth, this footer is a GP 'before_footer' Hook Element.

Thanks

Hi Allan,

I understand that this will be tedious but consider changing the layout blocks you use to GenerateBlocks.

The changes you see is likely related to changes on the block stylesheet on WP 5.8.

See the list of modified files - https://wordpress.org/support/wordpress-version/version-5-8/

wp-includes/css/dist/block-library/style.css and/or wp-includes/css/dist/block-library/style.min.css is on the list. This stylesheet is directly involved with default WP block styling.

The 5.8 update must've revised something related to the padding/margin of the blocks you used. This isn't something the theme controls as it's WordPress core stylesheet, unfortunately.

But here's a suggestion.

You can try adding padding to the wp block you use through custom CSS.

Example:

.wp-block-group {
    padding: 30px;
}

Hello,

As advised, I remade the footer using GenerateBlocks instead of the built-in Gutenberg counterparts. This fixed the spacing issue!

Now, a couple of points...

1) Interestingly, the separators are now overly dark. A couple of them even appear as double lines even if they're the same, exact copy-pasted blocks:

Thoughts on how to make them appear like the normal Separator block?

2) Hope Generatepress can be WYSIWIG again, especially with native WP blocks.

What I see in the editor like below was exactly what would reflect on the live site. Until the most recent WP and GP updates from the last few weeks. Perhaps, I'll wait for the dust to settle after WP upgrades get polished? After a month or so, if I upgrade to the latest versions, they'll look normal without any custom changes from my side?

Thank you!

For #1:

This should be easily editable within the Block editor UI.
https://share.getcloudapp.com/jkuP5Ab9

But as for it's default color being changed, The theme tries to stays clear of the default block stylings as much as possible.

This change you see is likely part of the changes done on the stylesheets with WP 5.8.

For #2:

Like on the video I shared just now, some parts, to some extent, are WYSIWYG. We've yet to fully check everything but these things will likely be settled on the next patch along with the other things we've already found. ( GP 3.1 )

> This change you see is likely part of the changes done on the stylesheets with WP 5.8.

Perhaps, because it looked WYSIWIG in the before the updates.

> Like on the video I shared just now, some parts, to some extent, are WYSIWYG. We’ve yet to fully check everything but these things will likely be settled on the next patch along with the other things we’ve already found. ( GP 3.1 )

Great! I'll observe in the next month and avoid custom changes in the meantime.

Let's mark this as closed.

Thanks!

As a note - see this reply regarding the double borders:

https://generatepress.com/forums/topic/divider-colour-controls/#post-1866183

Still puzzles me why they would change a default style like this.....
Not sure what direction we will take on this change, as adding CSS to the theme to remove something that wasn't a style in the core blocks before is not a nice thing to be doing.... its on our list of things to consider.

Thanks for the additional info, David!

I applied the CSS from the thread and that removed the double borders.

It's definitely strange that WP just decided to add an extra border.

For what it's worth, let me add that the color also changed into black/dark gray. It used to be a light gray, WYSIWIG with what you see on the Gutenberg editor.

Hope WP cleans this up to keep things tidy.

Definitely strange - but not entirely uncommon :)

Glad to be of help!