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.

The post 10 Free WordPress Block Themes That Utilize Full Site Editing 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.

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.

Web designers spend hours perfecting a site’s layout, functionality, and content. However, we don’t always pay attention to the 404. Why is that?

It’s easy to take the 404 page for granted. It’s often hidden for one. We may not think of it until we stumble upon the page.

Content management systems (CMS) like WordPress make them even less visible. That’s because themes often come with preconfigured templates. We may not think to review what’s there.

That could be a missed opportunity. The 404 page is a place to help users navigate your website. They may look elsewhere if they can’t find what they need. And WordPress block themes open the door to customization. You can add features without touching code.

Let’s explore how the WordPress Site Editor can help you build a custom 404 page.

Start with a WordPress Block Theme

To start, you’ll need to install a copy of WordPress. You can use a local site or a web hosting account.

Next, it’s time to activate a block theme. However, a fresh install of WordPress will do this for you. The bundled default themes now work with the Site Editor.

We’ll use the Twenty Twenty-Three default theme for this demonstration. But you can use any block theme you like. The WordPress theme directory has several available for download.

Even better is that a basic 404 page doesn’t require plugins. WordPress includes enough blocks to build a functional page.

Edit Your 404 Template in the WordPress Site Editor

Now that we have a WordPress block theme, we can focus on our 404 page. Let’s start by navigating to Appearance > Editor inside the WordPress admin.

Next, we’ll click on the Templates link in the sidebar.

This screen displays all of the templates that come with your theme. The Twenty Twenty-Three default theme comes with a 404 template listed as Page: 404.

What if your theme doesn’t come with a 404 template? It’s possible to add a new theme template using the Site Editor. Just be sure to keep the WordPress template hierarchy in mind.

Assess the Template

Our 404 template is a bit sparse. It consists of a paragraph block and a search field. Both items are helpful. But we can do better, right?

A quality 404 page is there to guide users. Remember that they arrived here by mistake. The link they wanted to visit isn’t available.

What can we do to improve this page? We can think of a few additions that would make a positive impact.

Add Some Helpful WordPress Blocks

First, we’ll add a Page List block. This one provides a map of content for users to navigate. We love that the list shows parent and child relationships.

Maybe our visitor was looking for a blog post? Let’s add a Latest Posts block that shows six recent articles.

We can also include a button that links to the Blog page. Users can click it to gain instant access to our archive.

Let’s narrow things down a bit as well. Our blog has several categories and tags. We can use the Categories List and Tag Cloud blocks to add direct links to them. We’ll also use the Block Editor to create a multi-column layout.

What if our visitor still hasn’t found what they need? We’ll add a Cover block that encourages them to contact us.

It seems like we’ve covered all the bases. Our 404 page will serve as a launch point for users to find desired content.

Helping Users Find Their Way

We’ve taken a basic 404-page template and turned it into a hub. And we did so with native WordPress blocks. A few minutes was all it took to enhance the user experience.

There’s always room for more enhancements, though. You could add some third-party blocks to help users navigate. And a live search feature would improve the core WordPress function.

All told, the Site Editor simplified the template-building process. It didn’t require us to write code. And it offers plenty of layout options.

Don’t ignore your website’s 404 page. Improving it is worth the effort. And the WordPress Site Editor makes it easier than ever.

The post How to Build a 404 Page with the WordPress Site Editor 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 and Concepts 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.

The project is more than just blocks, though. Phase 3 of Gutenberg involves adding collaborative features to WordPress. The main focus has been on design tools to this point. Now there will be a shift toward workflow.

Workflow is an overlooked subject. It’s relevant for websites maintained by multiple people. That’s likely a significant chunk of the WordPress user base. Websites in the publishing, education, and corporate enterprise sectors are all targets.

So, how will collaborative features improve WordPress? Here are a few scenarios that demonstrate how they can streamline working together.

Multiple Users Managing the Same Page

Let’s start with a personal pet peeve. I often provide technical support to my web design clients. Helping them create a page layout is a common request. It’s often a simple task. For example, it might consist of aligning an image beside the text.

This should be easy to resolve. But WordPress allows just one user at a time to edit a page. That means my client must exit the page so that I can access it.

It’s a small frustration. But it happens often enough to be a waste of time. Plus, this limitation makes training harder.

I usually end up creating a short video tutorial for them. It’s an effective tool, if not a bit overboard. There has to be an easier way to work together.

Allowing multiple users to collaborate would be a game changer. I could walk my client through the process while we’re on the same page. They’re more likely to remember it. And I won’t have to go to the trouble of making a video. Everyone wins in this scenario.

Collaboration can be useful even on small sites. It may not be used very often. But the feature is there to help when you need it.

Tweaking a Page Until It’s Just Right

WordPress currently allows users to work asynchronously. But tracking changes isn’t easy. And there’s no built-in way to communicate about them.

And what if you’re making edits to a published page? There’s no way to save changes now and release them later.

These are common roadblocks for collaborators. And both are part of Gutenberg’s Phase 3 roadmap.

We’ll eventually have a system that facilitates communication between users. Stakeholders can add notes to individual pages or blocks.

Meanwhile, changes to the revisions feature would enable users to work with the future in mind. Let’s say that we want to prepare our home page for Black Friday. We can make the necessary changes and save them. Then schedule publishing for that date.

Current methods don’t offer this kind of flexibility. Thus, a streamlined experience and increased efficiency will be welcome.

Custom Guidelines for Publishing Content

Some organizations have guidelines for publishing content. They may include rules for branding, word counts, or the inclusion of a call-to-action (CTA).

But how do we ensure that content creators meet these benchmarks? WordPress doesn’t prevent users from clicking the Publish button. Thus, content may be published without some crucial elements.

Workflow has long been a struggle for publishers and web designers. Consider blog post layouts, for example. They often assume the user will add a featured image. But some users need constant reminders to add them.

This issue could be solved by creating a custom workflow. Users may see real-time checklists that measure progress. Or the software could prevent them from publishing content that doesn’t meet the established guidelines.

These functions may not be part of WordPress core, mind you. But the software could provide a way for developers to build them. From there, an organization can design a workflow that meets their needs.

This eliminates some manual labor from the process. Editors can then focus on content instead of its structure.

Working Together – Only Better

Initially, the Collaboration phase of Gutenberg sounded a bit boring. It seemed like a niche functionality that impacted relatively few users. But the information that has been released so far is quite the opposite.

Collaborative features have a broad appeal. They go beyond large publishers and will reach mainstream users as well.

They’ll make it easier for freelancers to work with clients. And they’ll increase the synergy between designers and developers.

What’s more, the features outlined are wide-ranging. They’re not just a case of “Google Docs meets WordPress.” Entire workflows can be constructed. And they can evolve as needs change.

The end product is still a ways off. But it looks like this phase will be well worth the effort.

The post What Collaborative Features Will Bring to WordPress appeared first on Speckyboy Design Magazine.

The included features of both block themes and the Site Editor are no longer experimental. Nominally speaking, that makes them a viable option for production environments.

It may also help to boost their presence in the theme market. As of this writing, block themes make up just under 5% of the listings on the official theme repository.

But quantity doesn’t necessarily speak to the quality of the themes. The classic theme marketplace has been littered with low-quality offerings for years. Thus, numbers don’t tell us everything.

In the end, it comes down to features and functionality. So, do block themes have what it takes to power your next WordPress project?

A New Standard for Custom Styles

Before the Site Editor, we had the Customizer. It provided a standardized interface for theme authors to add custom options. The feature worked, but some themes created a nested mess of settings panels.

Block themes offer a different approach to customization. A global styles palette allows for setting important items like typography and colors. And theme authors can include readymade style variations that can dramatically change the look with just a click.

Beyond that, global styles can now be applied to specific blocks. For instance, you can set custom margins and padding for the Paragraph block. Or you might use custom colors and fonts on the Button block. There’s also the ability to add custom CSS to any block via an integrated textarea.

That’s a big deal. Previously, customizing block styling wasn’t easy. You might overwrite the default CSS in your theme. But new WordPress releases tended to change styles – meaning you’d have to readjust accordingly. Configuring the theme.json file was also possible. But having to manually insert specific styles is tedious at best.

Now, most tasks can be done directly within the Site Editor. Even better is that the custom styles you generate are portable via theme.json and the Create Block Theme plugin.

This makes for a smoother, browser-based design experience. That will likely hold more appeal for web designers than earlier incarnations of the Site Editor.

The Twenty Twenty-Three theme includes several style variations.

Fixes To Previous Pain Points

Improving the Site Editor experience has been a priority for the project. And recent versions of WordPress have brought some welcome changes on that front.

For one, a new UI has made the Site Editor easier to navigate. Templates and template parts are neatly organized. And it’s easier to recognize the exact item you’re editing.

And the much-maligned Navigation block has also received an overhaul. Menu items can now be intuitively managed via a settings sidebar.

The Style Book feature should also come in handy. It provides a glimpse of how each block is styled. Previously, you’d have to manually add a block to a page to see how it fits within your theme. The ability to visually inspect seldom-used items in the back end helps to ensure that they meet our needs.

These and other enhancements have smoothed over a previously scattered user experience. That’s an important step. Because if the Site Editor isn’t easy to use, block themes will suffer as a whole.

The WordPress Style Book.

A Better Experience, but the Same Differences

A polished UX is a great step in the right direction. But that isn’t the only relevant part of using a block theme. You must also buy into the philosophy surrounding these features.

This may be the hardest thing for some web designers to accept. And there are a couple of issues at play:

A Different Way to Work

The Site Editor and block themes provide a visual way to build a website. This no-code approach can be liberating – or frustrating. The answer depends on how you prefer to work.

Developers who are used to building classic themes may not have the desired flexibility. Writing code means unlimited freedom. Every style and function can be customized to suit your needs.

As such, this newfangled way of working means accepting certain limitations. For instance, the global styles palette doesn’t include every possible styling option.

And while you can still use custom CSS within the Site Editor, it isn’t as well-organized as a traditional stylesheet. That could make future maintenance more cumbersome.

Not everyone is ready or willing to adopt a new workflow. Block themes force our hand.

Giving up Total Control Over Layout

Client-proofing can be a major part of building a website. The idea is that we can allow clients access to the items they need (content, the ability to upload images, etc.). At the same time, we can protect the integrity of the site’s layout.

Block themes aren’t necessarily built with this in mind. They provide ready access to the site’s header, footer, and everything in between. A rogue client could easily do some damage.

The Site Editor includes a “lock” function that prevents tampering. But it’s easy to disable.

With classic themes, it’s possible to embed elements directly into a template. This makes it completely off-limits within WordPress.

This shift has led to a debate within the WordPress developer community. For some developers, giving up control may be a bridge too far.

Template Part Blocking in the WordPress Site Editor.

Block Themes Have Grown Up

All told, block themes are in a better position to fulfill their potential. And much of the credit should go to the team behind the Site Editor.

The improvements to building within WordPress are noticeable. This should help to put block themes on the map. They are now a serious option for web designers, rather than a curiosity for early adopters.

This doesn’t mean they’re the right fit for every project and person. The philosophical differences between block and classic themes still exist, after all.

But the future looks bright. With the Site Editor being stripped of this “beta” label, theme authors are more likely to build for it. And the rest of us will have more products to choose from.

Will there be a point when block theme adoption surpasses its classic counterparts? If it happens, it won’t be immediate. But it will be interesting to see how things evolve.

The post The Benefits of Using Block Themes in Your Next WordPress Project 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.

While that represents progress relative to the old Classic Editor, you’ll still need a bit of help if you want to do anything more than edit colors or font sizes. As of version 6.0, advanced styling for individual blocks isn’t readily available in a default installation of WordPress.

There are some fairly simple workarounds, however. Today, we’ll introduce you to three ways to enhance your custom layouts with the WordPress block editor. They’ll help you turn something basic into a highly-customized setup.

Option #1: Write Custom CSS

If you’re comfortable writing code, you can customize pretty much every aspect of your block editor layout via CSS. It’s perfect for those who are already building custom WordPress themes and want to client-proof their work.

How you go about the process depends on how widespread you want the styles to be implemented. In this example, we’re looking for a one-off solution. Therefore, the easiest method is to add a custom CSS class to a block.

The block editor’s settings panel has an area just for this purpose:

1. Click on the block you want to style;
2. Click the Advanced panel in the settings area to the right;
3. Add your custom CSS class name to the Additional CSS class(es) field;
4. Save your work;

Here, we’ve added the custom class rounded-corners to an image block.

Next, we’ll add that class to our theme’s CSS and define some styles. If your theme uses the WordPress Customizer, code can also be placed into its Additional CSS panel.

.rounded-corners {
     border-radius: 10px;
}

Note that you’ll also want to add this code to your theme’s editor-style.css file (if it exists) to see your custom styles reflected within the block editor.

Looking at the front end, our image now sports some beautifully rounded corners!

Option #2: Set Default Styles via Theme.json

Among the early drawbacks of the block editor was the difficulty in applying consistent styling. You had to target several CSS classes that were defined in the core software.

The advent of the theme.json file greatly simplifies the process. Instead of searching around for all of the relevant CSS, you can define block styles directly within a single file. And you have the flexibility to target blocks as broadly or narrowly as you’d like.

Layout and design aspects such as custom color palettes, typography, and spacing can be defined via theme.json. Best of all, this feature is compatible with all WordPress themes.

If you’re already using a newfangled block theme on your website, you can edit the theme.json file within the theme’s root folder (keep a backup of the original – just in case). WordPress provides some documentation with examples to guide you.

For those using classic themes or building from scratch, tools such as ThemeGen allow you to visually build a theme.json file. Select your styles, export the theme.json file and drop it into your theme’s root folder. WordPress will recognize the file and apply the styles. It even writes the CSS for you!

Option #3: Use the Editor Plus Plugin

Looking for a no-code solution and don’t want to deal with theme.json? The Editor Plus plugin has you covered. It allows for advanced styling of block layouts directly from within the editor.

Activate the plugin, and the default block editor settings area will gain a variety of new panels. From there, you can set custom padding, margins, borders, sizing, and a whole lot more. If you want visual control over every aspect of your site’s layout, Editor Plus offers a straightforward solution.

The plugin also adds a handy selection of custom blocks as well. Features such as accordion UIs, icons, and progress bars offer a bit more style and content flexibility.

Going this route does require a long-term commitment, however. Disabling the plugin will result in a loss of any custom styles you’ve created. Therefore, it’s worth considering the benefits and drawbacks before making a decision.

Take Your WordPress Page Layouts to the Next Level

In some ways, it makes sense to think of the block editor as a starting point. With it, we can create all manner of custom layouts. But until there are more configuration options added to WordPress core, it requires some extra effort to fully customize styling.

The three options above provide a path to leveling up your block layout styles. Whether you’re looking to enhance a single element or site-wide features, there’s a method for doing so.

All things considered, theme.json may be the best long-term solution. It’s baked into WordPress core, and everything’s contained within a single file. From a maintenance perspective, this is preferable to the other options.

However, there are plenty of reasons to choose custom CSS or even a plugin. In the end, it’s about finding the best fit for your needs and workflow.

The good news is that you don’t have to settle for the default block editor styles. Use your favorite tool and start building!

The post How to Improve Custom Layouts Using the WordPress Block Editor appeared first on Speckyboy Design Magazine.