,

Button Alignment in WordPress 5.7

WordPress 5.7 updated the CSS classes on the Buttons Block to use Flexbox. This means that existing Buttons Blocks that were previously center-aligned or right-aligned may have lost the alignment, and are all shifted to the left after the WordPress update.

lots of various colored shirt buttons
Image from Elnaz Asadi – Unspalsh

This affects all previously added buttons. And if your website is still using a single button in a Button Block, there is additional CSS to add at the end.

Buttons Block CSS (Multi-button Block, since WP 5.4)

The new CSS classes will be:

  • Centered Buttons – .wp-block-buttons.is-content-justification-center
  • Left-aligned Buttons – .wp-block-buttons.is-content-justification-left
  • Right-aligned Buttons – .wp-block-buttons.is-content-justification-right

The old CSS classes are:

  • Centered Buttons – .wp-block-buttons.aligncenter
  • Left-aligned Buttons – .wp-block-buttons.alignleft
  • Right-aligned Buttons – .wp-block-buttons.alignright

Buttons Block Fix Method 1

You can go through your website and click on each Buttons Block and change the alignment. Depending on the number of buttons you have, this can take a bit of time.

Buttons Block Fix Method 2

You can also add some CSS to Appearance > Customize > Additional CSS. This is the quickest method, and you don’t need to find all the previously added buttons. (Note the plural – buttons- in the CSS.)

/* Fix for WP5.7 buttons class changes to use flexbox */
.wp-block-buttons.aligncenter {
	    justify-content: center;
}
.wp-block-buttons.alignleft {
	    justify-content: flex-start;
}
.wp-block-buttons.alignright {
	    justify-content: flex-end;
}

Button Block CSS (Old Single Button)

The CSS is a bit different, if your site is still using the older single Button Block (it’s been deprecated, but still exists on some websites).

Button Block Fix Method 1

Again you can go through your website and click on each Button Block and convert them to the Buttons Block (multiple buttons). This takes a long time though.

Button Block Fix Method 2

But you can also add some CSS to Appearance > Customize > Additional CSS. This way, you can take your time to update your buttons. (Note the singular – button – in the CSS.)

/* Fix for WP5.7 single button alignment class */
.wp-block-button.aligncenter {
	text-align: center;
}
.wp-block-button.alignleft{
	text-align: left;
}
.wp-block-button.alignright {
	text-align: right;
}

I’ve used all these methods for websites that I’ve updated, but Method 2 – adding CSS – is easier when a website has many Button/Buttons Blocks.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

One response to “Button Alignment in WordPress 5.7”

  1. Paul says:

    I’m not a developer, so forgive me if I sound ignorant. But it’s been almost two months since 5.7 came out, and this is the ONLY page on the internet that has addressed this issue. A thousand thanks. My buttons were aligned to the left and I couldn’t figure it out. My websites have hundreds of pages, many of them using the old single button block that is now deprecated. It would obviously take a ridiculous amount of time to go into each page and replace the buttons with the new block.

    I was hoping this issue would be fixed in the 5.7.1 update, but it seems it was not, so now I have to use this custom CSS.

    But this whole situation seems odd to me. If a website has many hundreds of even thousands of pages, and a WordPress update breaks a Gutenberg feature that changes the look of the front end, why should an admin have to permanently add a custom CSS band-aid to fix it? As far as I’m concerned, if someone created a page in Gutenberg that looked correct at the time, the front-end appearance of that page should NOT break in response to a future update. I can’t recall another time this has happened to me in the 5+ years I’ve been managing websites.

    I suppose the “search and replace” plugin could be used to address these kinds of issues without piling up more and more custom CSS over time, but I don’t like forcing code that is not based off of what is in the editor.

Leave a Reply

Your email address will not be published. Required fields are marked *