Phi Phan Launches a Separator Block With an Icon Option – WP Tavern
Lower than per week after launching Block Enhancements, Phi Phan has launched one other mission: Icon Separator. It’s a block plugin for creating customized dividers with an SVG icon.
“I’ve tried to assist icons within the core/separator,” Phan mentioned after we final spoke about including icons to core blocks. “But it surely requires altering the markup. So I could create a brand new tiny block only for it.” Now, he has checked at the least one of many many concepts he talked about off the to-do record.
Plugins that do one factor and do it effectively are usually my favourite sorts of extensions, and Icon Separator is not any completely different. It is usually the great thing about the block system itself. It was designed round permitting customers to stay small elements anyplace.
When first inserting the Icon Separator block, it’ll seem very similar to another run-of-the-mill separator. It outputs a easy horizontal line throughout the display screen:
Customers are welcome to make use of it in its default state, however that will not be a lot enjoyable. This block is all in regards to the icon.
The plugin bundles over 3,500 icons from the WordPress, Bootstrap, and Ionicons libraries, giving customers a lot to select from. It seems to be a carryover from Phan’s Block Enhancements plugin—it might make sense to reuse the identical code. The block additionally permits customers to enter SVG code for customized icons.
It didn’t take lengthy to select an icon and start customizing the separator output within the editor:
The plugin has loads of choices that enable customers to make it their very own. Moreover deciding on an icon, they will customise its fill and stroke colours, dimension, spacing, place, and alignment.
The block additionally has choices for customizing the separator line itself, together with strong, dashed, and dotted kinds. Customers can change its alignment, width, colour, and extra.
This block is a perfect use case for the reusable block system in WordPress. Assuming customers needed to make use of the identical separator design throughout their web site, it might make sense to design it as soon as and save a duplicate to be used in all places else it’s wanted.
I’m barely upset that the plugin doesn’t use the <hr> HTML ingredient. I had grown excited when final talking to Phan. I needed to see how somebody would deal with the issue this plugin does, however I anticipated it to be solved with the semantic <hr>. A part of this was simply curiosity as a fellow developer and designer, realizing the restrictions it might current as a generic block to be used with any theme design.
Phan took the less-headache-inducing route of utilizing a wrapper <div> and putting the icon <svg> code into it. That opened way more prospects, and the block might be the higher for it.
Nevertheless, I needed to notice that this block will not be splendid for many who want to make use of a correct horizontal rule of their content material. The <hr> ingredient is supposed for marking thematic breaks. It’s higher to stay to the core Separator block in these instances.
In eventualities the place the divider is a design ingredient moderately than a break within the content material, go wild. The Icon Separator block has loads of choices.
