The WordPress project is slowly but surely inching toward responsive block settings. Version 6.9 introduced the Block Visibility feature, allowing you to temporarily disable a block without deleting it from a post. WordPress 7.0 took it a step further by adding options to hide a block based on device.

Perhaps it’s a niche feature. But it’s also quite handy for targeting mobile or desktop users with specific blocks. And it’s also a gateway to more responsive controls landing in WordPress 7.1.

Today’s tip will show you how easy it is to show or hide a block based on a user’s device. Here we go!

Sample Project: Simplify a Hero Area for Mobile Users

Here’s a common scenario: Your website has a large hero area, complete with a high-resolution image, text, and a call to action (CTA). It looks great on a desktop device but is clunky on a phone. The image is too big, and there’s too much text for users to digest. What to do?

The responsive Block Visibility controls will make this a piece of cake. We’ll create two hero areas – one for desktop and another optimized for mobile. The result will be a better user experience for everyone.

Step 1: Create Desktop and Mobile Hero Areas

The first step is to create the two hero areas for our page. We’ll grab one from the WordPress Block Pattern library and see what we can do with it.

Our desktop hero area is beautiful on the big screen! It should also work well on tablets, such as an iPad. However, it may be overwhelming for mobile users.

Let’s simplify. We duplicated the desktop hero and made a few changes:

• We replaced the image with a cropped version that is optimized for smaller screens.
• We centered the text and CTA.
• We replaced the three columns of text with one, shorter passage.
• Finally, we tightened up the spacing to reduce scrolling.

The mobile hero offers the same immersive look without the extra bulk.

Step 2: Assign Hero Areas to Their Respective Devices

As of now, our page has two hero areas, each contained within a Group block. The next step is to set one of them to display on desktop/tablet devices, and the other on mobile. We’ll use the Block Visibility feature to make it happen.

Desktop/Tablet Devices:

• Click on the Desktop Hero block we created.
• Click on the Options menu (⋮) and select Hide Block.
• Choose the Hide on Mobile option.
• Click the Apply button and save the page.

Mobile Devices:

• Click on the Mobile Hero block we created.
• Click on the Options menu (⋮) and select Hide Block.
• We’ll choose two options this time: Hide on Desktop, Hide on Tablet
• Click the Apply button and save the page.

You may notice that the mobile hero no longer displays on the Block Editor canvas. That’s the desired result, as it won’t be in the way when working in Desktop preview mode.

Switch to Mobile preview mode, and you’ll see the opposite effect. The desktop hero is hidden, allowing the mobile version to take over. You can edit these blocks when in the appropriate preview mode.

Note that you can also view and edit these blocks using the Document Overview (List View) feature (Shift+Alt+O). Select the block, click on the Options menu (⋮), and select Show from the menu. You can hide it again once you’re finished editing.

Oh, and be sure to test on different devices! It’s not enough to shrink your desktop’s browser window. You can use your browser’s dev tools to emulate a mobile device if you don’t have one handy.

Use Different WordPress Blocks on Different Devices

It’s often the little extras that make the biggest difference. Targeting different devices via the Block Visibility feature is a prime example. Its release didn’t draw much fanfare. However, it makes WordPress more flexible for designers.

Before WordPress 7.0, we’d have to work around this limitation. That could mean installing a specialized plugin or writing custom CSS rules in a theme. Now, we’re only a few clicks away from choosing which blocks display on a given device.

The feature saves us time, improves the user experience, and won’t hog server resources. Most of all, it’s a sign of things to come for WordPress.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post How to Hide WordPress Blocks Based on Device appeared first on The NOKIA Blog.

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!

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Quick Tip: How To Use WordPress Block Notes appeared first on The NOKIA Blog.

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:

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:

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.

<!–

–>

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post How to Protect WordPress Block Layouts From Accidental Changes appeared first on The NOKIA Blog.

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.

WordPress.com Black Friday Deal

Read moreRose gold design

For Black Friday, if you sign up for a WordPress.com Business Plan, you will not only get a 10% discount, but also a free professionally designed website worth $499, which includes setup on the platform with a custom theme and five core pages.

Get the WordPress.com Hosting Deal

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.

<!–

–>

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post How to Build a Custom WordPress Block With Telex appeared first on The NOKIA Blog.

This handy tool also works great with WooCommerce. The e-commerce plugin includes several blocks you can use with these new-fangled themes. It’s easier than ever to build an attractive and functional online store.

As a result, we’re seeing more block themes focusing on WooCommerce. They aim to give you a head start on your site while taking advantage of powerful modular features. It’s a new spin on the traditional e-commerce theme.

Looking for the perfect theme to get your shop online? We’ve got you covered with this collection of top block themes for WooCommerce.

Free to Download | Demo | WordPress Hosting

Here’s a minimal store theme for WooCommerce that puts your products in the spotlight. It features a black-and-white color scheme and bold typography. The default layout includes product filtering to improve the customer experience. Since it’s a block theme, you can edit every aspect to match your needs. It’s also 100% free.

Free to Download | Demo | WordPress Hosting

This WooCommerce block theme is designed to sell children’s products in style. It’s a colorful and friendly look that will please kids (and their parents). The theme comes packed with over a dozen block patterns and 19 templates. The pro version offers even more flexibility, with extra patterns and templates to customize your shop.

Free to Download | Demo | WordPress Hosting

Add a touch of color to your online store with Art and Craft. The theme comes with multiple style variations with light and dark color palettes. Several custom block patterns are there to help you show off your products. Overall, the look is well thought out and would fit just about any product type.

Demo | WordPress Hosting

Get ready for a high-fashion look with Glamorama, a commercial block theme for WooCommerce. Inside, you’ll find over 60 custom block patterns, an array of style variations, and bold styles. A one-click demo content feature will help your project get off to a quick start. The theme is also optimized for performance and SEO.

Free to Download | Demo | WordPress Hosting

Bright and clean, General Food Store adds flavor to your WooCommerce store. The theme includes three style variations, which can be tweaked to your heart’s content. The home page features a Bento layout style and product listings are attractively simple. A category menu in the header makes it easy to find what you’re looking for.

Free to Download | Demo | WordPress Hosting

This free WordPress theme is aimed at wellness service providers like yoga instructors and personal trainers. There are sections for staff profiles, services, testimonials, and more. Patterns for the site header and footer are easy to customize. A handsome grid layout for your blog is also included.

Free to Download | Demo | WordPress Hosting

Eternal is a multipurpose WooCommerce block theme. It’s among the most flexible in our collection, with seven style variations and plenty of template options. There are multiple page layouts to give you just the right look. Overall, it’s a simple choice that puts the focus on your products.

Demo | WordPress Hosting

If you’re looking for a theme that puts products first, Gravia should be on your list. This commercial theme includes multiple home page layouts – including a few that eschew the all-too-common slider or hero image. The result is that customers will see your featured products immediately.

Free to Download | Demo | WordPress Hosting

This theme includes all the essentials for building a WooCommerce store. The layout is attractive and easy to navigate. There are block patterns for the header, footer, hero area, products, and sidebar. A pro version is available and offers a few more bells and whistles.

Free to Download | Demo | WordPress Hosting

Here’s a stylish choice for selling clothing, jewelry, or accessories with WooCommerce. The theme has six style variations – including a beautiful dark mode. It also has a unique product listing layout that is decidedly different than the WooCommerce default. It’s perfect for those looking to dress up their website.

Free to Download | Demo | WordPress Hosting

There is plenty to like about VW Furniture Shop’s look and layout. It’s clean, easy to read, and adds scroll animations to the mix. You’ll also find a half-dozen style variations and plenty of block patterns you can customize. The theme is designed for furniture and interior accessories but is flexible enough to work with other product types.

Demo | WordPress Hosting

As the name indicates, Woo Booster is designed specifically for WooCommerce. It’s also meant to be flexible and work with multiple product types. There are variations for light and dark modes. In addition, there are several child themes available that offer a narrower focus. It’s a good starting point for building your online store.

A Different Way to Do WooCommerce

Block themes are perfect for those who want to build a WooCommerce store without the fuss of code. Plus, you don’t need in-depth knowledge to tweak colors and typography – the Site Editor allows you to do it with a few clicks.

It’s even a boon for seasoned web developers. There’s no more firing up your code editor to make a minor template change. These themes will streamline your workflow while still offering plenty of features.

The included custom block patterns are also an advantage. They’ve done some of the hard work for you. However, you can also create patterns yourself or grab them from the Pattern Directory.

All told, the themes above offer flexibility and convenience. What’s not to like?

You might like to take a look at our choice of the best WooCommerce hosting options.

–>

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post 10+ Best WordPress Block Themes for WooCommerce in 2025 appeared first on The NOKIA Blog.

That only scratches the surface, however. Custom blocks let you integrate with third-party services, add dynamic content, or create complex layouts. The right blocks help you achieve more without code.

Several custom block suites exist to supercharge your projects. They include a variety of blocks for niche and common tasks. Some offer features similar to a page builder, but stay within the Gutenberg interface. Others aim to fill the gaps left by the default blocks with features like mobile styling.

So, which ones are worth your time? We’ve assembled a collection of the best WordPress block suites on the market. There’s something here for everyone.

Some block suites want to reinvent the wheel, and the result is bloatware. GenerateBlocks avoids this fate by focusing on features that WordPress lacks. The free version includes nine blocks for building layouts, post queries, and decorative elements.

Step up to the pro version for access to a pattern library, responsive block settings, CSS effects, and global styling. This suite is proof that less is more.

Kadence Blocks is a suite that caters to designers looking for advanced control and functionality. The Section and Row Layout blocks are there to make page layouts a breeze. Other blocks, such as Advanced Form, Advanced Gallery, Posts, and Table of Contents, add utility.

Pro users will find scroll animations, dynamic content (custom fields), and custom fonts. It’s a do-it-all option for WordPress users.

If you’re looking for a page builder experience, put Stackable on your list. The plugin includes 42 blocks that run the gamut of design, layout, and utility. You can do more than build custom layouts, though. There are blocks for adding maps, media popups, cards, countdowns, and much more.

Upgrade to premium, and you’ll find features for dynamic content, integrations with popular plugins (ACF, WooCommerce), motion effects, and even more blocks. Stackable covers just about every conceivable niche.

You can use PublishPress Blocks to gain more control of the Block Editor. Its block permissions feature lets you choose who can use specific blocks. The block visibility controls display or hide blocks based on several criteria (user role, date/time, device, etc.).

And we can’t forget about the 20+ included blocks. Use them to build sliders, fancy lists, post grids, tables, tabbed layouts, and more. Pro features include additional blocks and other goodies.

CoBlocks is a completely free suite of handy blocks for building layouts and advanced functionality. Displaying media is a focus, with blocks for creating various gallery formats. In addition, you’ll find blocks catering to social media, logos, maps, pricing tables, and service listings.

Designers will want to check out the custom shape divider options. Finally, the resizable row/columns block helps you take control of custom layouts.

Spectra includes custom blocks for a wide array of use cases. Niche offerings help you add timelines, counters, FAQs, Lottie animations, and star ratings to your site. There are also blocks for displaying custom post layouts, sliders, and tabs.

The pro version adds animation, responsive controls, dynamic content, and a popup builder. There are plenty of possibilities to dig into.

Otter Blocks includes 20+ custom blocks that cover a range of uses. You’ll find options for displaying icons, maps, progress bars, and other UI components. An AI block helps you generate content and forms via a prompt. The plugin also adds custom CSS capabilities to all Gutenberg blocks, allowing you to create styles on a one-off basis.

The included display conditions let you target specific users and devices or customize a block’s display status by other criteria. Pro users will find a live search block, among other extras.

Interactivity makes Ultimate Blocks a compelling option for designers. Its content filter block lets users view content based on custom criteria. The social share block makes it easy for visitors to share your content with others.

On the utility side, both the review and how-to blocks feature Schema markup to help with SEO. The pro version adds several new blocks and the ability to save custom styles.

Build Better With Custom Blocks

The default WordPress blocks can only get you so far. Thankfully, the large ecosystem of custom blocks allows us to level up. We can use them to create pixel-perfect layouts and add high-end features – all with a few clicks.

You’ll find some similarities in the block suite plugins above. Each has its take on custom layout tooling. There are also plenty of accordions, tabs, and galleries to go around.

So, how do you choose the right one? First, consider your project goals. Do you need custom blocks to build layouts, or are you more focused on those extra features? If you’re looking for advanced components, that may be the deciding factor.

It’s also worth thinking about how many sites you’ll use the plugin on. The free version may be all you need, or the features you want are locked behind a pro subscription. Consider the potential costs before deciding.

Like page builders, block plugins require a commitment. You’ll need the plugin to keep using its custom blocks. So, choose a suite that you’re likely to be happy with in the future.

All things considered, a block suite is the quickest way to improve your no-code experience. They’ll save you precious time by letting you do more within WordPress. Find the right one for your needs and get building!

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post 8 Best Block Suites You Can Add to WordPress appeared first on The NOKIA Blog.

Style variations give you a head start on design. They allow us to create multiple color and typography combinations. They also house custom block styles defined in the Site Editor. Anything in a theme.json file can also be included in a style variation.

This is handy for web professionals and users alike. Choose the variation that suits your needs and start building your site.

Creating a custom block theme style variation is easier than you think. The entire process takes place in the WordPress Site Editor. A simple variation can be built in minutes.

So, follow along as we build a style variation! We’ll show you how to point and click your way to a custom design.

Style Variation Project Requirements

The requirements for building a custom style variation are minimal. You’ll need:

We don’t recommend using a production website for this process. A staging or local WordPress installation is the safer way to go.

Let’s Build a Style Variation

Now, it’s time to start building! Log in to your WordPress website and follow the steps below.

Step 1: Open the WordPress Site Editor

First, navigate to Appearance > Editor in the WordPress admin to open the Site Editor. Then, click the Styles link in the left sidebar.

The Styles panel includes links for Typography, Colors, Background, Shadows, and Layout. You’ll also find a Browse Styles link that displays available style variations for the theme.

Finally, the Blocks link allows you to customize individual block styles across the site.

Step 2: Change Your Theme’s Styles

This step is all about personal preference. Work your way through the Styles panel and start making changes.

Color and typography are the most obvious changes, but you can take things further. For example, you can change the layout width and spacing. Plus, every block included with WordPress can be customized. Add margins, padding, borders, or custom CSS.

We covered the basics in our variation, including:

• Created a custom color palette;
• Installed new fonts from Google Fonts;
• Added custom spacing for the Group and Paragraph blocks;
• Changed the look of the Button block;

The result is an earthy look that aims for simplicity. But you can do as much or as little as you like. Just remember to save your changes when done.

Step 3: Save Your Style Variation

Our next task involves saving our custom style variation. This functionality is part of the Create Block Theme plugin.

The feature is located within the Site Editor. Here’s how to find it:

1. While in the Site Editor, click on the right panel, highlighted in green below:

2. Click the wrench icon on the upper right of the screen and select Create Theme Variation:

3. Name the variation and ensure the Save Fonts box is checked. We’ll call ours “Beautiful Earth.”

4. Click the Create Theme Variation button to save the settings.

Once saved, the new variation is added to the list in the Browse Styles area of the theme editor. Hovering over the variation reveals its name.

How to Use Your Style Variation on Another Site

Style variations are portable and can be used on multiple websites. The process involves copying the generated JSON file and adding it to the desired site.

1. Locate the style variation’s JSON file in /wp-content/your-theme/styles/
   Replace your-theme with the name of the theme you’re using (ours is twentytwentyfive).

   For reference, our JSON file is called beautiful-earth.json

2. Copy your style variation’s JSON file.
3. On your new website, paste the file into /wp-content/your-theme/styles/ – you may need to upload the file via SFTP or your web host’s file manager.
4. You’ll now be able to choose the style variation within the Site Editor.

About Custom Fonts

Earlier, we mentioned the ability to add custom fonts to a style variation. It requires a few extra steps to work when moving your variation to a new site.

1. Locate the custom fonts you added at /wp-content/themes/your-theme/assets/fonts/
2. Copy each font’s respective folder.
3. Paste the font folders into the same directory on your new site. Once again, you may need to upload them.

Give Your Block Theme a Custom Look

Style variations are a convenient way to add personality to your block theme. You can build them to suit your project requirements.

They also act as a starting point for designers. You can continue to add custom styles after applying a variation. The changes you make will be saved in the site’s database.

There’s also an option to reset the styles to the variation’s defaults. That makes it easy to experiment without losing the key elements of your design.

The best part is that style variations don’t require coding expertise. That puts custom design within everyone’s reach.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Learn How to Build a WordPress Block Theme Style Variation appeared first on The NOKIA Blog.

Traditionally, using custom fields meant navigating obstacles. They require coding knowledge or a plugin to render field data. Implementing them can be time-consuming and out of reach for some users.

The WordPress Block Bindings API removes some of these limitations. It allows us to “bind” custom field values to a WordPress block. You don’t need a plugin to use them, as the function is built into the Block Editor. Registering fields still requires code, though.

Regardless, using the API is a time saver for developers. Here’s a look at how it works, along with a real-world example.

We should also note some of the API’s limitations. As of this writing, it works with the Paragraph, Heading, Button, and Image blocks. Data types are also limited to content, text, URL, etc. Check the documentation for more details.

With that out of the way, let’s see an example of the Block Bindings API in action.

Example: Let’s Bind a Custom Field to a WordPress Block

Our example is an homage to WordPress’ blogging roots. We’ll create a custom field called “Now Playing,” which we’ll fill out on each blog post. The field will contain a favorite song, movie, or TV show of the moment.

We’ll register the custom field in our theme, add it to the post template, and bind the field to a paragraph block.

We’re using the Twenty Twenty-Five default block theme. That means we can edit templates with the Site Editor.

Step 1: Register the Custom Field

First, we’ll register our custom field by adding code to our theme’s functions.php file. This lets WordPress know that our field is associated with posts.

Note the field’s slug, as we’ll need it later: now_playing

Step 2: Display Custom Fields in the Block Editor

By default, custom fields aren’t displayed in the Block Editor. So, we’ll have to enable the feature:

1. Open a post or page in the WordPress admin.
2. Inside the Block Editor, click on the Options menu (⋮).
3. Click on the Preferences link.
4. Go to the Advanced heading and turn on Custom fields.

WordPress will refresh the screen and display a custom fields UI at the bottom.

Step 3: Add a Custom Field to a Blog Post

Next, we’ll add our custom field to a blog post:

1. Navigate to Posts > Add New in the WordPress admin.
2. Give your post a title and add content.
3. Scroll down to the Custom Fields area of the editor.
4. Under the Name column, click the Add New button.
5. Enter the custom field slug in the Name field: now_playing
6. In the Value field (right column), enter the name of a song, movie, or TV show.
7. Publish your blog post.

Step 4: Bind the Custom Field to a Block

Now, it’s time to bind our custom field to a block. Since we’re using a block theme, we’ll navigate to Appearance > Editor.

We want to add custom field data to single blog posts. Inside the Site Editor, click on Templates, then click on Single Posts.

Next, we’ll choose a spot for our custom field in the Single Posts template. Just above the post content seems like a good choice.

1. Add a Paragraph block to the chosen spot in the template. Don’t add any content to the block.
2. Select the Paragraph block (click into the block or select it from the List View panel).
3. Click the “+” icon in the Attributes tab on the right column of the editor.
4. Select “content” from the Attributes list.

5. Click on “content” in the Attributes tab. A list of registered custom fields will appear. Select now_playing from the list. You might also add custom formatting to this area to make the field stand out. We chose the “Subtitle” style from the block settings.

6. Save the changes you made to the template.

Notice that clicking on the Paragraph block reveals a purple outline. This denotes that the block is bound to a custom data source.

Step 5: View the Result on the Front End

Let’s see how our custom field binding turned out. We’ll visit our blog post to see how it looks.

It’s working! Our song (“Wonderwall” by Oasis) is displayed above the post content.

The technical side of our example is done. However, we might want to tweak the styles or add another paragraph that says “Now Playing:” above the field. That would improve the feature’s look and accessibility.

An Easier Path for Using Custom Fields

Using WordPress custom fields is easier than ever. The Block Bindings API helps with simple use cases like the one above. It all works within the Block and Site editors.

That means less hassle for site builders. You don’t have to install a plugin or get tangled up in layers of PHP.

Plus, the feature is expected to evolve. For example, we may see more data types supported and a code-free way to register custom fields. It will be exciting to see what comes next.

Features like the Block Bindings API bring WordPress ever closer to a code-free experience. That puts a custom website within everyone’s reach.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post Learn How to Display WordPress Custom Field Data With Blocks appeared first on The NOKIA Blog.