But before we get too far into the weeds, it’s worth noting that block themes are fundamentally different than the classic WordPress themes you’re used to. They’re specifically built to work with FSE and the Gutenberg block editor. Think of them as an entirely separate category of theme.

Now that we have those details out of the way, it’s time to start looking at themes! Block themes are a growing segment, and therefore, it will take time for their numbers to approach the massive quantity of classic themes on the market.

Still, there are plenty of compelling options. And the fact that these themes are fairly simple to customize means that you have a lot of flexibility. If a particular design element doesn’t fit your needs, you can always start from scratch.

To help get you started on your journey, here are ten free WordPress block themes that are worthy of your consideration.

Tove Multi-Purpose Block Theme

Free to Download | Demo | WordPress Hosting

Among the earliest block themes on the market, Tove provides plenty of design possibilities. Take advantage of multiple header and footer layouts, or create your own. 40+ block patterns cater to restaurants and cafés but can be repurposed for other business types. Built for speed, the theme weighs in at just a shade over 200 KB in size.

Skatepark Modern Event Theme

Free to Download | Demo | WordPress Hosting

If bright colors are your thing, Skatepark could be the right block theme for you. The theme sports minimal aesthetic, bold fonts, and utilizes the duotone image effects found in the block editor. It’s a good fit for small brochure-style sites or one-page virtual event flyers.

Stewart Minimal Blogging Theme

Free to Download | Demo | WordPress Hosting

Stewart will help to bring your blog into the FSE era. It shifts the focus towards content, with the site’s navigation stored within a left sidebar. Photography has room to shine with this no-frills layout.

Twenty Twenty-Two

Free to Download | Demo | WordPress Hosting

If you’re looking to experiment with a block theme, Twenty Twenty-Two offers a great starting point. The 2022 default theme was released alongside WordPress 5.9 and takes full advantage of FSE. It also includes dozens of unique block patterns to make quick work of custom layouts.

Frost Minimal Multi-Purpose Theme

Free to Download | Demo | WordPress Hosting

Frost has quickly become one of the more complete block theme packages available. With dozens of included block patterns, it can power virtually any type of website. Simple and clean, the theme is practically begging for your personal touch.

X3P0 – Reflections Theme

Free to Download | Demo | WordPress Hosting

Not every website needs to be complicated. When all you’re looking for is a one-page profile, X3P0 – Reflections makes it a breeze. Enter your information, customize the look, and be on your way. Sometimes simple is better!

Bricksy Modern Block-Based Theme

Free to Download | Demo | WordPress Hosting

Want to build a highly-detailed visual experience? Bricksy includes those little touches that can make all the difference in your designs. WooCommerce support means that you can add some elegance to your shop as well.

Blockbase Simple Block Theme

Free to Download | Demo | WordPress Hosting

Automattic’s Blockbase is a universal theme, which means it can work with both FSE and the legacy Customizer. Either way, it’s an intentionally barebones entry. The theme provides the basic foundation for your site without any opinionated design. This allows for a smoother customization experience.

Alara Vintage Block Theme

Free to Download | Demo | WordPress Hosting

Alara utilizes strong typography and a vintage color scheme. You’ll also find a wide variety of block patterns, including headers, calls to action, cover images, and even full-page layouts. What’s more, several free child themes are available in the WordPress theme directory.

Elyn Clean & Modern Block Theme

Free to Download | Demo | WordPress Hosting

Get your project off to a clean start with Elyn. This free WordPress block theme makes great use of photography, along with big, beautiful type. There’s overall professionalism here that could serve a variety of small-to-medium sized organizations on a budget quite well.

A New Way to Build Custom WordPress Websites

Customizing a WordPress theme has traditionally been a mixed bag. Themes could be tweaked via code, a bespoke settings panel, or the official Customizer. Because of the multitude of options, it was hard to know how to access various elements. It tended to change from theme to theme.

Love it or not, block themes and Full Site Editing bring a universal interface to the process. In theory, this should make customizing your site’s colors, header, or blog post layout a more straightforward experience. The result is that themes have a better shot at reaching their potential as multipurpose tools.

The examples above offer a promising start. Whether you’re looking to build from the ground up or improve an established look, there is a block theme to match.

The post 10 Free WordPress Block Themes That Utilize Full Site Editing appeared first on Speckyboy Design Magazine.

That leaves WordPress to compete with commercial offerings. Platforms such as Shopify and Wix come to mind.

Again, these systems can’t match WordPress’ market share. But they do have an advantage in marketing muscle. They have the resources to create a seamless campaign. They can speak to their targeted audience with clarity.

WordPress tends to struggle with messaging. You can see it at both the macro and micro levels. It covers big things like defining what the platform does and who it’s for. And it also happens with individual features.

The result is confusion – even among seasoned users. It also makes things harder for those who teach others. There’s a lack of consistency. Not to mention frequent changes to the terminology we use.

How much does this impact WordPress? Could it harm the software’s long-term future? And what can be done to create a more user-friendly vocabulary? Let’s take a deeper look at the words that define WordPress.

Who Are We Speaking To?

WordPress is an incredibly flexible platform. We can use it in a variety of ways. Thus, it appeals to both technical and non-technical users.

This appeal is both a blessing and a curse. On the bright side, WordPress continues to thrive in part because it offers so many possibilities.

But the words we use to describe WordPress don’t apply universally. A conversation among developers is bound to be more technical. Some terms are likely to confuse everyday users.

Yet it seems like developer speak is the dominant language in WordPress. We use exclusionary terms that are difficult for others to understand. You see it in the core software and third-party themes and plugins.

Perhaps this stems from where WordPress and its ecosystem come from. Many developers are responsible for both building and promoting products. Most aren’t marketers by trade.

Product descriptions and documentation tend to be written by developers. As such, developer speak is likely to be used. The content isn’t as user-friendly as it could be.

An Ever-Changing WordPress Core

The past decade has brought significant change to WordPress. The advent of the Block and Site editors has impacted content creation and website design.

Each of these items has undergone a descriptive overhaul. The Block Editor was initially referred to as “Gutenberg,” for example. The name was derived from the Gutenberg project, which oversees this and other features.

As for the Site Editor, it’s also a part of the Gutenberg project. But the feature was initially called “Full Site Editing.”

The names were eventually changed. They now more accurately reflect what each feature does. These are positive and well-intentioned moves. But the cat was already out of the bag, so to speak.

We now see these terms used interchangeably. This may not impact veteran WordPress developers very much. But what about new users? Do they understand that the Site Editor is the same as Full Site Editing? And what to make of the differences between block themes and classic themes?

We’ve created an unnecessarily confusing situation. And there is plenty of blame to go around. For instance, writers like myself have added fuel to the fire.

How Do We Fix the WordPress Word Scramble?

Here comes the difficult part. How do we use terminology that everyone can understand?

I think it starts with the WordPress project. Feature names should be reflective of what they do. But they should be named and described in the simplest of terms.

Perhaps this sounds like no big deal. But WordPress contributors have a lot on their plates. There’s only so much time to argue about names.

We did see a lot of thought put into this recently, however. The Command Pallete feature that shipped with WordPress 6.3 underwent a name change. Project contributors debated the merits of the original name (Command Center). They realized that it might be taken out of context and addressed the issue.

The creation of user-friendly terms will trickle down to the community. Writers will use it in their tutorials. And product makers will use it in their marketing efforts.

The community also has a responsibility. We must speak to WordPress users in plain language. We must limit the use of developer terms.

A little guidance would also help. WordPress has a developer-focused glossary of terms and a user-focused Semantics page. We should study them.

But perhaps we can educate product makers on methods for creating user-friendly marketing and documentation materials. That’s not necessarily a responsibility of the WordPress project.

Still, it could help to make the platform easier to understand. And it’s a part of keeping WordPress on top for the long term.

A User-Friendly Experience Starts with Words

The words we use matter. They can be the difference between friendly advice and an insult. People use them to form opinions.

What people read about WordPress will impact their decision to use it. If the software sounds confusing, they may head elsewhere. They may never fire up a demo to see for themselves.

It behooves all of us to think about how we talk about WordPress. Are we keeping new users in mind? Or are we losing them with technical jargon?

The impact may not be immediate. But by simplifying our language, we can attract more users than we lose. That’s highly important for the future of the project and its ecosystem.

The post Understanding Essential WordPress Terms & Concepts appeared first on Speckyboy Design Magazine.

The tool has empowered content creators and designers. You no longer need additional plugins to build a functional page layout. WordPress core includes just about all the basics. Need something more? There are plenty of ways to extend the editor, too.

None of this makes the Block Editor foolproof, however. It’s still easy to paint yourself into a virtual corner. A simple mistake can mean more difficult maintenance – particularly when clients are involved.

I’ve built quite a few sites with blocks. And not every decision was a good one. Yes, I’ve created a few messes. Cleaning them up can be time-consuming.

Today, I’m going to share a few things I’ve learned. May these lessons help you avoid a similar fate!

Do: Think about Future Maintenance Needs

Page layouts don’t last forever. They must adjust as our content needs evolve. The Block Editor can act as a trap in these situations.

Consider a company’s staff listing, for example. Let’s say our client wants to display each person’s name, title, and photo.

It sounds simple. We can use the Columns block to create a beautiful and responsive layout. The page looks perfect. But what happens when we need to make changes?

Staff members come and go. Yes, we could replace the departed staffers with the new ones. Then again, our client wants them to display in alphabetical order. The required changes don’t follow suit. What do we do now?

The options are less than ideal. We could edit the block’s code to rearrange each column. Or we could reconstruct the layout from scratch. Both possibilities are rife with peril. OK, perhaps I’m being a bit dramatic. But it’s not fun.

A custom block may be a better solution. Using Advanced Custom Fields PRO, you could create an interface that allows for easier maintenance. Adding, deleting, and rearranging the list would be built into the block. There’s no need to reinvent the wheel when making changes.

The lesson is to think about the future maintenance needs of your layout. Then, implement a strategy that will allow for changes. You’ll be glad when the time comes.

Don’t: Allow Users to Switch between the Block and Classic Editors

The WordPress Classic Editor is still alive and well. Millions of websites are using it. That’s OK. There’s nothing wrong with using a tool you’re comfortable with.

However, mixing the Block and Classic editors can be messy. The Classic Editor plugin has a setting that allows users to switch between editors. You might want to leave this feature turned off.

Let’s say you’ve built a complex layout using the Block Editor. But your client doesn’t like blocks. Or they aren’t familiar with them. They decided to edit this page using the Classic Editor. Hilarity (or tragedy) ensues.

Then, you edit the page and switch back to the Block Editor. You see numerous errors stating that blocks contain invalid content. The “Attempt Block Recovery” feature doesn’t work. It looks like you have a mess on your hands.

Too much can go wrong in this scenario. Thus, don’t allow users to switch between editors. It’s an accident waiting to happen.

Do: Choose Third-Party Block Plugins Carefully

There are a multitude of plugins for extending the Block Editor. Many of them offer a suite of custom blocks.

That’s a good thing. The core blocks included with WordPress aren’t always flexible. Thus, installing a custom block may be of help. But it’s worth scrutinizing them first.

Custom blocks are plugins, after all. They can vary in terms of features and quality. The same rules apply when choosing the right one.

Only install what you need. Study each plugin’s reviews and changelog. And remove any block plugins you aren’t using.

What’s the danger? The wrong plugin could cause bugs or performance issues. Plus, security is always a concern.

Third-party blocks require a commitment. Be sure that you’re ready to take that step.

Don’t: Edit Blocks as HTML

The Classic Editor made it easy to switch between visual and code editing. You might use this feature to add HTML or a CSS class. There were some hiccups, but it worked well enough.

The Block Editor has a similar feature. Blocks have an “Edit as HTML” interface. You can access it via each block’s options menu.

I never understood the purpose of this feature. That’s likely because I always end up breaking something. Adding a CSS class, for instance, triggers an error when switching to the Visual editor.

A "This block contains unexpected or invalid content" error is displayed. From there, I have to go back in and remove the class. The same issue happens when adding other types of content as well.

Therefore, it may be wise to consider editing block HTML as off-limits. There’s more risk than reward.

Plus, you can use the Custom HTML block for similar tasks. Add HTML, CSS, or even JavaScript into the field. You won’t break it!

By the way, you can add CSS classes to blocks via the Advanced tab in the settings panel.

Do: Use the Block Editor’s List View Feature

WordPress allows us to nest blocks inside each other. And blocks are portable. You can drag them anywhere on the screen. That can result in some undesired effects.

For instance, moving blocks to a new spot can be difficult. It’s easy to make a mistake. The wrong move could undo a lot of hard work.

The List View feature can save you a lot of headaches. It provides a visual outline of each block on your page. It even works with nested blocks.

Even better, you can easily reposition blocks directly within List View. Click on a block and drag it to the desired position. Need to move multiple blocks? That’s also possible.

The user experience is infinitely better than wrestling with the editor. You’ll have a better sense of where you are on the page. And it will likely make for easier edits.

Do: Keep Experimenting with the Block Editor

The Block Editor isn’t perfect. Like all editors, it has some quirks and annoyances. But it’s still worth testing the limits.

That’s often the best way to learn. So, create a local website and experiment. See what works and what doesn’t. But don’t limit yourself to a single test.

The user experience is evolving. Thus, a technique that didn’t work last time may now be possible. You might even install the Gutenberg plugin to get a taste of what’s coming in future releases.

Doing so will serve you well. You’ll be able to build layouts that stand the test of time. And you might be surprised at what you can accomplish using blocks.

The post A Guide to Effective Use of the WordPress Block Editor appeared first on Speckyboy Design Magazine.

WordPress 6.1 has brought about one of these hidden gems: the ability to use block template parts within a classic theme.

It takes the capabilities of block themes and ports them over to their classic counterparts. Classic themes still make up the overwhelming majority of the market. Therefore, it makes sense to bring them up to speed on the latest tools.

Let’s explore what this feature does and why you might want to use it. Then, we’ll demonstrate how you can implement it on your website.

What’s a Block Template Part?

WordPress 5.9 introduced Full Site Editing capabilities. When combined with a block theme, the feature allows users to edit various templates within the back end.

Block template parts represent any area of a website you’d like to manage within the WordPress Site Editor. Examples include the site’s header and footer. But they could also include niche areas as well.

Theoretically, a block template part can be as broad or narrow as you like. This allows web designers to define only the theme elements they want to make editable. At best, this offers convenience for site owners while protecting the layout from any major mishaps.

Unlike the custom templates that have long been used in classic themes, block template parts are saved as HTML files. They also consist of block markup, rather than PHP.

Classic themes have traditionally used the WordPress Customizer to make specific areas editable. The feature works well enough but lacks the advanced capabilities of the Site Editor. Now, there’s a way for these themes to move past those limitations.

Adding a Block Template Part to a Classic Theme

Adding a block template part to a classic WordPress theme is a relatively simple 4-step process. Here’s an example of how to set things up.

Step 1: Allow Block Template Parts in Your Theme

The first step involves allowing your theme to use block template parts. This can be accomplished by adding a code snippet to your theme’s functions.php file:

Code snippet courtesy of Learn WordPress.

Note that if your theme’s functions.php file already has a function that adds theme support for other items, you’d only need to paste add_theme_support( 'block-template-parts' ); within the existing function.

Step 2: Design Your Template in the Block Editor

Next, it’s time to fire up the WordPress Block Editor. The easiest way to go about this step is to create a new page – we’ll call ours “Test Block Part”. It can be deleted once we have our block template part up and running.

Within this page, we’ve created a simple two-column layout. It includes our fictional client’s contact information and links to their social media profiles. Everything here uses standard blocks included with WordPress core.

The idea is to allow our client to make edits to this information as needed – but without having to touch the rest of the site’s layout.

Step 3: Copy and Paste Block Markup into an HTML File

Now that we have our layout built, it’s time to copy and paste the block markup into an HTML file.

There are a couple of options for copying the block markup:

1. Select the blocks you’d like to copy within the Block Editor and enter CTRL + C (or COMMAND + C on a Mac) to copy the markup, OR;
2. Enter the WordPress Code Editor for your page by clicking on the Options button within the Block Editor, then copy the relevant markup;

Next, open the code or text editing app of your choice and paste the block markup into a new file. Our markup looks like this:

Save the file as an HTML document into the /parts directory of your theme (create the folder if it doesn’t already exist). Note that you don’t need anything else in the file besides the block markup.

For our example, we’ll call our file footer-contact-info.html. Make note of the file’s name, as we’ll need it in the final step.

Step 4: Add the Block Part Template to Your Theme

Now that we have our block part template created, we’ll need to add it to a PHP template in our classic theme.

WordPress has a built-in function called block_template_part() that we can use to call our block template part into the theme. It uses the HTML file’s name (minus the “.html” extension) to locate the template. Here’s what our code looks like:

We can add this function wherever we’d like the block template part to display. In this case, we’ll add it to our footer.php template.

All that’s left is to upload our updated theme files to the server. Once that’s complete, we’ll refresh the page and find our block template part proudly displaying at the bottom of the site.

Edit Your Block Template Part Anytime

Whenever we need to make a change, our custom block template part is only a few clicks away. To find the template, visit Appearance > Template Parts, then click on the template’s name (footer-contact-info).

Edits can be made via the Block Editor – just like any WordPress page or post. Save your changes and they’ll appear on the front end of the website.

*Note: Some early implementations of this feature contained a bug that caused a block template part to be uneditable within WordPress. Adding a theme.json file to the theme temporarily fixes the issue.

Bringing Classic WordPress Themes into the Block Era

The ability to use block template parts in a classic WordPress theme is a step forward. Theme developers can stick with the power and flexibility offered by PHP-based themes while adding block template support where needed.

It’s also a way to open specific elements up to back-end editing without having to switch to a block theme. The process is easy to implement and much less labor-intensive than starting from scratch. The result is savings in both time and money.

In addition, it offers us a way to move beyond the Customizer. That feature will likely be phased out over time, so the ability to switch to block template parts helps us get a head start on migration.

Best of all, there are tons of potential use cases for this functionality. It may be just the thing you need to add a layer of convenience to your next WordPress project.

The post How to Use Block Template Parts in a Classic WordPress Theme appeared first on Speckyboy Design Magazine.

It’s right there in the mission statement. That harkens back to its roots as a blogging platform. We install the software and push our content out into the world.

On the other hand, WordPress has become a tool to make money. Freelancers, agencies, and DIY users can build commercial websites with it. Developers create themes and plugins as part of an ecosystem.

Just so we’re clear: A corporation can use WordPress to bolster its billion-dollar portfolio. Just as a teenager can publish their thoughts.

Perhaps this sounds like two mutually exclusive ventures. However, they’ve coexisted for over 20 years.

That’s the juxtaposition of free, open-source software. So far, WordPress has handled it as well as anyone.

How has the project done it? And what potential risks could derail the balance? Let’s attempt to make sense of it all!

A Foundation for the Web

WordPress project co-founder Matt Mullenweg has said he wants the software to be the “operating system for the open web.” It’s one way to marry commercialization with democratization.

It makes sense for content creators and site builders. The software serves as a foundational piece. It’s free, widely supported, and extensible. Take it and build whatever you want.

This idea borrows from operating systems like Linux, MacOS, and Windows. They lay the foundation for a variety of use cases. An enterprise IT department depends on an OS. So does a student or small business.

Free software lowers the barrier to entry. Sure, there’s a cost associated with hosting a website. However, you’re not stuck with a particular host. WordPress is open-source. It can be hosted just about anywhere – even on a local machine.

This allows for a multitude of possibilities. One can publish, make money, or both. Those interested in web development can learn the software’s inner workings.

Expand it, change it, or use it as-is. That’s the flexibility of WordPress.

The Challenge of a Diverse User Base

As a project, WordPress has adeptly walked a tightrope. It has provided an opportunity for people around the world. It has also created an economy based on its ecosystem and custom development potential.

Maintaining balance is a challenge – and a great responsibility. The software must remain an attractive option for both camps.

Bloggers and small organizations depend on WordPress for low-or-no-cost flexibility. Developers, freelancers, and agencies want a powerful tool to fuel their growth.

That’s why some features spark debate. Take the Block Editor, for example.

Theme and plugin developers were concerned about this shift toward block-based content. How would it impact their products? Would they be rendered useless? Or require a complete overhaul?

Everyday users also had concerns. Would a new editing experience make it harder to publish blog posts? How large is the learning curve? Would it leave their existing website in the dust?

User perception also plays a role. Some may see a feature as favoring one side or the other. Sometimes, commercial and individual interests diverge.

That places project leadership in a tough spot. You can’t please everyone. But serving a diverse user base is part of the job.

Keeping the Coexistence for Years to Come

So, how can WordPress continue to provide the best solution for both worlds? It will take a concerted effort. And things seem to be off to a good start.

Recent years have seen a focus on ease of use. In addition, tools like the Site Editor aim to make a default WordPress install more powerful. Plans for a redesigned admin interface are also in the works.

These are all positive steps. A more user-friendly WordPress opens the door to attracting more users. Novices will be able to get started more quickly.

There are also opportunities for those with a commercial agenda. Commercial block themes have yet to take off. But block-based plugins have. There is plenty of space for growth in these areas.

What could go wrong? There are a few potential trouble spots.

A change in project leadership could push WordPress in a more commercial direction. A new regime could theoretically focus on features that primarily benefit corporate users.

The composition of WordPress project teams could also have an influence. Yes, some contributors are volunteers. However, sponsored contributors are only increasing their role in how things work.

One or more sponsor companies may gain an outsized say in the future. What if a future WordPress version integrated something akin to Google’s AMP? This nominally open-sourced technology caused a stir. This sort of move could harm the software’s reputation.

That’s just an example – however unlikely. The point is that maintaining balance requires stewardship. It’s an important part of the project’s future success.

It’s Possible to Do Good and Make Money

As a market leader, WordPress is in a unique position. It’s not a commercial product. However, we can use it for commercial purposes.

The software can also give an online voice to just about anyone. It’s a tool that facilitates free speech – even if a person’s circumstances can get in the way.

And, unlike large companies, the WordPress project isn’t beholden to anyone. For example, it doesn’t have to bend to the will of an oppressive regime to access its people. There’s no profit or shareholders to worry about.

Let’s hope it stays that way. We’re living in a world where costs are rising – as are barriers. WordPress bucks this trend as free software.

All you need is a copy of WordPress and an idea. What’s next is up to you.

The post How WordPress Democratizes Publishing & Fuels an Economy appeared first on Speckyboy Design Magazine.

That’s why the newfangled world of block themes has been disruptive. They’re different than classic themes. They don’t rely as heavily on PHP. And then there’s the whole concept of using JSON to define styles and options.

Block themes do come with advantages, however. Using one may mean writing fewer lines of code. And a block-based approach means not having to reinvent the wheel. That’s because many layout and functionality features come standard with WordPress.

The number of available block themes is increasing. But not all are ideal for web designers. We need flexibility and easy customization.

With that in mind, let’s check out some essential WordPress block theme features that focus on professionals.

A Minimalist Approach to Design

Readymade WordPress themes are popular. They promise a faster start on web design projects. Yet they can also be very opinionated.

That clashes with our ability to build custom websites. It seems like you can waste hours ripping a theme apart. You then have to rebuild it to match your vision. Starting from scratch may have been more efficient.

Thus, a minimalist approach makes sense. A strongly opinionated block theme is no better than a classic counterpart. It requires too much effort to customize.

Blockbase may be the best example of a minimalist theme. It makes very few design decisions. It’s the proverbial blank canvas. Still, the theme offers enough options to please designers.

Minimalism is a subjective quality, though. Not everyone wants a blank canvas. A theme that offers a few extra bells and whistles is also worth considering.

The key concept is to spend the bulk of your time moving forward. Some themes make it nearly impossible to do so.

A Selection of Style Variations

Block themes are supposed to make web design easier. And style variations are among their most powerful features. They make it possible to switch color and typography schemes. It takes only a few clicks to transform your site.

Web designers can use this to their advantage. A style variation may make for quicker progress. For example, a theme that offers light and dark color schemes saves us from building them.

This concept also fits with minimalist themes. Style variations that serve as a solid foundation are ideal. We can choose a variation and further customize it within the Site Editor.

Style variations won’t fully represent a finished product. But they are a step in the right direction.

A Set of Basic Block Template Parts

Think of block template parts as reusable sections of a theme. They’re not full-blown templates. But we can use them to power smaller areas within a template.

It’s a highly flexible feature. For example, you might create a block template part to display a call-to-action on blog posts. You could also create a variety of layouts for a site’s header. There are so many possibilities here.

A block theme that includes a set of template parts would be helpful. We can add common elements using minimal effort. We’ll have more time to focus on project details.

Let’s use Blockbase as an example. The theme includes several header variations. Everything from minimal to full-width options is available.

We can change header layouts within the Site Editor. Customization is easy. We have the option to edit the existing blocks or add new ones.

But why stop at headers? A theme could also include block template parts for other areas. Footers, sidebars, author bios, and navigation styles are possibilities. Anything to improve efficiency is worth considering.

Custom Block Patterns for Niche Sites

Like block template parts, block patterns are reusable. However, block patterns are implemented at the content level. We can add them to any page or post.

Patterns once again save us from reinventing the wheel. And they can range from basic layouts to (almost) fully-formed content areas.

WordPress offers a community-driven block pattern directory. Find a pattern you like and then paste it into your page. Or import custom patterns directly within the block editor.

Theme authors can also include custom block patterns. The advantage is that these patterns can better reflect the theme. For example, they may take typography and color into account. That makes for a seamless fit with the existing design.

Authors might offer patterns that fit the theme’s niche. Including grid patterns or card layouts to a magazine theme, for instance. A portfolio theme could also provide galleries or project listing patterns.

Regardless of Theme Type, Web Designers Have the Same Needs

For web designers, the decision to work with block themes is nuanced. Block themes are the future of theming. But they work differently than the classic variety. As such, it’s easy to lose sight of what makes a block theme worthwhile.

There are some common threads, though. Web designers still need flexibility. We need a solid and unopinionated foundation. And we can’t forget simple options to help achieve project goals.

These are the same qualities we look for in a classic theme. The good news is that some block themes take web professionals into account. They eschew bloated features and focus on real-world solutions.

Regardless of the type of theme we use, needs don’t change. That’s worth remembering as we navigate a new era of building websites.

The post Essential WordPress Block Theme Features for Web Designers appeared first on Speckyboy Design Magazine.

And while you can certainly build your own custom blocks, sometimes that’s a bit like reinventing the wheel. This is especially the case when you want to add a common element such as a testimonial, post listing or timeline. Most likely, these blocks already exist and can be easily added to your website.

Since Gutenberg’s inclusion in WordPress core, the developer community has released a number of different block plugins. Most tend to include a collection of blocks that could come in handy while building your site.

Today, we’ll introduce you to some of the top custom block collections available for WordPress. Let’s get started!

Gutenberg Blocks – Ultimate Addons for Gutenberg

Ultimate Addons for Gutenberg includes 20+ custom blocks that cover a wide range of use cases. When it comes to layout, the Advanced Columns block lets you create a highly-customized multicolumn row. There are also blocks for adding Google Maps, icons, CTAs, post carousels and more. That’s just scratching the surface of what this free plugin can do.

Page Builder Gutenberg Blocks – CoBlocks

Backed by GoDaddy, CoBlocks is a free WordPress plugin that supercharges Gutenberg. While it offers a number of handy custom blocks (accordion, alert, hero, logos, masonry gallery, pricing table, etc.), its big selling point is in page layout. Offering a more page builder-like experience, rows and columns can be dragged to size and customized for responsive layouts. Typography is also highly-tweakable as well.

Gutenberg Page Building Toolkit – EditorsKit

EditorsKit is a bit different than the other plugins in this collection, as it’s more about extending the blocks already included in Gutenberg. The rich text formatting features allow you to further style your content, or wipe out all custom styles with a single click. You can also control the visibility of blocks based on device, login state or even custom field values. In addition, there are a ton of productivity tweaks, like support for markdown, code editor syntax highlighting and the ability to import or export specific blocks. With so many goodies, it may just make Gutenberg feel like a completely different experience.

Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks offers a dozen custom blocks that cover common needs. Included are row layouts, advanced galleries, tabs, info boxes and testimonials – among others. It also aims to solve one of the more frustrating issues with Gutenberg – the width of the editor on the back end. The plugin contains preset widths that enable content creators to get a better representation of what pages will look like on the front end.

Atomic Blocks – Gutenberg Blocks Collection

Use Atomic Blocks to quickly build highly-customized WordPress posts and pages. Among the highlights are the Section & Layout block, which includes a selection of readymade content layouts. Simply add a layout and customize the content. There’s also a Newsletter block, which allows visitors to sign up for your MailChimp list. The Share Icons block can help your content go viral. But that’s only a taste of the 20+ elements included.

Gutenberg Blocks and Template Library by Otter

With an aim to both speed up content creation and add different content types, Gutenberg Blocks and Template Library is a compelling option. Much like Atomic Blocks above, the included Section block offers a number of pre-designed templates and layouts. There are also a number of customizable elements such as Google Maps, post grids, author info and a block for Font Awesome icons.

Advanced Gutenberg

Sure, Advanced Gutenberg comes packed with a number of custom blocks (post sliders, WooCommerce products, advanced tables, advanced lists, etc.). Those are all nice and handy. But the really interesting feature here is the ability to create “edition” profiles, which allow you to turn blocks on or off for specific users or user roles. For example, if you only want administrators to have access to the Column Manager block, you can easily set it up. This helps to ensure that lower level users don’t wreak havoc on your designs.

Advanced Gutenberg Blocks

Furthering your ability to tweak Gutenberg, Advanced Gutenberg Blocks lets you disable any native blocks you don’t need. You can also customize the editor’s width, create default color palettes and font sizes. And yes, there are a number of new custom blocks available, such as notices, WooCommerce products, banner ads and click-to-tweet.

Get Some New Building Blocks

The default blocks that come with Gutenberg are useful and are constantly being refined. But to create a true page building experience, you’ll want to add some custom elements.

That’s where the plugins above can help take your website to greater heights. Not only can you add different types of functionality and content, but you can also take greater charge of the editor as a whole.

The bottom line is that, if you’re going to use Gutenberg for complex page layouts, you might as well go all in. These plugins will help you do just that.

The post 8 Best Custom Gutenberg Blocks You Can Add to WordPress appeared first on Speckyboy Design Magazine.

The editor is improving all the time. But even if a missing feature doesn’t make its way into WordPress core, the developer community is free to build their own solutions. Take, for example, the ability to hide a specific block or schedule it to display at certain times.

This could come in handy for a number of common scenarios. For one, it allows you to work on a piece of content without making it public until you’re ready to launch. Or set up a limited-time event such as a contest or meeting that requires some temporary content to display.

One solution for achieving this is Block Visibility, a free WordPress plugin that allows content creators to take control of their blocks. Any blocks within a page can be hidden or displayed based on a variety of criteria. Plus, it integrates seamlessly into the block editor’s UI.

Want to learn more? Let’s take a look at a few different ways you might utilize Block Visibility on your own WordPress website.

Getting Started

Before we dig into what Block Visibility can do, there are a few prerequisites to keep in mind. Thankfully, they’re quite minimal.

First, you’ll need a WordPress website that utilizes the Gutenberg block editor. If you happen to have the Classic Editor plugin installed, make sure you’ve set it to allow for switching between editors.

Beyond that, you’ll want to install and activate a copy of Block Visibility. Inside WordPress, navigate to Plugins > Add New and search for the plugin.

That’s all there is to it!

Navigating Block Visibility

At its most basic, Block Visibility enables you to simply hide one or more blocks on a page or post. But there’s also a fairly comprehensive UI included with the plugin. Therefore, it’s good to know your way around.

First, within each block’s Options menu, there is a “Hide block” entry. It does exactly what it says – no need for a lot of explanation. Although, we’ll provide a demonstration below.

Then, on block editor’s Settings sidebar, there is a “Visibility” panel. This is where things get a bit more detailed.

This section allows you to hide or display a block based on a number of scenarios. Criteria such as user role, screen size and date/time are available. In addition, block visibility can be controlled based on the value of custom fields as well.

Plugin Settings

We should also note that you can further tweak what Block Visibility can do via its settings screen, Settings > Block Visibility.

The settings screen lets you choose which block types have visibility controls, the types of visibility criteria available and which user roles can make changes. You can even set breakpoints for controlling visibility via screen size.

If you need a helping hand, the included “Getting Started” tab will fill you in on common tasks.

A Multitude of Ways to Hide a Gutenberg Block

Now that we’ve covered the basics of Block Visibility, it’s time to see it in action. The plugin’s functionality ranges from super-simple to semi-complex, depending on your needs.

Here are a few examples of the various ways to hide a Gutenberg block.

Just Hide a Block

To hide a block from the front end of your website, click on the “Hide block” entry on the block’s Options menu.

A dialog will appear confirming that the block has been hidden. In addition, the block in question will be shaded so as to look inactive. A decorative icon will also appear on the upper right corner. Just remember to save your changes!

On the front end, our example Cover block has indeed been hidden. In fact, the block is not rendered at all. Thus, there’s no negative impact on performance.

As an aside, the only time a hidden block will appear in the source code is when you’ve chosen to hide it based on screen size. In all other scenarios, it will be completely removed from the front end.

Conditionally Hide or Display a Block

To hide or display a block based on conditional criteria, you’ll want to utilize the “Visibility” panel. It can be found within the Settings sidebar on the right of the screen. Click on the block you want to modify and open up the panel to get started.

Inside, there are a number of ways to set the visibility of a block:

Date & Time
This setting allows you to display (or hide) a block within a specific date and time range. On our fictional conference website, we’ve chosen to display the selected Cover block for just 24 hours. Note that multiple schedules can be set per block.

User Roles
It’s also possible to display a block based on a user’s role or login status. The default setting is “Public”, which displays to everyone. However, you may also choose to display a block to logged-in or logged-out users, or just to those who belong to a specific user role.

Screen Size
For occasions when you want to target only specific screen sizes, Block Visibility makes it easy to do so. You can choose to hide blocks on desktop, tablet or mobile devices. Custom breakpoints can be set in the aforementioned Settings > Block Visibility screen within WordPress.

Query String
Hidden by default, the Query String setting can display a block based on the presence of any particular query strings in the post’s URL. You can enable this setting via the settings screen (Settings > Block Visibility) or by clicking on the “Controls” link within the Visibility panel. The plugin documentation has a quick tutorial on the subject.

It’s also worth mentioning that you can combine one or more of the above conditions to exercise fine-grain control over a block’s visibility. For instance, you might schedule a block to display within a specific time range AND only on desktop devices. That’s just one of many possibilities, however.

Display a Hidden Block

Whenever you want display a hidden block, go back to its Options menu and select “Enable block”. Alternatively, you may also uncheck the “Hide block” setting within the Visibility panel.

Take Control of Your WordPress Gutenberg Blocks

On the surface, Block Visibility may seem like a fairly simple WordPress plugin. Yet it can help you perform some advanced functions with only a few clicks. Previously, it would have taken quite a bit of custom code to pull off similar feats with your site’s content.

Plus, hiding a block is one of those things that might be considered a missing feature of Gutenberg itself. Thankfully, this is just another example of the developer community coming in to fill the gap.

The post An Easy Way to Edit Block Visibility in the WordPress Gutenberg Editor appeared first on Speckyboy Design Magazine.

But that’s only scratching the surface of FSE’s potential. More advanced capabilities are being developed. Among them is the ability to create an entire block theme within WordPress.

Let’s think about that for a moment. Historically, there have been two main methods for implementing themes. The first is to build your own from the ground up using PHP, HTML, JavaScript, and CSS. The other is in downloading a third-party theme and tweaking it to your liking.

Thanks to the Create Block Theme plugin, there’s now a third method: creating a block theme fully from within WordPress. From there, you can export your creation for use elsewhere.

It sounds revolutionary in terms of how we build websites with WordPress. How does it work? Today, we’ll take an early look at Create Block Theme and show you what it can do.

What the Create Block Theme Plugin Does

The release of the Create Block Theme plugin comes at a time when FSE is still a nascent technology. Developed by members of the official WordPress Themes Team, it may well find its way into the core software someday.

At first glance, it’s a very no-frills piece of software – but that’s by design. The plugin doesn’t add any radical new functionality to the site editor. Rather, it provides a means to export the work you’ve already done. And there are a few other goodies as well.

When you download Create Block Theme and activate it on your website (it’s also recommended to run the latest version of the Gutenberg plugin), you’ll notice a new menu item located at Appearance > Create Block Theme.

This screen provides you with the following options:

Export Active Theme
If you’re already using a block theme, such as Twenty Twenty-Two, and have made changes in the site editor, you can export the customized version of the theme. This might come in handy if you’d like to create a custom starting point for other projects that use the theme.

Create Child of Active Theme
In the past, child themes have been recommended to ensure that customizations don’t get overwritten when you download updates to your theme. As it pertains to block themes, a child can serve as a way to distribute specific variants of the parent. For instance, one may contain a different typographic or color scheme.

Clone Active Theme
This option copies your active theme and includes any changes you made to it in the site editor using a new name. Since it’s a separate copy, this allows you to work on the new theme without accidentally harming the original.

Overwrite Active Theme
If you’ve made changes to the active theme and want them to overwrite its default settings, this option allows you to do so.

Building a Custom WordPress Block Theme

The process for building a custom WordPress block theme involves making any desired changes via the site editor (Appearance > Editor). Change your theme’s header, footer, content areas, and whatever else your heart desires.

But before you can do that, it’s important to choose the right block theme. For example, you could go with a bit of a blank canvas such as Blockbase. This allows you to start from scratch and create a fully custom look. It also means not having to tear down any existing theme elements you don’t want.

If you prefer something with more fit and finish, there are several block themes available that can provide a great starting point. You’ll have an established layout and can make any necessary tweaks to match your needs.

Regardless of how you start, Create Block Theme will allow you to export your theme for use on another WordPress install.

Exporting Your Custom Block Theme

In this example, I’ve made some basic customizations to Blockbase. Now it’s time to export the theme and install it on another local WordPress website.

As mentioned earlier, Create Block Theme provides several export options. I chose to create a child theme and give it a custom name. This means that I’ll need to have a copy of Blockbase installed on any other websites I’d like to use my new child theme on.

Exporting generates a ZIP file, which I can then import into my new site. On the new WordPress site, I’ll navigate to Appearance > Themes, then click on the “Add New” button.

Once on the Add Themes page, I can upload my new block theme by clicking the “Upload Theme” button and selecting the exported .ZIP file from my hard drive. Finally, I’ll activate the child theme.

The results look good. The changes I made survived the export process and seemed to work well on the new site. Theoretically, this would provide a solid head start when working on future projects.

Is This the Future of WordPress Theme Building?

The ability to create a block theme from within WordPress and then use it anywhere could be a game-changer for your workflow. It potentially cuts out a lot of time spent dealing with code and makes for a complete visual design experience.

Still, the convenience may not mean much if the site editor doesn’t offer all of the tools you need. It’s fairly simple to create different layouts and adjust colors, etc. But there will likely be scenarios when code is necessary.

It all comes down to how you like to work. Some of us will gladly stick with the processes we have in place – and that’s OK. Comfort and stability are important – particularly when FSE and block themes are in their early stages.

However, the portability offered by Create Block Theme is a peek into the future. And having the option to build WordPress block themes this way will be attractive to many web designers. It’s a development worth keeping an eye on as it continues to evolve.

The post How to Create Your Own Block Theme Within WordPress appeared first on Speckyboy Design Magazine.

Sure, theme developers have bolted on their own additions. We’ve seen everything from complex settings UIs to integrated page builders. But at their core, themes have maintained a consistent structure. That is, until the introduction of block themes.

Block themes are set to become the future of WordPress. They’ll change the way we build and maintain websites. In addition, they are more tightly integrated with the Gutenberg block editor than their “classic” counterparts.

Wondering what all the fuss is about? Today, we’ll fill you in on the basics of WordPress block themes. Along the way, we’ll explore how they compare and contrast to traditional themes. Let’s get started!

Why Block Themes?

For the first few years of its existence, the block editor has been primarily a means to style and build content. When combined with a classic theme, this meant that pages and posts could be crafted to your heart’s desire.

When it comes to making changes that impact the entire theme, the WordPress Customizer has remained the go-to resource. This tool provides access to design and layout settings that have been made available by the theme’s author. If it’s not in the Customizer, you’ll likely have to dig into code.

However, one of the key tenets of the block editor has been to create a more unified interface within the WordPress dashboard. We’ve already seen this happen with the Widgets screen moving to a block-based UI. The Customizer simply doesn’t fit this mold.

The introduction of Full Site Editing (FSE) is the next step in this process. It goes beyond just styling up our pages and posts. Now, every aspect of a theme’s design (header, footer, page templates, etc.) can be managed directly within WordPress.

Block themes serve as the gateway to this functionality. As such, they’re built exclusively with blocks in mind.

The Inner Workings of a WordPress Block Theme

There aren’t a ton of similarities between classic and block themes. But both have a set of basic rules that guide their makeup. If you were to download a block theme and navigate its file structure, a few key contrasts may stand out.

Template Files Are HTML, Rather than PHP

In a classic theme, you’ll find template files with names such as index.php and header.php. Block themes do away with PHP and instead carry the .html file extension.

Inside, a template file contains a combination of HTML and block markup. For example, let’s take a look at this template from the official WordPress documentation:

<!-- wp:site-title /-->

<!-- wp:image {"sizeSlug":"large"}  -->
<figure class="wp-block-image size-large">
    <img  src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->
 
<!-- wp:group -->
<div class="wp-block-group">
    <!--  wp:post-title /-->
    <!--  wp:post-content /-->
</div>
<!-- /wp:group -->
 
<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:heading  -->
     <h2>Footer</h2>
    <!--  /wp:heading -->
</div>
<!-- /wp:group -->

Block markup looks an awful lot like HTML comments. But it includes syntax for calling specific blocks into the template. The WordPress Full Site Editing website has a handy reference that includes markup for each default block.

And if this type of code seems familiar, you may have seen something similar inside Gutenberg’s code editor view.

The Use of Folders

Classic themes are capable of storing templates within folders, but it’s not a necessity. Block themes require a couple of subfolders:

/parts
Contains reusable items such as the header, footer, and sidebar.

/templates
Houses templates for various types of content. Items like pages, post archives, and, singular posts are common examples. Note that their naming convention follows the WordPress template hierarchy – another similarity with classic themes.

One of the positive side effects of this arrangement is that themes will be better organized. Having a standardized folder structure means less time spent searching for a particular file.

Theme.json Styling

The theme.json file is used to assign default settings to the block editor. This means, among other things, that it’s possible to set default color palettes, typography, and spacing. Settings can be sitewide or applied to specific blocks.

Since theme.json will automatically generate the appropriate CSS based on its configuration, you may not need to fill up a theme’s style.css file quite so much. In that scenario, the stylesheet is used to define a few basics, while everything else relies on this newfangled file.

Creating and Editing Templates

WordPress has long provided the ability to edit a theme’s template files directly within the dashboard. This was often discouraged, as even a small coding error could render a website inaccessible. Not to mention the possibility of changes being overwritten when a theme is updated (thus, part of the reason for using a child theme). Some developers turn off the feature altogether to avoid even a remote chance of catastrophe.

But block themes are all about editing within the dashboard. Templates that are included with a theme can be tweaked via the block editor, and new custom templates can be created as well.

As you might expect, code is completely optional in this scenario. Everything can be edited via the new Site Editor (Appearance > Editor – WordPress 5.9 or above required) which replaces the legacy Customizer when a block theme is activated. And, just like pages or posts, the Site Editor uses the familiar block editor UI.

And that’s not all. Whatever changes you make within WordPress can be exported. This would enable you to use your customized block theme on multiple websites.

This lowers the barrier to entry for those who want to customize or even create themes. Now, a basic eye for design and a working knowledge of blocks can lead to a custom website.

Things to Keep in Mind

Before you dive in and switch all of your websites to use block themes, there are a few things you should know.

First and foremost, block themes are a nascent technology. Not all features have been finalized and some best practices need to be ironed out. Plus, we’re just starting to see how these themes work in a production environment. Expect several changes as things evolve.

If you build sites for clients and want to maintain some future flexibility, hybrid themes may be of interest. They allow for the use of FSE features while still maintaining the PHP structure of a classic theme. You can even retrofit an existing theme to use this functionality.

Finally, block themes do not spell the end for classic themes – at least not for the foreseeable future. With that, the transition to this new way of theming doesn’t have to be immediate. It’s OK, for example, to experiment with blocks in a local environment while still relying on your favorite classic themes in production.

Block Theme Resources

If you’d like to learn more about WordPress block themes, there are some outstanding resources available. Here are a few of our favorites:

• Block Theme Documentation by WordPress
• Blockbase Theme by Automattic
• Full Site Editing by Carolina Nymark
• The Ultimate Guide to WordPress Block Templates in Gutenberg by Rich Tabor
• The WordPress Block Theme Revolution Is Quietly Picking Up Momentum by Justin Tadlock
• WordPress Theme Experiments by WordPress

The post An Introduction to WordPress Block Themes appeared first on Speckyboy Design Magazine.