Image Caption Poorly Placed on Page – Gutenberg Annoyance

More information about this issue.

I used the browser inspector for this image block element and found that the CSS class name for the DIV block holding the image is,

.wp-block-image

… the CSS for the image,

.wp-block-image img

… the CSS for the caption,

.wp-block-image figcaption

The parent block was set at “display: block” by WordPress, because when I added “display: inline-block” to wp-block-image the caption moved underneath the image and was centered under the image where it was suppose to be.

What I also did was gave these CSS classes borders and this is what it looks like,

https://prnt.sc/lrwen7

So why does the screenshot show the image itself as proper, but the container holding the image full width of the page?

This is why,

<figure class="wp-block-image"><img class="wp-image-6419 alignnone" src="/wp-content/uploads/2018/12/libbey-logo-horizontal.jpg" alt="Libbey logo" />
<figcaption>Image Caption</figcaption>
</figure>

The developers assigned the CSS class name wp-block-image to the HTML tag <figure> causing it to become a full page width (100%) block.

Obviously, in my view, there was some very poor CSS styling here and seems the developers lost their perspective of what the page will look like as they focused on the block design of the Gutenberg editor. They lost something to cause an error like this.

If we get into alignment of the image, since there is no more “alignnone” in the editor, that is another issue which I won’t add to this post.

• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: added more info
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: more info
• This reply was modified 5 years, 11 months ago by mwarbinek.
• This reply was modified 5 years, 11 months ago by mwarbinek.
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: more info
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: more info
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: More info

Yes, the figure/image is a full width block. It is supposed to be that way.

If you want to restyle it for your theme differently, then that’s up to the theme. However it is a full width block and the image defaults to centered in that block.

You said, “the image defaults to centered in that block“.

Do you see the image centering, Samuel?

I don’t and this is the same issue when testing this in the WordPress default themes 20-15 and 20-19.

In default theme 20-14 the image is aligned at the left and so is the caption at the bottom, aligned left.

In default theme 20-13, the content is the same width as in the editor, really narrow, the image is aligned at the left of that container and the caption aligned to the right, being offset from the image quite a lot.

So even in WordPress default themes, the display of content is very poor. There is NO centering of either the image and certainly there is absolutely no matching alignment with the caption.

Can you explain why the image is not centering? – because if it did, then the block design, for the caption issue, would work.

As a note, I have used one of my WordPress test sites for this as well as one of the themes used for a client in a Localhost environment.

• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: grammar fix
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: grammar fix
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: More Info

Unfortunately, it’s quite difficult to understand what the problem you’re experiencing is from just your screenshots, since they’re somewhat incomplete and don’t explain the problem very well.

If it helps, I recorded a quick video to show what I’m seeing. No audio though, I’m kind of in a crowded room at WordCamp US right now. ??

This is just me adding an image and messing around with the settings a bit:

Are you doing something differently?

I have written an issue on 2019 that the styles assume large images. Nothing changed though. I don’t know if that applies to the whole editor.
How the classes are styled is up to the theme, although the default editor styles are not easy to override.
In my own theme, I have not opted in to the optional styles, and not tried to override them, but I wrote an issue about the default styles being in the wrong place (default instead of optional). Hopefully, that will get fixed soon.
https://github.com/WordPress/gutenberg/issues/12299

@samuel

Lets take a look at what is really happening Samuel, from the perspective of the average, non-techy, mostly basic WordPress user, especially the newbies to WordPress pages and posts.

From that perspective, people expect things to work, after all, would you buy or get something broken?

To assist you on what is really happening here, from a blank cavass point of view, watch the following video of what happens using the new Gutenberg editor.

Imagine yourself having a car someone updated for you. They added new fangled things to the car to make it current and spiffy. Looks great on the surface, until… you use it. Then it is no longer new and fangled and certainly not spiffy.

To make this updated car work, you have to wriggle the wires to get the engine going, else it won’t work properly. So each time you want to start it, you wriggle the wires.

You then speak to the mechanic about it and he says “that is the new default design”. Does that impress you as something ridiculous? Does the mechanic impress you as a good one? – speaking from a common sense point of view.

This car is broken and the average non-techy would have never figured out he has to fiddle with something to get it to work.

Let ask, this fiddling with the image sizing to get the caption to properly align to the image, is this part of the design of Gutenberg?

Does this fiddling show a professionally made and developed WordPress editor?

It is like the old comedy act cliche, “get a hammer and smack it to work”.

The Gutenberg editor is broken, Samuel.

PS: fire the mechanic.

• This reply was modified 5 years, 11 months ago by mwarbinek.
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: fixed coding
• This reply was modified 5 years, 11 months ago by mwarbinek.
• This reply was modified 5 years, 11 months ago by mwarbinek.
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: fixed grammar
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: added more info
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: added more info
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: edited

@joyously

I went to your Github link and added my comment.

Looks like others are having issues with this Gutenberg design.

• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: edited

I don’t quite agree with what you put on the GitHub issue, but thanks for your contribution.

@mwarbinek Okay, so, you seem to have solved your own problem here. As soon as you adjusted the image or altered it in any way, the caption re-centered where it should be. At every point, what you saw in the editor was what you got in the final form.

So, what is the issue then, exactly? Yes, the “default” for a smaller image was arguably not the best, but it was what you saw, and what you got. What’s the problem then?

Problem was not solved, it was reiterated. It shows the editor is not working. A novice and nontech person will never have figured that out and WordPress is suppose to be for all user levels.

That is not the only issue with the Gutenberg editor, this was the only issue focused on for this posting string.

You don’t seem to get it. You continue to think that fiddling with the image size to fix the caption alignment issue is a normal and acceptable behaviour & feature of the editor, failing to realize this is a mark of a poorly designed editor.

Why is this not resolved and why you don’t seem to get it?

• This issue shows the Gutenberg editor, by default, causes styling issues and speaking on a business point, would be a very poor product
• It shows the editor as some serious design issues, that it does not provide usability and does not provide dependable functionality
• The editor has some quirkiness, shown by the fact a person has to “fiddle” with the image size to force the caption to realign properly
• The editor inserts bad CSS styling, which by example caused the caption to mis-align (see my comments above showing the CSS class names and what they do)
• Editor quirks like this one, how many are there? Do you realize the problems this creates when working with the editor? – how many other quirks exist and what is needed to overcome these quirks poses a real usability issue.
• With this and other likely quirks, how much this will definitely negatively impact novice users and non-web-technical persons

This issue clearly NOT resolved.

PS: your fired.

• This reply was modified 5 years, 11 months ago by mwarbinek.
• This reply was modified 5 years, 11 months ago by mwarbinek. Reason: added info

@joyously

What I wrote fits along side with your issue. WordPress Gutenberg editor is inserting its own styles to the content when it shouldn’t and creating issues with styling, making it hard and at times, very hard, to deal with its styling results. What I said was not specifically about your issue with Gutenberg, what I said speaks about the entire framework of Gutenberg, where yours is but one issue of many in the same box.

@mwarbinek I understood what you meant in your first posting and screenshot.

@otto42 is incorrect when he states “At every point, what you saw in the editor was what you got in the final form”

When I insert an image in the editor the caption is shown centered under the image. When I preview the page the caption is centered on the page not the image.

Like @mwarbinek I have to fiddle with the image dimensions to get the caption to center under the image. In my view the editor is not working correctly.

@bond138 – thanks for your post, it confirms to others that the problem is universal and WordPress has a lot of work to do to make this Gutenberg editor worth it.

May I suggest to try inserting a column then insert another column into it. Do you get some editing inconsistencies, like it is hard or impossible to control the size of the column. Then in responsive view, the column in a column, at least with me, does not respond to mobile screens, it simply narrows a lot to make any text in it unreadable.

@techofweb

First off, I really want to say that WordPress has gotten a bad rep because of this and simple things as a misaligned and styled image caption should have been fixed in the 5.02 update, but it hasn’t. I actually expect this issue to be ignored for a long time.

Having said that (and I can certainly say more), lets move to a fix. Here is what you can do about this annoying and poorly coded editor regarding the image caption.

1. Best to use the classic editor and don’t spend your time, which is important to you, but not important to WordPress developers, in fixing bad coding caused by the Gutenberg block editor.

2. If you really want to spend the time working a fix for this, here is one thing you can do and I will show why this works.

The issue caused by the Gutenberg Block editor is CSS related. It is bad coding or coding that was never thought out and not tested. The screenshot shows your page with the misaligned image caption. I used the browsers’ “Web Developer Inspector” to determine what is causing this misaligned caption. The screen capture shows it. The red arrows show were the issue exists and the problem in the CSS styling,

https://prnt.sc/m52t77

The fix to this is shown in this next screen capture, where I modified the CSS styling right in the Inspector to create a temporary change on the fly and it aligned the caption better.

https://prnt.sc/m535vi

Note where I made the change (red arrow) in the browser inspect for the page CSS styling.

Yet, this was not the complete fix since the caption is not a true center. I played a bit with margin-left, but that will not work well globally when images are different widths.

If you still want to do this, use Custom CSS and enter the following CSS code below (it includes the width 100% fix),

.wp-block-image figcaption {
   width: 100%;
}

You don’t need use !important in the Custom CSS because the style sheet does not use that property for that class name.

To get the caption 100% center, you can try to use the transform property. Try it yourself to see if you can align all captions despite the different image widths, but if you need an image width for the CSS transform property to work, then it won’t work well unless you change all images to the same width or there about.

For me, I use the Classic Editor as my time is better spent customizing client websites than fixing this horrible Gutenberg Editor all the time.

Hope that helps.

Hi wpwd2016 (@mwarbinek)

Thanks a lot for detailed reply.
Do’nt know but it did not work for me.

Gutenberg is really messy.

As of now, i have changed the theme and it looks good here