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

  7. Congrats on this beautiful combo. I like the clean approach you took with the theme. The only thing I’m missing is a template with a sidebar since I’m depending on some sidebar widgets. Any chance there will be a sidebar in the future?

    Reply

    1. Hi Larry,

      We definitely will have a sidebar solution in the future. There are some technical considerations about sidebars in the new style of page building with blocks. Where are you looking to add a sidebar? A post, page, blog index?

      The Gutenberg team is working through some considerations about sidebars that may help us determine how to do them going forward. I don’t want to necessarily start adding sidebars like the old style themes because we’re trying to look forward with Atomic Blocks. This is a good opportunity to rethink sidebars and how/if we implement them. There’s a good amount of research that says sidebars are more trouble than they’re worth for visitors, depending on their use.

      I’ll take a look at maybe doing this in a template so there is at least basic support, but I don’t think you’d be able to apply a template to a blog index. So it would be limited to pages basically.

      Reply

  8. Hello and thank you for a new experience!

    I am testing the possibilities and enjoy the new ways to create posts and pages. As a page-builder-user for long time (DIVI) I love the light and clear approach of Gutenberg and your enhancements

    I miss the option “to not show” the featured image in the post, or I will create a child-theme. Will you offer a child-theme-pack in the future?

    What are your recommendations for child-themes?

    Also waiting for sidebars ;=)

    Keep on with the good work!

    Reply

    1. Hi Connie,

      Thanks for checking out Atomic Blocks! We don’t have an option in the theme to hide the featured image just yet, but that’s a good suggestion. We’ll have a child theme available for the parent theme shortly, thanks for the reminder!

      Reply

  9. Fantastic and fast theme. I like the approach of fully embracing Gutenberg. And the way of getting rid of thousands of page builders and plugins etc.
    What I was thinking about: I guess this site (atomicblocks.com) is also built with the atomic blocks theme. And it looks stunnig. Especially the header part here looks fantastic, whereas this part with the original settings of the theme always look a little bit “too simple”. Is there any way to easily modificate the header section? I guess the part with the Page (for example up here) starting “above” the header in a “notch design”, leaving the blue corners left and right, shouldn’t be that difficult? Or will there be an option in the theme to further personalize the header section?
    Many thanks for this incredible work!
    Albert

    Reply

  10. Hi there,

    Since a few days, I remarked a change in the behaviour of the Atomic Blocks Theme regarding images in the “Full With” or “Wide With” format. Before, this images streched further than the text (Wide With) or over the full website “Full With”. That looked pretty awesome. Now the the images stretch only as far as the text, which is kind of sad, because the “Full With”-Images before looked absolutely awesome!

    Is this a bug or why this change?

    Best regards

    Lucas

    Reply

    1. Hi Lucas,

      Looks like Gutenberg added some styles recently that are overriding our styles. I’ve just added some new styles to the theme and released an update to fix this. You should be able to update it from your dashboard shortly!

      Reply

      1. Fantastic! Thank you so much for this fast response and the whole work behind the theme!

        Reply

  11. Hi,

    FEEDBACK for Atomic Blocks Plugin 1.3.4:

    The accodeon block does not work as it should in Edge and Internet Explorer – unfortunately – the accordeons are all opened and have no functionality.

    FEEDBACK for Atomic Blocks Theme 1.2.1 (Gutenberg 3.9.0):

    To get the right view of alignfull and alignwide blocks I had to add the following in the block-editor.css:

    body.gutenberg-editor-page #editor .edit-post-visual-editor .editor-post-title__block[data-align=wide],
    body.gutenberg-editor-page #editor .editor-default-block-appender[data-align=wide],
    body.gutenberg-editor-page #editor .editor-block-list__block[data-align=wide] {
    max-width: 1100px;
    }
    body.gutenberg-editor-page #editor .edit-post-visual-editor .editor-post-title__block[data-align=full],
    body.gutenberg-editor-page #editor .editor-default-block-appender[data-align=full],
    body.gutenberg-editor-page #editor .editor-block-list__block[data-align=full] {
    max-width: none;
    }


    Something for the next update. Thank you for your work!

    Reply

    1. Thanks for the feedback, Claus. We’ve just released an update to the theme to address the alignment issues. Support for the accordion in IE is limited, but support should be coming to Edge shortly.

      Reply

Leave a Reply

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