WP Tavern

Font Awesome Releases New COVID-19 Awareness Icons

COVID-19 awareness icons added to Font Awesome.

On Monday, the Font Awesome team launched a new set of icons to promote awareness around COVID-19. The solid icons available in the Font Awesome 5.13 update are all available for free and are open-source. The regular, light, and duotone versions of the icons are a part of the pro package.

The goal of the new icons is to help websites and apps boost awareness around the global pandemic. The latest update adds 47 new icons that range from medical use to promoting hygienic practices such as hand washing. Some icons represent viruses and social/physical distancing. There is even a couple of toilet paper icons thrown in for good measure. Apparently, those are necessary in today’s world of mass panic buying.

“Based on recommendations from The World Health Organization and others, you’ll find symbols to communicate good hygiene and social distancing,” wrote Jory Raphael, Icon Design Lead at Font Awesome. “While we can’t be on the front lines like brave medical professionals across the globe, we hope these icons aid in communicating some of the most important things people can do to protect themselves and their communities.”

The icons were originally requested two weeks ago on the Font Awesome GitHub repository. The design team moved quickly to make them available. There are additional icon tickets for liquid soap and a bar of soap open.

Like all Font Awesome icons, the new icons are available as part of the font package or for download as individual SVG files.

The fonts may come in handy for website owners, designers, and developers who are building sites or pages with content related to COVID-19. Icons can add context to content or focus attention where needed.

Users of the Font Awesome WordPress plugin should have immediate access to the new icons if needed. The plugin relies on the external Font Awesome CDN or Font Awesome kits. Users can also choose which version of the library of icons they wish to use, which includes the latest release.

If you know of any other icon sets or resources for designers and developers related to COVID-19, please share them in the comments.

WP Tavern

Gutenberg 7.8 Adds Patterns API and Continues Interface Cleanup

Version 7.8 of the Gutenberg plugin landed yesterday. The team continues to improve the editor with the refreshed interface work that began in version 7.7. The most useful feature with this update of the plugin is the inclusion of the Patterns API for plugin and theme developers.

This release is not the massive feature release that we experienced with some earlier versions. It is the culmination of many smaller improvements, particularly with improving the user interface and experience. The update includes over 20 bug fixes, some continued work on experimental features like the site editor, and several improvements in code quality.

Editing a post permalink without requiring a save should work correctly, which has been an outstanding issue for over a year. Users can now select multiple categories for the latest posts block as opposed to a single category. And, the experimental full-site editing feature now supports fullscreen mode.

UI Continues Improving

Gutenberg 7.8 editor with updated preview button.

The team began a massive refresh of the user interface in Gutenberg 7.7. With this release, they continued building upon that initial work. Designers have fine-tuned several of the icons for the editor toolbar, which includes the bold, italic, strikethrough, indent, outdent, and spacer icons.

One of the most notable differences is an update to the user-facing text for the post preview button. In the previous version, there was a button that simply read “Desktop.” Once clicked, it would open a drop-down list to preview the post in desktop, tablet, or mobile mode. I had initially thought the team had removed the post preview option until I clicked on it. In version 7.8, that button’s text now reads “Preview,” which is a much-needed change that is no longer confusing.

Overall, the polishing work done on the editor looks good. At this point, I have become so accustomed to it that I have no desire to go back to a regular WordPress install without the Gutenberg plugin installed.

Building Custom Block Patterns

Screenshot of a custom block pattern in the Gutenberg block editor.
Custom block pattern registered and in use.

I have said it before, but it bears repeating: I am excited about block patterns. I am even more excited about the ability for plugin and theme authors to begin testing this feature by building custom patterns of their own. I foresee an explosion of creativity over the next several months and beyond.

Patterns are a registration of the HTML for one or more blocks. Plugin and theme authors can further define the settings for those blocks. The Gutenberg team included a simple PHP function for developers to register custom patterns called register_pattern().

I have tinkered with numerous pattern ideas since I updated yesterday evening. The simplest way to build a pattern is to do so visually. Open the editor and create a unique group of blocks that you like. Then, switch to the code editor and copy the code. From that point, you can register the pattern via PHP and paste the copied code. There is not really much actual coding involved in the process. Even advanced users with enough DIY grit could register them within their theme’s functions.php file.

The following is a simple “hero” pattern as shown in the above screenshot that uses the cover block, a heading, a paragraph, and a buttons group (I formatted the code a little after copying and pasting for readability):

add_action( 'init', function() {

	register_pattern( 'tavern/hero-1', [
		'title'   => __( 'Hero 1' ),
		'content' =>
			'<!-- wp:cover {"customOverlayColor":"#273f60","align":"full"} -->
			<div class="wp-block-cover alignfull has-background-dim" style="background-color:#273f60">
				<div class="wp-block-cover__inner-container">
					<!-- wp:heading {"align":"center"} -->
					<h2 class="has-text-align-center">Heading Title Here</h2>
					<!-- /wp:heading -->

					<!-- wp:paragraph {"align":"center"} -->
					<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<!-- /wp:paragraph -->

					<!-- wp:buttons {"align":"center"} -->
					<div class="wp-block-buttons aligncenter">
						<!-- wp:button {"className":"is-style-outline"} -->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button A</a></div>
						<!-- /wp:button -->
						<!-- wp:button {"className":"is-style-outline"} -->
						<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">Button B</a></div>
						<!-- /wp:button -->
					<!-- /wp:buttons -->
			<!-- /wp:cover -->'
	] );
} );

Disclaimer: The preceding code is for an experimental feature and could change in later versions of the Gutenberg plugin or before the API is officially added to core WordPress.

WP Tavern

Finding Balance in These Uncertain Times: Remote Work and Sharing Our Struggles

There is a popular saying, which has been used in several memes, among my developer and remote-working friend groups. It goes something like the following:

Government and Doctors: Practice physical distancing during this pandemic.

Remote Workers: I’ve been preparing my whole life for this moment. I got this.

The truth is that we don’t “got this,” at least I know I don’t.

While practicing physical distancing during the COVID-19 pandemic, it is those little moments that you do not think you will miss that suddenly become important.

Every Saturday, I awake around 6 or 6:30 a.m. I go through my normal routine and get dressed for a morning drive into the city. My home is in a quiet area in rural Alabama. I am a Millennial living within a neighborhood of mostly Baby Boomers. For the most part, it is an ideal place for remote work. Few people bother me, and I can tend to my animals and get my work done in peace. However, it is not exactly the most socially invigorating place in the world.

Those Saturday mornings are important. Assuming I have no other social plans for the week, it is my one chance to get out into the world. I stop by the local Co-Op, pick up any feed or seed I need, and chat with the people there about the farming season or the weather — mostly the weather. I drop into Hidden Treasures, a flea market, and talk with a seller who shares an interest in finding old DVDs, VHS tapes, and Laserdiscs. I grab a sandwich at Subway and am greeted by the Indian-American manager who learned my name on my first visit years ago. He asks about my family. I ask how his family is doing.

These fleeting moments are almost forgettable. They are routine. Run-of-the-mill. When they are happening, you do not think about them. However, when they are gone, there is a void remaining that is hard to fill.

Yes, I have been practicing physical distancing for over a decade, at least to some degree. That makes those small moments where I interact with others in person crucial to my mental health.

This Saturday, I will once again head into the city after a hiatus. However, my trip will be different. This time, I will be gathering necessities for myself and some of my elderly neighbors who want to avoid the public for a while. The trip will be quick. Some of the places I normally visit are closed. My Subway meal will be carryout.

Even after a couple of weeks, and feeling like I was prepared for this moment, I am still coming to grips with the world as it is now.

Staying Strong as a Community

The WordPress community, the people, have put up a strong front. Bloggers have written posts on remote work. Developers, designers, and others have willingly shared their knowledge with others. Companies are offering discounts to help ease the burden for those looking to begin a shop or blog online. Yes, our community will get through this, and we will be stronger for it.

However, it is OK for us to share our vulnerabilities during these uncertain times.

Ultimately, this community is not about software. It is about people. The software is the way we connect. It is a tool that we program, design, and evangelize. We do it for ourselves. We do it for millions of others to have a voice online. But, it is always about people.

Sometimes, people need to know that others in our community are struggling. This is a collective pain that we are working through. Remote work does not always mean physical distancing from everything and every one of the outside world. Many of us may have a bit of a head-start on staying put at home for hours on end, but we are also dealing with a new reality every day. Showing strength is good, but sharing our stories of struggle is just as important.

For some of us, that weekly trip into the city plays a vital role in our well-being. Others are dealing with children who would normally be in school or daycare. Kids can be disruptive, even when you have the best-laid plans and every hour of their day mapped out. Even for us remote workers, life is a little out of balance now. It is OK to admit that. If you are running a WordPress business, it is OK for you to provide a little more flexibility for your workers who are at home. Many of them will need it.

It is not time to break down. It is time to find a new balance in our current environments. That may mean starting up a family board game night. It may mean making sure that you set up a video chat with those loved ones you have been too busy to call in several months. Maybe you will start taking a daily walk for better health. It might also be time to set up WordPress blogs for your children as part of their education. Some of these new things may and probably should become routine, especially that last one.

Do not become overwhelmed if you feel like you should be handling this situation better because you have practice at remote work.

Hop over to your personal WordPress blog. You may have to dust that thing off; some of you have not used it in a while. Write about the things you are struggling with. Share them with the community and find support among others. Post about your experiences. Tell us about your tough days and those small wins that are helping you get through this.

For me, it is having my dad call to check in for the third time this week, and it is only Wednesday.

WP Tavern

Block Patterns Will Change Everything

Book sales section from a custom theme.

It was about a year ago. I was happily designing a theme for aspiring novelists. I wanted to get ahead of the competition and market a theme specifically to writers who would be attempting the National Novel Writing Month 2019 challenge.

NaNoWriMo, for short, is a whirlwind of a month where 1,000s of people from around the world clatter away on their keyboards to pen a 50,000-word novel manuscript. One month of sheer willpower, coffee by the gallon, and sleepless nights in exchange for glory. There are no grand prizes or guaranteed publishing contracts at the end of the journey. You nab a certificate, a few coupons, and bragging rights. I completed the challenge in 2018.

Inspired by my win just months before, I built a theme for those who would be taking the journey the following year. I also wanted to broaden its appeal to anyone who might be an aspiring novelist but not necessarily participating in the challenge. Or, maybe even to someone who just published their first book. Perhaps this would be an opportunity to bring a few new WordPress users into our community.

I outlined a homepage layout to show how users could feature their latest book with a purchase button. Then, it dawned on me.

How could someone build this book sales page without solid experience with the block editor?

I had been using the Gutenberg plugin for months upon months before it landed in WordPress 5.0. I knew the ins and outs of the system.

The design was simple. Using the core media & text block, a heading, a couple of paragraphs, and a button, I had created something that may have been too complex for the average user. I had not even gotten into the custom color, font-size, and block-style options that accented the layout.

This simple combination of blocks had the potential to be overly complicated for some. I had other plans for more complex layouts. Other theme authors had taken on bigger combinations of blocks. For end-users, they were likely stepping into a world that did not make sense. They would see beautiful theme demos and grow frustrated when they could not make things work. The block editor was not, and is still not, intuitive enough for the least-knowledgeable users to build layouts beyond the basics.

I opted for a step-by-step tutorial to guide my users into building this simple book-selling section. However, documentation is not always the best answer. Even when users find and read it, the results are not always accurate. It would have been far simpler to have a button that, when clicked, inserted this section directly into the editor. The user could then customize it to fit their content.

That is where block patterns come in.

Theme authors should be able to build unique and complex combinations of blocks with custom styles. Users should be able to just make it look like the demo.

Since “building” (I use this term loosely) my first WordPress theme in 2005, I have either seen or attempted every manner of solution to this problem. Page templates. Theme options. Shortcodes. Widgets. You name it. They have all been tried before. Each method provided major hurdles for users. Some (ahem, shortcodes) left users’ content in shambles and created a lock-in effect where they ended up tied down to their theme.

It is long past time for something new.

What Are Block Patterns and How Will They Improve User Experience?

Screenshot of a pricing column block pattern.
Custom pricing columns section.

What happens when a user wants to build a layout with multiple columns of pricing options as shown in the above screenshot? Good luck. Most could not produce it with the block system. Even without block patterns, the theme would need some custom block styles to make it possible. Plugins will likely fill in the void for such complex output and have been tackling pricing tables in various ways over the years. What if we could produce layouts like this within themes or in much simpler plugins?

It is possible with block patterns.

Put simply, a block pattern is a group of blocks. Core WordPress, themes, and plugins will be able to register patterns with predefined settings attached to them.

From the average user’s point of view, block patterns are predefined sections they can use to create layouts. These layouts can be something as simple as the book section from earlier in this article to the more complex pricing columns. With these patterns available, users will be able to create complex layouts at the click of a button.

The block system laid the foundation for a much different and forward-compatible future than what we have experienced over the years. At the end of the day, most blocks are just plain old HTML. Block patterns will be nothing more than the registration of a group of these blocks. When a user switches themes, their content remains intact, even when their new theme does not register the same patterns.

Version 7.7 of the Gutenberg plugin shipped the first iteration of an interface for patterns. It is basic and will undergo several more iterations before it is ready for use in production. Eventually, there will be a fully-integrated interface for selecting from multiple patterns. The user sees something they want to use. They click on that pattern. It gets inserted into the post.

No more complicated theme options. No more shortcode soup. No more hours of frustration wondering why you cannot build that custom front page shown in that carefully-crafted theme demo.

I may be a tad optimistic. Block patterns will require massive buy-in from the theme and plugin developer community. While core WordPress will ship several popular patterns by default, they will in no way cover the breadth of design that is possible when theme authors put their artistic skills to work.

I have always been excited about the block editor. However, it has always felt like I was more excited about the potential than the end product. I was in a constant state of waiting for it to become the thing I thought it could be. Yes, I am still waiting. However, tinkering with an early version of the pattern system feels like we are getting to the point where we can do those awesome things the editor was supposed to allow us to accomplish. It has been a long wait, and we still have a bit to go. But, I have a renewed passion for the project after experiencing the work that has been done thus far.