Block editor doesn't align text properly since 5.3 update

[Max]

Hi, just noticed a new problem that appeared since WordPress 5.3. When I try and center my button inside a paragraph block, using the block editor’s alignment option has no effect. I dug a little deeper and came across the following post: https://wordpress.org/support/topic/problem-with-aligning-of-text-with-the-block-editor/

It seems you need to define the class has-text-align-center to make it center the text. I know this can be resolved with a simple change to my custom css but I would prefer if you could update the GeneratePress CSS as it should behave as intended.

[Tom]

Hi there,

Are you just using the regular Button block? If so, I’m not seeing any issues when it comes to alignment: https://www.screencast.com/t/uzjt5B2cQQat

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

I am using the paragraph block. Just normal text. In the preview (gutenberg editor) it centers, but then when I publish or preview the page, it is not center aligned.

[Tom]

So just your regular text alignment isn’t working?: https://www.screencast.com/t/Fv9t1wGOslo

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

That’s right. In my other website (which I haven’t updated) or older posts it is still using the style=”text-align: center”, whereas the site I updated to 5.3 it is instead assigning this new class which doesn’t seem to define text-align: center anywhere.

In the block editor it centers correctly, but when I press publish or preview it is not centered. I have included an image which shows how the css is different for the paragraph block since the change.

View post on imgur.com

[Tom]

Strange, those helper classes should be a part of the Gutenberg stylesheet: https://tomusborne.com/dev/button-test/

You can try enqueueing their additional styles as well:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'wp-block-styles' );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

Had another chance to look into it and purging the cache on my CDN resolved the problem.

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lars]

Hi,

I’m having a similar problem. I’ve tried purging all cache to no effect.

All the titles in this article are “center aligned” in Gutenberg – but in the front-end they are all left-aligned.

I’ve also center aligned some of the paragraph blocks for testing but they are also left-aligned in the front-end.

Here is the article: https://agenturer.no/skrive-effektiv-annonse-a-finne-salgsagenter/

Is this related to the theme or is it something else?

Thanks for any advice.

[David]

Hi there,

your site isn’t loading the editor styles CSS sheet which is part of WordPress.

Have you tried disabling any plugins or removing custom functions that may be affecting this ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lars]

Thanks for a super fast reply.

You were right (as usual).

It was the Asset Cleanup plugin that caused it. It has a setting for “Disable Gutenberg CSS Block Library Site-Wide” that was active.

Sorry about that.

Thanks again.

Kind regards
Lars

[David]

Glad you found the cause.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts