Six Gutenberg StudioPress Themes (problems & solutions)

Using Gutenberg StudioPress themes

Most StudioPress themes that were designed for WordPress 4, used widget areas to build the front page.

WordPress 5 introduced a new block based layout system. This gives users much more control over how, not just the front page, but inner pages and posts look too.

With the introduction of WordPress 5 the owners of StudioPress, WP Engine, bought the Atomic Blocks plugin.

Atomic Blocks is designed to work with the new block editor. And the introduction of Gutenberg StudioPress themes is a big leap forward for StudioPress, and the users of their themes.

Six themes were re-released for WordPress 5

This is the announcement StudioPress made…

As WordPress 5.0 delivers the new editing experience, Gutenberg, we’re re-releasing six StudioPress themes that now feature more advanced Gutenberg support to help you get more out of your new editing experience.

StudioPress

These are the themes that were updated specifically for the new WordPress block editor

• Authority Pro
• Essence Pro
• Magazine Pro
• Infinity Pro
• Monochrome Pro
• Breakthrough Pro

Since then two new Gutenberg StudioPress themes have been released that were built specifically for WordPress 5 and the block editor.

• Revolution Pro
• Genesis Sample Theme

Making the most of the Gutenberg StudioPress themes

If you’re new to Atomic Blocks, these extra tips will help you make the most of these six (now eight) Gutenberg StudioPress themes.

Atomic Blocks tips for StudioPress users

I mention specific themes in these tips, but you may be able to apply similar principles to your theme.

My theme already has a hero header

Essence pro and Breakthrough Pro have big stand out graphical header sections. The header images in these two themes have a step or notch in the bottom of the hero graphic (this is a negative margin).

If you add an Atomic Blocks hero header below an Essence Pro or Breakthrough Pro built in header, the stepped image can make the block below it look a bit odd.

How should you deal with the hero headers?

Essence Pro has been recently updated to include a Blocks page template. If you use the blocks page template the stepped bottom of the header is made square. Use the Blocks page template when using an Atomic Blocks page layout.

Blog posts do not have the option of page templates.

Breakthrough Pro also has a stepped hero header image, but it does not have a Blocks page template. So you have to be more resourceful when using the Atomic Blocks Layouts.

Go to Dashboard > Appearance > Customize > Breakthrough Pro Settings

There are two settings you need to change…

• Hero Section Settings (homepage hero header)
• Basic Settings (show or hide header image on posts and pages)

Both the Hero Section (homepage) and the Basic Settings (inner posts and pages) have a tick box that toggles the large header image on or off.

Problem: Essence Pro and Breakthrough Pro have stepped header images

Solution: use the blocks template on Essence Pro. Remove the header image on Breakthrough Pro.

The Blocks Page Template

In Essence Pro: when you’re using an Atomic Blocks Layout, use the Blocks page template.

In the post editor sidebar choose the document tab.

Open the Page Attributes section and choose the Blocks page template.

Blog posts do not have the page templates option.

Removing the Hero image from Breakthrough Pro theme

In the Customizer choose Breakthrough Pro Settings

Choose Hero Settings for the front page or Basic Settings for inner pages

Tick this box to disable the homepage hero image

Tick these boxes to disable the hero image on posts and pages

Full width header layout displays below post title and big margin

Change this…

To this…

First remove the page title

You can remove the page title using a plugin called Genesis Title Toggle.

Then change the header image width

Making the header image narrower gives a clear margin all around the hero section, on wide monitors.

The Blocks page template

Does your theme have a page template called Blocks? If it does, use that template when you use one of the Atomic Blocks Layouts.

This is all new!

WordPress 5, Gutenberg and the themes designed to use the WordPress Block editor are all new. You will find teething problems. But the Block editor is the future of WordPress, and I for one, want to be ahead of the game.