Twenty Seventeen: consider style updates for box-shadow on linked images

[presstoke]

Origin

User report: ​https://github.com/WordPress/gutenberg/issues/22187

That report was only about the Media & Text block specifically but looking into I recognized it as a general issue with the styles from Twenty Seventeen and applicable to other blocks.

Steps to replicate

1. Add any block that supports inner blocks and background colors (Group, Columns)
2. Add a background color to the block
3. Inside the block, add any/all of the following blocks: Image, Gallery or Media & Text
4. Add a link to the inner block (Gallery block gets links via a setting the Inspector (block settings sidebar)

Results

• In each block there is a box-shadow on the images
• In the Gallery block the box-shadows double-up between images
• In a Media & Text block with a background-color of its own, the box-shadow expands beyond the block background area

Expected

Consistency between what is seen in the Block Editor and the frontend (i.e. Either without box-shadows on the frontend or with box-shadows in the Editor).

Screenshots

Blocks with linked images

Block editor	Frontend
image pending	image pending

Inline images with links

Inline images are also styled differently between editor/frontend.

Block editor	Frontend
image pending	image pending

[presstoke]

I expected to be able to edit my ticket after creation to insert the attached files but seems I cannot so I'll do so here:

Blocks with linked images

Block editor	Frontend

---

Inline images with links

Inline images are also styled differently between editor/frontend.

Block editor	Frontend

[justinahinon]

Hello @presstoke. Thank you for reporting the issue.

I can effectively reproduce this issue on Twenty Seventeen, with the all blocks that includes an image. On a fresh WordPress trunk installation with or without Gutenberg activated.

However, I think that this is not related to the Group/Column blocks.

When you change a page background to a non-white color, and add an image with a link, you'll still notice the same issue. See https://core.trac.wordpress.org/attachment/ticket/52716/Screenshot_2021-03-08%20%2352716%20%E2%80%93%20WordPress%20Develop.png.

This is due to this code

.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;
}

added here https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentyseventeen/style.css#L1290.

I don't seem to understand why we need this box-shadow on linked images as it looks a bit unusual thing to do.

I am working on a fix for that.

Trac ticket: https://core.trac.wordpress.org/ticket/52716

[hellofromTonya]

Updating the version to 5.0, which is when styles were introduced in #45045 [44148].

👍 the simplest possible solution.

[karmatosed]

The following is true currently when testing the latest patch:

Without patch

• It only shows the border/shadow within the editor on gallery.
• If you want to see the border/shadow you can using the group and gallery blocks.

With patch

• No change is improved as shown with screenshot.

I would suggest the patch needs reviewing and iteration.