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

[pitamdey]

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

[pitamdey]

screenshot for better understanding

[pitamdey]

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

[sabernhardt]

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]

Updated Patch

[shailu25]

I have Updated Patch as per Suggested.

After Patch:

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

[poena]

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

[sabernhardt]

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.

[poena]

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.

[poena]

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]

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

[sabernhardt]

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

[poena]

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.

[SergeyBiryukov]

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.