Block Element Overview

Block Elements are available as of GP Premium 1.11.0.

Block Elements allow you to use the WordPress block editor to create hooks, site headers, site footers and sidebars.

Creating a Block Element

First, make sure the Elements module is activated in Appearance > GeneratePress.

Now, go to Appearance > Elements and click the Add New Element button at the top of the page.

Add New Element

Now you can choose the Block option from the dropdown, and click Create.

Create Block Element Type

This will open up the block editor, just like you’re creating a new post or page.

The cool thing here is the content we create in the block editor can be hooked into your website anywhere you want.

Block Element Options

After the editor, you’ll see we have some options.

Block Element Options

The first option is the Block Type.

As of right now, we have 5 block types.

Block type

Hook type

This type allows you to add your Block Element content to any hook inside GeneratePress. This is great for things like author boxes, CTAs, top bars, footer bars, or even page heroes. There is no limit to the number of things you can build and hook into your website.

Hook (Required) – Choose the hook where you want to insert the content.

Priority (optional) – Set the priority of this element. This is useful when there are multiple elements added to the same hook. Lower priorities display higher up on the page than lower priorities.

Site Header type

This type will replace your GeneratePress site header. This means you can use the block editor to build your very own custom header, and replace your default header with it.

Site Footer type

Just like the Site Header option, this will replace your site footer (widgets and footer bar) with a custom Site Footer you’ve created.

Site Footer Block Type

Right Sidebar type

This type will replace the entire right sidebar with what you build in the editor. This option requires a default right sidebar to exist on the page it’s applied to.

Right Sidebar Block Type

Left Sidebar type

Just like the Right Sidebar option but for the left sidebar.

Display Rules

Just like our other Element types, we have Display Rules.

Display Rules

In order for your Block Element to display anywhere on your website, you must set certain conditions within the Display Rules tab.

These settings allow you to display your element throughout your site. You can choose specific pages, posts, categories etc.. You can even tell the element to display across your entire site.

You can also exclude the element using the same conditions. For example, you can tell your element to display throughout your entire site, excluding the About page.

Location (required) – Choose when this element should display.

Exclude (optional) – Choose when this element should not display.

Users (optional) – Display element for specific user roles.

Using the Block Editor

Building a Block Element is exactly like using the block editor to build your pages and posts – all of the same blocks are available to you.

GenerateBlocks

We suggest our very own GenerateBlocks plugin to build your Block Elements. It’s free, and it’s integrated tightly with GeneratePress and Block Elements. There is no limit to the things you can build with this combination.

Third-party block plugins

Unfortunately, third-party block plugins likely will not style themselves properly when used as Block Elements. This is because these plugins scan the page content for their blocks and compile their CSS/styling based on what they find.

Block Elements are not within the page content. Therefore, these plugins will likely not recognize their blocks are in use unless they specifically integrate with Block Elements.

GenerateBlocks is aware of your Block Elements and will work perfectly with them.

Core blocks

Core WordPress blocks do not compile dynamic CSS, so they should work perfectly within Block Elements with no issues.