[cwhiteho]

I have been starting to try out the Gutenberg Plugin for WordPress in preparation for change to WordPress 5.0. All appears to work fine in the editor and looks how I want it but when I publish and view the website, the captions are compressed into a third of the area on the left hand side (Firefox and Chrome). See https://www.phillipskop.co.za/flora/leucadendron-xanthoconus. Interestingly, this is even worse when viewed with Microsoft Edge, where the caption is a single character wide. If I inspect the caption element, then unticking “display: table-caption” partially resolves the problem in that the caption is now on a single line but it extends beyond the boundaries of the image. I do not know if this is a conflict between the Tempera theme and Gutenberg. I have disabled all caching plugins or other ones that could appear to cause conflict.
Thanks,
Chris

Website: www.phillipskop.co.za/flora/leucadendron-xanthoconus

[Zed]

Looks like Gutenberg applies some styling which doesn’t play nice with the theme’s own styling.
Try adding this custom CSS to correct that:

#content .aligncenter, #content img.aligncenter, 
#content .alignleft, #content img.alignleft, 
#content .alignright, #content img.alignright {
    display: table;
}

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[cwhiteho]

Thanks Zed, that worked perfectly. Hope it helps you too with getting the theme ready for the Gutenberg changeover.

[davidfb]

Thanks, Zed
I tested the Gutenberg plugin today with Mantra theme and it appeared to be line breaking each space in the image caption, similar to the above. I tried   and it fixed it but what a hassle.

This code may help but I will probably use the Classic Editor plugin until WP works out some of the kinks. I was surprised how many issues there was in the new editor interface. No wrapping images? Not WYSIYG? Sheesh.

[Author]

Posts