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

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.

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

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 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!

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!

• Share:
• Facebook
• Twitter
• Email

• Category: Updates