Add styles to the block icon block ( oik-blocks/blockicon )

[bobbingwide]

When I first tried to add styles to the block icon block I managed to write some CSS to display the icon with 4 different sizes:

Additional CSS class	size
	20px - default
svg64	64px
svg100	100px
svg150	150px

It worked if I used the additional CSS class above but not when the class name was prefixed with is-style. eg is-style-svg64.

On reinvestigation - after finding out how to style paragraphs, list and groups into mutiple columns - I found some CSS that enables the is-style-svg64 CSS to take effect in the editor. It overrides the WordPress core styling for the .block-editor-block-icon class, setting the display to inline ( was flex ).

/**
 Override default styling for block icons.
*/
.wp-block-oik-block-blockicon .block-editor-block-icon {
  display: inline;
}

Requirement

• [ ] Provide styles as an easy way to choose the size of the icons displayed by oik-blocks/blockicon block
• [ ] Default to 64px
• [ ] Change the smallest size from 20px to 24px

Solution

• [ ] As above

Style class	Style label	Size
is-style-svg24	24px	24px
is-style-svg64 ( is-style-default )	64px	64px
is-style-svg100	100px	100px
is-style-svg150	150px	150px

[bobbingwide]

These styles didn't appear to work with the Fizzie FSE theme.

With Genesis-a2z the styles are in the HTML as:

<link rel='stylesheet' id='oik_blocks-blocks-css-css'  href='https://wp.a2z/wp-content/plugins/oik-blocks/blocks/build/css/blocks.style.css?ver=1611920674' type='text/css' media='all' />

and the HTML is

<div class="wp-block-oik-block-blockicon is-style-svg24"><span class="block-editor-block-icon"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"><path d="M19 8h-1V6h-5v2h-2V6H6v2H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm.5 10c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-8c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v8z"></path></svg></span></div>

With Fizzie it's the same thing - with a different URL

<link rel='stylesheet' id='oik_blocks-blocks-css-css'  href='https://blocks.wp.a2z/wp-content/plugins/oik-blocks/blocks/build/css/blocks.style.css?ver=1611920674' type='text/css' media='all' />

and the HTML is

<div class="wp-block-oik-block-blockicon svg64 is-style-svg24"><span class="block-editor-block-icon"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true"><path d="M19 8h-1V6h-5v2h-2V6H6v2H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm.5 10c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-8c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v8z"></path></svg></span></div>

The svg64 class was being added in the Additional CSS class(es) field. Fix: Remove the extra svg64 class from the Additional CSS class(es) field for each block.

[bobbingwide]

The solution works for icons which were svg files, but not for dashicons. Additional CSS is required.

Blocks for which the icons do not respond to different styles:

• core/text-columns - (deprecated)
• oik-bbw/csv
• oik-bbw/dashicon
• oik-bbw/github
• oik-bbw/search
• oik-bbw/wp
• oik-block/address
• oik-block/countdown
• oik-block/css
• oik-block/csv
• oik-block/dashicon
• oik-block/fields
• oik-block/follow-me
• oik-block/geshi
• oik-block/github
• oik-block/googlemap
• oik-block/nivo
• oik-block/person
• oik-block/search
• oik-block/shortcode-block
• oik-block/uk-tides
• oik-block/wp
• oik-css/css
• oik-css/geshi
• oik-sb/children
• al the oik blocks
• all the Yoast blocks

[bobbingwide]

Having corrected blockicons I also needed to change blockinfo to support the additional CSS class svg64.