Building a Custom Block Part 10: Bringing the Notice Block into the Site Editor

In this final post of the series, we implement the Notice block in the site editor using template parts and modern WordPress theme features.

At this point, our Notice block has a lot of nice functionality, including letting users dismiss it. But so far, we’ve discussed just adding the block to a single post or page.

What if we wanted to display a Notice block on a template somewhere instead? That seems a lot more useful for a notice block anyway. Maybe you want to display a notice on a given page template if a certain query parameter is in the URL (ex: ?success=false), or maybe you want to show someone a notice in their account profile if they have a certain meta value set.

That said, all of this stuff is implemented inside of a theme, so you won’t be adding a template part in your block project or things like that. Understanding how your block might be implemented is an important aspect of developing blocks, so we’re going to cover it anyway.

Let’s get into it.

The Site Editor

I’ve been using the Twenty Twenty Five theme in my local install, which is a modern block theme. You could take these steps with any block theme though.

Block themes have a template hierarchy that is very similar to classic WordPress themes. They have a concept called “template parts” which have three types:

1. General: General templates often perform a specific role like displaying post content, and are not tied to any particular landmark or area of the page.
2. Header: The Header template defines a page area that typically contains a title, logo, and main navigation.
3. Footer: The Footer template defines a page area that typically contains site credits, social links, or any other combination of blocks.

When you create a template part via the site editor, the template is stored in the database. If you use the Create Block Theme plugin, you can save the database changes to theme files too. Most of the time, you’ll only want to do this if you’re building your own theme or using a child theme.

So in our case, we can make a “General” template part that holds notices that need to display in a specific template, or inside another template part. In our case, we’ll display these notices at the top of a single page after the header and before the page content.

To start, open up the Dashboard on your local install and navigate to Appearance->Editor.

From this view, you can edit the templates, template parts, patterns, and global styles for the theme. Additionally, there are some places to edit menus and pages, all through the site editor.

Now click “Templates” in the sidebar to view all of the theme templates. Find “Pages” in the list (this may vary depending on your theme) and click on the preview image to open the site editor. It will look something like this:

We can insert blocks into this template, just like we were doing with posts and pages up until now. We’ll add our new template part right above the Featured Image. One simple way to do this is to select the block and use the “Add before” command. You can do this quickly using the Command Palette by pressing cmd+K (macOS) and typing “Add before” while the block is selected. You can also use the keyboard shortcut (opt+ctrl+t for macOS) or click the dots menu and choose “Add before”.

Next, type /template part and you’ll see the block inserter prompt you to add a Template Part block, along with other existing template parts to choose from.

Choose “Template Part” and the block will ask you to pick template part or make a new one. Click “Start Blank” to open the dialog to create a new template part. You can call it whatever you like, but I’ll call it “Page Notices” then click the button below to create it.

This will insert the Page Notices template part and give you a place to click to insert new blocks. Now, go ahead and add an Info Notice. Once you do this, look at the List View on the left of the editor and you’ll see your Info Notice nested inside the “Page Notices” block. Save your changes.

Once you’ve saved, you can view any page using the default page template and you’ll see the notice displaying as expected.

This is fine, but on a dynamic website, you’ll almost definitely have conditions for when these notices should show. This kind of functionality isn’t built into WordPress by default, but we can use the Block Visibility plugin to give us the ability to show or hide our notices based on various conditions.

Setting up Block Visibility

Block Visibility is a plugin from the WordPress plugin directory that allows you to set display conditions for blocks from a variety of settings including date/time, meta values, screen size, the URL, query params, and more. If you wanted to display a notice on a page only if a certain query parameter is present, this plugin would allow you to do that.

For our example, let’s say we wanted to show this notice only if someone isn’t logged in. We can prompt the person to login to see additional content on the page, that kind of thing.

To get started, download and activate the Block Visibility plugin from the WordPress plugin directory:

Once we’ve activated the plugin, we’ll go back to edit the template part with the notice and select our Notice block. In the bottom of the right sidebar block settings, there is a new panel called “Visibility”. Click the three stacked dots to open the dropdown menu and choose “User Role”. This will add a new dropdown that is set to Public by default.

Now take a look at one of the pages on your site. If you’re in the same browser you’ve been in the whole time (and thus logged in to the site), you should not see the info banner anymore.

If you open up the site in a private/incognito tab, you’ll see the notice displaying above the page content.

Handling multiple notices

The last consideration for now is displaying multiple notices. If you were to add another notice to this same template part they would be stacked right on top of each other on the frontend.

If you were to look in the editor though, you’d see a space between them, which seems confusing at first.

By default, the editor leaves space for you to insert other blocks by hovering your mouse between the blocks. This space doesn’t automatically apply to the frontend and is just to make sure the editor works.

Thankfully the fix is dead simple: wrap the notices in a Group block and set the following settings on the group block:

• Inner blocks use content width (disabled)
• Block Spacing (under Styles) to a value that you like. I chose the xs spacing preset from twentytwentyfive.

That’s all there is to it. Now if you load that page incognito again, you’ll see both notices display but they have a gap between them automatically.

Conclusion

At this point, our Notice block has come a long way. It started as a basic custom block and now supports inner blocks, block variations, style presets, dismissible behavior, toolbar controls, restricted inner blocks, and site-wide placement through template parts.

In this series, we’ve covered not just how the various APIs work, but we’ve stepped through the changes just like you might if you were figuring out how you wanted to build your own block. Think carefully about your desired outcome and the right path will become clear.

Happy coding!

Further Reading

• Template Parts (Theme Developer Handbook)
• Block Visibility Plugin (WordPress Plugin Directory)
• Block Visibility Documentation (Block Visibility)
• Create Block Theme Plugin (WordPress Plugin Directory)
• Block Theme Overview (Theme Developer Handbook)
• Building a Custom Block Part 1: Scaffolding Block Files