CSS Crafter – a Review

CSS Crafter - Homepage Landing Page View
CSS Crafter – Homepage Landing Page View

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.

CSS Crafter Categories
CSS Crafter Categories

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.

Code Snippet for Pasting into the Block Editor
Code Snippet for Pasting into 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.

CSS Crafter Block CSS
CSS Crafter Block CSS

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.

Adding CSS Crafter Snippet to Block Editor

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.

Ronald Huereca
Ronald Huereca

Ronald Huereca

Ronald has been part of the WordPress community since 2006, starting off writing and eventually diving into WordPress plugin development and writing tutorials and opinionated pieces.

No stranger to controversy and opinionated takes on tough topics, Ronald writes honestly when he covers a topic.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ronald Huereca
MediaRon - Ronald Huereca

Ronald created MediaRon in 2011 and has more than fifteen years of releasing free and paid WordPress plugins.

Quick Links

Say Hi