ndiego / icon-block

Effortlessly add SVG icons and graphics to your website.
https://nickdiego.com/projects/icon-block/
GNU General Public License v2.0
104 stars 14 forks source link

Horizontal Padding makes icon disappear (after first making the icon tiny) #44

Closed MadtownLems closed 4 months ago

MadtownLems commented 4 months ago

I was playing with adding Padding to an Icon with a background color to increase the colored circle around it. Vertical padding seems to work as expected, but horizontal padding makes the icon disappear.

2024-05-02 16_06_50-Window

ndiego commented 4 months ago

This is expected because the icon container is contained by the width control. In hindsight, the width would have applied to the icon and not the container, but there were some major technical hurdles with this approach, and changing it now would be a pretty massive breaking change.

The padding "breaking out" of the container when set to be larger than the width is annoying, but it's an inherent characteristic of CSS.

MadtownLems commented 4 months ago

Makes sense. In case anyone stumbles on this, here's what we're doing to disable Padding, since I can't really see much use to supporting it given how it works.

`function ext_icon_block_modifier_filter_metadata_registration( $metadata ) {

if ( $metadata['name'] != 'outermost/icon-block' ) {
    return $metadata;
}

$metadata['supports']['spacing']['padding'] = false;

return $metadata;

}; add_filter( 'block_type_metadata', 'ext_icon_block_modifier_filter_metadata_registration' );`

ndiego commented 4 months ago

Yeah not everyone needs padding, but the Playground demo has a nice example of how useful it can be.

MadtownLems commented 4 months ago

Wow, that looks to behave very differently than our theme (and my testing of TT4, which is what my screenshots in the initial ticket are using). It's also interesting how different the back and front ends look in the playground:

Back: 2024-05-03 11_00_25-Window

Front: 2024-05-03 11_00_33-Window

ndiego commented 4 months ago

Looks like something is up with your Playground instance. Styles don't look like they are loading based on the grey inserter. This is what I am seeing and what it should look like:

Editor Frontend
image image
MadtownLems commented 4 months ago

Looks like something is up with your Playground instance. Styles don't look like they are loading based on the grey inserter.

That checks out. I don't use it much, so not sure what's causing that. Tried disabling adblockers but still no luck.

However, this has all been super helpful. I'm learning that Padding CAN be useful, but it will typically require growing the Icon size from the default in order to not have it disappear (crunched by the padding). Thanks so much as always.