Make WordPress Core

Opened 4 months ago

Last modified 5 days ago

#60079 new defect (bug)

Twenty Fifteen: Separator block is too thick in the iframe editor

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 6.3
Component: Bundled Theme Keywords: has-patch
Focuses: css Cc:

Description

Steps to reproduce the issue :-

  1. Activate Twenty Fifteen theme.
  2. Choose separator block.
  3. Now see editor and front side.

You can able to see both the side block looks different.
I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/nLtGwVmQWnDrHBvCZPV3

Attachments (4)

60079.patch (357 bytes) - added by nidhidhandhukiya 4 months ago.
60079.2.patch (796 bytes) - added by sabernhardt 4 months ago.
sets border to zero in editor-blocks.css and corrects the typo on "Separator"
60079.3.patch (769 bytes) - added by sabernhardt 3 months ago.
refreshed patch after [57300]
60079.4.patch (394 bytes) - added by sabernhardt 3 months ago.
sets border to zero in editor-blocks.css

Download all attachments as: .zip

Change History (8)

#1 @darshitrajyaguru97
4 months ago

Patch report for https://core.trac.wordpress.org/attachment/ticket/60079/60079.patch

Environment:
===========
WordPress: 6.4.2
PHP: 8.1.9
Web Server: Nginx
Browser: Chrome
OS: Windows 10

Screenshots:
===========
Before Patch:
Backend: https://prnt.sc/devt5LHX4RL7
Frontend: https://prnt.sc/xROKGfLbplYU

After Patch:
Backend: https://prnt.sc/devt5LHX4RL7
Frontend: https://prnt.sc/vLAV8NQpQbza

After Applying the patch it's working properly.

@sabernhardt
4 months ago

sets border to zero in editor-blocks.css and corrects the typo on "Separator"

#2 @sabernhardt
4 months ago

  • Focuses css added
  • Keywords has-patch 2nd-opinion added
  • Summary changed from Twenty Fifteen theme separator block is having visual difference in editor and front end. to Twenty Fifteen: Separator block is too thick in the iframe editor
  • Version changed from 6.4.2 to 6.3

The problem is in the iframe editor, not the front end. Separator blocks (and other hr elements) are intended to be thin in this theme.

Without the iframe, the editor added .editor-styles-wrapper to hr for styles from the Classic editor stylesheet, which would override the block's opt-in styles. Now the discrepancy between blocks.css and editor-blocks.css since [43798] can result in the 2-pixel bottom border (the original blocks stylesheet set border: 0 but editor-blocks did not).

On the other hand, the light color makes the separator almost imperceptible in the editor because the iframe pulls in wp-admin/css/common.css with its off-white background color on body. The mismatch does not bother me much when the extra-thick line is slightly easier to see and to click.

#3 @yuvrajsinh2211
4 months ago

Testing of patch: https://core.trac.wordpress.org/attachment/ticket/60079/60079.patch

Tested in the below environment:

PHP: 8.1.9
WordPress: 6.4
Theme: Twenty Fifteen
Browser: Chrome
Plugin: No plugins


Before Patch Screenshots:
Backend: https://prnt.sc/g9pRxD1ZOfzl
Frontend: https://prnt.sc/btCAh6CWy7V7


After Patch Screenshots:
Backend: https://prnt.sc/rD-bmLusWsSC
Frontend: https://prnt.sc/wxBdO_4-bhnB

As tested, Patch is working fine.

@sabernhardt
3 months ago

refreshed patch after [57300]

@sabernhardt
3 months ago

sets border to zero in editor-blocks.css

#4 @karmatosed
5 days ago

  • Keywords 2nd-opinion removed
  • Milestone changed from Awaiting Review to Future Release
Note: See TracTickets for help on using tickets.