How we Added Support for Gutenberg in Kadence Themes

With the launch of Gutenberg coming with WordPress 5.0, we have had lots of inquiries regarding our themes readiness. Not only are we ready for this launch, but we are also excited about it! There’s always a learning curve that comes with change, but we believe that the Gutenberg editor will actually be a great asset to WordPress. That said, we have taken the initiative to make working with Gutenberg even simpler for our theme users. We have added Gutenberg support in five key areas that will make working with Gutenberg easier.

Getting Started

If you would like to test this out today here are some steps to get you set up testing with Gutenberg.

  • Ensure that you are using the latest version of your theme (you can download the latest version from your my account page).
  • Download the Gutenberg plugin from here.
  • Download the Block Unit Test for Gutenberg plugin from here.
  • From your WP Admin Panel, navigate to Plugins >> Add New >> Upload Plugin. Find and select your downloaded files, click to install, then activate the plugins.

 

1. Color Swatch

With Gutenberg support from Kadence Themes, you can easily set your text color or background color to your set primary color. Navigate to Theme Options > Basic Styling to set your primary color.

Then, when you are editing a paragraph block in the Gutenberg editor, you can open the Color Settings tab in the right sidebar and your primary color and lighter primary color will already be listed as an option for your background or text color.

2. Fonts

You can now view your font styles right from the editor! From Theme Options > Typography, you can set your fonts and style, then you can see what these settings will look like in your pages before even going live!

Theme Options:

Gutenberg editor:

3. Widths

With the Gutenberg editor, you can create full-width rows without using a page builder. Upon creating a new row, click the plus sign on the top left of the page to create a new block, then choose your block or widget. For this example, we’ll use the Cover Image block.

Next, select the wide or full-width layout and upload or select your image.

Then you can add a title or text to your cover image.

Themes without added Gutenberg support do not have the option for wide or full-width blocks. See example:

4. Editor Container max-width

With the support that Kadence Themes offers, you get a lot more room in the editor! We have expanded the container width from 640px to 800px. Check out the difference:

Kadence theme:

Non-Kadence theme:

5. Default Block Styles

Kadence support adds styling to the default blocks! For example, we’ve added quotation marks to the pull quote block: