Archived topic

Block editor doesn't align text properly since 5.3 update

12 replies · Started by Max on November 27, 2019

Viewing posts 1–13 of 13

November 27, 2019 at 12:08 pm #1080273

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.

November 27, 2019 at 3:35 pm #1080503

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 :)

November 27, 2019 at 3:40 pm #1080507

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.

November 27, 2019 at 4:47 pm #1080571

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

November 28, 2019 at 3:51 am #1081149

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.

https://imgur.com/a/zQiyoVY

November 28, 2019 at 9:19 am #1081767

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' );
} );

December 14, 2019 at 4:49 am #1104046

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

December 14, 2019 at 9:11 am #1104341

Awesome :)

April 20, 2020 at 3:16 am #1246332

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.

April 20, 2020 at 3:32 am #1246359

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 ?

April 20, 2020 at 4:03 am #1246383

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

April 20, 2020 at 4:24 am #1246409

Glad you found the cause.

April 7, 2022 at 1:41 am #2180702

Hi
Only for your knwoledge.
Autooptimize plugin has an option to remove global styles and the svg associated. But the last beta version (3.0.0-beta 6) this option removes block styles too.
I have opened a issue in the github repo to make this 2 separate options, 1 for block styles and 1 for global styles.

This archived topic is closed to new replies.

Start building better websites today.