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

  12. Atomic Blocks as a theme and the Atomic Blocks plugin with Gutenberg are the PERFECT solution to all problems I had in the past. I code in HTML, CSS and a bit of PHP, but because I want to focus on creating content and writing articles for my blog, maintaining my whole site myself was taking too much time besides my everyday work. Thank you so so so so much, dear people, I am relieved! 🙂

    Reply

  13. Hi, all!
    As a newbie to Gutenberg I have one burning question: how do I change the color of the page title font? I see no options on the customizer or within the page title block. Any assistance will be greatly appreciated!
    Thanks
    PS- The referenced website is currently in development on my local host.

    Reply

    1. Hi Jim,

      Unfortunately, that isn’t available as an option just yet. For now, that will need to be addressed with custom CSS.

      Reply

  14. Hello

    Did you do the website “atomic blocks” with the new theme atomic blocks? So I would be interested for the demo content or a description how you did it.

    I work on website http://www.voyage.help.

    Thanks.

    Stephan

    Reply

    1. Hi Stephan,

      We did not make the Atomic Blocks site with the Atomic Blocks theme. One day we’d like to power it with a Gutenberg powered theme, but for now it’s a custom site.

      Reply

  15. Update:
    the accordion works perfectly in chrome.

    It works but is missing the triangle in FF

    It does not work in IE – what a surprise. I just happen to be editing in IE, and looking at the pages with the same browser – something I do not normally do…

    Reply

    1. Hi Daniel,

      Thanks for your comment. We’ve noticed that the accordion block doesn’t work as expected in IE, and that’s why it’s popped open by default in IE. It looks like support for this feature is coming soon to Edge though, so stay tuned!

      Reply

  16. Hi Mike,

    first of all thanks for providing a good theme and plugin for free. I really appreciate that!

    I want to come back to the sidebar question. I understand that sidebars will eventually be unnecessary, when we are able to place blocks anywhere. But so far I am not that happy with the column block in Gutenberg, as it doesn’t allow me to adapt column width. Thus, currently there is no way to have one wide and one narrow column on a page, which would mimic the sidebar layout. That would be an awesome AB block!

    So far, I used sidebars to place my mailchimp sign-up widget at a prominent position on top of a blog post or page. I will now position it in the footer widget area, but I am a bit scared that nobody will scroll down that far.

    People will still need widget areas in future, even with the Gutenberg blocks. Nobody will want to add a block manually to all existing blog posts, because widget ares disappear. The sidebar widgets may not look pretty, but readers are used to them.

    Thanks!
    Wiebke

    Reply

    1. Hi Wiebke,

      Thanks for your feedback here. The next phase of Gutenberg will help us figure out what is going to happen with sidebars, widgets, and navigation areas. We’ll be rolling out updates for the theme when these things are sorted out.

      Reply

Leave a Reply

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