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

[pitamdey]

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.

[pitamdey]

Frontend View Screenshot

[pitamdey]

Editor View Screenshot

[pitamdey]

After applying this solution the issue is resolved

[sabernhardt]

Related: #59253

[balub]

I am able to reproduce the issue

[balub]

Editor side

[balub]

Front end

[sabernhardt]

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

[nicolefurlan]

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?

[sarath.ar]

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

[shailu25]

Updated Patch

[shailu25]

I have updated the Patch as per the requested changes Comment5

[harshgajipara]

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

[harshgajipara]

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

After Applying Patch Border radius issue will solved.

Trac ticket: 59285

[shailu25]

@harshgajipara I have Update Patch.

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

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

[nicolefurlan]

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

cc @pitamdey, @balub, @harshgajipara

[pooja1210]

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!

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.

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

[shailu25]

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

[poena]

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.

[shailu25]

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

[poena]

It does: GitHub and trac does not display it.

[SergeyBiryukov]

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.

Thanks for the PR! Merged in r57579.