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.
Now you can choose the Block option from the dropdown, and click Create.
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.
The first option is the Block Type.
As of right now, we have 5 block types.
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.
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.
Left Sidebar type
Just like the Right Sidebar option but for the left sidebar.
Just like our other Element types, we have 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.
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 WordPress blocks do not compile dynamic CSS, so they should work perfectly within Block Elements with no issues.