The WordPress Block Editor is great for creating custom layouts. There are plenty of core and third-party blocks to choose from. They bring a world of possibilities – all without writing a line of code. Add a block theme, and get a browser-based design and development experience.

There is one valuable thing that WordPress blocks left behind, however: code commenting. They’re common when building custom PHP templates and writing CSS. We use them to provide context for what a code snippet does or why it was implemented.

There are times when that extra context is useful in the Block Editor. For example, you might want to share information about a block with clients or colleagues. Perhaps it’s locked or requires a specific setting to display correctly. Sometimes we need to remind ourselves why we did something.

That’s where the WordPress Notes feature comes in handy. Use it to add notes to specific blocks and even keep a threaded conversation. It’s another way to improve your editorial workflow and provide a quick reference for users.

Here’s a look at how the feature works. We’ll show you how to add and retrieve notes to any block on your site. In addition, we’ll share a few tips and hidden gems worth knowing about.

Sample Project: Let’s Collaborate With Blocks

The WordPress Notes feature is part of the larger Gutenberg Collaboration phase. At the very least, it’s a way to add reminders or have an asynchronous discussion with other site users. That second part is what we’ll focus on here.

We’ll simulate a discussion of colleagues regarding a Group block. We promise it will be quick and easy!

Step 1: Choose a Block

The first step is to open a page or post in the Block Editor and select a block. We’ll choose a Group block at the top of the page. We want to discuss its styling with a colleague.

Step 2: Add a Note

Now that we know which block we want to discuss, it’s time to add a note.

1. Click on the Options menu (⋮) and select Add note.
2. A note dialog appears on the right side of the screen. We can add our note in this space.
3. Click the Add note button to save the note.

For reference, we asked if our Group block should have a background color to stand out from the rest of the content.

Next, we’ll wait for our colleague to reply to our note. When they click the block in question, they’ll see a user avatar that indicates a note is available.

Step 3: Our Colleague Replies

Here’s a handy feature: WordPress will send you an email when someone replies to your note (it’s based on the existing comment system). As such, we don’t have to keep checking our page for the latest news.

Our colleague replied to our note and acted on our design suggestion. When we visit the page, we notice that their avatar has also been added to the block’s note notification.

Step 4: Reply and Resolve

We love what our colleague did to dress up the Group block on the page. The last steps are to reply and mark the note as resolved.

To resolve the note, we’ll click the checkmark on the upper right of the dialog. Keep in mind that the note will stay in place unless we manually delete it from the block.

An Easy Way To Collaborate in WordPress

The WordPress Notes feature is a great way to relay information to others or remind yourself of something important. And it will continue to be enhanced as more collaborative features are added to the content management system (CMS).

Even better, you don’t need a plugin to get started – it’s already built into WordPress. That being the case, there are ways to customize the experience. We recommend checking out this guide to tapping into that potential.

Whether you’re part of a team or working solo, give WordPress Notes a try. You may wonder how you lived without it!

The post Quick Tip: How To Use WordPress Block Notes appeared first on Speckyboy Design Magazine.

The WordPress Block Editor enables browser-based design. That’s leaps and bounds from where the old Classic Editor fell short. It may eliminate the need for a page builder plugin in some cases.

That’s all good news. However, it’s also tricky for web developers hoping to prevent their clients from accidentally breaking a layout. It’s all too easy to delete a component or drag one to a different spot. Oh, the horror!

Keeping your designs looking good and safe is essential. Fortunately, WordPress offers several built-in methods for doing just that. They could save you from a headache or two.

Let’s learn how to protect your WordPress block layouts the easy way!

Step 1: Create WordPress Block Patterns

You spent all that time creating a custom block layout. Preserve your work by saving it as a block pattern. It only takes a few seconds and allows you to reuse custom layouts at any time.

This means you can easily restore a layout if something goes wrong. That’s simpler than trying to piece things back together or clean up a royal mess.

Even better, you can export block patterns and save them locally. This keeps your original layout intact, no matter what happens on the live site. You can then re-import the pattern should the worst happen. The other benefit is that the pattern can be imported to other sites or included in a custom plugin.

To create a block pattern, click on a block’s Options menu (⋮) and select Create pattern. Give the pattern a name and optionally assign it a category.

Once your pattern is saved, you can access it in the Appearance > Design menu within WordPress.

Helpful Resources:

• Exploring the WordPress Block Pattern Directory (Speckyboy)
• How to Create & Manage Block Patterns in WordPress (Speckyboy)
• Synced Patterns (Reusable blocks) (WordPress Documentation)
• Using Block Patterns (Learn WordPress)

Step 2: Lock Your Blocks

Block layouts can be easily edited and rearranged by default. For example, you might use the Block Editor’s List View to drag items to different areas of your page. It’s great for flexibility, but it can also result in some unintended consequences.

The Lock feature allows you to prevent blocks from being modified or removed from your layout. Users can still change the contents of a block. However, they must use the same type of content. For instance, you can only replace an image with another image, and so on.

If you’re locking a Group block, you can also choose to lock all blocks within the group. This step protects the entire custom layout. It’s another reason why the Group block is great for housing layouts.

To lock a block, click on its Options menu (⋮) and select Lock.

Note that there’s also an option to unlock a block if you need to make further edits. If you want more control over who has permission to unlock a block, there’s a code snippet that can help.

Helpful Resources:

• Block Locking API (WordPress Documentation)
• How to Lock Blocks and Templates (Full Site Editing)
• The Key to Locking Blocks (Learn WordPress)

Keep Your Block Layouts Safe and Beautiful

In days past, web developers had various tricks to client-proof custom layouts in WordPress. We hardcoded them into PHP-based theme templates and implemented custom fields to allow content changes. This approach doesn’t work as well in the world of blocks, though.

No, using the WordPress Block Editor to build layouts is about more than just aesthetics. You also need a plan to ensure that what you create is protected against breakage – block patterns and locking offer quick, built-in solutions for doing so.

Combined, these features add some resiliency to your custom layouts. And, even if something goes wrong, you can still restore the original version. That provides some peace of mind for you and your clients.

The post How to Protect WordPress Block Layouts From Accidental Changes appeared first on Speckyboy Design Magazine.