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.
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.
Leave a Reply