Wordpress Planet

Subscribe to Wordpress Planet feed
WordPress Planet - http://planet.wordpress.org/
Updated: 11 hours 20 min ago

WPTavern: Query Loop: The Ins and Outs of One of WordPress 5.8’s Most Powerful Features

Sat, 07/10/2021 - 05:17

WordPress 5.8 is on deck for July 20, just a mere 10 days from now. The release is geared up to be the most feature-packed update the community has seen in a while. Block-based widgets, the pattern directory, WebP image support, template-editing mode, and many more tools are nearly ready to ship to the masses.

However, one of the most powerful features is the Query Loop block.

If you are unfamiliar with the terms “Query” and “Loop,” they are vital concepts within WordPress. Traditionally, they were only necessary for theme and plugin development. However, through the Query Loop block, users will gain exposure to what is, for all intents and purposes, the backbone of how WordPress displays posts on a site’s front end.

Queries? Loops?

Not everyone will be immediately familiar with these developer terms that WordPress is plopping down in the user interface. For theme and plugin authors, these are everyday concepts. However, even some users who have been using the platform for a decade have never been exposed to them. So, we should get some basic definitions in place.

The term “Query” is simpler than you might think. It merely means to “query” or “ask” for posts from the database according to a defined set of options. For example, one might attempt to get the last 10 blog posts.

“Loop” is an even easier concept to grasp. It means to “loop” or “cycle” through each queried post and output it. Technically, a developer could do things other than displaying the posts during this process, but we are only concerned with what gets printed on the screen.

The two things combined become the Query Loop block. It allows users to ask for a set of posts and display each one.

There is also a Post Template block, which throws a wrinkle in all of this. Aside from the word “template” being overused in WordPress for various features, this is a new method for an old concept. Traditionally, WordPress theme authors would write out all the HTML and call specific template tags within the queried posts loop to show things like the post title, author, content, and more. This is easy to do within a PHP file. However, in the block editor, there needed to be a new way to group these things together. The Post Template block acts as this group, housing the things users want to display in the Query Loop.

WordPress also has a variation on the Query Loop block called Posts List. They do the same thing, but the latter has a more user-friendly title than the former. The only problem with this variation is that, when it is inserted, the user still sees the same “Query Loop” block title. There is a ticket to fix this, but it is unlikely to make it into WordPress 5.8.

Query Loop Pattern Inserter

When first inserting a Query Loop into the editor, WordPress will introduce users to another version 5.8 feature: the pattern inserter. Instead of having immediate access to interact with the block, users can select from a list of predefined patterns.

By default, the inserter is a carousel that lets users can scroll through patterns individually:

Query Loop pattern inserter: carousel view.

However, they can switch to a grid-based layout and view all of the patterns at once:

Query Loop pattern inserter: grid view.

WordPress 5.8 is set to ship with six Query Loop patterns by default, unless more are added in the coming days:

  • Standard
  • Image at left
  • Small image and title
  • Grid
  • Large title
  • Offset

I am not particularly fond of any of the default patterns other than the “Large title” one (shown in the screenshots above with the black background and white text). For this block to shine, users will need to build out their own designs or wait for theme authors to begin bundling custom Query Loop patterns.

And, that is how it should be. Core WordPress should ship some basics while letting our community of theme designers showcase their craft.

A custom simple blog posts listing.

This is also an opportunity for theme authors to offer alternatives to their custom page template designs. It is not time to throw them out entirely. However, it is a way to begin recreating old ideas in the block era, such as building out eCommerce plugin integrations, portfolio grids, and much more. Some of the tools are still limited (we are getting to those next), but there is enough initial groundwork for exploration, helping users experience WordPress in new ways.

Block Options

The Query Loop block has several options for users to customize which posts to query the database for:

Query Loop block and its options.

In the block toolbar, there is a “Display settings” button. When clicked, it creates a popover with options for how many posts to show:

  • Items per Page: Number of posts to display per page
  • Offset: Number of posts to skip over
  • Max page to show: Limit pages (this requires using one of the Query Pagination blocks)

The “Settings” panel in the Query Loop’s block sidebar has several secondary options. Users can enable “Inherit query from template” to use WordPress’s global query, but this is mostly useless for WordPress 5.8 users without the Gutenberg plugin enabled and a block-based theme. For now, you will almost always want to disable this option. This will grant access to a slew of new choices, such as:

  • Post type
  • Ordering
  • Filters panel for categories, tags, author, and keyword

The Settings and Filters panels are the most fine-tuned pieces of the Query Loop block. The development team struck a sensible balance between ease-of-use and the dozens of query-related parameters available through code. It provides users with a ton of power right of the gate but should be flexible enough in the future for plugin authors to extend.

The Post Template

When inserting a Query Loop, the editor automatically adds its inner Post Template block. This is where most of the magic happens. Users can directly change how their posts appear. Primarily, they will do so by adding blocks from the Theme category, many of which are for outputting post-related data.

Theme-categorized blocks for outputting dynamic data.

Nearly all other blocks are available for insertion here too. However, many of them will not be great candidates for use within the Query Loop.

One thing that may not be immediately evident is that changes you make to one post within the Post Template block will affect all others. So, if you add a Video or Buttons block here, they will be identical. Remember, this is a “template” for designing how all posts within the Query Loop will appear.

The drawback for customizing the Post Template block output is the lack of design options for some of the blocks. It is easy to build something like a simple post list:

Posts list with titles and dates.

You can also build a layout like a portfolio project grid, as shown in the following screenshot. However, the Post Featured Image block does not currently have sizing controls, so you are stuck with your theme’s default post-thumbnail size — assuming it is actually registered. Experiences may vary. Wildly.

Building a basic portfolio grid.

For more advanced things than changing typography, colors, and spacing, users will need to wait for WordPress 5.9 and beyond. However, theme authors still have the block styles API at their disposal. I, for one, look forward to seeing what they do with it.

WPTavern: Query Loop: The Ins and Outs of One of WordPress 5.8’s Most Powerful Features

Sat, 07/10/2021 - 05:17

WordPress 5.8 is on deck for July 20, just a mere 10 days from now. The release is geared up to be the most feature-packed update the community has seen in a while. Block-based widgets, the pattern directory, WebP image support, template-editing mode, and many more tools are nearly ready to ship to the masses.

However, one of the most powerful features is the Query Loop block.

If you are unfamiliar with the terms “Query” and “Loop,” they are vital concepts within WordPress. Traditionally, they were only necessary for theme and plugin development. However, through the Query Loop block, users will gain exposure to what is, for all intents and purposes, the backbone of how WordPress displays posts on a site’s front end.

Queries? Loops?

Not everyone will be immediately familiar with these developer terms that WordPress is plopping down in the user interface. For theme and plugin authors, these are everyday concepts. However, even some users who have been using the platform for a decade have never been exposed to them. So, we should get some basic definitions in place.

The term “Query” is simpler than you might think. It merely means to “query” or “ask” for posts from the database according to a defined set of options. For example, one might attempt to get the last 10 blog posts.

“Loop” is an even easier concept to grasp. It means to “loop” or “cycle” through each queried post and output it. Technically, a developer could do things other than displaying the posts during this process, but we are only concerned with what gets printed on the screen.

The two things combined become the Query Loop block. It allows users to ask for a set of posts and display each one.

There is also a Post Template block, which throws a wrinkle in all of this. Aside from the word “template” being overused in WordPress for various features, this is a new method for an old concept. Traditionally, WordPress theme authors would write out all the HTML and call specific template tags within the queried posts loop to show things like the post title, author, content, and more. This is easy to do within a PHP file. However, in the block editor, there needed to be a new way to group these things together. The Post Template block acts as this group, housing the things users want to display in the Query Loop.

WordPress also has a variation on the Query Loop block called Posts List. They do the same thing, but the latter has a more user-friendly title than the former. The only problem with this variation is that, when it is inserted, the user still sees the same “Query Loop” block title. There is a ticket to fix this, but it is unlikely to make it into WordPress 5.8.

Query Loop Pattern Inserter

When first inserting a Query Loop into the editor, WordPress will introduce users to another version 5.8 feature: the pattern inserter. Instead of having immediate access to interact with the block, users can select from a list of predefined patterns.

By default, the inserter is a carousel that lets users can scroll through patterns individually:

Query Loop pattern inserter: carousel view.

However, they can switch to a grid-based layout and view all of the patterns at once:

Query Loop pattern inserter: grid view.

WordPress 5.8 is set to ship with six Query Loop patterns by default, unless more are added in the coming days:

  • Standard
  • Image at left
  • Small image and title
  • Grid
  • Large title
  • Offset

I am not particularly fond of any of the default patterns other than the “Large title” one (shown in the screenshots above with the black background and white text). For this block to shine, users will need to build out their own designs or wait for theme authors to begin bundling custom Query Loop patterns.

And, that is how it should be. Core WordPress should ship some basics while letting our community of theme designers showcase their craft.

A custom simple blog posts listing.

This is also an opportunity for theme authors to offer alternatives to their custom page template designs. It is not time to throw them out entirely. However, it is a way to begin recreating old ideas in the block era, such as building out eCommerce plugin integrations, portfolio grids, and much more. Some of the tools are still limited (we are getting to those next), but there is enough initial groundwork for exploration, helping users experience WordPress in new ways.

Block Options

The Query Loop block has several options for users to customize which posts to query the database for:

Query Loop block and its options.

In the block toolbar, there is a “Display settings” button. When clicked, it creates a popover with options for how many posts to show:

  • Items per Page: Number of posts to display per page
  • Offset: Number of posts to skip over
  • Max page to show: Limit pages (this requires using one of the Query Pagination blocks)

The “Settings” panel in the Query Loop’s block sidebar has several secondary options. Users can enable “Inherit query from template” to use WordPress’s global query, but this is mostly useless for WordPress 5.8 users without the Gutenberg plugin enabled and a block-based theme. For now, you will almost always want to disable this option. This will grant access to a slew of new choices, such as:

  • Post type
  • Ordering
  • Filters panel for categories, tags, author, and keyword

The Settings and Filters panels are the most fine-tuned pieces of the Query Loop block. The development team struck a sensible balance between ease-of-use and the dozens of query-related parameters available through code. It provides users with a ton of power right of the gate but should be flexible enough in the future for plugin authors to extend.

The Post Template

When inserting a Query Loop, the editor automatically adds its inner Post Template block. This is where most of the magic happens. Users can directly change how their posts appear. Primarily, they will do so by adding blocks from the Theme category, many of which are for outputting post-related data.

Theme-categorized blocks for outputting dynamic data.

Nearly all other blocks are available for insertion here too. However, many of them will not be great candidates for use within the Query Loop.

One thing that may not be immediately evident is that changes you make to one post within the Post Template block will affect all others. So, if you add a Video or Buttons block here, they will be identical. Remember, this is a “template” for designing how all posts within the Query Loop will appear.

The drawback for customizing the Post Template block output is the lack of design options for some of the blocks. It is easy to build something like a simple post list:

Posts list with titles and dates.

You can also build a layout like a portfolio project grid, as shown in the following screenshot. However, the Post Featured Image block does not currently have sizing controls, so you are stuck with your theme’s default post-thumbnail size — assuming it is actually registered. Experiences may vary. Wildly.

Building a basic portfolio grid.

For more advanced things than changing typography, colors, and spacing, users will need to wait for WordPress 5.9 and beyond. However, theme authors still have the block styles API at their disposal. I, for one, look forward to seeing what they do with it.

WPTavern: WordPress.org Meta Team Fixes Search Snippet Issue with Download Page Promoting WordPress.com

Sat, 07/10/2021 - 02:05

Yesterday evening Chris Klosowski, Sandhills Development Partner and Director of Technology, tweeted out a problem with the way WordPress.org’s Download page was appearing in Google’s Search results snippets when searching for “WordPress.” Underneath the link, the preview text referenced WordPress.com’s hosting:

WordPress.com is the easiest way to create a free website or blog. It’s a powerful hosting platform that grows with you. We offer expert support for your WordPress site.

Seems like maybe the SEO is not working correctly here….or is it? You decide… pic.twitter.com/hhwZ6LQnW4

— Chris Klosowski (@cklosowski) July 8, 2021

Others reported seeing the intended description when Googling, which is designated in the Schema.org tag in the head tag but not printed on the page:

“Download WordPress today, and get started on creating your website with one of the most powerful, popular, and customizable platforms in the world.”

The reference to WordPress.com came from the hosting providers listed at the top of the page, where it randomly displays two upon each page refresh. The Download button used to be at the top of the Download page but ever since mid-January 2021, it has been pushed further down below recommended hosts. This is presumably to help people who want to set up a self-hosted site but don’t know where to get started.

“Google was skipping our defined page descriptions in favor of some in-page content,” WordPress lead developer Dion Hulse said, regarding the issue with the search results snippet.

The WordPress Meta team was alerted to the problem and quickly put a solution in place to encourage Google to look somewhere else on the page for the main content.

“The Download page has info about the mobile apps and hosting for WordPress,” core contributor Corey McKrill wrote in the commit message. “These are in section container elements, which might be the reason that Google is using the content of the hosting container for its search result snippet, instead of the meta description tag. By changing these containers to aside elements, hopefully Google will get the message that they don’t contain the most pertinent information for that page.”

The meta team also marked the hosting recommendations on the download page as exempt from being included in the Google search result snippet, so that it doesn’t pull text from these aside elements.

Here is what the updated search result snippet looks like after the changes were put in place:

Klosowski’s tweet highlighted the perennial tension that arises from the confusion between WordPress.com and WordPress.org. The recommended hosting page has always been a contentious bit of real estate on WordPress.org but especially now that hosting companies are also prominently promoted on the Download page.

https://twitter.com/cklosowski/status/1413264854643736577

In this situation, Josepha Haden Chomphosy, WordPress’ Executive Director, quickly acknowledged that the search snippet promoting WordPress.com was in fact a problem, heading off those who might promote the notion that it was intentional. The Meta team acted swiftly to resolve the issue and return the snippet to its former meta description. It is not known how long Google has been pulling from the text in the recommended hosts sections to populate the snippet, but the code is now more explicit about the fact that those companies are not the most important content on the Download page.

WPTavern: WordPress.org Meta Team Fixes Search Snippet Issue with Download Page Promoting WordPress.com

Sat, 07/10/2021 - 02:05

Yesterday evening Chris Klosowski, Sandhills Development Partner and Director of Technology, tweeted out a problem with the way WordPress.org’s Download page was appearing in Google’s Search results snippets when searching for “WordPress.” Underneath the link, the preview text referenced WordPress.com’s hosting:

WordPress.com is the easiest way to create a free website or blog. It’s a powerful hosting platform that grows with you. We offer expert support for your WordPress site.

Seems like maybe the SEO is not working correctly here….or is it? You decide… pic.twitter.com/hhwZ6LQnW4

— Chris Klosowski (@cklosowski) July 8, 2021

Others reported seeing the intended description when Googling, which is designated in the Schema.org tag in the head tag but not printed on the page:

“Download WordPress today, and get started on creating your website with one of the most powerful, popular, and customizable platforms in the world.”

The reference to WordPress.com came from the hosting providers listed at the top of the page, where it randomly displays two upon each page refresh. The Download button used to be at the top of the Download page but ever since mid-January 2021, it has been pushed further down below recommended hosts. This is presumably to help people who want to set up a self-hosted site but don’t know where to get started.

“Google was skipping our defined page descriptions in favor of some in-page content,” WordPress lead developer Dion Hulse said, regarding the issue with the search results snippet.

The WordPress Meta team was alerted to the problem and quickly put a solution in place to encourage Google to look somewhere else on the page for the main content.

“The Download page has info about the mobile apps and hosting for WordPress,” core contributor Corey McKrill wrote in the commit message. “These are in section container elements, which might be the reason that Google is using the content of the hosting container for its search result snippet, instead of the meta description tag. By changing these containers to aside elements, hopefully Google will get the message that they don’t contain the most pertinent information for that page.”

The meta team also marked the hosting recommendations on the download page as exempt from being included in the Google search result snippet, so that it doesn’t pull text from these aside elements.

Here is what the updated search result snippet looks like after the changes were put in place:

Klosowski’s tweet highlighted the perennial tension that arises from the confusion between WordPress.com and WordPress.org. The recommended hosting page has always been a contentious bit of real estate on WordPress.org but especially now that hosting companies are also prominently promoted on the Download page.

https://twitter.com/cklosowski/status/1413264854643736577

In this situation, Josepha Haden Chomphosy, WordPress’ Executive Director, quickly acknowledged that the search snippet promoting WordPress.com was in fact a problem, heading off those who might promote the notion that it was intentional. The Meta team acted swiftly to resolve the issue and return the snippet to its former meta description. It is not known how long Google has been pulling from the text in the recommended hosts sections to populate the snippet, but the code is now more explicit about the fact that those companies are not the most important content on the Download page.

WPTavern: Awesome Motive Acquires SearchWP

Fri, 07/09/2021 - 03:17

Awesome Motive, the company behind MonsterInsights, OptinMonster, WPForms, and several other popular products, has acquired SearchWP, a commercial plugin that enhances WordPress’ search functionality. No changes have been announced for the plugin and Awesome Motive CEO Syed Balkhi says it will be “business as usual” for current customers.

“We have built a lot of internal tools to improve our website search that I’m really looking forward to sharing with the WordPress community,” Balkhi said.

“We will be combining Jon’s vision with our own experience, so you can literally have the best search plugin in the industry without the high costs.”

In 2013, when Jon Christopher launched SearchWP, he quickly carved out a slice of the WordPress search market among early competitors. The freemium model was already popular in those days with plugins like Relevanssi, but Christopher chose to launch SearchWP as a commercial-only product.

“There was already freemium competition, and I felt that the pricing model (which is the same today) was stronger given the product itself,” Christopher said. “I saw the pricing model as something that would help SearchWP stand out, and I also wanted to avoid opening the doors to overwhelming amounts of support requests right from the start.

“I had no idea if SearchWP would be successful given the landscape, I built it first to scratch my own itch while knowing that even if no one bought it, I would 100% use it in my own work, and use it a lot.”

His gamble paid off and the plugin has been used on more than 30,000 WordPress sites. Christopher had one support contractor but otherwise had been running the business alone for the past eight years. WordPress’ growing market share has made one-person plugin businesses difficult to maintain once they become very popular, as seen in the recent sale of ACF to Delicious Brains.

“I was looking ahead and considering what would be best for SearchWP’s customers,” Christopher said. “I want SearchWP to live as long as it possibly can. If I’m by myself it’s a bit of a risk to continue that way as the business continues to grow. I know that I prefer to build things from the ground up, and I also know that I’m not the guy to build (or manage) a team, it’s not my strong suit. Given all of those pieces it was clear to me that it was a good time to consider selling.”

Christopher described the 2013 WordPress ecosystem as more “scrappy,” as developers launched product businesses and worked to figure it out along the way.

“There are pros and cons to an environment like that, but it was fantastic from my perspective,” he said. “Over time that feeling went away as companies grew, matured, and playbooks began to take shape. That cycle has continued over time and especially in the last 18 months we’re getting a look at where WordPress is headed – lots of big players in a really big space.”

For those who are jumping into the waters with a new product business, Christopher underscored the need for strong marketing.

“I think that a lack of serious marketing will in fact be a limiter in today’s WordPress economy,” he said. “Products that have been around a long time have a natural momentum that’s really tough to beat, but that momentum doesn’t come without friction. In order to keep up with where WordPress is going, I do feel like you need assets (and capital) aimed directly and solely at marketing for the long haul.”

Balkhi did not elaborate on Awesome Motive’s immediate plans for the search plugin but said the company will be executing on a 12-month plan to make it easier for beginners and non-technical business owners to set up in less than 10 minutes.

WPTavern: Awesome Motive Acquires SearchWP

Fri, 07/09/2021 - 03:17

Awesome Motive, the company behind MonsterInsights, OptinMonster, WPForms, and several other popular products, has acquired SearchWP, a commercial plugin that enhances WordPress’ search functionality. No changes have been announced for the plugin and Awesome Motive CEO Syed Balkhi says it will be “business as usual” for current customers.

“We have built a lot of internal tools to improve our website search that I’m really looking forward to sharing with the WordPress community,” Balkhi said.

“We will be combining Jon’s vision with our own experience, so you can literally have the best search plugin in the industry without the high costs.”

In 2013, when Jon Christopher launched SearchWP, he quickly carved out a slice of the WordPress search market among early competitors. The freemium model was already popular in those days with plugins like Relevanssi, but Christopher chose to launch SearchWP as a commercial-only product.

“There was already freemium competition, and I felt that the pricing model (which is the same today) was stronger given the product itself,” Christopher said. “I saw the pricing model as something that would help SearchWP stand out, and I also wanted to avoid opening the doors to overwhelming amounts of support requests right from the start.

“I had no idea if SearchWP would be successful given the landscape, I built it first to scratch my own itch while knowing that even if no one bought it, I would 100% use it in my own work, and use it a lot.”

His gamble paid off and the plugin has been used on more than 30,000 WordPress sites. Christopher had one support contractor but otherwise had been running the business alone for the past eight years. WordPress’ growing market share has made one-person plugin businesses difficult to maintain once they become very popular, as seen in the recent sale of ACF to Delicious Brains.

“I was looking ahead and considering what would be best for SearchWP’s customers,” Christopher said. “I want SearchWP to live as long as it possibly can. If I’m by myself it’s a bit of a risk to continue that way as the business continues to grow. I know that I prefer to build things from the ground up, and I also know that I’m not the guy to build (or manage) a team, it’s not my strong suit. Given all of those pieces it was clear to me that it was a good time to consider selling.”

Christopher described the 2013 WordPress ecosystem as more “scrappy,” as developers launched product businesses and worked to figure it out along the way.

“There are pros and cons to an environment like that, but it was fantastic from my perspective,” he said. “Over time that feeling went away as companies grew, matured, and playbooks began to take shape. That cycle has continued over time and especially in the last 18 months we’re getting a look at where WordPress is headed – lots of big players in a really big space.”

For those who are jumping into the waters with a new product business, Christopher underscored the need for strong marketing.

“I think that a lack of serious marketing will in fact be a limiter in today’s WordPress economy,” he said. “Products that have been around a long time have a natural momentum that’s really tough to beat, but that momentum doesn’t come without friction. In order to keep up with where WordPress is going, I do feel like you need assets (and capital) aimed directly and solely at marketing for the long haul.”

Balkhi did not elaborate on Awesome Motive’s immediate plans for the search plugin but said the company will be executing on a 12-month plan to make it easier for beginners and non-technical business owners to set up in less than 10 minutes.

WPTavern: Gutenberg 11.0 Includes Over 70 Bug Fixes, Continues Improving With WordPress 5.8 Just Two Weeks Away

Fri, 07/09/2021 - 02:55

Gutenberg 11.0 landed yesterday with a pile of changes. The development team has been moving fast, and it shows.

For a two-week cycle, version 11.0 includes an insane number of bug fixes. Contributors squashed over 70 in this release alone. This seems to be in preparation for WordPress 5.8, which is expected to land on July 20. The upcoming block-based Widgets screen had the lion’s share of bugs. However, the block library had nearly two dozen, many of those issues with new theme-related blocks.

The downside of such a massive release is that there are too many features and not enough time to cover them all. I will be cherry-picking some of my favorites, but feel free to dive into the release notes for a complete picture.

Theme and Template-Editing Mode Changes

One of the primary Full Site Editing features making its way to WordPress 5.8 will be disabled by default for most users. In a rare move from the core project, the template editor will be opt-in, at least for users with classic themes. It is opt-out for block themes.

As I wrote last month, until users are on actual block themes, the template editor is “a sort-of-OK-but-kind-of-amazing landing page creator.”

Template-editing is really only as good as the weakest link in the system. This will almost always be the theme over the next few months. Because the template editor is a new feature that directly attempts to overwrite the front-end output, it will always be at odds with many themes that were never designed with it in mind. The opt-in approach is unlikely the best route to mass adoption, but it is in the interest of the user experience.

Making it opt-in also allows theme authors to make template editing a smooth experience. Gutenberg 11.0 introduces a new defaultBlockTemplate editor setting. Theme authors can create the default blocks that users begin with when creating a new template.

Starting with a custom default block template.

Ideally, this default template should include some base layout components, such as a header, footer, and post/page content. However, themers are free to put their own spin on this.

For more information on creating default block templates, theme authors should read Themes Team rep Carolina Nymark’s overview of WordPress 5.8 theme features.

Media & Text Block: Drag-and-Drop Media Replacement Dragging a new media file into the Media & Text block.

Users have long been able to drag and drop an initial image or video into the Media & Text block. However, they were unable to replace it using the same method. Gutenberg 11.0 creates a new “drop zone” over the media column, making it easy to change the media to something new.

The feature already exists with the Cover and Image blocks, so this change brings Media & Text up to date. We probably should have had this feature months ago, but the patch sat in limbo waiting for a code review.

Accessibility: Categories Dropdown Has Label Label difference between the Archives and Categories blocks.

The development team added a new “Categories” label when the Categories block is shown as a dropdown. This is a welcome improvement to help those using screen-readers better navigate the page.

The problem with this change is the lack of consistency. In Gutenberg 10.8, the team removed the .screen-reader-text class for the Archives block label, making it appear on screen for all users. These types of inconsistencies that seem trivial on the surface tend to pile up, creating code bloat for theme designers in the long run as they try to wrangle them.

I would prefer both labels to be marked as screen-reader text. Regardless of the default, the two should match. Then, throw in an option for the end-user to decide whether to show the label similar to how the Search form handles it.

The Return of Post Classes Post classes appear for Post Template block.

For those theme designers who need them, Gutenberg 11.0 brings back post classes. If you are wondering where posts classes had gone, you may not be alone. In the world of blocks, they are not needed as much as they once were. Traditionally, WordPress theme authors used these classes to dynamically change the output of a post based on contexts such as type, format, category, and more.

When the Post Template block (formerly named Query Loop) was introduced, there was a noticeable lack of the traditional classes attached to the wrapper for individual posts. This latest update brings them back.

In the future, block themes will likely rely on these classes less and less. With much of the design configuration moving to theme.json files and user-controlled options, it is probably time to say goodbye to one of the core features of theme design over the past decade. However, it is a comfort to know it is there when needed.

Decimals Allowed in Spacing Controls

For those who are particular about getting their margin and padding just right, they can finally rejoice. Spacing controls now allow for decimal values and not just whole numbers.

In past versions of the plugin, a value such as 1.5 would be rounded up to 2. When used with rem and em units, such rounding created a 50% difference between the intended spacing and reality.

I am happy about this one. It is a fix for one of the tickets I opened (hooray for contributing!). However, I cannot take credit for fixing the problem. That honor goes to Themes Team representative Ari Stathopoulos.

WPTavern: Gutenberg 11.0 Includes Over 70 Bug Fixes, Continues Improving With WordPress 5.8 Just Two Weeks Away

Fri, 07/09/2021 - 02:55

Gutenberg 11.0 landed yesterday with a pile of changes. The development team has been moving fast, and it shows.

For a two-week cycle, version 11.0 includes an insane number of bug fixes. Contributors squashed over 70 in this release alone. This seems to be in preparation for WordPress 5.8, which is expected to land on July 20. The upcoming block-based Widgets screen had the lion’s share of bugs. However, the block library had nearly two dozen, many of those issues with new theme-related blocks.

The downside of such a massive release is that there are too many features and not enough time to cover them all. I will be cherry-picking some of my favorites, but feel free to dive into the release notes for a complete picture.

Theme and Template-Editing Mode Changes

One of the primary Full Site Editing features making its way to WordPress 5.8 will be disabled by default for most users. In a rare move from the core project, the template editor will be opt-in, at least for users with classic themes. It is opt-out for block themes.

As I wrote last month, until users are on actual block themes, the template editor is “a sort-of-OK-but-kind-of-amazing landing page creator.”

Template-editing is really only as good as the weakest link in the system. This will almost always be the theme over the next few months. Because the template editor is a new feature that directly attempts to overwrite the front-end output, it will always be at odds with many themes that were never designed with it in mind. The opt-in approach is unlikely the best route to mass adoption, but it is in the interest of the user experience.

Making it opt-in also allows theme authors to make template editing a smooth experience. Gutenberg 11.0 introduces a new defaultBlockTemplate editor setting. Theme authors can create the default blocks that users begin with when creating a new template.

Starting with a custom default block template.

Ideally, this default template should include some base layout components, such as a header, footer, and post/page content. However, themers are free to put their own spin on this.

For more information on creating default block templates, theme authors should read Themes Team rep Carolina Nymark’s overview of WordPress 5.8 theme features.

Media & Text Block: Drag-and-Drop Media Replacement Dragging a new media file into the Media & Text block.

Users have long been able to drag and drop an initial image or video into the Media & Text block. However, they were unable to replace it using the same method. Gutenberg 11.0 creates a new “drop zone” over the media column, making it easy to change the media to something new.

The feature already exists with the Cover and Image blocks, so this change brings Media & Text up to date. We probably should have had this feature months ago, but the patch sat in limbo waiting for a code review.

Accessibility: Categories Dropdown Has Label Label difference between the Archives and Categories blocks.

The development team added a new “Categories” label when the Categories block is shown as a dropdown. This is a welcome improvement to help those using screen-readers better navigate the page.

The problem with this change is the lack of consistency. In Gutenberg 10.8, the team removed the .screen-reader-text class for the Archives block label, making it appear on screen for all users. These types of inconsistencies that seem trivial on the surface tend to pile up, creating code bloat for theme designers in the long run as they try to wrangle them.

I would prefer both labels to be marked as screen-reader text. Regardless of the default, the two should match. Then, throw in an option for the end-user to decide whether to show the label similar to how the Search form handles it.

The Return of Post Classes Post classes appear for Post Template block.

For those theme designers who need them, Gutenberg 11.0 brings back post classes. If you are wondering where posts classes had gone, you may not be alone. In the world of blocks, they are not needed as much as they once were. Traditionally, WordPress theme authors used these classes to dynamically change the output of a post based on contexts such as type, format, category, and more.

When the Post Template block (formerly named Query Loop) was introduced, there was a noticeable lack of the traditional classes attached to the wrapper for individual posts. This latest update brings them back.

In the future, block themes will likely rely on these classes less and less. With much of the design configuration moving to theme.json files and user-controlled options, it is probably time to say goodbye to one of the core features of theme design over the past decade. However, it is a comfort to know it is there when needed.

Decimals Allowed in Spacing Controls

For those who are particular about getting their margin and padding just right, they can finally rejoice. Spacing controls now allow for decimal values and not just whole numbers.

In past versions of the plugin, a value such as 1.5 would be rounded up to 2. When used with rem and em units, such rounding created a 50% difference between the intended spacing and reality.

I am happy about this one. It is a fix for one of the tickets I opened (hooray for contributing!). However, I cannot take credit for fixing the problem. That honor goes to Themes Team representative Ari Stathopoulos.

WPTavern: Private Note-Taking and Journaling With the Hypernotes WordPress Plugin

Thu, 07/08/2021 - 03:13

Ella van Durpe, a core WordPress contributor and software engineer at Automattic, released a note-taking plugin earlier today. Hypernotes is a simple custom post type that allows end-users to take private notes or serve as a journaling tool.

I have seen similar plugins in the past. I even began building one years ago before ultimately abandoning it for a simple Markdown solution in a private repository.

What makes Hypernotes unique is its handling of “folders,” which essentially work like categories. However, each folder gets its own sub-menu link under the Notes section in the WordPress admin.

Hypernotes’ folder system.

This more closely mimics other note-taking apps where users can switch between various folders to quickly find notes.

The code to make this happen is simple; the idea is ingenious. It is the sort of outside-the-box thinking I love to see from plugin developers.

There are a few trivial issues with it, such as the folder names not being highlighted when viewing their screens. However, that is a WordPress-specific bug. A simple dash before each folder name could spruce up the UI a bit too. They sit below the “All Notes” menu item, so it would create more of a folder effect.

On the whole, the plugin works well as a note-taking application.

Writing a note in the WordPress editor.

The plugin description does have a security note for users who are wondering just how private their content is:

Only you will be able to see your notes within the WordPress admin, but the notes are NOT encrypted at the moment, so anyone with database access will be able to read them.

Hypernotes also ensures that no post is ever accidentally published for all the world to see. Under the hood, it automatically sets all notes to the “private” status. The plugin’s post type cannot be publicly queried on the front end either.

It is worth mentioning that the plugin does not create custom capabilities (permissions) for its post type and taxonomy. Any registered user on the site with the right post-editing capabilities can access others’ notes in the backend, such as people with the Editor role.

This is unlikely an issue given the nature of the plugin. I imagine the primary audience will be made up of solo bloggers who want a simple note-taking solution.

I ran into one not-so-trivial issue when I began trying out Hypernotes, believing my website was broken. This is usually because of a patch I am testing for the Gutenberg plugin or just one of its run-of-the-mill updates. However, the typical culprit was not to blame. After a half-hour or so trying to figure out why my theme styles were not appearing for Note posts, I finally cracked the issue.

Hypernotes disables all theme editor styles. The beautiful typography of my currently active theme was gone, which would work well with a note or journaling plugin.

This was easy enough to overrule with a few lines of custom code. If I was going to save a few quotes that I liked as personal notes, I at least wanted to do it in style:

Bringing back my theme’s custom quotes style.

The plugin also attempts to disable wide/full alignment and theme editor font sizes. The code it uses works for traditional WordPress themes but not for block themes, which have a different mechanism for registering such support. This was also one of the reasons it was tough to track down the issue. Everything else from my theme was working but custom editor styles.

I understand the idea behind removing support for those features. Themes design the front end of the site, and Hypernotes is purely a backend tool. However, I would rather see an option for letting the user control what gets disabled. Some theme editor styles would pair well with the plugin.

Disabling these features has other implications too. For example, all of my theme’s custom block style variations were registered and usable from the editor. However, because my styles were not loaded, they did not work correctly.

Another option would be for the plugin to provide its own editor styles. There would still be some complications going that route, such as the block style variations issue, but the plugin could become a beautifully designed note-taking app in its own right.

For a version 1.0 outing, I am a fan of the simplicity. More so, I am impressed with the clever method of handling note “folders.” I am eager to see how this plugin evolves over future iterations.

WPTavern: Private Note-Taking and Journaling With the Hypernotes WordPress Plugin

Thu, 07/08/2021 - 03:13

Ella van Durpe, a core WordPress contributor and software engineer at Automattic, released a note-taking plugin earlier today. Hypernotes is a simple custom post type that allows end-users to take private notes or serve as a journaling tool.

I have seen similar plugins in the past. I even began building one years ago before ultimately abandoning it for a simple Markdown solution in a private repository.

What makes Hypernotes unique is its handling of “folders,” which essentially work like categories. However, each folder gets its own sub-menu link under the Notes section in the WordPress admin.

Hypernotes’ folder system.

This more closely mimics other note-taking apps where users can switch between various folders to quickly find notes.

The code to make this happen is simple; the idea is ingenious. It is the sort of outside-the-box thinking I love to see from plugin developers.

There are a few trivial issues with it, such as the folder names not being highlighted when viewing their screens. However, that is a WordPress-specific bug. A simple dash before each folder name could spruce up the UI a bit too. They sit below the “All Notes” menu item, so it would create more of a folder effect.

On the whole, the plugin works well as a note-taking application.

Writing a note in the WordPress editor.

The plugin description does have a security note for users who are wondering just how private their content is:

Only you will be able to see your notes within the WordPress admin, but the notes are NOT encrypted at the moment, so anyone with database access will be able to read them.

Hypernotes also ensures that no post is ever accidentally published for all the world to see. Under the hood, it automatically sets all notes to the “private” status. The plugin’s post type cannot be publicly queried on the front end either.

It is worth mentioning that the plugin does not create custom capabilities (permissions) for its post type and taxonomy. Any registered user on the site with the right post-editing capabilities can access others’ notes in the backend, such as people with the Editor role.

This is unlikely an issue given the nature of the plugin. I imagine the primary audience will be made up of solo bloggers who want a simple note-taking solution.

I ran into one not-so-trivial issue when I began trying out Hypernotes, believing my website was broken. This is usually because of a patch I am testing for the Gutenberg plugin or just one of its run-of-the-mill updates. However, the typical culprit was not to blame. After a half-hour or so trying to figure out why my theme styles were not appearing for Note posts, I finally cracked the issue.

Hypernotes disables all theme editor styles. The beautiful typography of my currently active theme was gone, which would work well with a note or journaling plugin.

This was easy enough to overrule with a few lines of custom code. If I was going to save a few quotes that I liked as personal notes, I at least wanted to do it in style:

Bringing back my theme’s custom quotes style.

The plugin also attempts to disable wide/full alignment and theme editor font sizes. The code it uses works for traditional WordPress themes but not for block themes, which have a different mechanism for registering such support. This was also one of the reasons it was tough to track down the issue. Everything else from my theme was working but custom editor styles.

I understand the idea behind removing support for those features. Themes design the front end of the site, and Hypernotes is purely a backend tool. However, I would rather see an option for letting the user control what gets disabled. Some theme editor styles would pair well with the plugin.

Disabling these features has other implications too. For example, all of my theme’s custom block style variations were registered and usable from the editor. However, because my styles were not loaded, they did not work correctly.

Another option would be for the plugin to provide its own editor styles. There would still be some complications going that route, such as the block style variations issue, but the plugin could become a beautifully designed note-taking app in its own right.

For a version 1.0 outing, I am a fan of the simplicity. More so, I am impressed with the clever method of handling note “folders.” I am eager to see how this plugin evolves over future iterations.

Matt: Open Insulin

Wed, 07/07/2021 - 13:49

One of my big themes is that open source will transform every industry, with key examples being WordPress in web publishing, WooCommerce in online commerce, Wikipedia in reference, and Bitcoin/Ethereum in finance. Medicine, though, has been relatively unscathed so far. Here’s a great video introducing the Open Insulin project, which for the past 6 years has been developing their own method of manufacturing insulin and is going to open source its process to the world for anyone to recreate.

It also reminds me of the What If? article in the Economist a few days ago about mRNA self-biohacking. Hat tip: Riaan Knoetze.

Matt: Open Insulin

Wed, 07/07/2021 - 13:49

One of my big themes is that open source will transform every industry, with key examples being WordPress in web publishing, WooCommerce in online commerce, Wikipedia in reference, and Bitcoin/Ethereum in finance. Medicine, though, has been relatively unscathed so far. Here’s a great video introducing the Open Insulin project, which for the past 6 years has been developing their own method of manufacturing insulin and is going to open source its process to the world for anyone to recreate.

It also reminds me of the What If? article in the Economist a few days ago about mRNA self-biohacking. Hat tip: Riaan Knoetze.

WPTavern: WordPress 5.8 Adds Support for New Emoji Introduced in Twemoji 13.1.0

Wed, 07/07/2021 - 05:16

In the upcoming 5.8 release, WordPress is updating its version of Twemoji, Twitter’s open source emoji library that supports the latest Unicode emoji specification. Version 13.1.0 introduces five new smileys and emotions, including heart on fire, mending heart, face with spiral eyes, face in clouds, and face exhaling.

Version 13.1 adds mixed skin tone support for all variations of the “Kiss” emoji and the “Couple with Heart” emoji. It also makes it possible to add a bearded man or a bearded woman in all skin tone variations.

WordPress 5.8 will also include significant changes to the syringe emoji that were committed to a previous version of Twemoji (13.0.2) earlier this year. Instead of a blood-filled barrel accented with drops of blood leaking out of the tip, the new syringe emoji contains a non-specific liquid. This makes it more flexible for use cases that don’t involve removing blood. Emojipedia has a fascinating look at the syringe emoji’s history, dating back to 1999 when it was primarily used in Japan for blood donation. A 2021 refresh on the syringe makes it possible for it to be used in reference to vaccines, a topic of public conversation across the globe.

In addition to changes to the syringe, Jonathan Desrosiers, who opened the trac ticket to initiate the update, summarized a few other changes from previous Twemoji versions that modify existing emoji:

  • Cricket: the colors have been adjusted to improve readability on small screens and to prevent confusion with other Emoji that had a similar color.
  • T-Rex: The color and posture of the T-Rex has been adjusted.
  • Portuguese flag: A line within the flag’s circle has been corrected.
  • Thai flag: The proportions of the stripes for this flag have been corrected.
  • Fox face: The symmetry has been improved.
  • Transgender flag: The lines have been updated to prevent small gaps between stripes from showing when rendered with antialiasing.
  • Rolling on the floor laughing: Adjusted to be less exaggerated and appear more natural.

The official emoji lexicon is constantly being tweaked and updated for accuracy, and to better serve conversations, as current events increase demand for visual representations of specific objects and emotions. Although many of these updates and new additions may seem pandemic-inspired, there’s a lengthy, official process for proposing changes to the Unicode Consortium. The Unicode Emoji Subcommittee reviews proposals, which require compelling data on compatibility, expected usage level, distinctiveness, and other factors. Candidates approved for inclusion do not arrive to major platforms for approximately a year.

WordPress 5.8 will bump Twemoji from 13.0.1 to 13.1.0. Unicode 14.0, the next major update, is expected for release in late 2021. Emojipedia has a draft list of what is on deck for the next version and those that are approved would likely make it to major platforms by the end of 2022.

WPTavern: WordPress 5.8 Adds Support for New Emoji Introduced in Twemoji 13.1.0

Wed, 07/07/2021 - 05:16

In the upcoming 5.8 release, WordPress is updating its version of Twemoji, Twitter’s open source emoji library that supports the latest Unicode emoji specification. Version 13.1.0 introduces five new smileys and emotions, including heart on fire, mending heart, face with spiral eyes, face in clouds, and face exhaling.

Version 13.1 adds mixed skin tone support for all variations of the “Kiss” emoji and the “Couple with Heart” emoji. It also makes it possible to add a bearded man or a bearded woman in all skin tone variations.

WordPress 5.8 will also include significant changes to the syringe emoji that were committed to a previous version of Twemoji (13.0.2) earlier this year. Instead of a blood-filled barrel accented with drops of blood leaking out of the tip, the new syringe emoji contains a non-specific liquid. This makes it more flexible for use cases that don’t involve removing blood. Emojipedia has a fascinating look at the syringe emoji’s history, dating back to 1999 when it was primarily used in Japan for blood donation. A 2021 refresh on the syringe makes it possible for it to be used in reference to vaccines, a topic of public conversation across the globe.

In addition to changes to the syringe, Jonathan Desrosiers, who opened the trac ticket to initiate the update, summarized a few other changes from previous Twemoji versions that modify existing emoji:

  • Cricket: the colors have been adjusted to improve readability on small screens and to prevent confusion with other Emoji that had a similar color.
  • T-Rex: The color and posture of the T-Rex has been adjusted.
  • Portuguese flag: A line within the flag’s circle has been corrected.
  • Thai flag: The proportions of the stripes for this flag have been corrected.
  • Fox face: The symmetry has been improved.
  • Transgender flag: The lines have been updated to prevent small gaps between stripes from showing when rendered with antialiasing.
  • Rolling on the floor laughing: Adjusted to be less exaggerated and appear more natural.

The official emoji lexicon is constantly being tweaked and updated for accuracy, and to better serve conversations, as current events increase demand for visual representations of specific objects and emotions. Although many of these updates and new additions may seem pandemic-inspired, there’s a lengthy, official process for proposing changes to the Unicode Consortium. The Unicode Emoji Subcommittee reviews proposals, which require compelling data on compatibility, expected usage level, distinctiveness, and other factors. Candidates approved for inclusion do not arrive to major platforms for approximately a year.

WordPress 5.8 will bump Twemoji from 13.0.1 to 13.1.0. Unicode 14.0, the next major update, is expected for release in late 2021. Emojipedia has a draft list of what is on deck for the next version and those that are approved would likely make it to major platforms by the end of 2022.

WPTavern: Jetpack 9.9 Released With a Refreshed Image Gallery Carousel

Wed, 07/07/2021 - 03:13

Today, Automattic released version 9.9 of its popular Jetpack plugin. The development team improved the modal animation and transition speed for the Instant Search module and added the Social Preview panel to the pre-publish sidebar. However, the most notable user-facing update was a refresh of its Carousel feature.

The module creates a fullscreen overlay gallery of a post’s images once one is clicked. Users can enable this feature via the Jetpack > Settings > Writing page in the WordPress admin. Users can also turn on the display of EXIF data and the media attachment commenting form.

Jetpack Carousel handles Image and Gallery blocks a bit differently. Regardless of whether Gallery images are linked or not, they will always be included in the image carousel when clicked. However, only Image blocks that specifically link to the attachment page are added.

I have never much cared for the Jetpack Carousel feature. There were always prettier image-overlay, lightbox-type solutions out in the wild. We use the plugin here at WP Tavern, so it is just something I have learned to live with. There was no sense in installing yet another plugin when we were already using the massive mono-project to run many other features on the site. And, it generally got the job done.

However, today, I can finally say that I am happy with the implementation. It is cleaner, offers a larger viewing area for individual images, and tucks unnecessary bits away for the average user.

The following is a screenshot of the carousel in all its fullscreen wonder:

Jetpack carousel in version 9.9.

For comparison, here is what the same image slide looks like in Jetpack 9.8.1:

Jetpack carousel in version 9.8.1.

In the new version, the image metadata and commenting form are hidden by default. The user must click the info or comment icon buttons to slide each section open. This is a better implementation because it decreases the noise in the carousel while still making the features available for those who want them.

Image metadata in the carousel.

Overall, I am enjoying this update. Swiping and scrolling through the gallery feels smoother.

I would love for WordPress to bring a standard set of functions and blocks for displaying media metadata to the development community. Every plugin and theme author who wants to showcase that info must build a custom system for their projects, such as formatting aperture, shutter speed, and focal length. The following is the output of an image attachment page from a theme I have worked on:

Custom theme image info.

There is no reason that the theme and Jetpack should be working with custom wrappers for the metadata. WordPress stores EXIF and ID3 tags automatically. It just does not expose them to developers in any meaningful way.

WPTavern: Jetpack 9.9 Released With a Refreshed Image Gallery Carousel

Wed, 07/07/2021 - 03:13

Today, Automattic released version 9.9 of its popular Jetpack plugin. The development team improved the modal animation and transition speed for the Instant Search module and added the Social Preview panel to the pre-publish sidebar. However, the most notable user-facing update was a refresh of its Carousel feature.

The module creates a fullscreen overlay gallery of a post’s images once one is clicked. Users can enable this feature via the Jetpack > Settings > Writing page in the WordPress admin. Users can also turn on the display of EXIF data and the media attachment commenting form.

Jetpack Carousel handles Image and Gallery blocks a bit differently. Regardless of whether Gallery images are linked or not, they will always be included in the image carousel when clicked. However, only Image blocks that specifically link to the attachment page are added.

I have never much cared for the Jetpack Carousel feature. There were always prettier image-overlay, lightbox-type solutions out in the wild. We use the plugin here at WP Tavern, so it is just something I have learned to live with. There was no sense in installing yet another plugin when we were already using the massive mono-project to run many other features on the site. And, it generally got the job done.

However, today, I can finally say that I am happy with the implementation. It is cleaner, offers a larger viewing area for individual images, and tucks unnecessary bits away for the average user.

The following is a screenshot of the carousel in all its fullscreen wonder:

Jetpack carousel in version 9.9.

For comparison, here is what the same image slide looks like in Jetpack 9.8.1:

Jetpack carousel in version 9.8.1.

In the new version, the image metadata and commenting form are hidden by default. The user must click the info or comment icon buttons to slide each section open. This is a better implementation because it decreases the noise in the carousel while still making the features available for those who want them.

Image metadata in the carousel.

Overall, I am enjoying this update. Swiping and scrolling through the gallery feels smoother.

I would love for WordPress to bring a standard set of functions and blocks for displaying media metadata to the development community. Every plugin and theme author who wants to showcase that info must build a custom system for their projects, such as formatting aperture, shutter speed, and focal length. The following is the output of an image attachment page from a theme I have worked on:

Custom theme image info.

There is no reason that the theme and Jetpack should be working with custom wrappers for the metadata. WordPress stores EXIF and ID3 tags automatically. It just does not expose them to developers in any meaningful way.

Akismet: Version 4.1.10 of the Akismet WordPress Plugin is Now Available

Tue, 07/06/2021 - 20:33

Version 4.1.10 of the Akismet plugin for WordPress is now available. It contains the following changes:

  • Simplified the code around checking comments in REST API and XML-RPC requests.
  • Added rel=”noopener” to the widget link to avoid warnings in Google Lighthouse.
  • Set the Akismet JavaScript as deferred instead of async to improve responsiveness.
  • Improved the preloading of screenshot popups on the edit comments admin page.

To upgrade, visit the Updates page of your WordPress dashboard and follow the instructions. If you need to download the plugin zip file directly, links to all versions are available in the WordPress plugins directory.

Akismet: Version 4.1.10 of the Akismet WordPress Plugin is Now Available

Tue, 07/06/2021 - 20:33

Version 4.1.10 of the Akismet plugin for WordPress is now available. It contains the following changes:

  • Simplified the code around checking comments in REST API and XML-RPC requests.
  • Added rel=”noopener” to the widget link to avoid warnings in Google Lighthouse.
  • Set the Akismet JavaScript as deferred instead of async to improve responsiveness.
  • Improved the preloading of screenshot popups on the edit comments admin page.

To upgrade, visit the Updates page of your WordPress dashboard and follow the instructions. If you need to download the plugin zip file directly, links to all versions are available in the WordPress plugins directory.

Akismet: Version 4.1.10 of the Akismet WordPress Plugin is Now Available

Tue, 07/06/2021 - 20:33

Version 4.1.10 of the Akismet plugin for WordPress is now available. It contains the following changes:

  • Simplified the code around checking comments in REST API and XML-RPC requests.
  • Added rel=”noopener” to the widget link to avoid warnings in Google Lighthouse.
  • Set the Akismet JavaScript as deferred instead of async to improve responsiveness.
  • Improved the preloading of screenshot popups on the edit comments admin page.

To upgrade, visit the Updates page of your WordPress dashboard and follow the instructions. If you need to download the plugin zip file directly, links to all versions are available in the WordPress plugins directory.

WPTavern: Taking the Leap: Building My First WordPress Block Plugin

Tue, 07/06/2021 - 00:28

Like most years, I spent this U.S. Independence Day cooped up with my furry friends. I closed all the windows, shuttered the blinds, switched on a couple of fans for white noise, and clicked the television on. My cats and I relaxed. It is my job to keep them calm while my — usually drunken — compatriots burn hundreds of dollars away in the night sky. It is my ritual, and I enjoy it.

For this holiday, we re-watched Season 1 of Star Trek: Lower Decks, and I learned how to build a block plugin.

This was not my first attempt. When the block editor launched nearly three years ago, I tinkered with a few block type ideas. However, I never got far. Documentation was sparse, and I had almost no experience with JavaScript beyond building trivial bells and whistles for front-end design.

Leaving my day job as a developer to write for WP Tavern also meant limited time to learn block development. And, my free time for the last couple of years has been filled with other projects. Lately, I have had the urge to jump back in and start building things for fun once again. My extended sabbatical from development work gave me time to pursue other interests while allowing my well of creativeness a chance to refill. The break did me some good.

With time to kill yesterday afternoon, I dove right in. After a couple of hours of reading docs, studying other developers’ code, and breaking things, I had a functional block for a breadcrumbs list.

Custom block registered and ready to insert.

Marcus Kazmierczak’s Copyright Block plugin helped me get over one of the initial humps. It was helpful to see real-world, non-example code written in vanilla JavaScript to get to the meat of how the system worked.

My overall thoughts on building custom block types?

It was easier than I thought it would be. Documentation is, at the same time, both overwhelming and limiting. It is tough to find the correct answer if you do not even know what you are looking for. The barrier to entry is much higher than when I built my first plugin in 2007. The Block Type API makes some things stupidly simple but complicates others.

Successfully inserting my first block type into the editor canvas was gratifying. I don’t think that feeling ever goes away as a developer.

Successful insertion and rendering of my first block plugin.

I am excited about the potential for blocks, such as a breadcrumbs list, when the site editor launches. Many similar features do not make sense in the post editor. However, when users can make direct edits to their templates, it will open a world of possibilities.

Learning Curve

I know enough JavaScript to be a danger to myself and others. Having spent almost the entirety of my professional career in the WordPress realm has meant focusing on PHP. But, programming is programming. Once you have a strong understanding of one language, it not an impossible leap to piddle around enough to create a functional script in another. Most of the same foundational concepts are there. The hurdle is often with learning some new syntax.

However, the biggest obstacle with “modern” JavaScript is setting up the build tools, bundlers, and more. It can be a tall order to even type out that first line of code.

Sure, some of the documentation has vanilla JavaScript examples, but when you get into anything more complex than the basics, it is not so vanilla anymore. You will need a way to bundle JavaScript and transform JSX syntax. That means tools like webpack and Babel.

WordPress has its own script for cutting through most of the complexity, but I recommend Laravel Mix. It is simple enough for even the least-savvy JavaScript programmers among us and has thorough documentation. It is a script made for folks who want to worry less about tooling and more about actually writing code.

Block building is also a different kind of leap. Whether it was custom template tags, shortcodes, widgets, or hooks, traditional WordPress development has meant building those in a PHP environment. I suspect that most plugin developers have tons of features that they can bring to the masses via the block editor. They will often rely on server-side rendering. WordPress has a ServerSideRender component for actually handling this.

One of the handiest features of registering block types is the block “supports” system. Want a background color option? Just one line of code will do. Want the user to access the font-size control? That is a single line too. With little effort, I extended my breadcrumbs block to include a ton of styling options for users. And, they adapt to the site’s active theme.

Testing various combination of block-supported styling options.

The list of block-supported features offers an array of standardized options at pretty much no development cost. Even the Customize API, previously the most advanced tool for building form fields, did not come this close.

Building custom inspector controls was straightforward once I got the hang of how the block edit piece of the puzzle worked. For now, I have a simple toggle option for enabling/disabling a feature. Often, the hardest part is just finding what you are looking for. WordPress has a massive library of components to choose from.

At this point, I have a basic block on the client (editor) side. Most of the complexity is handled on the server via PHP. If I could build this in an afternoon while attending to nervous cats, it should not be a stretch for more plugin authors to hop aboard this train. There are thousands of shortcodes and widgets that developers can convert to blocks with minimal code.

I am not ready to release my breadcrumbs block into the wild just yet. There is still some fine-tuning left to do and a few advanced features to implement. Also, a breadcrumbs list is primarily needed in a site editor context where users can drop it into something like their header template. We are not there yet, but I will undoubtedly share the final result with the community when we are.

Next, I will try to build a block that does not rely on server-side rendering. I think I have the hang of it now. Breaking through that initial barrier is always the hardest step.

Pages