[wp-trac] [WordPress Trac] #53693: Block icons too big on 5.8 widgets page

[WordPress Trac]

#53693: Block icons too big on 5.8 widgets page
---------------------------------------+---------------------
 Reporter:  mnelson4                   |       Owner:  (none)
     Type:  defect (bug)               |      Status:  new
 Priority:  normal                     |   Milestone:  5.8.1
Component:  Widgets                    |     Version:  trunk
 Severity:  normal                     |  Resolution:
 Keywords:  needs-testing needs-patch  |     Focuses:  ui
---------------------------------------+---------------------

Comment (by mnelson4):

 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 [https://developer.wordpress.org/block-editor
 /reference-guides/block-api/block-registration/#icon-optional 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53693#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform