Blocksy WordPress Theme Provides a Solid Block-Editor Experience

Screeshot of the Blocksy theme blog posts page.
Screenshot of the Blocksy theme blog posts page.

Creative Themes dropped version 1.6.8 of its Blocksy WordPress theme yesterday. It was an update to a theme that is quickly becoming popular, having garnered 58 five-star reviews and one thousand active installs since it first went live in the WordPress theme directory. The theme is specifically built to work with the block editor and is a nice example of what is currently possible with blocks.

Blocksy is billed as a general-purpose theme and also works with other popular page builders like Elementor, Beaver Builder, and Visual Composer. The truth-test is whether it handles the block editor, especially given its primary audience (it is named Blocksy, after all). Aside from a few trivial quirks, the theme handled nearly every bit of test content I threw at it.

Blocksy is one of the better-designed free themes for the block editor that I have seen.

I want to use this theme for a project. Unfortunately, I have no site to use it on at the moment. I do not say this about many free, repository-hosted WordPress themes. The quality of work is on par with themes from the majority of commercial theme shops I have tested or used over the years.

The theme is not without a few issues, which we’ll get to, but it is a solid offering.

Block Design

Screenshot of post with block designs from the Blocksy theme.
A few block design examples from the theme.

With a name like Blocksy, I went into this review with a mindset that the theme better handle every test block I dropped into the block editor with grace. I wanted to make sure it lived up to its name.

I am happy to report that it handles block design as good as or better than most themes designed for showcasing the block system. It adds just enough stylistic flair, such as a unique pull-quote design, without getting in the way of the content.

One problem area is the font in the editor does not match the font on the front end completely. This is a minor issue that should be easily fixed in an update.

You can find some good examples of block design on the theme’s Gutenberg demo page.

Block Editor Sidebar

Screenshot of the Blocksy theme editor sidebar.
Custom block editor sidebar for post meta.

The latest update of the theme includes additional integration with the block editor. The team moved its old meta box, which sat below the post content editor, to a new sidebar panel. This change is refreshing.

I did not know the meta box existed until the theme developers pointed out this change in feature (I first started testing the previous version of the theme). At this point, I never look at the bottom of the block editor for meta boxes. I expect any additional settings to be placed firmly in the right sidebar area. I applaud this move. It could confuse old theme users when updating, but it feels more natural in its new home.

The team has done a nice job with this custom sidebar for the most part. The biggest issue is with the button for switching to it. By using both an icon and the “Page Settings” text, it uses more room than necessary. To fit in line with the existing UI, it should simply display an icon. The button text is also hard to read when selected, which is a minor CSS issue that can be corrected in an update.

Customizer Options

Screenshot of the Blocksy theme's customizer control panel design.
Custom-designed customizer control panel.

For users who like to have full control over the site’s display, this theme won’t disappoint. For users who dislike by many options, the number of design settings will likely feel overwhelming.

Blocksy has more design options than most people will ever need. Some options, such as letter-spacing and line-height controls for fonts may be going overboard. Ideally, those things would be automatically adjusted based on the chosen font family.

The theme also uses a custom design for the customizer control panel. In general, the custom design looks nice. However, is not good practice for themes to customize a shared WordPress UI element. Plugins with options in the customizer could break. It is best to stick with the default design.

Blocksy Companion Plugin

The theme promotes an additional plugin named Blocksy Companion. The add-on plugin provides users with additional widgets, a cookies-consent feature for the front end, and integrations with Mailchimp, Instagram, and WooCommerce. It also provides an avenue for importing custom-made demo content.

Most of the companion plugin’s features are fairly routine compared to similar themes in the WordPress theme repository. The cookies-consent feature is something I haven’t seen before as part of a theme add-on plugin.

My biggest complaint with the plugin is that it makes the “Blocksy” admin menu item a top-level item. It is a waste of valuable real estate in an already-cluttered admin menu. Plus, there is no good reason for a single theme/plugin screen to take a top-level spot when it has no sub-menus.

How Does the Code Look?

If I were describing the code in one phrase: average but gets the job done.

The theme has a lot of PHP code. Most of it is dropped into a single /inc folder and not organized nearly as well as it could be. It feels like a giant mish-mash of functions with almost non-existent inline documentation for most of them. It’s not something a developer who is not intimately familiar with the theme would want to dive into.

This is not an argument that the theme’s code is bad. It passed the official WordPress.org review process and made it into the theme directory, so it is at least doing the minimum necessary. It’s simply unimpressive, which is par for the course when it comes to most WordPress themes. Code architecture seems like an afterthought, which could make it tougher to maintain over the long haul. With a theme that has as much code as this one, this is more important than it is for simpler themes. It can also easily be remedied with a week or so of dev time strictly devoted to architecture.

Final Thoughts

Blocksy is a well-designed theme that does the job it sets out to do. It is ideal for users who are working with the block editor or a third-party page builder. The theme is packed with far more options than I could cover in this review. If customizability is your thing, you will likely enjoy it.

The team shared some of their future ideas. They have plans to add conditional headers, footers, and sidebars; a sticky header; AMP support; and more. They seem excited about the future of the theme.

Overall, I would recommend this theme for users who want a clean, relatively fast, block-ready WordPress theme.

22

22 responses to “Blocksy WordPress Theme Provides a Solid Block-Editor Experience”

    • Hey Henner, a couple of points in regard to your last remark:

      The compiler Blocksy uses (which is just webpack and sass wrapped in a common package) is not private at all, in fact you can get theme’s code, change the JavaScript files and run the build process yourself to see the changes applied in the theme.
      While the options are implemented with React (and JSX), they are configured with PHP. All of the options live in inc/options/* folder of the theme, if you care enough to take a look. And there’s nothing minified/compiled there. Of course we won’t suggest to edit them yourself. I’m just pointing out that nothing’s obscured.
      While the Customizer may look like it has too many options at first, in reality everything’s really tought out very slowly and carefully. Every option is located exactly where it needs to be, with respect to the site elements hierarchy. Happy to hear back from you what you’ve considered to be redundant from the Customizer, to be able to have a productive discussion.

    • Hey Peter,
      At the moment there is only the free version but we do plan to release a premium one later.
      To give you an idea, here are only a few of the premium features Blocksy will have: conditional headers, conditional footers, conditional & custom sidebars, sticky header, more header & footer elements, content blocks & hooks, portfolio extension, responsive/adaptive images, custom header & footer scripts, AMP full support, mega menu extension, advanced blogging extension, advanced Gutenberg blocks extension.

      Cheers ;)

  1. To be honest, from my perspective the article/ review is very shallow, unbalanced and some findings are misleading. I probably tried 50 free gutenberg enabled themes, and from my view not one is as well done as Blocksy, not in a free version, and most of them not as a paid version.

    Design and design options:
    My impression is, that Blocksy stands out from the crowd with carefully designed elements (e.g. no clumpsy icons as most other themes), and the right options, to enable clients to customize their site to a design to make them stand out of the crowd too. A good example are the header and footer areas, where every row section and every element could be finetuned if needed. As it is top down structured in the customizer, there is no overload, and everyone only needs to step down the level he wants, that’s fine.

    Code quality:
    What means “code quality”? Number of PHP files, extensive commenting? A much better and comprehencive analysis of code quality are the results with https://yellowlab.tools/, and there blocksy delivers good results in terms of clean and performant coding.

    Discussing at length the additional entry blocksy companion is causing, is like to judge the qualtity and design of a new car on the fact, what kind of floor carpets are with it.

    cheers

    • Which parts of the review do you think are unbalanced and misleading? I don’t write fluff pieces to promote people’s projects in a review, even if it’s a theme that I love. I’m going to point out areas that could be improved alongside the good stuff.

      As for code quality, tools only get you so far. They’re an essential part of the development process, but they cannot completely replace the human element.

      The Blocksy Companion plugin was provided to me as part of the review. It is also promoted within the theme via an admin notice.

  2. First, Justin, awesome review :)
    Really a beautiful theme, that can help change the “negative vibe” around Gutenberg. I have not been a fan of Gutenberg – but I’ve recently started using it on my own website, just to “keep up” – and I must say, it has really become a pleasure using it!

    Let’s hope more themes like this emerges – I’ll book mark this for now :D

  3. I’m a huge fan of the Blocksy theme, and have been playing with it since november. The developers are listening and extremely supportive. I’ve been throwing issues and request at them, regarding html validation, page speed scores, privacy, accessibility, really nitty gritty stuff that isn’t a priority to most theme users – and they took every single request seriously and implemented a fix or a feature where appropriate.

    Some more highlights:
    – usage of CSS Custom Properties (variables) makes it a absolute breeze to apply custom changes should there not be an option in the customizer.
    – the same goes with the usage of CSS Grid. So easy to mod the layout.
    – NO WebAIM accessibility errors. Not many themes can say that.
    – Built in ajax search
    – Actually useful widgets in the optional Blocksy Companion
    – Great speeds out of the box, lean code.
    – Pretty Gutenberg layouts out of the box, again, easy to customize.
    – Valid HTML
    – Easy to translate

    I’ve made two production sites with Blocksy, https://neuc.dk/ and my personal blog using only Blocksy and core Gutenberg for content. A tiny bit of custom CSS for local font hosting and image branding, that’s it. No page builders. No content related plugins, only supportive (cache, firewall, seo).

    Should you feel like playing around with the Blocksy options, you’re free to download and import a xml demo data set containing dummy Gutenberg posts, tags, categories and menus at https://labs.oldrup.net/blocksy/ It’s a standard WordPress export, royalty free images provided by Pexels.

    Bjarne Oldrup

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.