Make WordPress Core

Opened 5 months ago

Closed 4 weeks ago

#60664 closed defect (bug) (fixed)

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

Reported by: poena's profile poena Owned by: karmatosed's profile karmatosed
Milestone: 6.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info has-patch has-screenshots commit
Focuses: Cc:

Description

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

Attachments (3)

60664.diff (431 bytes) - added by naeemhaque 5 months ago.
Maybe this patch will resolve the issue.
60664.2.diff (1005 bytes) - added by naeemhaque 5 months ago.
Updated patch
frontend.png (144.9 KB) - added by sakibmd 2 months ago.
Here is my screenshot after resolving this issue. @karmatosed please check it out :)

Download all attachments as: .zip

Change History (15)

#1 @poena
5 months ago

  • Keywords has-testing-info needs-patch added

@naeemhaque
5 months ago

Maybe this patch will resolve the issue.

#2 @naeemhaque
5 months ago

  • Keywords has-patch added; needs-patch removed

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

#3 @sabernhardt
5 months ago

  • Keywords changes-requested added

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
5 months ago

Updated patch

#4 @naeemhaque
5 months ago

  • Keywords changes-requested removed

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.

#5 @karmatosed
3 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release

#6 @karmatosed
2 months ago

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.

#7 @sakibmd
2 months ago

  • Keywords has-screenshots added; needs-testing removed

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
2 months ago

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

#8 @karmatosed
4 weeks ago

  • Owner set to karmatosed
  • Status changed from new to assigned

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

#9 @karmatosed
4 weeks ago

  • Milestone changed from Future Release to 6.7

#10 @karmatosed
4 weeks ago

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

#11 @karmatosed
4 weeks ago

  • Keywords commit added

#12 @karmatosed
4 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.