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.

The premise of FSE is that it allows anyone to design and edit a compatible theme fully within the block editor. No need to mess around with PHP or even CSS – just point-and-click your way to a custom website.

There are a couple of common reactions to the inclusion of FSE. The first is the excitement that comes along with lowering the bar to theme customization. Beyond that is a group of designers wondering if the feature applies to them at all.

Interesting as this functionality may be, it’s not a perfect fit for every situation. So, when does it make sense to use Full Site Editing? The following are a few potential scenarios that are worth considering.

Design Flexibility Is a Necessity

The flexibility of a WordPress theme can vary greatly. Some “classic” themes offer a plethora of options through a settings screen or the Customizer. Still, others require you to make design changes through code.

Either way, the ability to tweak the look and layout tends to be cumbersome. That makes it more difficult for sites that need to make frequent changes to headers, footers, or other theme templates.

For efficiency’s sake, FSE makes perfect sense. Quick customizations can be made and previewed in real-time. And the use of the block editor means that dropping in new functionality (a search bar, for example) can be accomplished without a lot of fuss.

This type of setup also lends itself well to multisite networks. Each site within the network may have its own specific design needs, and FSE makes this easier to facilitate.

Not that you’d want to do all of this in a production environment, of course. Just like any mission-critical website, making changes on a staging site first is still highly recommended. But FSE does shorten the process from concept to launch.

The Website Will Be Fully Maintained by Your Client

There may be instances where you build a website and simply hand it over to your client. From that point on, it’s their job to handle all maintenance responsibilities.

However, it’s often tough to maintain a website built by somebody else. This is especially relevant when it comes to making changes to the theme. Even if you provide training and documentation, there can be a significant learning curve for clients.

FSE offers a solid solution. Your client won’t have to dig through code to figure out how you implemented a specific feature. Rather, it’s all there in the dashboard.

If they need to change the number of blog posts displayed on the home page, it could come down to adjusting a setting within a block. That’s a whole lot easier than searching through a hard-coded template.

In all, things are less likely to be lost in translation when using a visual editor. This may even cut down on the number of support requests down the road.

You’re Looking for Simplicity

In the right hands, WordPress can be the engine behind some very complex websites. Think membership sites, online education, and eCommerce.

But not every project will need that level of complexity. Indeed, portfolios and blogs generally benefit from a simpler approach. The bloat that comes with more traditional methods could be overkill.

A block theme and FSE may be all you need. They’ll help you to craft an attractive website that eschews all the bells and whistles. It’s perfect for situations where you just want to focus on content.

That’s not to say FSE isn’t capable of more. However, it may be the path of least resistance when it comes to simplicity. There’s something to be said for technology that puts this within reach.

Take Advantage of Full Site Editing

We’re just scratching the surface of what can be accomplished with Full Site Editing. And it will be exciting to see what new and creative uses developers will find for it.

Still, the feature is far from a universal fit. Not all projects will need the functionality. As such, it’s important to carefully consider the potential benefits and drawbacks before jumping on board.

The scenarios outlined above are worth contemplating as they take advantage of what FSE does best. The ease of use and flexibility it offers will undoubtedly make design and maintenance easier for a lot of people.

Is it right for your project? Hopefully, the ideas here will put you on the right path to finding the answer.

The post When to Choose WordPress Full Site Editing for Your Website appeared first on Speckyboy Design Magazine.

While including some features have been simple enough, there are challenges. Among the biggest headaches have been customizing block styles and setting up default color palettes.

These items have to be declared and styled in separate parts of a theme. When you need to make changes, that could mean editing multiple files. And if you switch to a new theme, you’ll have to recreate it all from scratch.

The solution? Enter the WordPress theme.json file. It aims to be an all-encompassing place for styling the block editor on both the front and back ends.

Today, we’ll take a look at what theme.json can do and how it will benefit WordPress theme developers. Let’s get started!

Bringing Block Styles and Defaults Under One Roof

According to the Block Editor Handbook, the rationale behind theme.json is to provide “a canonical way to define the settings of the block editor”. In practice, it offers theme developers granular control over how various blocks are styled and what options are available to users in the back end.

This allows for setting sitewide defaults for styling colors, fonts, and even the editor itself. But it also enables developers to go deeper and manage things on a per-block basis.

With theme.json, it’s possible to account for one-off situations where a specific block has different defaults than the others. For instance, if you wanted to provide a unique default font size for the Columns block, you can do so within this file. Likewise, you might also remove spacing options from that same block.

The result is a block editor that is more closely aligned with the theme. Developers no longer have to settle for Gutenberg’s out-of-the-box defaults or deal with clunky workarounds. In addition, they can set parameters for how users can manipulate blocks in an easier-to-maintain manner.

And now for the “magic” part: WordPress will read the settings in your theme.json file and output the necessary CSS for you. There’s no need to hack away at your stylesheet and only one file to change. How cool is that?

There are also some performance benefits. Normally, customizing block styles within the editor means both the original and edited versions are loaded in.

As the Handbook states, “…if a theme and a user set the font size for paragraphs, we only enqueue the style coming from the user and not the theme’s.” Fewer lines of CSS mean faster load times.

Prerequisites

Before we start configuring our theme.json file, there are a few requirements to get out of the way:

WordPress 5.8 and above is required.

The file should reside in your theme’s root directory. For example: /wp-content/themes/mytheme/theme.json

The available settings are expected to grow over time and some are experimental. Thus, you may need to install the official Gutenberg plugin to access certain items.

Still, there are plenty of goodies to play with! Let’s explore a basic example.

Creating a Basic theme.json File

As its name indicates, the theme.json file is written in JSON. And, once you have a basic template, it’s possible to edit or add to the file by following the established syntax.

Eventually, one can envision a vast array of boilerplates and code generators for developers to use. For this demo, we used the Gutenberg Theme.json Creator. It provides a simple interface for generating a custom file.

Goals

Our mission will be to clean up the color options on our website. By default, there are simply too many possible colors a user could choose from – including creating their own custom hues.

That could lead to an inconsistent user interface. Therefore, we’ll scale things back to just our brand’s color palette.

To do so, we’ll tweak the following in Gutenberg Theme.json Creator:

• Disable “Custom Colors” and “Custom Gradient” options;
• Add a custom color palette with our brand’s colors;

Now, we can copy the generated output into a new theme.json file, which we’ll save to the root directory of our theme (we’re using Twenty Nineteen here).

The Result

Our custom theme.json file worked as expected. The simplified color palette we configured has replaced the default setting. And the user’s ability to create custom hues and gradients has been removed from the block editor.

In addition, WordPress has written all of the required CSS for us. Thus, any color changes we make in the block editor are also reflected on the front end.

Finally, because all of this resides in a single file, making future changes and additions will be a relatively simple process.

Going Further with theme.json

We’ve only scratched the surface of what theme.json is capable of. If you’re looking to further your knowledge, check out these helpful resources:

• Configuring Theme Design with theme.json by Jeff Ong
• Exercise: Creating theme.json by Full Site Editing
• Global Styles & theme.json by Full Site Editing
• Standardizing Theme.json Color Slugs in WordPress Block Themes by Rich Tabor
• Theme.json for WordPress Theme Authors (demo, Q&A) by Gutenberg Times
• Using theme.json in a classic theme by Marcus Kazmierczak

The post An Introduction to the WordPress theme.json File 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.

Want to add a pricing table? Check. How about a custom photo gallery? Check. What if you’d like an entire About Us page? Check. We’re only scratching the surface here.

Block patterns are also undergoing constant improvement. They were once included only in themes and plugins, for instance. Then came the Block Pattern Directory, which publishes patterns for anyone’s use.

Well, hold onto your hats. Things have gotten even better. WordPress now has a way to create, manage, and share block patterns – all from within the Block Editor.

Want to see how it works? Check out our quick guide to creating and managing block patterns in WordPress.

Why Create a Block Pattern?

Before we dig into the tutorial, let’s define who this feature is for. Creating block patterns makes sense for those wanting to use the same group of blocks multiple times.

A call-to-action (CTA) interface is one example. Let’s say you want to place it in various areas of your website. A block pattern will help you maintain a consistent look across your site. Thus, there’s no need to reinvent the wheel for each use.

• You can also choose whether to “sync” a block pattern. You’ll edit a synced pattern from a singular location. Those changes will take effect everywhere the pattern is being used. So, change the CTA’s background color once and see it reflected all over.
• An unsynced pattern provides a basic layout framework. You’ll edit each instance of the pattern – giving it unique content. In this case, our CTA might have the same layout – but with different text, colors, and imagery. The unsynced pattern serves as a starting point.

You might also want to create a block pattern of a full-page layout. Use it as the basis for future pages. Or use it as a backup. You know, in case someone breaks your carefully crafted page.

The bottom line? Create a block pattern for anything you might want to use again.

Example: A Product Profile Block Pattern

Let’s move on to a basic example. Our fictional website will have a “Products” page. We’ll use it to showcase each product our client sells.

Each product on the list will use the same layout. So, why not create an unsynced block pattern? It will provide a more efficient way to build our page.

Plus, adding products in the future will be easier – even if we decide to give each product a separate page down the road.

Step 1: Create a Layout

The first step is to create a layout in the WordPress Block Editor. Here, we’ve built an example of what each product should look like. And we’ve done so directly on the Products page.

Each product will feature a title, description, and image. From there, we’ll add buttons that point to related resources.

Note: We used the free version of GenerateBlocks to create some layout elements. However, you can create patterns using any blocks you like.

Step 2: Select the Blocks We Want in Our Pattern

Next, we’ll need to select blocks to include in our pattern. We’ll use the List View feature to make our selections.

Step 3: Create a Pattern

Now, it’s time to create our block pattern. We’ll click on the block options button to open a menu. Then, we’ll click on the Create pattern entry.

The dialog box asks us to give our pattern a name. Also, note the toggle for syncing the pattern. It’s also possible to assign your block pattern to a category.

We’ll call our pattern “Product Profile” and choose not to sync it.

That’s all there is to it! We now have an unsynced block pattern for adding products to our page.

Step 4: See It in Action

We have our first product set up. Now, let’s use our new block pattern to add another.

We’ll place our cursor below the first product. Then, we’ll add our pattern. We can search for it by name or select it from the My patterns category.

That was quick! Now, we’ll make the necessary edits. We changed the title, description, and image to match our new product. We also changed the button colors.

How to Edit Your Block Pattern

So, what if you want to make changes to your block pattern? WordPress provides an area to do so – but it’s somewhat hidden.

Here’s how to find it:

• Via the WordPress Block Editor: Click the Options menu on the upper right of the screen. Then, select Manage patterns.
• Via the WordPress Site Editor: Note that this will apply to those using a block theme. Access the Site Editor by going to Appearance > Editor in the WordPress dashboard.
• Click on Manage all of my patterns at the bottom of the menu sidebar.

The Patterns Screen

The Patterns screen houses your custom block patterns. It looks similar to other pages and post listings. However, there are a few items we wanted to note.

• First, it’s possible to export your block patterns. Hover over your pattern and click the Export as JSON link.
• As you might expect, you can also import these patterns. Use the Import from JSON button at the top of the screen. You’ll be able to upload the JSON file containing your pattern.

This function provides a path to share your patterns across multiple websites.

Making Changes

Let’s say we want to edit our Product Profile block pattern. We can do so within the same Block Editor interface.

Here, we’ve changed the text headings and made the image smaller.

As a reminder, this is an unsynced pattern. Therefore, our changes will only be visible when adding a new instance.

A synced pattern would immediately display the changes throughout the website. However, we wouldn’t be able to edit the content individually. The contents would be the same everywhere the pattern is used.

Despite this fact, we’re not stuck. We can create a new block pattern if we outgrow the current one. Still, it’s good to know the difference between synced and unsynced patterns.

Note: A new feature in WordPress 6.5, synced pattern overrides, will allow for changes for each instance. See this tutorial for details.

Use Custom Block Patterns to Increase Consistency & Efficiency

Block patterns keep getting better. And creating and managing them within WordPress adds another layer of convenience.

Having an archive of patterns on a per-site basis comes in handy. It can be a huge time saver. They can speed up the build process. Plus, they’ll make content updates easier.

If you want to share your work, that’s easy to do via the export and import features. You can install patterns on additional sites or submit them to the Patterns Directory.

Take some time to experiment with creating custom block patterns. You might be surprised at what you can accomplish!

The post How to Create & Manage Block Patterns in WordPress appeared first on Speckyboy Design Magazine.

WordPress faces a unique uphill climb in this area. As a volunteer-driven, open-source project, there is a constant stream of changes. Various teams tackle their assigned tasks and, somehow, everything comes together and makes it to release.

It’s a testament to their hard work. But it also means that information regarding new features and compatibility changes can be spread amongst these different channels. Thus, they’re often difficult to locate.

For casual users (i.e., those who don’t follow every new development), this frequently leads to an information gap. When it comes time to apply an update to WordPress core, that could leave these users unaware of what’s included and scrambling to catch up.

Why is this so important? Let’s talk about what’s at stake, along with some ways to potentially close that gap.

The WordPress ‘Knowledge Bubble’

WordPress has seen several major changes in recent times. Features such as the Gutenberg block editor have reinvented how we work with the content management system (CMS). As it provides a relevant example, that’s the feature we’ll explore here.

For all of the community debate during the runup to launch, there were still users who had little or no idea that a change was coming. For those of us within the WordPress knowledge bubble, that may be hard to believe. But it speaks to the issue at hand.

There is a group of project contributors, web designers, and business people who pay close attention. They were able to stay on top of the information trickling out about the new editor. They were also the ones testing the beta plugin, becoming acutely aware of what the change would mean to the average website.

For others, that news may have completely missed them. True, there were assorted teasers within the WordPress dashboard before the launch. But some may have simply dismissed them without a full understanding of what was being communicated.

The result could leave you completely unprepared. Imagine logging into your website one day and seeing that the entire content creation process has changed. In addition, undetected theme and plugin incompatibilities posed their own potential to wreak havoc.

As for the information itself, it was scattered. There were several posts spread throughout various sections of WordPress.org. Outside of that official source, one would have to frequent sites such as WP Tavern or even this one. Otherwise, your only chance to get a detailed explanation would be through the odd link on social media – if you happen to follow relevant feeds.

The Structural Challenges

To be clear, any difficulty in accessing information isn’t due to a lack of effort. Indeed, the project’s dedicated volunteers can only work through the channels available to them.

The way I see it, the issue is more of a structural one. There currently isn’t an official one-stop location that puts all the need-to-know information in a single place. We’ll discuss some possible solutions (feasible or not) in a moment.

Outside sources can be quite valuable but are sometimes hit and miss in terms of what they cover. For instance, they may offer an outstanding Gutenberg tutorial for developers – but nothing that focuses on the everyday user.

And, let’s face it, there aren’t a lot of publications out there that are solely dedicated to WordPress news. It may be part of their mission, but it takes a lot of resources to provide the whole picture.

Then there are the users themselves. With a worldwide user base and all skill levels represented, it’s going to be nearly impossible to reach them all.

Still, it’s worth the effort to get the word out to as many people as possible.

A Multi-Pronged Approach to Spreading the Word

Realistically speaking, there probably isn’t a silver bullet that will bridge the WordPress information gap. But there are a few things that, when combined, could certainly help to keep more users in the know. Here are a few ideas:

Create an Official Source for Impactful Developments

Getting the details of upcoming changes usually requires sifting through a variety of posts on WordPress.org. These items may be strewn about the site, but are regularly updated.

Perhaps a dedicated, user-friendly page that focuses on the most impactful developments could bring these posts under one umbrella. That is, changes and features that are likely to affect a large segment of users and developers. I’ll leave defining the exact criteria to the experts.

But there’s plenty of room for creativity here. For example, the page could be sorted by topic, release, or even target audience (site administrators, developers, content creators, etc.). From there, readers could access a summary of the change and an archive of related posts.

This would provide users with an easy-to-digest source of information – one they can come back to time and again. With that in hand, they can gain an understanding of what’s happening and prepare their websites in advance.

It might also make for an engaging dashboard widget on WordPress installations. When someone logs into their website, they’ll have a summary of what they need to know right at their fingertips. Of course, care would need to be taken so as not to interfere with their ability to get things done.

A Community That Amplifies the Message

The WordPress community does a fantastic job of sharing information. Whether it’s code snippets or a helpful plugin, they can be counted on to pay it forward.

And, something tells me that having a well-organized source for new developments would encourage them to share even more. They’d have the opportunity to pass along official details, along with their own related content.

Helpful items like tutorials and summaries would add further context to what lies ahead. And the great news is that many people are already creating this type of content. The difference would be that, combined with the official source, an even bigger impact could be made.

In theory, users could first view the official rundown of a change. Then, they could dive into a community-driven tutorial that helps them better understand it and act accordingly.

Educate Users

Users, whether they’re website owners or designers, also have a key role to play. However, not everyone is keenly aware of the importance of staying informed.

Therefore, education is a big part of the solution. By helping them develop good website maintenance habits, users will be more likely to stay on top of upcoming changes. For some, just the mere practice of logging into their dashboard once a week could make all the difference.

WordPress is already taking some great steps in this area. Through their Learn WordPress initiative, users have access to a variety of helpful content. It can foster a connection that keeps people actively interested in the project.

The Quest to Reach Users

Even for those of us who follow WordPress closely, it’s easy to lose track of new features. For those who are a bit less involved, the ability to keep up is even harder.

For WordPress to continue growing, this information gap has to be narrowed. An informed user base is crucial for security, stability, and pushing the software forward.

The suggestions above are just that. I hope that they can serve as a catalyst for further discussion.

Regardless of how it’s implemented, opening up further lines of communication with users is a win for everybody.

The post For Casual Users, Information on New WordPress Features Can Be Hard to Find 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.