How does the layout builder plugin integrate with WordPress 5's new block editor (Gutenberg)?

With the release of WordPress 5, we've been given a brand new block editor (codenamed Gutenberg) for editing the content of our pages. So how does this affect people using the original  Theme Blvd Layout Builder plugin? Well, don't stress too much, as realistically, not much has changed; basically, we've just extracted the layout builder away from WordPress 5's block editor (i.e. Gutenberg).

When editing a page in the WordPress 5 block editor, you'll see that ugly, but familiar, building icon associated with the Theme Blvd Layout Builder plugin. Click that and you'll be taken to a different screen where you can edit the custom layout for the given page.

Keep in mind that clicking the building icon does take you away from editing the default content of your page. So if you've made changes to the content but haven't saved or published, make sure to do that before navigating away to edit the custom layout in the Theme Blvd Layout Builder.

After navigating to the Theme Blvd Layout Builder's editor, you'll see the same interface that used to be integrated with the classic WordPress editor but extracted out into its own view. From here, you can edit your custom layout as you always did in the past. 

Here are a few helpful notes from things highlighted in the screenshot above:

  1. Same as before, the "Current Page Content" element gives you an optional way to incorporate your page's default content into the custom layout, whether it's been edited from the classic WordPress editor or the new block editor (i.e. Gutenberg). But keep in mind the styling of how blocks from WordPress's new editor look on the front end of your site is based on whether your theme styles them or not, and NOT the Theme Blvd Layout Builder.
  2. To save the custom layout, make sure to click "Update Layout" -- And keep in mind that every time you click "Update Layout" you're also automatically setting the page to use the custom layout. Prior WordPress 5, you had to select the "Custom Layout" page template to apply the layout, and this is no longer the case.
  3. You can use the "Return to editor" link to go back to the WordPress block editor for the given page. But remember that saving data here is handled completely separate from WordPress's block editor. So before navigating away, make sure to update the layout if you've made changes.

In point #2 above, I mentioned that clicking "Update Layout" will automatically apply the custom layout to the page. So how you can disable the custom layout from the current page? Well under the hood, when you click the "Update Layout" button in the Theme Blvd Layout Builder, the plugin just automatically selects the "Custom Layout" page template for you. So if you need to disable the custom layout, you can simply deselect it from WordPress's block editor.

Because editing a custom layout is now extracted out into its own view, it may seem a bit tedious to load WordPress's block editor every time you just want to make changes to the page's custom layout. So as a shortcut, you can click the "Custom Layout" link directly from the Pages overview table, and this will take you to the Theme Blvd Layout Builder editor.