Atomic Blocks – Gutenberg Blocks Collection

Description

Atomic Blocks is a collection of content blocks for the new Gutenberg block editor. Blocks are chunks of content such as paragraphs, images, galleries, columns, and more. Building blocks give you more control to quickly create and launch any kind of site you want!

Along with the content blocks you’ll find in Atomic Blocks, we’re also publishing helpful articles and tutorials to help you get started with Gutenberg. Visit the Atomic Blocks blog to learn more today!

Atomic Blocks currently includes the following blocks:

Atomic Blocks Help File

We’ve created a handy help file that you can check out here. The help file covers how to setup the plugin and get started with the blocks.

The help file is also available in the plugin once activated. Click the Atomic Blocks admin menu item to visit the Getting Started page.

View the plugin help file

Atomic Blocks WordPress Theme

We’ve created a beautiful little WordPress theme to help you get started with the Atomic Blocks plugin and the new WordPress block editor. The theme integrates seamlessly with the blocks you’ll find in the plugin!

Follow Along:

Screenshots

  • The Atomic Blocks Getting Started page.
  • How to find the Atomic Blocks for use.
  • The Notice block with settings.
  • The Testimonial block with settings.
  • The Author Profile block with settings.
  • The Drop Cap block with settings.

Installation

This plugin can be installed directly from your site.

  1. Log in and navigate to Plugins → Add New.
  2. Type “Atomic Blocks” into the Search and hit Enter.
  3. Locate the Atomic Blocks plugin in the list of search results and click Install Now.
  4. Once installed, click the Activate link.
  5. You will be redirected to the Atomic Blocks Getting Started page.

It can also be installed manually.

  1. Download the Atomic Blocks plugin from WordPress.org.
  2. Unzip the package and move to your plugins directory.
  3. Log into WordPress and navigate to the Plugins screen.
  4. Locate Atomic Blocks in the list and click the Activate link.
  5. You will be redirected to the Atomic Blocks Getting Started page.

FAQ

Installation Instructions

This plugin can be installed directly from your site.

  1. Log in and navigate to Plugins → Add New.
  2. Type “Atomic Blocks” into the Search and hit Enter.
  3. Locate the Atomic Blocks plugin in the list of search results and click Install Now.
  4. Once installed, click the Activate link.
  5. You will be redirected to the Atomic Blocks Getting Started page.

It can also be installed manually.

  1. Download the Atomic Blocks plugin from WordPress.org.
  2. Unzip the package and move to your plugins directory.
  3. Log into WordPress and navigate to the Plugins screen.
  4. Locate Atomic Blocks in the list and click the Activate link.
  5. You will be redirected to the Atomic Blocks Getting Started page.
Can Atomic Blocks be used with any theme?

Yes, you can use Atomic Blocks with any theme, but we recommend using our Atomic Blocks theme for the best presentation. The Atomic Blocks theme has beautiful styles built in specifically for these blocks.

Get the Atomic Blocks theme

Do I need Gutenberg to use Atomic Blocks?

Yes, you will need to install the Gutenberg plugin to use Atomic Blocks. Eventually, Gutenberg (the block editor) will be merged into WordPress and you won’t need the plugin.

Reviews

Nice blocks, but contains a real issue

I like the collection of AB blocks a lot. They offer nice variation and a lot of refinement to the otherwise slightly limited collection, and limited customisability of the ‘standard’ Gutenberg blocks. There is, however a very real issue. I experienced some uncommon crashes while editing a website. My Mac slowed down beyond recognition (this really actually happens next to never) and the coloured wheel appeared. I accused the browser, and switched browsers. Then the same occurred. I also noticed a sudden increase in used processor power from 31% to 96% in a second. After a number of test runs I discovered that the freeze happened when I was editing the AB Call-to-Action block. As such it is a nice block, but there must be an infinite loop, or an undiscovered memory leak somewhere in the code. I have deactivated AB from my sites for now.

A lot of potential, but could be greatly improved

Introduction
Gutenberg is mainly focused on post editing right now, with more powerful page (and later entire website template) building features coming in WordPress 5.1 and later. But already you can almost use Gutenberg for page building, and this plugin certainly helps a lot by expanding the selection of building blocks to choose from. However, I think this plugin feels a bit unpolished overall, with several blocks feeling incomplete or implemented in a less-than-ideal way. I think this plugin has a lot of potential, but as it is right now, it is just alright. Not great, just alright.

Thoughts on the blocks
What follows are my thoughts on the blocks in this plugin.

– AB Accordion block
This block is pretty nice. You can throw in a bunch of these after each other and make a nice FAQ section or reduce the space taken up by things like a description and specifications by dividing them up into collapsible sections using these blocks.

I think this block could be improved by adding a parent Accordion block that contains nested collapsible section blocks. You could then toggle a setting on the parent Accordion block to make opening one section automatically close all the others.

Additionally, I think each collapsible section should have its own nested blocks section, so you can insert whatever blocks you want into one of the collapsible sections. That would make this accordion way more useful.

– AB Button block

This is a pretty nice block. It has a lot of nice options, and fits most use cases for buttons with custom styling.

One thing I would change is the Button Size control. Instead of using a dropdown, it could use a styled button group like the text size presets in the core Paragraph block.

I think the Button Shape controls should either be updated to use the block styles API, or else they should be replaced with border radius controls that let you set the precise degree of roundness on the edges. I don’t think the latter is really necessary, so I would prefer the former. You could implement both, though.

Speaking of which, the core Button block includes a colored outline variant as one of its styles. It would be nice if the AB Button block supported that kind of style variation as well. In addition to that, border color options could be added to the block.

You could take it a step further than that by adding hover options to control the colors when you hover the block. The Advanced Button block in the Advanced Gutenberg plugin has this functionality, as well as the ability to set the transition speed.

Actually, if you wanted to, you could even support transforming the Advanced Button block from that plugin into an AB Button block.

The color controls should warn you when you choose a color combination with a poor contrast ratio. This is something the core Paragraph block does.

If you really wanted to just go nuts with options, you could also add padding options for the block. If you do add them, there should probably be a reset button to reset all the paddings, as well as the ability to enable/disabling locking the padding values so that increasing one will increase the others automatically.

You should also be able to transform this block into a core Button block and vice-versa, to ease transitioning to or away from the plugin.

– AB Call To Action block
This block is not really necessary, in my opinion. It could be replaced by an AB Container block with nested Paragraph and Button blocks saved as a Reusable block and used as a template.

That said, right now the UI for inserting a Reusable block and then converting it to a standalone instance is less than ideal, and Reusable blocks do not work well with nested blocks. So at the moment the block does have a use, but I think in the future it could be superseded by templates.

– AB Container block
This block is definitely the most useful block in the entire plugin. It is also the most likely to become obsolete in the future. It is inevitable that Gutenberg will add a block like this one in the future, and you can bet that there will be (if there are not already) many other plugins that add a block just like this one before then.

This block would be even more useful if you could change the HTML element used by the block from div to section, article, or aside. Additionally, the ability to have a parallax scrolling background image like the core Cover Image block would be very nice. Additionally, it would be nice if you could toggle locking the padding and margin values together, so you could change the left and right padding at the same time like you can in some page builder plugins like Divi Builder. The ability to change the opacity of the background color would also be quite nice.

– AB Drop Cap block
This block is kind of confusing. It is essentially just a Paragraph clone, but without most of the options of the Paragraph block, and instead just some different Drop Cap options.

Annoyingly, the drop cap only appears on the front-end. It does not appear in the editor at all, unlike the drop cap in the core Paragraph block.

You are not even able to convert the block into a normal Paragraph block or any other of the core textual blocks. The core Paragraph block can be converted into a List, Heading, and several other textual blocks.

This is definitely the weakest block in the entire plugin, and I would not recommend using it. I am confused about why they did not just extend the core Paragraph block or create an Advanced Paragraph block with all the options of the core Paragraph block and more.

– AB Notice block
This block is pretty nice, but I can see a lot of potential improvements.

The block should make use of a nested blocks area to allow it to take advantage of Paragraph blocks for the notice content, as well as allow List blocks to be used in it.

Currently, it is rather difficult to select the notice title to edit the text after you have selected the content text. Not entirely sure why, but I expect it has something to do with the inline text toolbar that appears for the notice content. Perhaps switching to the use of nested blocks for the content would fix this problem.

I also noticed that the toggle for the close button on the notice does not seem to work quite right. Changing it from “Dismissable” to “Always Show” does not make the little X button disappear in the editor. Actually, it seems that the close button never shows up at all on the front-end. (Tested using the Divi theme.) Hopefully that gets fixed soon.

– AB Post Grid block
This block seems like it should be really useful, but there are a couple little issues that annoy me.

First of all, you should be able to transform this block into the core Latest Posts block and vice-versa, transferring matching settings from one to the other.

Second, I think it was a mistake to include color styles with the block for the links. Most websites do not use purple as their standard hover color, and many do not even use purple as an accent color in the first place. It should be up to the theme to provide default styling like that, and the block should provide something neutral or nothing at all. Alternatively, they could provide color options for the links, but I think that may be overkill.

Additionally, I am a bit confused why there is an option to have a multi-columned layout with the featured images shown above the titles and excerpts and an option to have a single column layout with the featured images to the left, but there is no option to have a single column with the featured images shown at the top.

I also noticed that the “Featured Image Style” option seems to be broken; it does not appear to change anything when you switch it from “Landscape” to “Square”.

I think it would also be nice if you could change the “Continue Reading” links to say a custom phrase like “Read More”.

– AB Profile Box block
This is a nice block with a lot of nice features. However, like many of the other blocks in this plugin, I think it could be better.

I think the profile bio text should be a nested blocks area so it can take advantage of the features of the Paragraph block. Currently, you can not change the color of the bio text from the inspector settings of the block, but using nested Paragraph blocks would give this ability for free.

I also think this is another situation where the default styling should use the styles API to make it easier for a theme to control the look of the block and provide alternative styles.

It would also be nice if you could change the color of the social icons; currently you can only change the color of the background discs behind the icons.

Additionally, since the general design principle of Gutenberg is that a block should look as close to the front-end as possible when unselected: I think the image placeholder should not appear unless the block is selected. This would make the unselected block look more like the front-end, and it would also be more consistent with core blocks like the Gallery and Image block that only show placeholders when selected.

– AB Spacer block
This block is alright, but I think the core Spacer and Separator blocks are better. The core Separator block makes use of the block styles API to provide some default separator styles while allowing themes to override and/or provide their own, as well as potentially allow for registering custom styles using CSS classes. This is better than the more hardcoded approach that the AB Spacer block uses for its optional divider line.

The only improvement I could think of for this block is that you should be able to convert the block into the core Spacer and Separator blocks. But I do not really see the need for this block in the first place, and I think the plugin could do without it. The core blocks do everything it does and are more flexible/extensible.

– AB Sharing block
This is a nice convenient block. It would be even nicer if you could add custom share links to it, but I am not sure what the best way to implement that would be.

I think the default styles should use the block styles API to allow for simple variants and customization by themes.

I also think it would be nice if you could transform this block into a bunch of core Button blocks or AB Button blocks. Other than that, I think this block does about everything you would expect.

– AB Testimonial block
This is a fine testimonial block. It is about as flexible as some basic plugins that used shortcodes, albeit with the benefits of the Gutenberg WYSIWYG (if your theme styles the editor) editing. That said, there is potential to make this block a lot better.

The block should use nesting for the testimonial itself, allowing you to take advantage of the features of the Paragraph block in your testimonials, and possibly also other blocks like the Quote block

Like the AB Profile Box and AB Spacer blocks, this one should also probably make use of the block styles API and have its default style be registered through that API, allowing themes/plugins to completely do away with it or add additional style variations that the user can switch between.

Like I said for the Profile Box block: I think the image placeholder should not appear unless the block is selected.

Conclusion
Overall, this is a really nice plugin. The blocks are generally pretty useful (especially the Container block) and have a lot of nice features. However, I think the plugin could be even better with some various enhancements, tweaks, and fixes. There is definitely going to be a lot of competition between plugins adding similar blocks, and I think if the developers of this plugin can address the issues I have pointed out, this plugin has the potential to become a common tool among website designers using builders based on the Gutenberg APIs.

Preparing for the future of WordPress

This is a great plugin for really grasping what the future of WordPres could be like with the new Gutenberg editor.

The included blocks are really useful, simple to use and yet very flexible. They’re a good example at what can be acomplished with blocks, and showing your clients or customers the way forward for the WordPress editor.

Their support it’s awesome, knowledgeable of their stuff and very interested in your satisfaction

Read all 5 reviews

Contributors & Developers

“Atomic Blocks – Gutenberg Blocks Collection” is open source software. The following people have contributed to this plugin.

Contributors

“Atomic Blocks – Gutenberg Blocks Collection” has been translated into 2 locales. Thank you to the translators for their contributions.

Translate “Atomic Blocks – Gutenberg Blocks Collection” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.2.9

  • Convert saved RichText to RichText.Content.
  • Prepare blocks for toolbar formatting.

1.2.8

  • Fix focus bug on Testimonial block title.

1.2.7

  • Fix URLInput on the Button block.

1.2.6

  • Remove unnecessary state from blocks.
  • Improve call to decodeEntities.
  • Update URLInput.

1.2.5

  • Fix links in readme.txt.
  • Fix update notice CSS bug.

1.2.4

  • Add max width setting to Container block.

1.2.3

  • Add Container Block.
  • Fix toolbar focus bug on Accordion Block.

1.2.2

  • Add blocks to a custom Atomic Blocks category in the block inserter.
  • Clean up markup and remove unnecessary code.
  • Add inline toolbar to text area on relevant blocks.

1.2.1

  • Update blocks to work with Gutenberg 3.1.0.

1.2.0

  • Fix fatal error in last update.

1.1.9

  • Add Post Grid Block.
  • Add improvements for Gutenberg 3.0.
  • Clean up existing blocks.

1.1.8

  • Improve margins for blocks in editor.
  • Fix quirks in the drop cap block.

1.1.7

  • Remove unnecessary isSelected from controls.
  • Fix undefined post bug.
  • Move components to wp.editor.
  • Improve styles for URL input on button block.

1.1.6

  • Rename array_social_icon_footer_script() to atomic_blocks_social_icon_footer_script().

1.1.5

  • Improved the color palettes for changes that happened in Gutenberg 2.8.

1.1.4

  • Add the sharing icons block.

1.1.3

  • Replace props.focus with isSelected for Gutenberg 2.8.0.

1.1.2

  • Refactor the CTA block.
  • Refactor the Author Profile block.

1.1.1

  • Improve Author Profile block to fix text focus and spacing.

1.1.0

  • Add Call-To-Action Block.
  • Improve wide and full-width styles.

1.0.9

  • Define PanelBody to fix Drop Cap block error.

1.0.8

  • Add FontAwesome font library back to Getting Started page.
  • Add prefixes to Getting Started page styles to prevent conflicts.

1.0.7

  • Improve Quick Start box on the Getting Started page.
  • Fix issue with FontAwesome not loading on Getting Started page.

1.0.6

  • Add PanelBody to inspector controls.
  • Group social links together in Profile block.

1.0.5

  • Fix the Button block to remove formatting issue.

1.0.4

  • Fix the Accordion block bug where outputs don’t match.

1.0.3

  • Add the Accordion block.

1.0.2

  • Add the Spacer & Divider block.

1.0.1

  • Add the Customizable Button block.

1.0

  • Initial release.