How to create sticky blocks in the GeneratePress sidebar

I’ve been impatiently wanting to create a new sidebar for this website using the fancy new block elements since the ability to do so was introduced in GeneratePress Premium. I was certain that being able to build a GeneratePress Element-based sidebar using GenerateBlocks would allow me to make my websites look (even ?) better.

I started by replacing my footer widgets with a block element and since then, I’ve been wanting to take it one step further and replace all of my widgets with block elements. One thing has been holding me back, though. I couldn’t use my trusted sticky widget plugin in block elements as its function was limited to just widgets.

That all changes today. Because as it turns out you can make any block in a GeneratePress Block Element sidebar sticky with just a few lines of CSS. I can finally start designing my sidebars with GenerateBlocks!

Designing a sidebar using blocks

The first thing you will want to do is design your sidebar. To do that simply add a new block element and select right or left sidebar as the block type. My sidebar is rather simple (it’s the one you can see to the right of this article).

The boxes are simply GenerateBlocks containers with appropriate margins and paddings. I then filled those containers with the blocks I needed. A few buttons here, a few ads there and my new sidebar was done. I’ve spent more time cutting my toenails than designing my sidebar in GeneratePress.

Click on the container of your last block, in my case it’s an ad (I have to keep the lights on somehow) but it could be literally anything. Next, open up the block settings. Expand the Advanced accordion and enter the CSS class sticky-block. That’s all you have to do to that block.

With the class added to the last block in our GeneratePress Block Element sidebar, we can move on to the custom CSS code. The few lines we will be adding is what will make our block sticky.

Making a sidebar block sticky using CSS

The CSS code was helpfully provided by David from the GeneratePress customer support. In your WordPress menu select Customise under Appearance. In the menu that subsequently opens you the last item should be titled Additional CSS. Click on it and enter the following into the text field:

@media(min-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .sticky-block {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

Removing a plugin is never a bad thing

In WordPress communities, you will often read the advice that you should only ever install plugins you really need. Similarly, I have had WordPress veterans tell me to always keep my plugins to a minimum. And that is something I definitely always try to do. As GeneratePress is meant to be a lightweight and fast theme, I don’t want to slow it down by using too many plugins.

Using the few lines of code noted above I could completely replace a function which was previously provided by a plugin. I’m not saying the sticky widget plugin I previously used is bad but every plugin is a potential security risk and can slow down your website.