In the Lab: A Custom Notification Bar Block

Welcome back to the Lab.

For this tutorial we’re going to build a custom notification bar block. Perfect for when you need to drop a notification, notice, or super simple call-to-action on to a page or post.

It’s gonna look something like this:

The custom notification bar block with 3 different styles

Colours and background images will be customisable as well as the text and buttons.

So our local setup for building the block looks like this:

  • Theme: Atomic Blocks Child Theme
  • Plugins: Block Lab

That’s it. Nice and simple. Let’s do this!

First, we plan our block’s fields based on the design. Each field basically corresponds to a unique element in the block. So they are:

Field LabelField TypeField Location
MessageTextEditor
Button TextTextEditor
Button URLURLEditor
ColorColorInspector
Background ImageImageInspector

So in our WordPress Admin and with the Block Lab plugin active, we go to Block Lab > New Block.

Give our new block the title of Notification Bar and configure the block properties. This is what we have:

Custom Block Properties

Now let’s add all our fields as per our table above.

Custom Block Fields

Hit Publish.

You’ll notice that when you hit publish that at the top of the page a prompt appears telling us that our next step is to create a PHP template file and gives us the file name and path for this.

Block Template Prompt

So let’s open up our text editor of choice and create the file. In our child theme, in the top level folder, we’re going to add a new folder called blocks. In this folder we’re going to create a file called (as per the prompt above) block-notification-bar.php.

We’re also going to create a CSS file where we are going to add our CSS code for styling for the block. This file will be named exactly the same as the main PHP file except the file extension will be .css instead of .php. The Block Lab plugin auto-magically pairs these two files together.

With these files saved, we can go back to our Block Editor in WordPress, hit refresh, and we’ll see that our new template file is being picked up now as the prompt has disappeared and now shows the template file path.

Great, so our template file is all set up. Now let’s build it out.

In the PHP template file, let’s stub out our HTML and give the block a CSS class.

<div class="block-notification-bar" >
    <span></span>
    <a></a>
</div>

Next work with the PHP functions that Block Lab gives us for interacting with our custom block and its fields. The primary functions are:

  • block_value()
  • block_field()

block_value stores the data saved to the field. block_field echos the data out. For our block today, we only need to use block_field. So with these functions available to us, our template file looks like:

<div class="block-notification-bar" style="background-image: url('<?php esc_html( block_field( 'background-image' ) ); ?>'); background-color: <?php esc_html( block_field( 'color' ) ); ?>;">
    <span><?php esc_html( block_field( 'message' ) ); ?></span>
    <a style="color: <?php esc_html( block_field( 'color' ) ); ?>;" href="<?php esc_html( block_field( 'button-url' ) ); ?>"><?php esc_html( block_field( 'button-text' ) ); ?></a>
</div>

So what we’re doing here is 2 things. We’re using the block_field function to:

  1. add our content (message, button text, and button url) to their appropriate places in the HTML, and
  2. add inline CSS to handle our dynamic styling

Note that we are also sanitising our function outputs with esc_html. This follows WordPress coding best practices. You can learn more about that here.

For our CSS styling let’s jump over to our CSS template file. The CSS we’re adding looks like this:

.block-notification-bar {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    font-size: 16px;
    line-height: 16px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    border-radius: 2px;
    font-family: sans-serif;
    background-size: cover;
    margin-bottom: 40px;
}
.block-notification-bar a {
    background-color: rgba(250,250,250,1);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
    line-height: 12px;
}
.block-notification-bar a:hover {
    background-color: rgba(250,250,250,0.9);
}

Our CSS is fairly simple. The trickiest part is that we’re using Flexbox to position our content. Flexbox is new-ish to CSS and if you’ve not checked it out yet, I highly encourage you to.

And that is the final piece of this puzzle. Let’s go create a new Page in WordPress, add our block, fill out the fields and see what it looks like.

In the editor, we can select and add the block to the page:

Adding the Custom Block to the WordPress Editor

Fill in the fields:

The Block Fields in the Editor
The Block Fields in the Inspector

Preview in the editor:

The Custom Block in preview in the Editor

And check it out on the front end:

The Custom Block on the Front End

Sweet!

So to take this even further you could:

  • Conditionally display the button so you can add notifications that don’t require a user action.
  • Add a text color field so you can handle light background colors with better color contrast.
  • Remove the color/background fields and instead handle variations through fixed options with a select field (error, success, message, etc) and some clever conditional CSS classes in the template.

This was nice and easy, but certainly one that could prove to be pretty handy.

If you want to learn more, check out these previous tutorials:

Happy block building!

Leave a Reply

Your email address will not be published. Required fields are marked *