Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#52716 assigned defect (bug)

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

Reported by: presstoke's profile presstoke Owned by: justinahinon's profile justinahinon
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 5.0
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:

Description

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 are also styled differently between editor/frontend.

Block editor Frontend
image pending image pending

Attachments (5)

Change History (13)

#1 @presstoke
3 years ago

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 are also styled differently between editor/frontend.

Block editor Frontend

#2 @justinahinon
3 years ago

  • Focuses css added
  • Owner set to justinahinon
  • Severity changed from normal to minor
  • Status changed from new to assigned
  • Version set to trunk

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.

Last edited 3 years ago by justinahinon (previous) (diff)

This ticket was mentioned in PR #1078 on WordPress/wordpress-develop by JustinyAhin.


3 years ago
#3

  • Keywords has-patch added

#4 @justinahinon
3 years ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core by metalandcoffee. View the logs.


3 years ago

#6 @hellofromTonya
3 years ago

  • Version changed from trunk to 5.0

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

stokesman commented on PR #1078:


3 years ago
#7

👍 the simplest possible solution.

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.