WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 10 months ago

#52716 assigned defect (bug)

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

Reported by: presstoke Owned by: 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
11 months 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
11 months 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.

I am working on a fix for that.

Version 1, edited 11 months ago by justinahinon (previous) (next) (diff)

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


11 months ago

  • Keywords has-patch added

#4 @justinahinon
11 months ago

  • Keywords needs-testing added

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


11 months ago

#6 @hellofromTonya
11 months ago

  • Version changed from trunk to 5.0

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

#7 @prbot
11 months ago

stokesman commented on PR #1078:

👍 the simplest possible solution.

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


10 months ago

Note: See TracTickets for help on using tickets.