Make WordPress Core

Opened 4 years ago

Last modified 3 years ago

#53693 new defect (bug)

Block icons too big on 5.8 widgets page

Reported by: mnelson4's profile mnelson4 Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.8
Component: Widgets Keywords: needs-testing needs-patch
Focuses: ui Cc:

Description

Our plugin adds a block using an SVG image which still looks fine on the blocks page. But on the widgets page introduced in WP 5.8, our block's icon is way too big and spills into the surrounding areas.
See https://i.imgur.com/ut0vOSv.png

On the post editing page, where the icon still looks fine, I see this critical CSS:

.block-editor__container img {
    max-width: 100%;
    height: auto;
}

It seems on the widgets page there is no block-editor__container so the styles don't apply, and icons like ours are unstyled.

Change History (8)

#1 @desrosj
4 years ago

  • Keywords needs-testing reporter-feedback added

Wondering if this is because of [51388] and the editor package not being loaded on the widget screen.

@mnelson4 Could you test this within the Customizer as well? Curious if there are differences in the behavior.

#2 @mnelson4
4 years ago

Thanks; this issue is *not* happening in the 5.8 customizer

#3 @ocean90
4 years ago

#53409 was marked as a duplicate.

#4 @ocean90
4 years ago

  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 5.8.1

#5 @mnelson4
4 years ago

A quickfix I made was adding the following CSS to our plugin on the widgets page:

.blocks-widgets-container img{
    max-width:100%;
    height:auto;
}

But we were concerned that might affect other plugins' block icons, so we checked we were registering the icons in the recommended way.

This is how we were registering the icon in our Javascript code:

const iconEl = el('img', {
	src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0 ...,
});
registerBlockType('yarpp/yarpp-block', {
	title: __('YARPP Block', 'yarpp'),
	description: __('Display related posts by YARPP', 'yarpp'),
	category: 'yarpp',
	icon: iconEl,
	...
});

Using an img element didn't seem very standard, so we've switched it for an svg element like so...

const iconEl = el(
		'svg',
		{ width: '24px', height: '24px', viewBox: '0 0 145 191' },
		el(
			'g',
			{ stroke: 'none', strokeWidth: '1', fill: 'none', fillRule: 'evenodd' },
			el( ...
);
registerBlockType('yarpp/yarpp-block', {
	title: __('YARPP Block', 'yarpp'),
	escription: __('Display related posts by YARPP', 'yarpp'),
	category: 'yarpp',
	icon: iconEl,
	...
)

which has also fixed the issue.

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


4 years ago

#7 @desrosj
3 years ago

  • Milestone changed from 5.8.1 to 5.8.2

WordPress 5.8.1 RC is due out in less than 24 hours. Because no fix has been created for this, I'm going to punt to the next minor release.

#8 @circlecube
3 years ago

  • Milestone changed from 5.8.2 to Future Release

There's no working fix yet and 5.8.2 RC is due out in less than 24 hours. I'm going to punt this to a future release.

Note: See TracTickets for help on using tickets.