Make WordPress Core

Opened 9 months ago

Closed 4 months ago

Last modified 4 months ago

#59285 closed defect (bug) (fixed)

Twenty Nineteen : Avatar design is different in editor and frontend side in Post Author Block

Reported by: pitamdey's profile pitamdey Owned by: audrasjb's profile audrasjb
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch commit
Focuses: css Cc:

Description

Hi Team,
In Theme Twenty Nineteen, The Avatar design is different in the editor and frontend side in the Post Author Block as it has no border-radius on the editor side and has border-radius 100% on the frontend side. They should be the same on both sides.

Attachments (8)

Frontend View.png (70.0 KB) - added by pitamdey 9 months ago.
Frontend View Screenshot
Editor View.png (85.8 KB) - added by pitamdey 9 months ago.
Editor View Screenshot
59285.patch (1.4 KB) - added by pitamdey 9 months ago.
After applying this solution the issue is resolved
59285.1.2.patch (449 bytes) - added by pitamdey 9 months ago.
WhatsApp Image 2023-09-21 at 12.07.57 PM.jpeg (95.4 KB) - added by balub 8 months ago.
Editor side
Front-end.jpeg (63.9 KB) - added by balub 8 months ago.
Front end
59285.diff (788 bytes) - added by sarath.ar 8 months ago.
59285.2.patch (553 bytes) - added by shailu25 8 months ago.
Updated Patch

Download all attachments as: .zip

Change History (36)

@pitamdey
9 months ago

Frontend View Screenshot

@pitamdey
9 months ago

Editor View Screenshot

@pitamdey
9 months ago

After applying this solution the issue is resolved

@pitamdey
9 months ago

#1 @audrasjb
9 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 6.4
  • Owner set to audrasjb
  • Status changed from new to reviewing

#3 @balub
8 months ago

I am able to reproduce the issue

@balub
8 months ago

Front end

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


8 months ago

#5 @sabernhardt
8 months ago

  • Keywords changes-requested added

The changes should be made in the SCSS file, and they could include the Avatar block (like 59253.2.patch has for Twenty Sixteen).

#6 @nicolefurlan
8 months ago

This ticket was discussed during the 6.4 bug scrub today. We had originally decided that this ticket was ready for testing, but I see that @sabernhardt has requested changes to the patch. @pitamdey are you able to update the patch per https://core.trac.wordpress.org/ticket/59285#comment:5?

#7 @sarath.ar
8 months ago

I also tested and was able to reproduce the issue. And I am attaching a patch as well.

@sarath.ar
8 months ago

@shailu25
8 months ago

Updated Patch

#8 @shailu25
8 months ago

I have updated the Patch as per the requested changes Comment5

Last edited 8 months ago by shailu25 (previous) (diff)

#9 @harshgajipara
8 months ago

Test Report

This report validates that the indicated patch addresses the issue.

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

Environment

OS: Windows
PHP: 8.1.9
WordPress: 6.3.1
Browser: Chrome
Theme: Twenty Nineteen
Plugins: None activated

Actual Results:

✅ Before patch: Editor and frontend design not matching.
https://prnt.sc/l8n-upq97P8c
✅ After patch: Editor and frontend design matching.
https://prnt.sc/jNKk63ZV_LgN

#10 @oglekler
8 months ago

  • Keywords needs-testing added; changes-requested removed

#11 @harshgajipara
8 months ago

  • Keywords changes-requested added

Hi @shailu25, can you please add compile css also?

This ticket was mentioned in PR #5426 on WordPress/wordpress-develop by @shailu25.


8 months ago
#12

After Applying Patch Border radius issue will solved.

Trac ticket: 59285

#13 @shailu25
8 months ago

  • Keywords changes-requested removed

@harshgajipara I have Update Patch.

PR: https://github.com/WordPress/wordpress-develop/pull/5426

Last edited 8 months ago by shailu25 (previous) (diff)

@shailu25 commented on PR #5426:


8 months ago
#14

Thank you for the feedback @mukeshpanchal27

I have Updated PR as per mentioned Feedback changes.

  • Reverted style-editor.css Changes
  • Used same format for comment.
  • Added Empty line at the end of css

This ticket was mentioned in Slack in #core-test by oglekler. View the logs.


8 months ago

#16 @nicolefurlan
8 months ago

Pinging previous testers to see if they can test the updated patch :)

cc @pitamdey, @balub, @harshgajipara

#17 @pooja1210
8 months ago

Hi,

Test Report
Patch - https://github.com/WordPress/wordpress-develop/pull/5426

Environment
Operating System: Mac OS
WordPress: v6.3.1
Theme: Twenty Nineteen
Browser: Chrome

Actual Result: The Avatar design looks different in the editor and frontend. The border-radius is missing in the editor view.

Expected: Border-radius should be present and visible properly in the editor view ☑️

Screenshot:
Before - https://prnt.sc/tuBOS3T15muz

After - https://prnt.sc/rKHYThQMl-U9

Thanks!

#18 @sabernhardt
8 months ago

  • Milestone changed from 6.4 to 6.5

@poena commented on PR #5426:


4 months ago
#19

When I apply the patch on WordPress 6.5-alpha-56966 I am getting:

5426.diff:16: new blank line at EOF.
+
warning: 1 line adds whitespace errors.

And there are two blank lines at the end of the style-editor.scss file.

#20 @poena
4 months ago

  • Keywords needs-refresh added

This ticket was mentioned in PR #5977 on WordPress/wordpress-develop by @shailu25.


4 months ago
#21

  • Keywords needs-refresh removed

After Applying Patch Border radius issue will solved.

Trac ticket: 59285

Screenshots:
Before Patch: https://prnt.sc/AXe3wMAR7cr9
After Patch : https://prnt.sc/N74p7U-mj6Io

#22 @shailu25
4 months ago

Thanks @poena for feedback.

I have Submitted New PR. (Because some Confliction in Old PR).

I have Removed blank lines & Fixed White Space Issue in style-editor.scss file in new PR

PR: https://github.com/WordPress/wordpress-develop/pull/5977

#23 @poena
4 months ago

Hi

I'm not getting an error message when I apply the patch this time. Now the empty line at the end of the file is:

  • Missing in the .scss file
  • Not missing in the updated .css file after running the build command.

#24 @shailu25
4 months ago

Hi @poena

there is no Empty Line in style-editor.scss in trunk so I have removed empty line

https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentynineteen/style-editor.scss

#25 @poena
4 months ago

  • Keywords commit added

It does: GitHub and trac does not display it.

#26 @poena
4 months ago

  • Keywords needs-testing removed

#27 @SergeyBiryukov
4 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 57579:

Twenty Nineteen: Add border-radius to avatar images in the editor.

This ensures that avatars design in the Post Author or Avatar blocks in the editor matches the front end.

Props pitamdey, shailu25, poena, sabernhardt, balub, sarath.ar, nicolefurlan, harshgajipara, pooja1210.
Fixes #59285.

@SergeyBiryukov commented on PR #5977:


4 months ago
#28

Thanks for the PR! Merged in r57579.

Note: See TracTickets for help on using tickets.