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.