Image block with link displays the wrong border color in the editor

[carolinan]

Description

The border settings for the image block can be used without defining a border color.
When the image block is linked, and a border is set without a color, the border uses the link color as the border color.

The link color works correctly on the front but not in the editor, because the markup in the editor does not use the <a> element.
Editor:

<figure>
<div for resizing>
<image>
</div>
</figure

Front:

<figure>
<a>
<image>
</a>
</figure

Step-by-step reproduction instructions

This is easiest to see in a theme that has different text and link colors, like Twenty Twenty-Three.

1. Add an image block
2. Add a link to the image
3. Add a border width in the image block settings sidebar.
4. Confirm that the border is visible, note the color.
5. Save and view the front of the website. Confirm that the border color is now the link color.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.4 beta 3, nightly, through the beta tester plugin.
Gutenberg current trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[jordesign]

Confirmed this in testing 👍

Editor:

Front-End:

[annezazu]

Just noting that I can't replicate in 6.4 beta 4 (doing a sweep and am not going to add to the 6.4 board).

[ramonjd]

I can't replicate on WordPress 6.4-beta4-56925 or Gutenberg trunk. Tried 2023 and 2024.

Nothing in the Gutenberg commit history stands out as having fixed it 🤔

[carolinan]

I am still able to reproduce this with Twenty Twenty-Three on 6.4-RC1.

[annezazu]

Flagging this for the wider test crew in case someone else can replicate and we can get more info.

[pbiron]

I can reproduce w/ 6.4-RC1 & TT3

Editor:

Front-end:

[ironprogrammer]

Weird. I am also not able to reproduce this with the following combinations:

• 6.3-beta3
• 6.4-RC1-56475-src
• 6.5-alpha-56966-src
• twentytwentythree
• twentytwentyfour
• gutenberg 16.8.1
• gutenberg trunk

Environment Info

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 13.6
• Browser: Safari 17.0, Google Chrome 118.0.5993.70, Mozilla Firefox 118.0.2
• Server: nginx/1.25.2
• PHP: 8.2.11

Is there an environment configuration variable that we might be overlooking?

[pbiron]

I can reproduce w/ 6.4-RC1 & TT3

Server Environment:
Apache 2.4.53 (Win 11)
MySQL 5.7.38
PHP: 8.0.29
imagik php extension: 3.7.0
WP_DEBUG: true (same behavior w/ false)
SCRIPT_DEBUG: true (same behavior w/ false)
WP_ENVIRONMENT_TYPE: local (same behavior w/ production)
Browser: Chrome 118.0.5993.89 (Official Build) (64-bit)

[TheRadicalDreamer]

I believe i have a similar issue.

I set a query block with the featured images from the posts, with a border color.

But in the frontend it does not show:

If i go to inspect elements i can see that it does not have the border-size.

If i add it manually, it shows the correct border size (29 px in my example):

[ramonjd]

Ah, I can reproduce now.

I see that, where a border color hasn't been defined, it will default to the closest color. In the frontend, it will be the link element's color:

a:where(:not(.wp-element-button)) {
    color: _some_color_;
}

In the editor, it's the body color.

As @carolinan notes, there's a difference in the markup between the editor and frontend.

Let's see what happens when we throw an <a /> tag in there 🤞🏻

[ramonjd]

#55470 looks only at the image block, so I'm not yet sure about the query/featured image report above. I haven't been able to reproduce or confirm that it's related yet.

[TheRadicalDreamer]

@ramonjd so, do you think my issue is related to this, or do i open a new issue?

[annezazu]

Noting that we triaged this for 6.4's latest session and do want to include this fix in 6.4 RC2.

[jeryj]

I was able to reproduce this in WP 6.3. Reproduction steps:

• Using TT3, create a new post
• Add an image
• Add a link to the image
• Using the styles tab, set a border width, but do not select a color
• The border will be black
• Save
• Go to the frontend post
• The border will be green

Screen.Recording.2023-10-20.at.2.04.20.PM.mov

[annezazu]

Thank you, Jerry! @ironprogrammer you previously couldn't replicate with 6.3. Is that still the case? I'm assuming in all of these cases Gutenberg isn't installed as well :) Trying to narrow down if this problem was indeed introduced in 6.4.

I'm unable to replicate with WP 6.3.2 without GB installed:

unable.to.replicate.image.mov

[ramonjd]

@annezazu Which theme are you using in the above screen capture?

I've added the backport label to #55470 It's already been cherry picked 😄 Thanks @SiobhyB!

[annezazu]

This was a quick spin up site but nearly positive it was TT4 (which actually isn't compatible without 6.4). To be safe, just tested again and confirmed I can't replicate using TT2 and no GB.

For 6.4, I want to note at this stage we should only include fixes for issues due to 6.4's cycle. Meaning if this can be repeatedly replicate with 6.3.2, it may not have needed to be backported. I fear I can't dig into this more right now but wanted to flag as this came up as part of a wider discussion on including a fix for an accessibility issue.

[SiobhyB]

I've also only been able to reproduce on 6.4's RC1 in my testing, you can see the issue isn't there when I test on 6.3.2:

6.3.2.mov

I tested with both the Gutenberg plugin installed and without, but I wasn't able to reproduce either way on 6.3.2.

The variation in experiences is definitely strange. As there have been at least a couple of us who are only able to reliably reproduce in 6.4, I feel comfortable including a potential fix for it in RC2.

[hellofromtonya]

Thank you everyone. In reviewing, this does appear to be a regression introduced in the 6.4 cycle. Thus it can be committed into Core's 6.4 branch for RC2.

[ramonjd]

can't replicate using TT2 and no GB.

Thanks for testing again, folks!!

I just tested using this combination, and the border color matches (rgb(0,0,0)) between the editor and frontend, but there's quite a subtle difference and it's totally not obvious at first.

As mentioned in #55336 (comment), in the editor, the border color is being inherited from the body styles rule:

body {
    color: var(--wp--preset--color--foreground);
}

In the frontend, however, the border color is inherited from the surrounding A tag.

a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--foreground);
    text-decoration: underline;
}

In TT2 and other themes it seems, by coincidence (or design), that the colors are the same (var(--wp--preset--color--foreground);), the catch is that they stem from different rules.

Swapping the colors in theme.json styles make that distinction more apparent:

	"styles": {
		"color": {
			"background": "pink",
			"text": "green"
		},
		"elements": {
			"link": {
				"color": {
					"text": "red"
				}
			}
		}
	}

Wrapping the image in an A tag in the editor in #55470 ensures that the subject of the inheritance is the same (an A tag).