[Resolved] Automatically Center Heading in Gutenburg editor

[Sam]

Hi –

Is there a way I can automatically have the Gutenberg editor set to format headings and photos in the center? It would save me a ton of time if I didn’t have to go through the whole blog post centering the headings and photos.

Thanks!
Sam

[Ying]

Hi Sam,

Do you want them to be centered on the front end or the back end?

[Sam]

Ultimately the front end for the layout of what the reader sees.

Thanks,
Sam

[Ying]

Can you link us to your site? Do you want it to apply to all the posts and pages? Or post only?

[Sam]

All the posts would be great. Site linked below. I have manually centered all photos and headers. My H1 is already automatically centered I should add.

[Ying]

Give this CSS a try:

.single-post h1, .single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6 {
    text-align: center !important;
}
.single-post .entry-content  .wp-block-image {
    text-align: center;
}
.single-post .entry-content .wp-block-image img {
    margin-left: auto;
    margin-right: auto;
}

[Sam]

Where do I add the code please

[Ying]

You can add it to customizer > additional CSS.

[Sam]

That worked, thank you!

[Ying]

Actually try this CSS instead, by using the :is pseudo element, the CSS can be much shorter:

:is(.single-post) :is(h1,h2,h3,h4,h5,.wp-block-image) {
    text-align: center !important;
}
.single-post .entry-content .wp-block-image img {
    margin-left: auto;
    margin-right: auto;
}

[Sam]

Ive changed it to the above. thanks!

[Ying]

You are welcome 🙂

[Author]

Posts