Comments (3)
bobbingwide
commented on September 24, 2024
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.
from oik-blocks.
bobbingwide
commented on September 24, 2024
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
from oik-blocks.
bobbingwide
commented on September 24, 2024
Having corrected blockicons I also needed to change blockinfo to support the additional CSS class svg64.
from oik-blocks.
Related Issues (20)
- Improve the Block info block to display a single block using same format as block list HOT 1
- Since Gutenberg v8.8.0 oik-blocks doesn't list core-embed blocks HOT 4
- Block validation failed when using the block inserter HOT 2
- Dashicons not being enqueued for logged out users HOT 2
- Fatal error: Uncaught Error: Call to undefined function bw_get_field_names() HOT 1
- Add `oik-block/blockstyles` block to display information about a block's styling
- Add new Fields to the Fields block: post_date, post_modified and author_name HOT 1
- Uncaught Error: Call to undefined function is_plugin_active() HOT 3
- Update blocks to build using wp-scripts, register with block.json. Test with WordPress 6.5 HOT 8
- Fatal error: Uncaught Error: Call to undefined function bw_load_plugin_textdomain()
- Block list block shows multiple core/navigation-link variations for WordPress 5.8 but not 5.7.2 HOT 7
- Block list block not showing icons with Gutenberg 11.9.0 HOT 5
- Visibility issues for some icons HOT 4
- Icons for Qubely's blocks appear very large
- Enable easier copy to clipboard of block list text HOT 1
- blocklist - Don't display the current theme's template variations HOT 1
- WSOD editing Jetpack plugin on jetpack.wp.a2z and jetpack.wp-a2z.org. Jetpack 11.3.1 HOT 13
- Blocklist - Add "Determine updates to apply" toggle to improve the process of detecting block changes HOT 1
- Support PHP 8.1 and PHP 8.2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oik-blocks.