Opened 4 years ago
Last modified 3 years ago
#53693 new defect (bug)
Block icons too big on 5.8 widgets page
Reported by: |
|
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
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)
#4
@
4 years ago
- Keywords needs-patch added; reporter-feedback removed
- Milestone changed from Awaiting Review to 5.8.1
#5
@
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.
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.