Twenty Seventeen - Image block having unnecessary border if duotone and link is applied.

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate the twenty seventeen theme.
2. Choose Image block.
3. Apply duotone to that image.
4. Add some link to that image.

You can able to see a border on image in editor and front both.

[sukhendu2002]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).
2. The border appears.

Supplemental Artifacts

[sukhendu2002]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/62610/62610.patch

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

[ugyensupport]

Twenty Seventeen - Image block having unnecessary border if duotone and link is applied.

Description

Steps to reproduce the issue :-

Activate the twenty seventeen theme.
Choose Image block.
Apply duotone to that image.
Add some link to that image.
You can able to see a border on image in editor and front both.

Patch tested: 62610.patch

Environment

• WordPress: 6.7.1
• PHP: 8.3.12
• Server: nginx/1.21.4
• Database: mysqli (Server: 5.7.44-log / Client: mysqlnd 8.3.12)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Seventeen 3.8
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.1

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• Working perfectly as expected

Supplemental Artifacts

Before Backend:
Before Frontend:

Result with Patches:
After Backend:
After Frontend:

[poena]

Hi

I don't think that this patch is the correct solution.

The theme uses a box shadow to style links.
The theme then overrides that default link style on linked images in several places.

It would not be logical for the theme to first add the CSS and then override it again through this patch.

style.css
/* Fixes linked images */
.entry-content a img,
.comment-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

colors-dark.css
/* Fixes linked images */
.colors-dark .entry-content a img,
.colors-dark .comment-content a img,
.colors-dark .widget a img {
	-webkit-box-shadow: 0 0 0 8px #222;
	box-shadow: 0 0 0 8px #222;
}

editor-style.css
/* Fixes linked images */
a img {
	background: #fff;
	-webkit-box-shadow: 0 0 0 6px #fff;
	box-shadow: 0 0 0 6px #fff;
}

[poena]

I found this issue in the Gutenberg GitHub repository:
Duotone effect also applied to the Image block border color
​https://github.com/WordPress/gutenberg/issues/52142

So there are two things to consider:
1) This affects more than one theme, so it is not strictly a problem with Twenty Seventeen
2) It may not be bug, but the intended style when duotone is used.