CSS Crafter – a Review

CSS Crafter is a collection of hand-crafted CSS snippets that work with the Blocks CSS WordPress plugin. Created by friend Gobinda Tarafdar, I was intrigued by the initial concept and wondered why I had to install a third-party plugin (and block suite) to get the items to function.

I have enough block debt on this site, so installing another plugin was out of the question. I did all of my testing on a test site.

What is CSS Crafter?

CSS Crafter is a collection of snippets you can use in the block editor to mimic the styles presented.

At the time of this writing, there are six major categories:

1. Buttons
2. Cards
3. Particles
4. Navigation Menus
5. Headings
6. List Block styles

When browsing a category, you’re presented with several variations. If you like one, you can expand it to get some code to copy for the block editor.

Please note that to use CSS Crafter, you must install the Blocks CSS WordPress plugin.

A quick overview of the Blocks CSS plugin

I’m not a huge fan of installing a WordPress plugin to install any of the available snippets.

The plugin also appears to come with 11 blocks, but when I activated the plugin, I saw no settings and saw no new blocks. It’s a bit confusing, to be honest. Thankfully there is a guide to help walk you through the more confusing parts of the process.

After some digging, I realized what the Block CSS plugin enables: you can add customizable CSS at the block level.

This is where CSS Crafter comes in. Crafter allows pastable snippets that add style to normal WordPress blocks using the block plugin’s extra CSS rules.

Adding the CSS to the block editor

It’s as simple as copying the code from CSS Crafter and pasting it into the block editor. Here’s a quick demo video below.

The card snippet I pasted in assumed a rather small max-width. It would be nice if the pattern included this when pasting in so as not to guess why the images seem stretched.

Final thoughts on CSS Crafter

Part of CSS Crafter are elements such as buttons, headings, and particle effects. These seem a bit artsy/gimmicky for my tastes. I think the demos for the list items could showcase a few more variations, with text wrapping to show the indentation and line spacing of the items.

I do like the variations of the card layouts and I think this showcases what can be done beautifully with CSS Crafter. More layouts and categories like this please.

My only critique is to show what the assumed max-width is for the layouts or wrap these in a group block with a max-width.

I’m not a big fan of installing a plugin to achieve these layouts, but I do think there is potential here for a wealth of patterns that support the Blocks CSS Plugin. I think patterns that focus on layouts will be more useful in the long run.