Make WordPress Core

Opened 8 months ago

Closed 3 months ago

#59253 closed defect (bug) (fixed)

Twenty Sixteen: Add border-radius to avatar images in the editor with Post Author or Avatar blocks

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

Description

Hi Team,
In Theme Twenty-Sixteen, 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 border-radius: 50% on the frontend side. They should be same in both the side

Attachments (5)

Editor.png (211.4 KB) - added by pitamdey 8 months ago.
screenshot for better understanding
Frontend.png (165.6 KB) - added by pitamdey 8 months ago.
59253.patch (418 bytes) - added by pitamdey 8 months ago.
We can remove the border radius from the frontend side. As in others theme their is no border radius in both side editor as well as frontend
59253.2.patch (672 bytes) - added by shailu25 8 months ago.
Updated Patch
59253.3.patch (623 bytes) - added by sabernhardt 3 months ago.
mentioning both blocks in the comment and using a tab instead of spaces

Download all attachments as: .zip

Change History (15)

@pitamdey
8 months ago

screenshot for better understanding

@pitamdey
8 months ago

#1 @mukesh27
8 months ago

  • Keywords needs-patch added

@pitamdey
8 months ago

We can remove the border radius from the frontend side. As in others theme their is no border radius in both side editor as well as frontend

#2 @sabernhardt
8 months ago

  • Severity changed from normal to minor

The front end needs to keep the border-radius. It has been part of the theme's style for more than seven years, since before the block editor.

I expect the Post Author and/or Avatar blocks are rarely used with any 'classic' themes such as Twenty Sixteen, but it may be worth adding a few lines to editor-blocks.css to round the corners in the editor too.

.editor-styles-wrapper .avatar,
.wp-block-post-author__avatar img {
  border-radius: 50%;
}

@shailu25
8 months ago

Updated Patch

#3 @shailu25
8 months ago

  • Keywords has-patch added; needs-patch removed

I have Updated Patch as per Suggested.

After Patch:

Backend : https://prnt.sc/EnFiTk0sn_AD
Frontend: https://prnt.sc/4pkdUFe0OqWu

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

#4 @poena
8 months ago

  • Keywords 2nd-opinion added

I think we should enable the border theme support in Twenty Sixteen and try to combine all border issues into one.

Even with add_theme_support( 'border' ); added, the theme would need to have some CSS for the default style. This CSS should only be applied if the users did not select a custom border.

Related:
Pull quote border:
https://core.trac.wordpress.org/ticket/55974#comment:28

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

#5 @sabernhardt
7 months ago

  • Keywords 2nd-opinion removed

Adding theme support would be an enhancement (separate ticket). Twenty Sixteen's styles do not support the border width or theme colors. And if the support is added, the Avatar block image would get the custom radius as an inline style and override what is in the stylesheet. The Post Author block does not seem to have the radius control even when declaring theme support.

#6 @poena
7 months ago

The Post Author block does not seem to have the radius control even when declaring theme support.

You are absolutely right, I missed that, only the avatar block does. If the border support was added to the post author block, it also would not be on the avatar but the whole container div.

#7 @poena
7 months ago

The solution works, but the patch does not apply cleanly when I attempt to use the svn commands,
because it does not seem to be created from correct directory.
The a and b here are unexpected.

--- a/src/wp-content/themes/twentysixteen/css/editor-blocks.css
+++ b/src/wp-content/themes/twentysixteen/css/editor-blocks.css

I suppose this is easy enough for a committer to work around but I don't know what the practice is for these cases.

@sabernhardt
3 months ago

mentioning both blocks in the comment and using a tab instead of spaces

#8 @sabernhardt
3 months ago

  • Milestone changed from Awaiting Review to 6.5
  • Summary changed from Twenty Sixteen : Avatar design is different in editor and frontend side in Post Author Block to Twenty Sixteen: Add border-radius to avatar images in the editor with Post Author or Avatar blocks

It would be good to commit this at the same time as #59285.

#9 @poena
3 months ago

  • Keywords commit added

I have re-tested using patch 59253.3.patch on WordPress 6.5-alpha-56966-src and it solves the problem. The avatars in the editor and front looks the same.

#10 @SergeyBiryukov
3 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 57577:

Twenty Sixteen: 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, sabernhardt, poena, shailu25.
Fixes #59253.

Note: See TracTickets for help on using tickets.