WP Buttons Block Displaying Differently After Update

  • Following WP updates, the buttons block is displaying differently on our test site versus the older live version. We have some custom CSS but can’t seem to work out why the change has manifested this way. The current live site view with two buttons stacked and filling the space alongside the cover image is what we want, but the test site is displaying them right-aligned with a host of white space around. Any advice appreciated.

    https://www.ruralmutual.com/
    https://test-rural-mutal-2.pantheonsite.io/

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • lisa

    (@contentiskey)

    on the 2 sites, is the block structure identical before and after update?
    what version was the update from?

    • This reply was modified 2 years, 3 months ago by lisa.
    • This reply was modified 2 years, 3 months ago by lisa.

    @stirdigital This may be something you already tried, but have you verified that the content on the staging website is exactly the same as the content on the production website? I noticed some of the HTML is different between the two sites such as https://d.pr/i/GYnLtu on www vs https://d.pr/i/GYnLtu on staging. This may very well have to do with Gutenberg changing the markup, but I’d suggest syncing the content of the staging site with the production site before digging in too deeply into the code.

    It’s also possible that the custom CSS that was written for the buttons are targeting elements that were renamed, though it’s difficult for me to tell by looking at the page.

    I hope those suggestions help put you on the right path to finding a solution.

    Thread Starter stirdigital

    (@stirdigital)

    Thanks.
    @contentiskey – the structure is the same.
    @bengreeley – I’m seeing the difference is because there’s an automatic wp-container-id class that is added to the blocks now following an update (WP 5.9 I think). The live site is still on 5.8.3, but the test site is on 6.1. In doing a little digging, I’ve noticed a number of other users have seen this cause layout issues on their sites but not sure how best to address. Any thoughts appreciated.

    @stirdigital You may have luck asking your question in the Gutenberg support forum at https://www.ads-software.com/support/plugin/gutenberg/.

    You could always update your custom CSS to work with the new structure (not ideal, I know). Another possibility is upgrading WordPress but installing an older version of the Gutenberg plugin from https://www.ads-software.com/plugins/gutenberg/advanced/ (scroll to the bottom of the page). This will let you lock into a specific version of Gutenberg while the rest of WordPress can be updated. Again, this is not an ideal solution, but it could buy you time to update your CSS to work with the new markup.

    I wish I had more insightful news, good luck, and hopefully, the Gutenberg threads can point you in the right direction.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WP Buttons Block Displaying Differently After Update’ is closed to new replies.