Introducing the Atomic Blocks Plugin and Theme

Howdy traveler! My name is Mike McAlister and I run Array Themes, a WordPress theme shop known for crafting pixel-perfect WordPress themes for creative professionals, writers, businesses, and more. We’ve spent the last 10 years perfecting our craft, building products that adhere to strict standards and work out of the box in any install of WordPress.

Although we’ve tried our best with Array to create WordPress products that “just work,” I’ve always wanted a little more from the WordPress editing experience. Historically, creating content in WordPress has consisted of adding your content to the TinyMCE editor box, using shortcodes, using metabox fields, and all kinds of other roundabout and seemingly disconnected ways of composing a post or page. With Array, we’ve done our best to work within these limitations and, in my opinion, we’ve done a good job of that.

Enter Gutenberg

gutenberg editor

Unless you’ve been living under a rock during the past six months (not that there’s anything wrong with that), you’ve almost certainly heard about Gutenberg. Gutenberg is the working-title for the new block-based editor coming to WordPress 5.0, expected in the first half of 2018. I’ll spare you the many, many important details about Gutenberg since we’ll be posting many helpful followup articles about it right here on the Atomic Blocks blog, but what you do need to know is that it will likely be the most drastic change WordPress has ever seen. To keep up with Gutenberg development, check out Gutenberg News, which
collects Gutenberg block tutorials, code snippets, and many other resources. We’ve also written a Beginner’s Guide to Gutenberg to help you get started with the new editor.

inserting a new block

A look at the new block-based editor.

The Gutenberg editor uses “blocks” to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. When we refer to “blocks” we are talking anything that can be inserted into the editor to create content. Basically, anything you insert into the new editor will be in the form of a block. The new editor comes with a handful of default blocks such as paragraph, image, gallery, and more, to help you create standard posts and pages. Developers will also be able to provide more advanced blocks to help you create even more dynamic posts and pages. Eventually, you will be able to craft an entire page using blocks.

Enter Atomic Blocks

atomic blocks wp.org banner

At Array, we quickly realized the power of the new Gutenberg block editor and decided to embrace it from the very beginning. For years, we’ve yearned for a standardized way to make our theme collection even more powerful and compliment the user-focused principals we employ in our WordPress themes. And that’s why we created Atomic Blocks.

Atomic Blocks will provide a beautiful and powerful collection of page-building blocks to help you effortlessly build a website with the new block editor. We’re starting small during the initial launch. Because the new editor is in active development, the underlying code is being tweaked on a daily basis. We’re paying close attention and iterating on our blocks as needed with each update. We’re keeping our initial blocks simple to ensure compatibility with the new editor.

atomic block with block options

Atomic Blocks will launch with just a few blocks: Testimonials, User Profile Box, Inline Notices, Customizable Button, Drop Cap, Accordion, and Spacer & Divider. Each block has various settings that can be tweaked and customized. We will continue to improve these blocks and add more powerful, dynamic blocks as the development of the new editor matures. Eventually, we’ll have an entire suite of blocks you can rely on when building all the things! Check out a quick demo of the current blocks here.

These initial blocks will also provide a good starting point for developers who are looking to get started on their own blocks. We’ll be writing tutorials based on these blocks to help you get started. We’re going to use this early development phase as a learning opportunity for anyone who is following along. We’ll be posting our progress with blocks, updates to the Gutenberg block editor, and any other helpful information we come across.

Download the Atomic Blocks plugin on our homepage or the WordPress.org repo. By downloading via our site, you’ll also get a free WordPress theme and you’ll be added to our newsletter, which will keep you in the loop about new blocks, tutorials, theme updates, and more!

We also made a WordPress theme!

atomic blocks theme

The Atomic Blocks WordPress theme

To further help you get started with the new editor, we’ve also created a new WordPress theme that integrates seamlessly with Gutenberg and the Atomic Blocks plugin. The theme provides fancy, new editor styles that match what you’ll see on the front end of your site. No more guessing what your posts and pages will look like! What you see in your admin is what you’ll see when you hit publish. We’ve added a few more details on our homepage, and you can also check out the help file for more info.

Take the Atomic Blocks theme for a spin on the demo and download it on our homepage. We don’t have this available in the WordPress.org theme repo yet, but it is something we’re looking to do in the coming months.

Looking Forward

We’re really excited about the potential of Atomic Blocks and the new WordPress editor. We think it will empower WordPress users to create even better websites for themselves, while providing a better content-building platform for the WordPress community at large.

Stay up to date with Atomic Blocks by subscribing to our newsletter and following our Twitter feed. Let us know in the comments below what kind of blocks, tutorials and content you’d like to see and we’ll do our best to make it happen!

Posted by Mike McAlister

Founder of Array Themes and Atomic Blocks. When I'm not punching pixels or closing brackets, I'm eating pizza, listening to vinyl, and wandering around taking photos.

  1. Hi Mike. Really nice to see you and Array Themes get ahead of the curve with Gutenberg. Nice to see someone advancing Gutenberg instead of bitching about it all the time.

    Will the Atomic Blocks theme be available on Array Themes too?

    Reply

    1. Hey Marcus,

      We’re going all in on Gutenberg and we’re going to try and make it as easy as possible to build awesome sites with. Atomic Blocks will definitely be compatible with Array Themes. I’ve tested the plugin with several of the themes and it worked great.

      The Atomic Blocks theme will be available at Array shortly! I gotta figure out the best way to deliver it over there. Thanks for the comment!

      Reply

  2. I noticed all of the Atomic Blocks begin with a “AB” and, therefore appear at the beginning of all the blocks. That’s a nice touch Mike!

    Reply

    1. Hey Marcus,

      Yep! I did that so you could just type AB in the search and quickly see all the blocks. It’s the little things.

      Reply

  3. Thank you for this. Vinyl? so very cool.

    Reply

    1. Oh yeah, definitely vinyl. 😉 Let us know what you think of Atomic Blocks, Chip!

      Reply

  4. Maybe I’m not understanding this correctly but I am curious about the decision behind the proprietary Atomic Blocks for users that decide they want to switch themes. If they do not use one of your themes then styling would break? Is there anyway for us to avoid a scenario where we have 1,000s of block plugins more/less coding the same blocks that are dependent on themes specifically styling those blocks? Feels like it gets us into the same issue we see with WP and theme dependent content today…

    Reply

  5. Hi Maria,

    Thanks for your comment! The blocks and styles associated with the blocks are provided by the plugin, not the theme, so you’ll be able to take your blocks and styling with you to another theme. They’ll be nice and portable.

    However, in Gutenberg, the theme is responsible for doing some of the styling for layouts. For example, adding support for wide and full-width content is done in the theme, so you would need a theme that took advantage of this to get the most of of some blocks.

    Just as we have with our Array Themes, we’re making sure the customer is in the driver’s seat and has complete control of their content and blocks. We want you to have the best site on the planet and not be locked into any particular product or theme.

    Hope that helps clear it up a bit!

    Reply

  6. Thibault de Changy June 21, 2018 at 2:43 pm

    Engaging article.
    While I discover all this nice potential coming I am also curious to know if this plugin & theme will remain free. What can we be waiting for ? Is this a community driven approach that deserves your premium themes but will remain free ?

    Thanks for that nice approach.

    Reply

    1. Hi there,

      The theme will always be free. In fact, it’s going to be available via the official WordPress repo shortly. The base plugin will remain free as well, but we do plan on offering premium blocks eventually. The blocks available in the plugin on WordPress.org will remain free. Hope that helps!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *