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.

WordPress is known for its flexibility. The ability to build custom blocks keeps with that tradition. There are so many potential use cases. It feels like the sky is the limit.

However, building a custom block hasn’t always been easy. Even seasoned WordPress developers can struggle to learn the process. Blocks are based on React, rather than PHP. As such, there’s a serious learning curve. That has left many to look at alternative methods or use third-party block suites.

There’s a new tool looking to change the narrative. Telex is Automattic’s AI-powered block builder. Tell the app what you want, and Telex goes to work. It generates code and, once you’re satisfied with the result, creates a custom plugin to install on your website.

Telex is ripe for experimentation. Let’s take it for a spin and see what it can do.

Getting Started With Telex

First things first, you’ll need a free WordPress.com account to use Telex and save your projects. Click the Login button on the upper right of the screen to get started.

Once that’s taken care of, it’s time to tell Telex about your project. The interface should be familiar to anyone who has used ChatGPT, Gemini, or other popular AI models.

Enter your idea into the text field, and the tool takes care of the rest. It generates your custom block’s code and even lets you test it in a real WordPress installation (thanks to WordPress Playground).

Doesn’t that sound otherworldly? Follow along as we create a demo block.

Creating a Custom Timeline Block

From the looks of things, there’s no idea that’s too far-flung for Telex. There is a plethora of creative examples popping up on the web.

For our purposes, we’ll try to keep things practical. We’ll create a Timeline block that allows us to highlight important dates with style.

Here’s the prompt we used:

Create a Timeline block that allows me to highlight important dates in a vertical format. It should have fields for the following:

1. Year
2. Content

The design should feature the Year on the left and the Content on the right. A vertical line should be displayed between the Year and the Content. The Year should be bold text and stand out.

Hint: Telex has an “Enhance Prompt” feature that will that will rewrite your prompt using AI. Give it a try if you’re having trouble describing what you want. We tried the feature, and it added a few elements we hadn’t thought of, including responsive styling.

Click the Build button once you’re satisfied with your prompt.

Generating & Testing Our Custom Block

Telex will start building your block in plain view. The UI shows your prompt at the top of the screen, while the app’s internal dialog scrolls by below.

In our case, the process took about two minutes to complete. Once finished, we were redirected to a WordPress install and placed into the Block Editor.

This is where the fun begins! Telex provides an opportunity to test our new block and see how it works. We can use the chat panel on the right side of the screen to ask questions or make edits.

Judging the Initial Result

At first glance, our Timeline block looks similar to what we envisioned. Telex followed our instructions with the help of its AI enhancement feature. It also added a few details we didn’t think of, such as the ability to style the block’s colors and spacing.

There’s even a handy plus (+) icon for adding additional milestones to our block. As promised, the block is also responsive. The Year and Content blocks are stacked on small screens for easier reading.

It’s a strong start. However, we think there’s room for improvement. Can Telex help?

Improving Our Timeline Block

Perhaps the biggest thing missing from our block is the ability to customize the typography. We’d love to change the font sizing and spacing. Let’s ask Telex for some help:

Can you add font size and spacing settings to the Year and Content fields?

Telex receives our prompt and immediately begins revising the block. Once finished, the Block Editor is refreshed, and it’s time to inspect the changes.

Sure enough, our block now features typography settings for the Year and Content fields. Nice!

We’re one step closer to completion. However, there are a few other small tweaks we’d like to make:

I notice the line between entries isn't connected. Can we change that?

Also, I'd love the ability to horizontally align each entry to the Top, Middle, or Bottom.

Telex got both requests correct, to a point. We can now align our milestones horizontally. However, the connecting line has now moved to the left side, which is not what we wanted. Recall that the line had been in the middle.

Can you move the connecting line back to the middle? It should be connected to the icon between the Year and Content fields.

It took a few tries and a recovery from a PHP crash inside WordPress Playground. Telex eventually moved the line to the middle and adjusted the styling so the milestones are connected on the front end (there was still a bit of space in the editor).

Things are looking good, so we’ll click the Download button on the upper right of the screen. Telex provides a ZIP file containing a plugin for our custom block.

Now, we can install the plugin on any WordPress website!

Making Custom Blocks a Prompt Away

Our experience with Telex was a pleasant one. Within 30 minutes, we had a working prototype of our custom Timeline block. Even the most talented of React developers would have difficulty matching that pace.

Sure, there were a few glitches along the way. That’s to be expected from any AI tool. However, Telex produced the result we were hoping for.

What about security? We ran the plugin through Plugin Check, which gave us a thumbs-up. We recommend using the tool for every custom block you generate. Also, review the code manually. Don’t take security for granted.

Telex is still in its “experimental” phase as of this writing. However, it’s safe to say that the future looks very bright.

The post How to Build a Custom WordPress Block With Telex appeared first on Speckyboy Design Magazine.