WordPress.org

Make WordPress Core

Opened 13 days ago

Last modified 12 days ago

#53693 new defect (bug)

Block icons too big on 5.8 widgets page

Reported by: mnelson4 Owned by:
Milestone: 5.8.1 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 (5)

#1 @desrosj
13 days 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
12 days ago

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

#3 @ocean90
12 days ago

#53409 was marked as a duplicate.

#4 @ocean90
12 days ago

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

#5 @mnelson4
12 days 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.

Note: See TracTickets for help on using tickets.