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.


Yoast Publishes Free Online Training Course for the Block Editor

Yoast, the company behind the popular Yoast SEO plugin, launched its free block editor training course today. The course is available to anyone by signing up for Yoast Academy, which also includes multiple other free and paid courses. Users can learn everything from SEO and copy writing to basic WordPress skills. The Academy team’s latest course promises to get first-time users up to speed on using the block editor.

“At Yoast, we are huge fans of the block editor,” wrote Marieke van de Rakt, CEO of Yoast in the training course announcement. “Admittedly -not right from the start-, but we’re now block-editor fanboys and fangirls. That’s why we created an awesome free block editor course! We hope it will help everybody to use the block editor to the fullest!”

Currently, the course on block editor training has at least two or three hours of content to work through, depending on how quickly users digest the content. The course offers three major sections:

  • What is the block editor?
  • Using the block editor
  • Extras

Each of these is further broken down between one and three sub-sections. At the moment, there are seven lessons in total, which range between 7 and 49 minutes based on Yoast’s estimated time.

The courses are similar to taking a school class. The Academy team provides short videos that cover individual topics around the block editor. The team also provides a PDF version of the lesson for those who prefer text over video format. At the end of the lesson, users take a quiz and move on to the next lesson. A score of 80% or more is considered a passing grade.

The team keeps each lesson digestible enough to complete in a short bout. Even if watching the videos, the PDF version of the lessons, which are high quality and have loads of useful information with links to third-party resources, are recommended reading.

The team has provided a preview of the block editor course via YouTube:

Moving to the Block Editor and Building Training Courses

Joost de Valk, founder and CPO of Yoast, said the team would continue building on the training course over time as new features are added to the block editor. There are no plans to update it on a strict schedule, but the team wants to keep it current.

Yoast, as a company, focuses on SEO. Therefore, some of the advice offered through the course puts focus on creating content that is useful for people and friendly for search engines. One of the primary topics the course touches on is publishing “resources” and how this is made better by the block editor. “Resources are larger articles, evergreen content or in our SEO terminology ‘cornerstone content’: the stuff you want to rank within the search results,” said de Valk. “You can’t just throw some words on a page and expect to rank anymore. You’ll have to try a bit harder. Gutenberg makes that extremely easy.”

The Yoast team has been moving its massive site to the block editor over time. “The post types I deal with regularly are all written with the block editor, but we might have some areas of the site that aren’t there yet,” said de Valk. “It’s a rather large site, with e-commerce, training, jobs, etc. all built into one giant WordPress multi-site install, so that was a bit of an undertaking. We always try to dog-food stuff though, so we moved everything over quite quickly.”

Getting the 11 million users who are using Yoast’s products to make the switch is not quite as easy. Not everyone has embraced the block editor. “The usage of the block editor is definitely improving, but it’s not going as fast as we’d like to see,” said de Valk. “We honestly think a lot of people don’t understand the chances the block editor brings yet, one of the reasons for releasing this course and trying to help more people to start using it.”

The team’s latest SEO course had over 10,000 signups within a week. While that number is a drop in the bucket in comparison to their full user count, it is promising. With a similar turnout for the block editor training course, it may convert more users from the older classic editor.

Putting together full training courses is a large undertaking, but these are the types of resources the WordPress community needs moving forward. “It’s a lot of work,” said de Valk. “We have four people in our Academy team, a crew that records our videos, and our design team designs all the PDFs and slides within the videos. It’s a non-trivial investment, but we’re happy to make that if it helps make more people enthusiastic for the block editor.”