Make WordPress Core

Opened 8 weeks ago

Last modified 11 days ago

#60664 new defect (bug)

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

Reported by: poena's profile poena Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info has-patch needs-testing
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 (2)

60664.diff (431 bytes) - added by naeemhaque 8 weeks ago.
Maybe this patch will resolve the issue.
60664.2.diff (1005 bytes) - added by naeemhaque 8 weeks ago.
Updated patch

Download all attachments as: .zip

Change History (7)

#1 @poena
8 weeks ago

  • Keywords has-testing-info needs-patch added

@naeemhaque
8 weeks ago

Maybe this patch will resolve the issue.

#2 @naeemhaque
8 weeks 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
8 weeks 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
8 weeks ago

Updated patch

#4 @naeemhaque
8 weeks 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
11 days ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release
Note: See TracTickets for help on using tickets.