Genesis Blocks

Create effective content faster.

You are here: Home / How to migrate from Atomic Blocks to Genesis Blocks

How to migrate from Atomic Blocks to Genesis Blocks

Atomic Blocks has been renamed to Genesis Blocks.

Genesis Blocks includes the same powerful blocks and same beautiful designs that are in Atomic Blocks.

To continue receiving the best of what our team is building, we encourage you to migrate to Genesis Blocks. Our migration tool makes it easy, and in many cases, completely automated.

However, if your theme includes Atomic Blocks code, or if you made customizations using Atomic Blocks CSS or PHP, you will need to make some manual changes before migrating.

In this article, we’ll show you what you need to do before and after migrating to Genesis Blocks.

Note: We highly recommend reading through this entire guide to discover the necessary changes before starting the migration process.

Table of Contents

About the migration wizard

The Genesis Blocks migration process finds Atomic Blocks references in content, settings, and user meta in the WordPress® database and replaces it with Genesis Blocks references.1 It searches these tables:

  • $wpdb->posts to replace Atomic Blocks in post content (excluding revisions).
  • $wpdb->options to change atomic_blocks_mailchimp_api_key to genesis_blocks_mailchimp_api_key.
  • $wpdb->usermeta to change atomic_blocks_favorite_layouts to genesis_blocks_favorite_layouts and alter named favorites to refer to Genesis Blocks block names.

The migration process does not alter content stored outside of these tables. It does not change PHP or CSS in theme and plugin files.

Also, the migration wizard will automatically deactivate Atomic Blocks if the migration is successful.

Video walkthrough

Before you start, here is a short video that walks you through the entire migration process.

Standard migration

We’ve included all the details about each step in the standard migration process so you can become familiar with them before performing them on your site.

If you are using a multisite environment, you’ll follow these same steps, but with a few extra required steps. The multisite migration steps are listed at the end of this article.

Let’s get started!

Step 1: Back up your site

Migrating from Atomic Blocks to Genesis Blocks is a one-way action that can’t be undone. Please back up your site before you begin just in case you need to roll it back.

Step 2: Update CSS code

The Atomic Blocks block names, CSS classes, and related HTML markup have changed. If you’ve added custom CSS to style the blocks, you’ll need to make some changes. Also, if you’re using a theme that includes Atomic Blocks code, you’ll need to update it.

CSS is most often found in .css files in your theme folder. It can also appear in PHP files as well as in the WP-Admin, such as at Appearance > Customize > Additional CSS.

If you’ve made customizations to the Atomic Blocks CSS, find and replace all Atomic Blocks CSS with Genesis Blocks CSS as described in the list below. 

If you have a StudioPress theme that uses Atomic Blocks, check your StudioPress, WP Engine, or Flywheel account for an updated version of the theme. 

The following nine StudioPress themes have been updated with Genesis Blocks CSS:

  • Altitude Pro
  • Authority Pro
  • Essence Pro
  • Genesis Sample
  • Magazine Pro
  • Monochrome Pro
  • Navigation Pro
  • Revolution Pro
  • Revolution Pro with HubSpot

Instructions for updating your StudioPress theme can be found in one of these locations (depending on where you acquired your theme):

If you have a non-StudioPress theme that uses Atomic Blocks, check for an updated copy of your theme or search through the theme files to find Atomic Blocks CSS and replace it with Genesis Blocks CSS as shown in the list below.

CSS to find and replace

Find all Atomic Blocks CSS and replace it with Genesis Blocks CSS as listed below.

  • Find: ab-
    Replace with: gb-
  • Find: atomic-blocks
    Replace with: genesis-blocks

For example, this CSS:

.ab-block-cta .ab-button {
font-weight: 600;
}

.wp-block-atomic-blocks-ab-container .ab-container-content {
color: #000;
}

Would become:

.gb-block-cta .gb-button {
font-weight: 600;
}

.wp-block-genesis-blocks-gb-container .gb-container-content{
color: #000;
}

Remember, CSS is most often found in .css files in your theme folder. It can also appear in PHP files as well as in the WP-Admin, such as at Appearance > Customize > Additional CSS.

Step 3: Update PHP code

If you use the Atomic Blocks PHP API to register custom sections or layouts, you’ll need to make some small changes because the PHP filters, functions, and block names have changed

You must make PHP changes if your custom PHP code

  • registers custom Atomic Blocks sections and layouts;
  • filters Atomic Blocks sections and layouts; or
  • references an Atomic Block by name, such as in content automatically inserted during theme setup, or in a filter that acts on a named Atomic Block.

PHP to find and replace

Find all Atomic Blocks strings and replace them with Genesis Blocks strings as listed below.

  • Find: atomic_blocks_register_layout_component
    Replace with: genesis_blocks_register_layout_component
  • Find: atomic_blocks_additional_layout_components
    Replace with: genesis_blocks_additional_layout_components
  • Find: atomic_blocks_allowed_layout_components
    Replace with: genesis_blocks_allowed_layout_components
  • Find: atomic-blocks/ab
    Replace with: genesis-blocks/gb
  • Find: wp-block-atomic-blocks-ab
    Replace with: wp-block-genesis-blocks-gb
  • Find: atomic-blocks
    Replace with: genesis-blocks
  • Find: ab-
    Replace with: gb-
  • Find: ab_
    Replace with gb_

Example 1: Custom layout

This PHP to register a custom layout:

function my_custom_section() {
if ( ! function_exists( 'atomic_blocks_register_layout_component' ) ) {
return;
}

atomic_blocks_register_layout_component(
[
'type'     => 'section',
'key'      => 'my_custom_notice_section',
'name'     => 'Custom Notice',
'content'  => "<!-- wp:atomic-blocks/ab-notice {\"noticeTitle\":\"Notice!\",\"noticeBackgroundColor\":\"#209cef\",\"noticeFontSize\":22} --><div style=\"color:#32373c;background-color:#209cef\" class=\"wp-block-atomic-blocks-ab-notice ab-font-size-22 ab-block-notice\" data-id=\"520f9b\"><div class=\"ab-notice-title\" style=\"color:#fff\"><p>Notice!</p></div><div class=\"ab-notice-text\" style=\"border-color:#209cef\"><p>You've been informed.</p></div></div><!-- /wp:atomic-blocks/ab-notice -->",
'category' => [ 'notice' ],
'keywords' => [ 'notice' ],
'image'    => 'https://example.com/screenshot-of-your-notice-section.jpg',
]
);
}
add_action( 'plugins_loaded', 'my_custom_section', 12 );

Needs to become this PHP:

function my_custom_section() {
if ( ! function_exists( 'genesis_blocks_register_layout_component' ) ) {
return;
}

genesis_blocks_register_layout_component(
[
'type'     => 'section',
'key'      => 'my_custom_notice_section',
'name'     => 'Custom Notice',
'content'  => "<!-- wp:genesis-blocks/gb-notice {\"noticeTitle\":\"Notice!\",\"noticeBackgroundColor\":\"#209cef\",\"noticeFontSize\":22} --><div style=\"color:#32373c;background-color:#209cef\" class=\"wp-block-genesis-blocks-gb-notice gb-font-size-22 gb-block-notice\" data-id=\"520f9b\"><div class=\"gb-notice-title\" style=\"color:#fff\"><p>Notice!</p></div><div class=\"gb-notice-text\" style=\"border-color:#209cef\"><p>You've been informed.</p></div></div><!-- /wp:genesis-blocks/gb-notice -->",
'category' => [ 'notice' ],
'keywords' => [ 'notice' ],
'image'    => 'https://example.com/screenshot-of-your-notice-section.jpg',
]
);
}
add_action( 'plugins_loaded', 'my_custom_section', 12 );

Example 2: Removing layouts

This PHP to make only named sections and layouts available:

add_filter( 'atomic_blocks_allowed_layout_components', function( $layouts ) {
// Return an array of unique section/layout keys that are allowed, or unset existing ones in the $layouts array.
return [ 'ab_layout_business_1', 'ab_layout_service_1', 'ab_layout_contact', 'ab_section_service_4' ];
});

Needs to be changed like this:

add_filter( 'genesis_blocks_allowed_layout_components', function( $layouts ) {
// Return an array of unique section/layout keys that are allowed, or unset existing ones in the $layouts array.
return [ 'gb_layout_business_1', 'gb_layout_service_1', 'gb_layout_contact', 'gb_section_service_4' ];
});

Example 3: Filtering by a named Atomic Block

This PHP to filter content and wrap HTML output for a named Atomic Block:

function example_wrap_named_block( $block_content, $block ) {
if ( $block['blockName'] !== 'atomic-blocks/ab-cta' ) {
return $block_content;
}

$content = '<div class="my-custom-wrapper">';
$content .= $block_content;
$content .= '</div>';

return $content;
}
add_filter( 'render_block', 'example_wrap_named_block', 10, 2 );

Needs to become this PHP (atomic-blocks/ab-cta was renamed to genesis-blocks/gb-cta):

function example_wrap_named_block( $block_content, $block ) {
if ( $block['blockName'] !== 'genesis-blocks/gb-cta' ) {
return $block_content;
}

$content = '<div class="my-custom-wrapper">';
$content .= $block_content;
$content .= '</div>';

return $content;
}
add_filter( 'render_block', 'example_wrap_named_block', 10, 2 );

Step 4: Update to Atomic Blocks 2.9.0+

Now that you’ve updated your theme, as well as all the CSS and PHP that previously referred to Atomic Blocks, you’re ready to begin the migration process.

Go to Plugins > Installed Plugins to update to Atomic Blocks 2.9.0+. After updating the plugin, you’ll see an admin notice to migrate to the Genesis Blocks plugin, as shown in the image below.

You can either click the Migrate button inside the notice or go to Atomic Blocks > Migrate to be directed to an information page where you’ll start the migration wizard.

Screenshot of Atomic Blocks migration notice

Click image to enlarge

Step 5: Install And Activate Genesis Blocks 1.1.0+

After clicking the Migrate button or menu link, you’ll be directed to the information page shown in the image below.

If you do not already have Genesis Blocks installed on your site, click the Install and Activate Genesis Blocks button to start the migration wizard.

However, if you already have Genesis Blocks 1.0.0 installed, you can skip this screen and go directly to Plugins > Installed Plugins to update to Genesis Blocks 1.1.0+.

Screenshot of Atomic Blocks migration page

Click image to enlarge

Genesis Blocks 1.1.0 should now be installed and activated on your site.

Step 6: Migrate your settings and content

After Genesis Blocks 1.1.0 is installed and activated on your site, you’ll be directed to the migration page shown in the image below. You can also go to Genesis Blocks > Migrate to access this page.

The first two steps in the migration wizard ask you to confirm that you’ve backed up your site and updated your CSS and PHP code. The last step is where the actual migration takes place.

1. Back up your site
Check the box to confirm that you’ve backed up your site and then click Next Step.

Screenshot of Step 1: Back up your site

Click image to enlarge

2. Update CSS and PHP code
Check the box to confirm that you’ve updated the CSS and PHP code (which includes updating your theme if it uses Atomic Blocks) and then click Next Step.

Screenshot of Step 2: Update CSS and PHP code

Click image to enlarge

3. Migrate your content
Finally, click Migrate Now to start the process of automatically migrating your existing block settings and content from Atomic Blocks to Genesis Blocks.

Screenshot of Step 3: Migrate your content

Click image to enlarge

Remember, the migration process does not alter content stored outside of the tables mentioned at the beginning of this article. It also does not change PHP code or CSS code in any theme or plugin files.

Step 7: Remove Atomic Blocks

Once the migration is complete, you will see the success message shown in the image below. Also, the wizard will automatically deactivate Atomic Blocks.

Screenshot of the migration success message

Click image to enlarge

After checking your site to make sure everything is correct, you can go to Plugins > Installed Plugins and delete the Atomic Blocks plugin.

Multisite migration

If you are using Atomic Blocks in a multisite environment, whether it’s activated on individual sites only or it’s network-activated, a few extra steps are required when migrating to Genesis Blocks.

Important Note: Users editing their sites will see two sets of blocks in the block picker until Atomic Blocks is deactivated in the final step. We recommend performing these steps under maintenance mode.

If Atomic Blocks is activated on individual sites (not network-activated):

  1. Install Genesis Blocks 1.1.0+ to make it available to sites, but do not network-activate it.
  2. Ask individual site admins to activate Genesis Blocks and follow the migration steps at Genesis Blocks > Migrate. When using the migration wizard, site admins will see the prompts to back up their site and update CSS and PHP code. (See CSS and PHP instructions above.)
  3. When all sites are migrated, deactivate Atomic Blocks on individual sites.
  4. After checking your site to make sure everything is correct, you can delete the Atomic Blocks plugin.

If Atomic Blocks is network-activated:

  1. Take a full network backup.
  2. Update CSS and PHP code. (See CSS and PHP instructions above.)
  3. Install Genesis Blocks 1.1.0+ and network-activate it.
  4. Visit Genesis Blocks > Migrate under each site’s Dashboard and complete the migration process.
  5. When all sites are migrated, network-deactivate Atomic Blocks.
  6. After checking your site to make sure everything is correct, you can delete the Atomic Blocks plugin.

If you prefer to automate the migration process with Atomic Blocks network-activated and you are able to use WP-CLI:

  1. Take a full network site backup.
  2. Update CSS and PHP code. (See CSS and PHP instructions above.)
  3. Install Genesis Blocks 1.1.0+ and network-activate it.
  4. Connect to your server over SSH and then:

Create a file named ‘migrateab.php’ with this content:

<?php 
( new Genesis\Blocks\Migration\Api() )->get_migrate_setting_response();
( new Genesis\Blocks\Migration\Api() )->get_migrate_user_meta_response();
$posts_to_migrate = 1;
while ( $posts_to_migrate > 0 ) { $posts_to_migrate = ( new Genesis\Blocks\Migration\Api() )->get_migrate_content_response()->data["results"]["postsFound"]; }
delete_option( "genesis_blocks_migrate_from_atomic_blocks" );
update_option( "genesis_blocks_migrated_from_atomic_blocks", true );

Run this WP-CLI command from the same directory as the migrateab.php file:

wp site list --field=url | xargs -n 1 -I % wp eval-file migrateab.php --url=% && echo "Migration complete."

Remove the migrateab.php file:

rm migrateab.php

You can now network-deactivate Atomic Blocks. And after checking your site to make sure everything is correct, you can delete the Atomic Blocks plugin.