Atomic Blocks Plugin Help File
The Atomic Blocks plugin is developed and maintained by StudioPress, creators of finely-crafted WordPress themes. We built Atomic Blocks to learn the new block editor and share what we’ve learned along the way. This help file will help you become acquainted with the new editor and our new plugin, Atomic Blocks.
- What is Gutenberg?
- What are blocks?
- How to use the Atomic Blocks plugin
- Working with Blocks
- Atomic Block Descriptions
- Learn more about Gutenberg
What is Gutenberg?
The new WordPress block editor, currently referred to as Gutenberg, is a new way to build with WordPress. Instead of relying on page building plugins, shortcodes, and the like, WordPress is bringing block-based editing to the core 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.
Please check out our Beginners Guide to Gutenberg article to become more familiar with the new Gutenberg block editor.
What are blocks?
When we refer to “blocks” or “Gutenberg blocks” we are talking anything that can be inserted into the new 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.
How to use the Atomic Blocks plugin
Install the Gutenberg plugin
Before you can use Atomic Blocks, you’ll need to install the latest version of WordPress.
There are lots of articles about the new editor and how to work with it. Check out the Atomic Blocks blog and Gutenberg News to find the best articles about the new block editor.
Install the Atomic Blocks plugin
Once you’ve installed Gutenberg, you can install Atomic Blocks in the same way. You can either go to Plugins > Add New and search for “Atomic Blocks” or download it directly from our website to install it manually.
Once you’ve installed Atomic Blocks, you’ll be redirected to the Atomic Blocks Getting Started page which provides you with all kinds of info about the plugin and theme we’ve created.
Working with blocks
Atomic Blocks is launching with just a handful of blocks to start. Because the new block editor is in early development, things are still changing. Before releasing all of our blocks, we want to ensure the underlying code is solidified and ready for wide release.
The following blocks are currently available in Atomic Blocks: Testimonial, Inline Notices, Author Profile, and Drop Cap. A detailed rundown of each editor block can be found below.
Add blocks to your post or page
There are a few ways to insert blocks into a post. The easiest way is to click the (+) icon where you would like to add the new block, as seen in the screenshot below.
Once you click the (+) icon, you’ll see a popup with the list of available blocks. Search for “atomic” in the search field to bring up all of the available Atomic Blocks. Choose which block you want to use and click it to add it to the editor.
One of the best features of the new block editor is being able to see the content and elements you are adding to your page. You no longer have to add a shortcode to your page, not knowing what it is going to look like on the front end. When you add an Atomic Block to your page, you’ll get a placeholder of the block to help you start adding content and changing settings.
Changing block settings
Each editor block comes with its own set of settings, which can be found in the Inspector. The Inspector is a sidebar panel that shows when you click on any block. Each block’s settings will be shown when you click on a block. As seen below, we’ve included several different options within the Inspector for each block.
The settings for each block are unique to each block. Even if you have two of the same block, the settings you apply to one will only apply to the block in focus. This allows you to reuse the same blocks but with different settings for more dynamic layouts.
Some blocks also have inline alignment and formatting options available in the upper right-hand side of the block itself, as seen in the screenshot above. These are enabled on a block-by-block basis, so these settings may change from block to block.
Atomic Block Descriptions
Let’s take a quick tour of the editor blocks and the block settings included in the plugin.
Notice Block
The notice block lets you add an inline notice box to your page. You can use it to highlight some info on your page or draw attention to a special message. The block also comes with settings for font size, notice color, text color and whether or not to make the block dismissable.
The dismissable notice works by using localStorage. Once you close the notice on the front end of the site, it won’t show again unless you clear out your localStorage. Please note that if you close the notice on the front end, you will still see the block in your editor until you remove it.
Testimonial Block
The testimonial block lets you add a testimonial box to your page with testimonial text, a citation name and title and avatar. The block also comes with settings for font size, cite alignment, background color and text color.
Author Profile Block
The author profile block lets you add a user profile box to your page with an avatar, name, title, profile text and social media links. The block also comes with settings for font size, avatar shape, background color, text color, link color and social media URLs.
Drop Cap Block
The drop cap block lets you add a stylized drop cap letter to the beginning of a paragraph. The block also comes with settings for font size and drop cap style (Letter, Square, Border).
Button Block
The button block lets you add a customizable button to your posts or pages. The block also comes with settings for changing the link target, button shape, button size and button colors.
Spacer and Divider Block
Add an adjustable spacer between your blocks with an optional divider with styling options to change the height, color and style of divider.
Accordion Block
Add an accordion text toggle with a title and descriptive text. Includes options to change the font size and an option to toggle the accordion open by default.
Learn more about Gutenberg
If you’d like to learn more about Gutenberg, please visit our Beginner’s Guide to Gutenberg and visit our blog which will have regular tutorials and resources. We also publish a blog called Gutenberg News, which is a curated collection of Gutenberg tutorials & resources!