WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 7 weeks ago

#53693 new defect (bug)

Block icons too big on 5.8 widgets page

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

#1 @desrosj
3 months 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
3 months ago

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

#3 @ocean90
3 months ago

#53409 was marked as a duplicate.

#4 @ocean90
3 months ago

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

#5 @mnelson4
3 months 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.


2 months ago

#7 @desrosj
7 weeks 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.

Note: See TracTickets for help on using tickets.