Twenty Nineteen: Avatar block size is different in the editor and front

[poena]

The default size for the avatar block is 96. But on the front this displays as 49.5px.
The size is overwritten by the theme CSS:

.avatar {
	border-radius: 100%;
	display: block;
	height: calc(2.25* 1rem);
	min-height: inherit;
	width: calc(2.25* 1rem);
}

When the user changes the size in the block option in the settings panel,
it is not reflected on the front.

Environment

• WordPress: 6.4.3, also tested on 6.5 Beta
• PHP: 8.1.23
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
• Browser: Chrome 122.0.0.0
• OS: macOS
• Theme: Twenty Nineteen 2.7
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Steps to Reproduce

1. Add an avatar block.
2. Duplicate the block and adjust the size to be larger than the default.
3. Duplicate the block again and adjust the size to be smaller than the default.

Expected Results

1. ✅ Avatar size should match the size set in the block control

Actual Results

1. ❌ Avatar size does not match the size set in the block control

[naeemhaque]

Maybe this patch will resolve the issue.

[naeemhaque]

Hello @poena ,
I have added a patch and then I have found the expected result. Maybe this will resolve the issue.
Thank You

[sabernhardt]

The width and height were added to the .avatar class since ​initial commit, and I did not find where those might be necessary.

However, if any avatar image requires those rules, the Avatar block could have its own styles with either .wp-block-avatar .avatar or .wp-block-avatar__image in _blocks.scss.

.wp-block-avatar__image {
  width: auto;
  height: auto;
}

The patch will need to edit an SCSS file, either _media.scss to remove or _blocks.scss to add, and then build the CSS from that.

[naeemhaque]

Updated patch

[naeemhaque]

Hi @sabernhardt ,
Thanks for this feedback. I have updated my patch. And now it's changing from _media.scss and it's build successfully. Now it's working fine.
Thank you.

[karmatosed]

I have tested this a few times and not found it to work, I would therefore like others to test this please and confirm what they get using the patch that is added.

[sakibmd]

I tested changes with the mentioned patch and it resolves this issue.

Bug Report

Description

This report validates whether the indicated patch works as expected.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/60664/60664.2.diff

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 7.4.27
• Server: nginx/1.21.6
• Database: mysqli (Server: 8.0.37 / Client: mysqlnd 7.4.27)
• Browser: Chrome 124.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0

Steps to Reproduce

1. Add an avatar block.
2. Duplicate the block and adjust the size to be larger than the default.
3. Duplicate the block again and adjust the size to be smaller than the default.

Expected Results

✅ Avatar size should match the size set in the block control

Actual Results

✅ Avatar size shows perfectly as expected

[sakibmd]

Here is my screenshot after resolving this issue. @karmatosed please check it out :)

[karmatosed]

I am going to assign to myself this and see if I can get it tested towards possible commit candidate if it works.

[karmatosed]

Committing but as we are now in RC it will be to trunk for 6.7.

[karmatosed]

In 58580:

Twenty Nineteen: Fixes avatar block size inconsistency.

The avatar block size was different between front and editor. This was because the width and height were added to the avatar class.

Props poena, naeemhaque, sabernhardt, sakibmd.
Fixes #60664.

[sabernhardt]

avatars before commit (with WordPress 6.6)

[sabernhardt]

avatars after r58580 (trunk)

[sabernhardt]

I missed that the patch (r58580) increased the size of avatars for the author of each comment (in the theme's template) from 49.5 pixels to 60. The image itself simply extends 10 pixels into the margin on larger screens now, but the author checkbox icon is positioned based on the earlier dimensions.

I could open another ticket to consider adding the 2.25rem dimensions in the comments SCSS (#62096).

Comment author's avatar next to individual comment

• Intrinsic size: 60 by 60 pixels
• Size before: 49.5 by 49.5 (2.25rem by 2.25rem)
• Size after: 60 by 60
• LTR positioning: floating to left with 1rem right margin on small screens, absolute positioning 1rem left of the comment for screens 768px and wider
• Additional: an 18px checkbox icon for the author's avatar is positioned 2.5rem from the left of the avatar image and 3 pixels above; at 768px, it moves 0.75rem to the left of the comment

Comment authors' miniature avatar near the heading

• Intrinsic size: 60 by 60 pixels
• Size before: 33 by 33 (1.5rem by 1.5rem)
• Size after: 33 by 33 (1.5rem by 1.5rem)
• Positioning: each avatar overlaps the previous image by 8 pixels

Avatar block

• Intrinsic size: chosen in block settings, default 96 pixels
• Size before: 49.5 by 49.5 (2.25rem by 2.25rem)
• Size after: matches block settings

Author block

• Intrinsic size: chosen in block settings from 24, 48 (default) or 96
• Size before: 49.5 by 49.5 (2.25rem by 2.25rem)
• Size after: matches block settings

Latest Comments block (from block-library/style.css)

• Intrinsic size: 48 by 48 pixels
• Size before: 55 by 55 (2.5em by 2.5em)
• Size after: 55 by 55 (2.5em by 2.5em)
• LTR positioning: float: left; margin-right: .75em;