How to create a sticky block in Gutenberg Editor

Sticky elements can have a big impact on UX and ensure a great reader experience. 

The most interesting areas are where you can attract the user’s attention or increase your advertising revenue. In my theme Blockfold I use sticky elements in several places. I’m using a sticky menu for presenting popular categories. 

You can check how it works on my demo page: https://demo.rocksite.pro/blockfold/magazine/ 

Based on this example I will show you how you can make any Gutenberg block sticky using only free plugins.

What you’ll need:

• Plugin: Sticky Block for Gutenberg Editor (free)
• Plugin: Kadence Blocks (free)

Install Kadence Blocks and Sticky Block plugin

Go to WordPress.org and download all plugins. Activate Sticky Block and Kadence Blocks.

Add Sticky Block

After plugin is activated you can add the sticky block as in the screen bellow:

After you click on the icon you will create an empty sticky wrapper, you can add any block you want, and will become sticky. Sticky Block groups block, that can hold every other type of block. It can be also added inside other blocks

Sticky Block Options

The screenshot below presents settings of my wrapper:

1) you can add any amount of space between the Sticky Block and the top of the page, so that the element is not always stuck at the “ceiling” of the page. I set this value to 100

2) Sticky Block is Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the Sticky Block will not obscure it (or be obscured by it).

3,4) You can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your Block to be sticky on smaller screens, for example. 

5) Push-up element (optional): you can pick any other element lower on the page that will push the Sticky Block up again. I set up a dedicated class and added it to block below: .float-widget-stop

6) Z-index: in case there are other elements on the page that obscure or peek through your Sticky Block, you can add a Z-index easily. This will only be applied once the Block is sticky.

Kadence Blocks Inside

I used the Info Box block to prepare a menu in the form of colored items with icons: