Gutenberg Blocks (Editing a Page, Contact, About, Services, etc.)

🚨 Please read this guide in full!

With the exception of a few Customizer options, 90% of the theme will be edited with blocks using the Block Editor. So let’s talk about it. 🧐 Fairy Boss, in particular, comes with 20 custom blocks and works with the default blocks that come with WordPress as well.

So, let’s say you’re trying to edit the homepage. First, head over to Pages > All Pages. If you imported demo content, all your pages (Contact Page, About Page, Services Page, etc.) will be there. If you’re doing this manually, go to Pages > Add New to begin building your page.

The theme comes with three page templates: Default Page, Default Page w/Sidebar, and Blank Template. Most of the demo pages use the Blank Template, but you can use whatever template you want.

While inside the Block Editor, begin editing blocks by clicking the black plus sign at the bottom. To see the custom blocks that come with the theme, type in “Fairy” in the search field to see only the theme’s custom blocks. Let’s add the Fairy Full Width Image With Text block for this example.

To change the text, simply click on the text and begin typing. In the right-hand column are additional settings for color, images, and other options. It’s honestly very easy and doesn’t need much explanation!

However, the coolest thing about blocks is that you can add blocks within blocks. With Fairy Full Width Image With Text block, you can add blocks inside of it. In the screenshot above, the Paragraph block and the Bullet List block were added. You can add blocks within blocks as long as you see a black plus sign. Click on it and your block options will show.

Although blocks within blocks is cool, if you have too many nested blocks, it can get confusing. To keep things organized, there’s a breadcrumb at the bottom of your edit screen that shows you what block you’re inside of. This is extremely useful.

So, for example, if you want to click out of the Bullet List block into the Fairy Full Width Image With Text block, simply click on the block name at the bottom. Your settings in the right-hand column will update to the block you selected. This keeps things neat and organized and will keep you from accidentally editing a block you didn’t mean to edit.

Non-Animated Blocks

Although most blocks should look the same in both the Block Editor and on the Live Site, there are a few blocks that come with the theme that don’t animate while inside the editor. These blocks include the Fairy FAQ Block, Fairy Toggle Block, Fairy Portfolio Block, Fairy Testimonials, and Fairy Image Grid.

While these blocks might not slide or toggle while in the editor, you can still edit them and visually see what you’re doing. However, blocks that slide need to be edited a little differently. For example, with the Portfolio Block, simply scroll to the right to see the full slider items.

To add additional slides, instead of clicking the black plus sign, hover your cursor between the items. A blue plus sign will appear that will allow you to add additional items to the slider.

Same for the Testimonials Block.

Patterns

Although blocks are super easy to use, the sheer volume of them and the option to nest blocks inside of blocks can feel too arduous to tackle on your own. Thankfully, that’s where patterns come in. 🙌 Patterns are pre-made block layouts that you can add to your pages or posts. That way you never have to start from scratch.

To get started, click on the black plus sign at the bottom and click “Browse All” at the bottom. You could also click the blue plus sign in the top left-hand corner.

Next, click on Patterns at the top. Although there are a few (ugly) default patterns provided by WordPress, there are theme-specific patterns as well. Those categories have the theme name in them. Click on each one to see the patterns available.

There are also patterns for full-page layouts. So, if you didn’t import demo content, you can still add patterns of the demo page layouts to any page. For example, if you want to add the About page, simply search for “fairy about.”

Or, if you’d like to add one of the four homepages that come with the theme, search for “fairy homepage.”

🌟