WordPress Planet

September 30, 2022

Gutenberg Times: Building a Block-Based Header Template in a Classic Theme

WordPress 6.1 will allow classic theme authors to begin using block-based template parts. It is one of the most exciting features of the release and one that has long been on my personal wish-list.

Over the past couple of weeks, I’ve been doing a deep dive into this new feature, wondering how it could fit into real-world projects. My conclusion was:

  • If building a new classic theme from scratch, block template parts should be relatively easy to insert into it.
  • If adding block template parts into a classic theme, there are likely a few hurdles that you’ll need clear, hoops to jump through, and even potential mountains to climb.

The latter is what this tutorial will focus on. There are 1,000s of classic themes out there in the wild, and the most likely use case for this feature will be the developers who are gradually adopting FSE features.

With that use case in mind, I picked a battle-tested classic theme that is still somewhat recent: Twenty Twenty-One. It already had some of the foundational pieces, such as supporting the block-based content editor. However, it didn’t have support for newer FSE features, such as theme.json.

The other goal for this walk-through was to show a more advanced use case rather than only cover the basics. Ultimately, this helped reveal some of the issues theme authors might face as they go on this journey.

In the end, I created hero header for Twenty Twenty-One that provides users a ton of flexibility for customizing its output on the front end:

Hero header built with a block template part.

I invite you to come along with me down this path. I did all of the hard work ahead of time in hopes that it will help those of you who want to give this new feature a try.

If you’d rather skip the walk-through and dive right into the code, no worries. I extracted everything I am covering into this tutorial and put it in a child theme named TT1 Block Parts. Child themes are an easy way to test features without directly changing the parent theme, so I encourage going that route too.

Setting the Groundwork

This feature will be available as part of the WordPress 6.1 release. To test it now, you must either install the WordPress 6.1 Beta 2 or the latest version of the Gutenberg plugin. You will also need a classic theme active on your site. Use Twenty Twenty-One to follow along with each step exactly.

Before building a block-based template part in a classic theme, you must enable the feature via the block-template-parts theme-support flag in your theme’s functions.php file.

<?php add_action( 'after_setup_theme', 'tt1_block_parts_setup' ); function tt1_block_parts_setup() { add_theme_support( 'block-template-parts' ); }
Code language: PHP (php)

This code will create a new Appearance > Template Parts page in the WordPress admin:

Initial template parts screen when no parts are registered.

At this point, it’s empty, but you and your users will be able to customize any existing block template parts from this screen once you’ve created them. Let’s do that now.

The next step is building a header template part, which will live in the theme’s parts folder (this is where all block template parts go). The easiest way to get started is to create an empty parts/header.html file. We’ll build this out from the site editor in the next steps.

Now, we need to replace Twenty Twenty-One’s header with our custom one. Open the theme’s header.php template and find this line of code:

<?php get_template_part( 'template-parts/header/site-header' ); ?>
Code language: PHP (php)

Replace it with the following:

<?php block_template_part( 'header' ); ?>
Code language: PHP (php)

It won’t be that easy with every theme. Fortunately, Twenty Twenty-One already separated its primary template code into a PHP-based template part, so we merely needed to change one function call with another. For other themes, it may require removing large chunks of code. It just depends on the theme itself.

Clearing Those Hurdles

Most classic themes were simply not designed to handle blocks outside the content area. This is even true of Twenty Twenty-One because the block-based template editor didn’t exist when it was created.

Each theme is unique, so there is no way for me to realistically foretell what sort of adventures you might go on to get block template parts to work. However, what I can tell you is what I changed with Twenty Twenty-One.

The goal here is transparency rather than glossing over those very likely hurdles you’ll need to jump, but do not let them scare you away.

Adding theme.json Support

Based on my tests with Twenty Twenty-One and other themes, opting into theme.json was almost a must-have. I had the most most success by configuring settings.layout to support wide/full alignments (I used existing CSS properties from the theme for this). I also needed settings.spacing.blockGap to have control over the spacing between menu items in the Navigation block.

With that in mind, I strongly recommend starting with a simple theme.json file in your theme, assuming it doesn’t already have one:

{ "version": 2, "settings": { "layout": { "contentSize": "var( --responsive--default-width )", "wideSize": "var( --responsive--alignwide-width )" }, "spacing": { "blockGap": true } } }
Code language: JSON / JSON with Comments (json)

Style Overrides

I also had to make a few CSS overrides (editor and front end) so that everything was a bit less wonky. Remember, we’re pushing blocks into a place they have never been before in the theme, so some adjustments are a given.

The following CSS is all that was needed to make the block template part work. The most time-consuming aspect was tracking this stuff down in a theme that I wasn’t particularly knowledgeable of.

.wp-block-navigation:not(.has-background) .wp-block-navigation__container { background: transparent; } .wp-block-cover__inner-container > * { max-width: none !important; } .wp-block { max-width: none; } .wp-block-cover .wp-block-site-title.has-text-color a { color: inherit; } .is-root-container > :first-child { margin-top: 0; }
Code language: CSS (css)

Building a Block Header Template Part

Before we get to the more advanced, media-based version of a header template part, let’s stick with the basics. I promise to cover some of the fun stuff as we move along. For now, let’s learn to crawl before attempting to walk.

Go back to the Appearance > Template Parts screen in the WordPress admin that you created in the first step. Click on the “header” template part, which will take you to the template editor. You should see an empty canvas on which to place your creation.

I started with a Cover block. It’s a simple starting point but one of the most flexible blocks in WordPress, providing end-users with tons of customization options out of the gate.

Adding a Cover block to the Header template part.

I kept my block settings simple and selected the following:

  • Overlay Color: The theme’s default gray
  • Overlay Opacity: 100

Inserting Branding and Navigation

I wanted to keep Twenty Twenty-One’s default header elements in place, which meant recreating the theme’s branding and navigation menu while not going overboard with additional elements.

To achieve this, I added a 50/50 Columns block (the widths of these could be adjusted). In the left column, I inserted Stack with Site Title and Site Tagline. On the right, I placed a Navigation block.

Adding branding and a navigation menu.

The individual settings for these blocks are not particularly important. You can customize them to your liking. The most vital ones are likely justifying the Stack block left and Navigation block right. I also bumped up the block spacing to space out the nav menu items.

This is where you can have a lot of fun, and I don’t want to spoil it with a step-by-step guide on what stylistic settings to choose. Experiment. Go wild!

Extra: Locking Blocks

One of my favorite tools as a theme author is the ability to lock blocks in place with more complex templates or patterns. One of the primary use cases for this is to prevent end-users from accidentally removing an important block, such as the Site Title, or moving things around and being unable to reconfigure them. The site header is one easiest areas to mess up.

For the individual Column block wrapping the Site Title and Site Tagline blocks, I selected all three of the currently-available lock settings:

  • Disable movement
  • Prevent removal
  • Apply to all blocks inside
Locking the header branding Column block and its content.

I also set a lock on the outer Columns block to prevent users from inadvertently moving or removing it.

By default, end-users can unlock a block by clicking the “lock” toolbar icon. The extra step primarily serves as a warning to only take this action if they feel comfortable doing so. It’s possible to even prevent this from the development end, but that’s outside the scope of this tutorial. To go even more advanced with block locking, take a read the the Curating the Editor Experience documentation and its section on the Locking APIs.

Copying the Header Part to the Theme

Because we built this template part within the editor, all of our customizations are stored in the database. If planning to distribute this theme to others, you should copy all of the blocks from the editor to your parts/header.html file.

The final code for my template part was:

<!-- wp:cover {"overlayColor":"gray","minHeight":450,"minHeightUnit":"px","style":{"spacing":{"padding":{"top":"4rem","right":"4rem","bottom":"4rem","left":"4rem"}},"color":{}}} --> <div class="wp-block-cover" style="padding-top:4rem;padding-right:4rem;padding-bottom:4rem;padding-left:4rem;min-height:450px"><span aria-hidden="true" class="wp-block-cover__background has-gray-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"center","lock":{"move":true,"remove":true}} --> <div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%","templateLock":"all","lock":{"move":true,"remove":true}} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"lock":{"move":false,"remove":false},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} --> <div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontSize":"1.5rem"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} /--> <!-- wp:site-tagline {"style":{"typography":{"fontSize":"16px"}},"textColor":"white"} /--></div> <!-- /wp:group --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center","width":"50%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:navigation {"ref":2586,"textColor":"white","layout":{"type":"flex","justifyContent":"right"},"style":{"typography":{"fontSize":"16px"},"spacing":{"blockGap":"2rem"}}} /--></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> </div> <!-- /wp:cover -->
Code language: HTML, XML (xml)

After saving that file to your theme, you also need to clear your customizations from the database. You can do this by clicking on the Template Parts admin menu item and selecting the (vertical ellipsis) button for the Header part and clicking the “Clear customizations” option.

Clearing customizations from the Header template part.

As you can tell from the above screenshot, I have been tinkering with a lot of template part ideas.

Leveling Up With Patterns and Media

A plain ol’ dark gray header background might not be too exciting. As promised, we’ll kick this up a notch by integrating with another block-related featured that classic themes can opt into: patterns. We’ll use this to add a video background (or, image, if you prefer).

Because block template parts are HTML, it means that you cannot do anything dynamic, such as accurately reference media via your theme’s URL path. You need PHP to do this. That’s where patterns come in.

Instead of putting all of the block code into parts/header.html, you now only need one line of code:

<!-- wp:pattern {"slug":"tt1-block-parts/header-video"} /-->
Code language: HTML, XML (xml)

This references a “Header Video” pattern that we will build in these next steps.

WordPress will automatically register any patterns found in a theme’s patterns folder. So, the next step is to create a patterns/header-video.php file with a few lines of info:

<?php /* * Title: Header - Video * Slug: tt1-block-parts/header-video * Viewport Width: 1024 * Categories: header, twentytwentyone * Inserter: yes */ ?> <!-- Replace with block code. -->
Code language: HTML, XML (xml)

When you’ve built out your header, just remove the <!-- Replace with block code. --> and put the block HTML code in its place.

Let’s jump back to the editor. Using the same header from earlier, we can make a few simple changes to the Cover block to liven things up a bit.

  • Click the “Add Media” toolbar button and select a image or video (your preference).
  • Click the duotone toolbar button to put a filter over the media.
  • Remove the overlay color and adjust the opacity settings in the block inspector sidebar to your liking.
Adding a video and duotone filter to the Cover block.

Now, you need to copy the block code from the editor and paste it into your patterns/header-video.php file. However, there is one important step you must take afterward. You need to change any references to image or video files that look like the following (there may be more than one occurrence):

http://localhost/wp-content/uploads/2022/09/header-bg.mp4
Code language: JavaScript (javascript)

Those need to reference the media file wherever it lives within your theme. Because I put my header video MP4 into my theme’s assets/video folder, I changed each reference to the following:

<?= esc_url( get_theme_file_uri( 'assets/video/header-bg.mp4' ) ) ?>
Code language: PHP (php)

My final patterns/header-video.php code became:

<?php /* * Title: Header - Video * Slug: tt1-block-parts/header-video * Viewport Width: 1024 * Categories: header, twentytwentyone * Inserter: yes */ ?> <!-- wp:cover {"url":"<?= esc_url( get_theme_file_uri( 'assets/video/header-bg.mp4' ) ) ?>","dimRatio":0,"backgroundType":"video","minHeight":450,"minHeightUnit":"px","isDark":false,"style":{"spacing":{"padding":{"top":"4rem","right":"4rem","bottom":"4rem","left":"4rem"}},"color":{"duotone":["#000000","#D1E4DD"]}}} --> <div class="wp-block-cover is-light" style="padding-top:4rem;padding-right:4rem;padding-bottom:4rem;padding-left:4rem;min-height:450px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="<?= esc_url( get_theme_file_uri( 'assets/video/header-bg.mp4' ) ) ?>" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"center","lock":{"move":true,"remove":true}} --> <div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%","templateLock":"all","lock":{"move":true,"remove":true}} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"lock":{"move":false,"remove":false},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} --> <div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontSize":"1.5rem"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} /--> <!-- wp:site-tagline {"style":{"typography":{"fontSize":"16px"}},"textColor":"white"} /--></div> <!-- /wp:group --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center","width":"50%"} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:navigation {"ref":2586,"textColor":"white","layout":{"type":"flex","justifyContent":"right"},"style":{"typography":{"fontSize":"16px"},"spacing":{"blockGap":"2rem"}}} /--></div> <!-- /wp:column --></div> <!-- /wp:columns --></div></div> <!-- /wp:cover -->
Code language: PHP (php)

As you did in the earlier step, clear any customizations from your header template part in the admin for the file from the theme to take effect.

Cleaning Up the User Experience

There is one final task that I must ask of you as a theme author. It’s not required, but it is one of those nice-to-haves that will make the user experience a bit nicer.

Remember that theme.json file that we created much earlier in this walk-through? Let’s add a templateParts section to it and register our custom header. We can add a title for our header template part that can be translated.

The final theme.json file:

{ "version": 2, "settings": { "layout": { "contentSize": "var( --responsive--default-width )", "wideSize": "var( --responsive--alignwide-width )" }, "spacing": { "blockGap": true } }, "templateParts": [ { "name": "header", "title": "Header", "area": "header" } ] }
Code language: JSON / JSON with Comments (json)

Now everything is nice and polished. Pat yourself on the back for a job well done if you’ve made it this far. Block-based template parts can be a lot of fun, and they’ll put a ton of customization power into the hands of your users.

Resources To Learn More

by Justin Tadlock at September 30, 2022 02:46 PM under Themes

Post Status: WordPress Careers Roundup for the Week of September 26, 2022

Craft your origin story • Pointed questions for devs to ask prospective employers • Strategies against Ageism • IBM's a**hole test • Take a pass on a “fast-paced environment.” • WordPress Translation Day • Writing Tips for Engineers • Preventing burnout as a manager

Estimated reading time: 2 minutes

Walt Kania explains why you should craft your origin story over at the Freelancery. Walt has good advice, and most of it applies far beyond freelancing. I've only seen about three truly helpful books about freelancing on the web, and they were all free — once. Walt's is the best, hands-down, for any kind of professional contractor practicing a craft. That's how he approaches copywriting, and so should you — whatever you do. Way Smarter Freelancing: Your Real-World, Hands-On, Field Guide is available for only USD 9.95. READ →

Jussi Pakkanen has some pointed questions for developers to ask a prospective employer during a job interview. Two good ones: Does this or any related team have a person who actively rejects proposals to improve the code base? Explicitly list out all the people in the organization who are needed to authorize a small change, like a typo in a log message. MORE →

Sadly, these “5 Secrets to Getting Hired After 50” from the AARP are mostly about getting past age discrimination, especially the advice to “polish your appearance.” But, “According to some research, once hiring managers were able to interview applicants face-to-face, they were 40 percent less likely to hire older workers than they were to hire a younger applicant with the same skills.” MORE →

Supposedly IBM used to have an a**hole test to see how job candidates behaved in a group that was given an impossible task. Mean, and maybe unfair but also a worthwhile thought experiment or even a fun team-building exercise when no one is being evaluated by HR. How do you think you would behave? MORE →

The Misanthropic Developer casts a cold eye at job listings that mention a “Fast Paced Environment.” Why isn’t this a selling point? “It’s often (correctly) interpreted as code for ‘overworked and understaffed.'” MORE →

Quick Links

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 30, 2022 01:30 PM under Walt Kania

Do The Woo Community: Do the Woo, a Community Partner at WooSesh 2022

We are excited to be part of WooSesh 2022 this year as we host end-of-the-day wrap up conversations with speakers from the event.

>> The post Do the Woo, a Community Partner at WooSesh 2022 appeared first on Do the Woo - a WooCommerce Builder Community .

by BobWP at September 30, 2022 09:27 AM under WooBits

September 29, 2022

Post Status: Shiny New Things!

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 06:48 PM under WP Tests

Post Status: WordPress Biz Roundup for the Week of September 26, 2022

WordPress Business News and Insights

2022 Web Almanac CMS findings • WP Cloud • Sponsored core contributor and sponsor data • WP Biz Dev • Female-Owned and Led WP Businesses • and more →

Estimated reading time: 2 minutes

2022 Web Almanac CMS Report

According to the CMS chapter of the just-released 2022 Web Almanac from the HTTP Archive, sites using a CMS — and WordPress — are still steadily increasing globally, and 34% of all the sites with an identifiable CMS were using a page builder. WordPress comes in at the bottom of the pack, however, when it comes to non-mobile device performance as measured by Core Web Vitals. For mobile, only Adobe Experience Manager performed worse — and by quite a margin. In terms of Lighthouse performance scores, WordPress was on par with its peers. MORE →

⛅ This week's WordPress Weather Report from Ellipsis: WordPress is up 0.02 to -0.02 under the baseline while WooCommerce holds steady at +0.02. 📈

What is WP Cloud? Who is it for?

WP.cloud has been flying under the radar for a while. At the WP Minute, Matt Medeiros spoke with Jesse Friedman, Director of Innovation at Automattic, to learn more. WP Cloud is a Platform as a Service (PaaS) built on the hosting infrastructure that’s behind WordPress.com, Pressable, and WordPress VIP with GridPane soon to follow. Agencies that want to white label their client hosting are ideal customers for WP Cloud via GridPane. In Post Status Slack, there's been a hearty discussion about where WP Cloud fits in the hosting industry and why you might want (or not want) to use it. MORE →

WordPress Core Contributor Stats: 19.9% Sponsored for 6.0 Release

Chuck Grimmet, who is on Automattic‘s Special Projects team for WordPress.com, “did some data exploration around WordPress core contributors and the companies they work for.” Chuck breaks down the data in detail with several tables on his blog. The results point toward nearly 20% of contributors being sponsored for the 6.0 release, assuming they were sponsored by the same company during that entire time. MORE →

Quick Links

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 06:45 PM under WP Cloud

Post Status: WordPress Tech Roundup for the Week of September 26, 2022

WordPress Design & Development Around the Web

Big Changes in WP_Query and the Nav Block • Accessibility-Ready Themes • Design Systems and Agency-Client Co-Creation • W3.CSS • WP Plugin Compare • Is Self-Hosted Email Impossible? • Cool Tool: WordPress WebAssembly • Also: Remix Icons, PDFgrep, The only 58 bytes of CSS you need to go to parties, plus an amazing Block Editor trick.

Estimated reading time: 2 minutes

WP_Query Changes in 6.1

Jonathan Harris emphasized in Post Status Slack #development and on Twitter this week that WordPress 6.1 is bringing big changes to WP_Query — changes he's been working on for a long time: caching database queries in WP_Query.

⚠ Be advised this may affect any code that requires uncached database queries for something like a migration script. Thanks to XWP for sponsoring Jonathan!

Roger Monti at SEJ has a nice explainer on the massive improvements this will bring to WordPress performance with far fewer queries (in the billions) being run across the web.

Nav Block Changes in 6.1

Also in Post Status Slack, Dave Smith reminded theme developers to “check out how the Navigation Block is changing in WordPress 6.1. Especially in relation to fallbacks.” Learn more from Dave's video on the new Nav Block features. WATCH →

Accessibility Ready Themes

Another important step in the evolution of the WordPress.org Theme Repository: along with filtering by Block Themes, now you can search for themes tagged “Accessibility Ready.

Twenty Twenty-Two was the first default theme shipped with WordPress core that meets the WCAG AA level accessibility requirements. Cantan Group has a nice breakdown of its accessibility features and why this matters.

You can learn how to make your themes accessibility ready from the Theme Review Handbook and start with Joe Dolson‘s tips on How To Fix the Six Most Common Accessibility Errors on Your Websites. (WP Tavern Jukebox) A great accessibility concept is to Stop Using Grey Text, as Andrew Somers implores designers. READ →

Design Systems and Agency-Client Co-Creation

Jay Hoffman‘s History of The Web covers the way designers have shifted from designing interfaces to designing systems. ClearLeft is part of the story, and their co-founder, Jeremy Keith, has a new article about it. He discusses why they've shifted from pattern portfolios to front-end style guides to pattern libraries to Fractal. Jeremy has written in the past how a good design system has to be developed by the client with an design agency facilitating:

We’ve also come to realise that it usually doesn’t make sense for us to deliver a design system to a client. Rather, a design system needs to come from within the client’s own organisation. There’s little chance of a design system being adopted if the people who are supposed to use it don’t feel a sense of ownership. That’s why we prefer to co-create and guide the creation of a design system with a client, rather than simply handing it over. Co-creation takes a lot more work, but it’s worth it for the long-term usage of the design system.

Quick Links

Cool Tool!

Each week we feature one cool tool that can help make your life easier as a WordPress builder.

WordPress WebAssembly

Adam Zielinski is blowing minds with the debut of Client-side WebAssembly WordPress with no server. (GitHub) On the Make WordPress Core blog, Adam breaks down the technical details and explains some much-needed and exciting use cases for the WordPress community: “The code examples in the WordPress handbook could become runeditable.” (Demo) With an in-browser IDE, new contributors could get started “without setting up a local development environment.” (Demo) It could also “become a primary teaching tool for new developers.” In essence, WP-WASM could play the role of Drupal Pod at Contributor Days, as Amy June Hineline described it on Post Status Excerpt.

Bonus Tools—

  • Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers. GET→
  • pdfgrep is a command line utility to search text in PDF files. GREP →
  • 58 bytes of CSS to look great nearly everywhere. GIST →
  • Sam Munoz: “Did you know you can quickly reference other pages and posts within a #WordPress block by typing “[[“??” WAY!→

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 04:15 PM under XWP

Post Status: WordPress Core Contributor Stats: 19.9% Sponsored for 6.0 Release

Chuck Grimmet, who is on Automattic‘s Special Projects team for WordPress.com, “did some data exploration around WordPress core contributors and the companies they work for.” Chuck breaks down the data in detail with several tables on his blog.

Notably, the percentage of sponsored contributors has steadily increased to almost 20% for the 6.0 release. However, Chuck notes, “The data gets less accurate the further I go back in terms of release dates because I can only scrape their current profile, not their previous profiles. Some most likely switched employers.”

Core Contributor Marius Jensen noted in Post Status Slack how complicated it would be to get a totally accurate fix on sponsored contributors. Marius has contributed to all the releases in Chuck's survey, but Marius was not with his current employer for that entire period. As well, some contributors may have been sponsored in the past but are no longer sponsored — or vice versa. Others' sponsors may have changed.

Chuck's research was inspired by a good question from David Bisset:

I've been an admirer of Chuck's blog for a while — especially his use of Webmentions. We should all use them.

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 01:35 PM under WordPress.com

Do The Woo Community: All You Should Know About the WooCommerce Agency Partner Program

Mary Voelker from WooCommerce shares all that you need to know if you have an agency interested in being part of the WooCommerce Agency Partner Program.

>> The post All You Should Know About the WooCommerce Agency Partner Program appeared first on Do the Woo - a WooCommerce Builder Community .

by BobWP at September 29, 2022 10:31 AM under WooWP Chats

Post Status: 2022 Web Almanac CMS Report

According to the CMS chapter of the just-released 2022 Web Almanac from the HTTP Archive, sites using a CMS — and WordPress — are still steadily increasing globally, and 34% of all the sites with an identifiable CMS were using a page builder. WordPress comes in at the bottom of the pack, however, when it comes to non-mobile device performance as measured by Core Web Vitals. For mobile, only Adobe Experience Manager performed worse — and by quite a margin. In terms of Lighthouse performance scores, WordPress was on par with its peers.

Top 3 countries with the most WordPress sites with passing CWV scores:

  1. Japan
  2. Canada
  3. Germany (a very close 3rd)

The average number of plugins used on WordPress sites remained the same as last year: 24. If you're interested in image formats, page weight, fonts, CSS, and other resources impacting performance broken down by CMS, there are a lot of details about that in this report.

One unfortunate limitation of the data is that the more highly visited a site is, the less likely there is to be an identifiable CMS.

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 04:52 AM under Plugins

Post Status: Management Code: Management Skills for Female Creative Agency Owners

Natasha Golinsky has launched a Facebook group for women who own creative agencies: Management Code: Management Skills for Female Creative Agency Owners.

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 04:19 AM under Natasha Golinsky

Post Status: The Unofficial Directory of WordPress WBEs

Last week, Steve Burge asked on Twitter, “how many female-run WordPress companies are there?” A big list emerged in the replies:

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 04:14 AM under Steve Burge

Post Status: WP Biz Dev Job Board

Lawrence Ladomery has launched WP Biz Dev, “the first job board dedicated exclusively to Marketing and Sales roles for WordPress businesses.” MORE →

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 29, 2022 04:07 AM under WP Biz Dev

September 28, 2022

Post Status: WordPress 6.1 Beta 2 • Serverless WordPress • Annual Meetup Survey • Catalyst for Creativity

This Week at WordPress.org (September 26, 2022)

Help test WordPess 6.1 Beta 2! Check out the latest features that are coming in the 6.1 release. Learn how to run WordPress using WebAssembly, and take the Annual Meetup Survey to give feedback on events.

News



Thanks for reading our WP dot .org roundup! Each week we are highlighting the news and discussions coming from the good folks making WordPress possible. If you or your company create products or services that use WordPress, you need to be engaged with them and their work. Be sure to share this resource with your product and project managers.

Are you interested in giving back and contributing your time and skills to WordPress.org? 🙏 Start Here ›

Get our weekly WordPress community news digest — Post Status' Week in Review — covering the WP/Woo news plus significant writing and podcasts. It's also available in our newsletter. 💌

Post Status

You — and your whole team can Join Post Status too!

Build your network. Learn with others. Find your next job — or your next hire. Read the Post Status newsletter. ✉ Listen to podcasts. 🎙 Follow @Post_Status. 🐦

This article was published at Post Status — the community for WordPress professionals.

by Courtney Robertson at September 28, 2022 11:41 PM under WordPress.org

WPTavern: WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

In June 2022, WordPress.org’s Themes Team began strongly urging theme authors to switch to locally hosted webfonts, following a German court case, which fined a website owner for violating the GDPR by using Google-hosted webfonts. For years, theme authors have been enqueuing Google Fonts from the Google CDN for better performance, but this method exposes visitors’ IP addresses.

The Themes Team warned that guidelines regarding locally hosting fonts will be changing imminently and many theme authors moved to comply before it becomes a requirement.

A ticket for bundling Google fonts with WordPress’ legacy default themes had patches and was on track to be included in WordPress 6.1 in November. WordPress contributor Hendrik Luehrsen requested more eyes on the ticket, saying it “directly affects the core WordPress audience in Germany.” He reported that users in Germany were still getting emails threatening fines for using fonts loaded from Google.

WordPress core committer Tonya Mork suggested exploring releasing the updated version of each theme separately from WordPress 6.1.

“When each theme is ready, release it to wp.org’s theme repo,” Mork said. “Users can then update to get locally hosted fonts ahead of when WP 6.1 is released.”

This changed the direction of the ticket and with more scrutiny, contributors found the patches could use some more work.

“Creating new theme versions for this specific change could be good when they are ready,” Stephen Bernhardt said. “Using locally hosted fonts is already recommended, but we need to fix our own themes before we can make this a requirement for others.” He submitted a list of problems and potential improvements after reviewing the patches, and contributors are working on a better approach.

WordPress core committer David Baumwald changed the milestone to 6.2, as Beta 2 for 6.1 was released yesterday and the ticket still needs a final direction and patch.

“While I understand the issue, this is nonetheless sad to see,” Luehrsen said. “This is still a serious issue in Germany (and other GDPR territories), as users with active Google Fonts are currently getting targeted by people exploiting the law.”

Luehrsen took to Twitter to comment on his disappointment with the ticket missing the window for 6.1.

“This is the reason why WordPress will probably lose relevance,” he said. “Real users get hurt here, but they are in GDPR territories and this does not seem to be important.

“Could I have done more? Probably. But it is somewhat sad to see how quickly the momentum on that ticket fizzled out. If Squarespace, Wix and sorts start marketing privacy against WordPress, we’re screwed in GDPR countries.”

In the meantime, those who are using WordPress’ default themes can use a plugin like Local Google Fonts or OMGF | GDPR/DSVGO Compliant, Faster Google Fonts to host fonts locally.

Users can also switch to Bunny Fonts, an open-source, privacy-first web font platform with no tracking or logging that is fully GDPR compliant. Bunny Fonts is compatible with the Google Fonts CSS v1 API so it can function as a drop-in replacement. The Replace Google Fonts with Bunny Fonts plugin makes it easy for users to do that without editing any theme code.

Contributors are working on having fully GDPR-compliant WordPress default themes ready for WordPress 6.2, expected in early 2023.

by Sarah Gooding at September 28, 2022 06:31 PM under google fonts

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

Version 5.0.1 of the Akismet plugin for WordPress is now available. This update contains the following improvements:

  • An improved settings screen when there are not yet any statistics to display.
  • A fix for a bug that broke some admin page links when certain Jetpack plugins are active.
  • Improved performance in newer browsers on pages with forms.
  • A fix for a conflict between Akismet and forms that post to third party sites.

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.

by Christopher Finke at September 28, 2022 03:28 PM under Releases

WPTavern: #44 – Joe Dolson on How To Fix the Six Most Common Accessibility Errors on Your Websites

Transcript

[00:00:00] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley.

Jukebox is a podcast which is dedicated to all things WordPress. The people, the events, the plugins, the blocks, the themes, and in this case, how to improve the accessibility of your WordPress website.

If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast, player of choice. Or by going to WPTavern.com forward slash feed forward slash podcast. And you can copy that URL into most podcast players.

If you have a topic that you’d like us to feature on the podcast, I’m very keen to hear from you, and hopefully get you all your idea featured on the show. Head to WPTavern.com forward slash contact forward slash jukebox, and use the contact form there.

So on the podcast today, we have Joe Dolson. Joe is a WordPress plugin developer, a core committer and a web accessibility consultant. He’s part of the Make WordPress accessibility team, the team dedicated to improving accessibility in the WordPress ecosystem.

His recent presentation at WordCamp US entitled, finding and fixing the six most common WCAG 2 failures, highlight some of the key areas where websites are not as accessible as they should be. The areas we discuss are, low contrast text, missing alternative text, empty links, missing form labels, empty buttons and missing document language.

Joe explains what each of these problems are, both in terms of how they can be fixed as well as what people with accessibility requirements might experience when they visit your site. We talk about how you can equip yourself with the tools that you need to diagnose these issues and online resources you can use to discover more about website accessibility.

It’s Joe’s opinion that you’re better off making a start right now, carrying out incremental changes rather than attempting to solve every single problem that your website might have. Begin the journey and take it one problem at a time.

We also chat about the fact that there’s an ever-growing legal compulsion to make websites follow accessibility guidelines. Lawsuits are going through the courts with greater regularity. So now might be the time for you to look into this topic.

That being said, Joe cautions against the use of tools, which purport to solve your accessibility issues with minimal effort. A variety of pop-up solutions have emerged onto the market, which claimed that they can make your site compliant with almost no effort. Joe is adamant that these promises are almost always false and that there’s real work to be done on each website, as they’re all unique and have unique problems to solve.

Typically when we record the podcast. There’s not a lot of background noise. But that’s not always the case. Over the coming weeks, I’ll be bringing you recordings from a recent trip to WordCamp US 2022, and you might notice that the recordings have a little echo or other strange audio artifacts. Whilst the podcasts are more than listable, I do hope that you understand that the vagaries of the real world we’re at play.

If you’re interested in finding out more, you can find all the links in the show notes by heading to WPTavern.com forward slash podcast, and you’ll find all of the other episodes there as well. And so without further delay, I bring you Joe Dolson.

I am joined on the podcast today by Joe Dolson. Hello Joe.

[00:04:23] Joe Dolson: Hello.

We are at WordCamp, I nearly said WordCamp Europe. We are at WordCamp US 2022. We’ve got Joe on the podcast today because he is doing a talk at WordCamp US. Do you just wanna tell us a little bit about yourself? Why you’re on this podcast, but then stray into what your talk is about.

[00:04:40] Joe Dolson: Certainly So I’m Joe Dolson. I’m a WordPress core committer. I’ve been a contributor to the accessibility of WordPress for quite a long time. I think I first started contributing in WordPress 3.4. I’d have to look at my history to actually know that for sure, but it was somewhere around there. So today I’m talking about a study from the nonprofit organization, WebAIM, out of Utah, in which they looked at the top million homepages around the web. The most widely visited, heavily known webpages, and did a bulk analysis of the accessibility issues on those pages.

And, I’m going to talk about six specific types of errors that they found constituted 96.5% of all detectable errors using automation. And the things that that exposes and how you can work with consultants. How you should use your time and how you should use automation to solve problems.

[00:05:39] Nathan Wrigley: Can I ask how it is that you became interested in accessibility problems, given all the myriad things that you could have become interested in web? How did accessibility fall into your lap and create so much interest for you?

[00:05:51] Joe Dolson: So when I started my business in 2004, I started right from the beginning with the idea that I wanted to pursue accessibility in websites. And that was because when I decided to become a web designer, I wanted something that was unique about what I did. I wanted to do something that wasn’t just marketing. I wasn’t really interested in marketing. I’d seen a lot of that around and I’m like, boy, that, that just doesn’t seem like it’s socially motivating.

[00:06:21] Nathan Wrigley: Mmm.

[00:06:21] Joe Dolson: It doesn’t seem like it’s interesting. It doesn’t feel like I’m doing something worthwhile. So I had to think to myself about, well, what do I know already? What do I have a unique access to that can make my business be a little bit different? And my mother was the executive director of a nonprofit that provided arts access for people with disabilities.

And so for years, I’d had conversations at home with family when visiting my mother in her workplace about what people with disabilities needed and how the ADA worked, and how all of this sort of world needed to be constructed. So what I already had was a reasonably strong sensibility for why people with disabilities need access and the very fact of the modality of different experiences and different perceptions. And so with some study about the actual technical side behind that, I was able to pick that up relatively quickly. Which is not to say I didn’t make absolutely horrible mistakes in 2004 and five.

[00:07:29] Nathan Wrigley: It’s almost, it’s something that came from your, your background,. Your family enabled you to have some sort of prior wisdom. Most of the rest of us, I would imagine are coming at it pretty cold, and if we were to go back, I don’t know, 5, 6, 7, 8 years, I feel like nobody was really talking about this. I could be wrong. Obviously you were interested in it, but as a proportion of the people that were designing websites, I feel that accessibility was not on everybody’s radar. I would imagine that many, many of the websites out there were not accessible in any way, shape or form.

But it’s become a real talking point in the last few years and people are making much more of an effort. Obviously you’ve got your conversation, your presentation at the event in the next couple of days. I’m just wondering if you could outline for those people who, maybe they’re new to WordPress, maybe they’re new to web design and they hear the word accessibility and they just think, well, I don’t know what that means. Just, in the broadest possible brush strokes. Just let us know what the 10,000 foot high version of accessibility on the web is.

[00:08:31] Joe Dolson: So yeah, the 10,000 foot view. Accessibility, web accessibility, and the access to information for people with disabilities is about making sure that the content you’ve put on your website is interpretable to the most, the widest variety of senses. So for people who are visually impaired, that means making sure everything can be understood by what’s called a screen reader. That will look at the text content of your site, look at the code of your site and interpret that in voice production.

For people with hearing impairments, that’s about having captions for your video. It’s about having transcriptions of your audio files. So it’s really about recognizing that people have different ways of perceiving the world, whether that’s because of dyslexia, and they have difficulty with the way text is structured. Or it’s visually impaired, so that they literally cannot see your images and have no idea what that is. Your responsibility in sharing that information is making sure it’s available to multiple senses.

[00:09:40] Nathan Wrigley: Thank you.

Your talk is called finding and fixing the six most common WCAG, W C A G, two failures. First of all, what’s WCAG 2? And then if you wouldn’t mind elucidating what are those six most common failures? Maybe we just go through them one at a time, and if we, if we stray off into a conversation about each one of them, that’d be good, and if not, we’ll carry on from there.

[00:10:02] Joe Dolson: Sounds great. So the web content accessibility guidelines is a document coming out of the W3C, the worldwide web consortium, and it’s kind of the international standard for what is considered to be accessibility. Version two is the version that was published in, I wanna say 2008. So it’s not new. But it’s been then updated periodically since then. The current version is 2.1. 2.2 is currently a candidate. It is likely to become a recommendation sometime at the beginning of 2023.

And that just keeps incrementing different ways of looking at things and what is considered to be a standard internationally for what makes content accessible. It’s a very useful document. It is enshrined in law in a number of contexts. The US government’s section 5 0 8 is based on WCAG 2. A lot of international laws such as what the EU uses for their guidelines are based on WCAG 2. So being aware of these guidelines is pretty key.

[00:11:07] Nathan Wrigley: Just before we go into the six areas that your presentation is about. When you say that the things are enshrined in law, and you mentioned the US and the EU in particular, I guess there’s going to be a whole swathe of different responsibilities and things that you are compelled to do. You are in the US, so just give us an idea, just paint the picture in the US specifically, and we’ll just ignore the rest of the world for now, about what the absolute requirements are. So, in other words, if you don’t satisfy this, you are in breach of the law. So are you able to speak to that?

[00:11:40] Joe Dolson: I can definitely speak to that. And it’s definitely good that we’re narrowing that just to the US, because otherwise this would go on for hours.

[00:11:47] Nathan Wrigley: One country time. Yeah.

[00:11:49] Joe Dolson: So in the US, what we’ve got is section 5 0 8, which is part of the federal regulations governing the acquisition of software for government institutions. And that only applies when you’re getting funding from the federal government. So you’re only in violation of that if, for example, you’re a university and your website is funded by federal grants. And that is, 100% it’s based on WCAG 2.

There are a few tweaks that are not exactly identical, but basically if you’re violating WCAG 2 at what’s called level AA, there are three levels of severity within WCAG. There’s level A, AA and triple A. Triple A is usually very specific types of errors that apply to relatively small populations and mostly need to be handled if you’re specifically serving that population. The guidelines, the laws are around AA, which is gonna be very broad, but it’s still, there’s got a fair amount of meat to it.

The other law is the ADA, which is a 1991 law, and this may shock you, but at the time it was written, they did not directly address websites. And that does not mean that website accessibility isn’t covered by the ADA, and case law has repeatedly demonstrated through precedent, that yes, the ADA does require websites that are publicly accessible and commercial need to be accessible.

What is lacking in the US is any regulations that stipulate what that means, and that is a case where WCAG has not been brought into the legal bounds on these websites. And that is why you hear so much about so many lawsuits against companies for web accessibility. It’s because we don’t have regulations that allow anybody to easily look at their website and determine whether or not they’ve met those requirements. Really. the ADA stipulates your website needs to be accessible, it needs to provide this equal access. Figure out what that means.

[00:13:50] Nathan Wrigley: You just mentioned lawyers and that’s kind of an interesting place to go just for a moment. It feels like there’s two premises here. We could have the carrot approach, or we could have the stick approach and the stick approach, by that, I mean is the threat of somebody contacts a lawyer and threatens to sue you because your website is not up to scratch.

On the other hand, there’s the, uh, carrot approach, which is the kind of thing that I’m imagining you are doing. You’re involved in educating the community and, and making this stuff happen with a little bit of education. Do we need to fear the lawyers, the stick approach? Is that an increasing thing that’s happening? I mean, you see it in all other walks of life. People are sued for things that they haven’t done because people think they might be able to make a little bit of money out of it. Is that kind of on the horizon? Are people doing that? Do we need to be worried about the legal aspect?

[00:14:36] Joe Dolson: Yes, 100%. As recently as six or seven years ago, I would’ve said no, you don’t really seriously to worry about that unless you’re an international scale company. And that’s just not true anymore. And that’s directly because we don’t have those regulations. They’ve been slated to be added on many, many occasions, and keep getting canceled. They are currently on the docket to be created again, hopefully in 2023. But until that happens, we don’t really have anything that gives us a goal. And one of the things that regulations could come with is a schedule. A schedule of enforcement. That’s what certainly a lot of other places have done.

The province of Ontario created a document, the AODA, which is a set of laws within Ontario for what is needed to accessible, and that came with a schedule of enforcement. Instead we have a free for all. Anything could happen. And there are thousands of accessibility lawsuits every year. And a lot of them are just accident chasers effectively. They’re not people with a very serious concern. They’re just looking for a quick payoff. And that is a horrible, horrible scenario to be in because you might receive one of these demand letters, and there’s a very good chance you are in fact in violation of it, and it is legitimate, even though they probably wouldn’t pursue it in court, but you can’t count on that. So it’s, it’s a very unpleasant situation.

[00:16:09] Nathan Wrigley: That, is curious. But also, conversations like this and podcast episodes like this, at least we’re alerting people to the fact that this is something to be taken seriously. I wonder at what level, like you mentioned six or seven years ago, if you are a, a major corporation, you probably needed to worry about this. And then as though six or seven years have passed, presumably that barrier has gone lower and lower and lower. But at some point it doesn’t matter who you are, you are going to be liable unless you take this sort of stuff seriously. Sorry, you were gonna say.

[00:16:35] Joe Dolson: Right, right, right. I was say that there usually is a point when you get down into non-commercial websites, when things do get a lot fuzzier as to whether or not you’re likely to be liable, but that’s really a question that the law should be settling and the regulations should be settling.

What we should probably do is actually get to these six error types. All right. Let’s do it. So the number one is low contrast text, and that literally means where you have gray text on a slightly darker gray background, and it’s just hard to read. And there are a lot of very very specific calculations that determine in WCAG what is considered to be low contrast or not. It’s an extremely easy thing to test for, and it’s just a matter of trying to meet those guidelines.

Nobody is trying to claim that these color perception tests are perfect. It’s a number. It’s intended to be there so that you have to meet this basic minimum. An important thing to remember about contrast is that this is not a scenario where higher contrast is automatically better. If you’ve met the guideline, you’re in perfectly good shape. You do not need to then go, oh, but I should probably just go black on white. That’s not necessarily better. There’s a whole population of people who will actually find that to be a completely separate struggle.

After contrast, it’s all about, images and that’s images that are either missing alternative text, have generic alternative text, like just image or file or something useless, or are repetitive. And that’s going to be cases where maybe you’ve got a linked image next to a link where the text of that alt text is exactly the same as the text of the link, it’s just duplicate. It’s not helping anybody. These are also really easy to find because you can easily identify that your images have this really common recurring pattern. In a lot of cases in the world of WordPress.

You know, you might have a block pattern that’s producing an image with a heading and some text. And if that block pattern is just presetting an alternative text to something that’s not good, that’s where you might have a problem, it just needs to be dealt with and fixed.

[00:18:50] Nathan Wrigley: Can I just interrupt there a moment, because a default install of WordPress will give you more than alternative text. You’ve got descriptions and captions and so on. You only mentioned alternative text. Is that the case? It’s just that one field that we need to be mindful of.

And you’re describing what is in the image. So, for example, if there’s a red car with a, I don’t know, a dog in the backseat or something you would write, this is an image of a red car with a dog in the backseat.

[00:19:15] Joe Dolson: That’s a great question. I’m gonna answer two parts of that. First of all, you don’t describe the image. You describe the purpose of the image, which may or may not be a description of the image. It really depends on the context. For example, if that image is a link to a post, then what that image is actually conveying to the user is, what is this link for? Which is not necessarily going to be what is the image of. Which is also a question for, is this the right image for this? If that alt text doesn’t make any sense with that image, then maybe this isn’t the right image. But ultimately what you’re actually describing is the purpose of the image. It might be that it’s an image of a dog in the backseat of a red car.

The other thing I wanna mention about that is you would not say, image of. Because that is already going to be predicted and produced by the screen reader. They know it’s an image. You got that covered. And that is an extremely common problem actually, is people stating that it is an image? Totally unnecessary.

[00:20:15] Nathan Wrigley: Okay. So we went through number one and number two.

[00:20:18] Joe Dolson: Well, there was another part of that, which is the WordPress fields. So the WordPress media library has four fields that can be filled in. Title, alternative text, caption and description. Those four things all serve completely different purposes. The title is really only for administrative use. In very old versions of WordPress, it was used to add a title attribute, but that has not been the case for many years.

The alternative text is the thing that basically represents the image. It’s the alternative to the image. When that image is not available, whether it’s because somebody can’t perceive it or because it doesn’t load. That’s the thing that should take the place of that image. And that’s the generic version of it because the things stored in the media library is just one alternative text. So usually that is going to be a description of the image. In actual use, you may or may not want to use that text depending on the context. Again, with that linked image, it’s not necessarily a description of it. It might be a description of the target.

And then the caption, the caption is a thing that should be universally available. So both people who are sighted and people who are visually impaired will be able to see that. So really it’s something that should be complimentary to the image. It gives additional context, but doesn’t necessarily explicitly describe it. An example there would be, it might be used to say who is in the image. For example, you know, the description is a man with glasses and a beard, stroking a cat. And then the caption actually says, this is a picture of our founder, Joe Dolson and his cat Bubbles. I don’t have a cat named bubbles. just to be clear.

[00:22:00] Nathan Wrigley: There was more in that than I, I imagined.

[00:22:02] Joe Dolson: The description field is actually not used by default unless your theme has decided that there’s some context in which that’s used.

[00:22:09] Nathan Wrigley: So, okay, we’ve done one and two.

[00:22:10] Joe Dolson: Moving on to number three. That’s form fields without labels. And that is an incredibly big deal. I mean, if you have a contact form or a search form or a sales form, any kind of query, and those form fields don’t have labels, then basically a user with a screen reader, they don’t know what they’re trying to do. They have no idea what this is. Frequently, you have form fields that have text nearby that is visually a label, it looks like it has a label. But if there’s no explicit association between that information, because a label is a specific HTML field and it’s connected to an input using a for attribute and an ID, attribute. And that makes it really straightforward, really explicit.

And that tells somebody what this field is for. And those being missing are just, that’s just wrong. It should not be missing. Next one after that, and I’m just gonna collapse the next two into one because they’re effectively the same problem. Empty links and empty buttons. That is literally a link that does not have any text contained inside it, or a button that doesn’t have any text. As often as not that’s because they’re either an image that doesn’t have an alt attribute.

So there’s nothing meaningful there. It’s like a font icon or an SVG image that is supposed to represent your hamburger menu, or it’s a close icon, or it’s a help icon or any of those many possibilities, but doesn’t have any kind of accessible name. It doesn’t have any attributes that give that a text context. So the screen reader knows what this is supposed to do. Those are also extremely common.

The last of the six, and this is quite rare to be a problem on a WordPress site because WordPress pretty much takes care of this, is a missing document language. Every HTML element should have a lang attribute that declares what language the document is in. English, German, French, Spanish, whatever. And the purpose of that for a screen reader is to tell them how to pronounce it.

Not having that means it will be pronounced according to whatever that person’s local settings are. So if they’re a French browser on an English site, the English is gonna have a very strong accent. And in fact, it’s not really an accent because it’s following a completely different set of pronunciation rules and that’s going to make it incomprehensible.

So making sure that that attribute is present is really important. I haven’t seen that as a problem on a WordPress site with a theme that’s reasonably recent for a long time. There were definitely a lot of older themes where, big problem.

[00:24:49] Nathan Wrigley: I’m guessing that the six things that you brought to the table could easily be 15, 20 things, but six was the number that was chosen there. I guess the problem is you could have gone on all day and we could have talked for hours about all the other things, but these are the things that have risen to the surface.

So anybody who’s not encountered this is now going to be presented with additional things to do. Work to be undertaken. Things to be learned and so on and so forth. I’m just wondering if there’s any, any useful things, tools for want of a better word that you have found over the years that have enabled you to short circuit things, make things as easy as possible. So it might be a browser extension, or I don’t know, some app that you can install on your computer or something like that.

[00:25:32] Joe Dolson: Yes, there are an incredible number of these types of tools, and they all have slightly different ways of working, slightly different sets of tests. But these particular six items, all of the automated tests are going to find these and help you solve them. They’ll give you guidance about what you have and what you need to do.

So I think some of the ones I use the most are going to be, there’s an automated tester from tenon.io, and that’s an application that you can run remotely. It’s got an API, you can run it just automatically. And it’ll just scan a page and give you a list of everything it’s found on it..

Another one is wave.webaim.org. That’s from the same group of people who produced this report that found these errors. And that’s available as a toolbar for, I think it’s Chrome. Firefox or Edge, so pretty broadly available. It’s also testing one page at a time, but they do have a tool through a company called Pope Tech, that can give you generated reports of larger sets of pages. So you can get a much larger body of data.

There are browser extensions from an organization called Deque called Axe. Those also do a wide variety of automated tests.

One of the things that’s important in development with accessibility is that it’s always something that needs to be based on the rendered site. There’s a reason they’re called the web content accessibility guidelines. It’s because it’s all about the user experience and what they’re actually getting. So there aren’t a lot of tools for doing like pre-production linting as part of your development. You know, you can do some of that in an end to end test, but it’s going to be very limited because it’s, there’s so many assumptions you have to make.

And the real world is where people have put in content that, the content is what’s really causing problems. Anything with these images, almost all of that is problems coming from content.

[00:27:28] Nathan Wrigley: So it strikes me from what you’ve just said, that there might be a better place to put this work. This work that needs to be done in the workflow of a typical website. And from what you’ve just said, it sounds like it would be better done toward, the end of the development cycle?

[00:27:43] Joe Dolson: Different parts of it fall in different locations. So low contrast text, for example, is frequently a design issue. So that as often as not should go at the very, very beginning. That’s when you’re deciding what kind of color palette you’re going to use and what your base design looks like.

The images, it’s a mix, because it depends on whether you’re using a plugin that generates a body of images, or you’re using images embedded into content. In the latter case, it’s a content production issue. So it’s something that you should be checking on the fly and should be done on a constantly recurring basis.

For the application environment, for, you know, a plugin that’s producing these lists. That needs to be fixed in the development side, on that plugin of whatever it’s doing.

Form fields are another one where most of that needs to come from the plugin that’s generating your form. Gravity Forms has done a huge amount of work on improving the accessibility of their product. They’ve got more to do. It’s always, these things are a constant battle of, oh, we screwed this up now we’ve gotta fix it. Oh, we fix this, but now we screwed that up. But Gravity Forms has done a really great job, and one of the advantages to that is that they don’t give you a lot of room to screw it up. Just make sure that legacy markup is not turned on.

[00:28:58] Nathan Wrigley: There’s a whole other conversation I think to be had there as well, but…

[00:29:01] Joe Dolson: There’s a lot.

[00:28:03] Nathan Wrigley: In terms of a typical agency, let’s say who’s done none of this work before. They’ve got a legacy of websites. Let’s say, I don’t know, 50 websites, which they’re maintaining and they’ve built. So suddenly we are presenting the agency with work that they need to go back, and if you like retro fit the websites that they’ve already built and bring them up to standard.

And then of course, there’s gonna be the new work which comes through the door and that’s gonna be a little bit more straightforward. This brings to mind the question, how much do we need to be doing of this now? How imperative is it for us to go back to our clients and say, look, we need to begin this work yesterday?

Or is it more a case going back to the clients and saying, maybe it’s time to begin again. And I know that’s not gonna be a comfortable conversation to have. Essentially what I’m trying to say, is it easy to retrofit or is it sometimes easy just to begin again almost?

[00:29:55] Joe Dolson: It is absolutely frequently easier to begin again. But it’s it is very much a case by case scenario. One of the things about the WordPress environment and this ecosystem, is that there’s a huge number of themes and plugins that you’re building your sites based on.

If those themes and plugins are issuing updates and they’re fixing problems, then a lot of the problems that are coming out of those tools can be fixed for you. And I mean that’s why I think the people who should be looking at this first and foremost are the tool creators. WordPress Core, plugin authors, theme authors, because that is going to solve the biggest, most global problems. And when I say global, I mean, these are things that are infecting, that are affecting entire sites.

I said, infecting. It’s kind of an interesting perspective, I like that in some ways, I don’t know. They’re infected with inaccessibility. But anyway, if these plugins can fix something then they can have an impact on thousands, millions of sites. I mean this is one of the reasons I contributed to WordPress at all is if I can make one little change, it can potentially impact millions of sites.

[00:31:06] Nathan Wrigley: Just the answer to this may simply be a no, and it goes nowhere else. But is there any sort of an accreditation system that things like plugins can get certified against. So that, for example, you mentioned Gravity Forms as a good example of a company that have done some work in that area. So that you could visit their website, see the accreditation stamp somewhere and say, okay, I’m assured that at least some of the work has been done. I don’t know if that’s even a thing.

[00:31:31] Joe Dolson: There’s nothing that I’m aware of really for plugins. There’s an organization. It’s the IAAP, the international association of accessibility professionals. Uh, and they certify people as specialists. In the theme world the WordPress theme repository does have the accessibility ready tag that does require some manual testing.

Plugins are a really difficult case because it’s hard to set a specific set of tests and guidelines that they have to meet because they do so many different things. For some plugins, there are no settings, there’s no user interface, it just does some automation. And you’re like, well, is that accessible? It literally has no interface. How do we judge that?

[00:32:14] Nathan Wrigley: Okay, so, we talked about retrofitting. We talked about beginning and potentially that the beginning is the easiest way to go forward. That therefore raises the question of how much of this do you need to be mindful of before you can say, that site is ready to ship. And bluntly let’s say, is it okay to have a site where 10% of the tick list that you want to achieve has been completed?

Is that okay to launch, or do we need to be higher into the fifties, or indeed the nineties, or the 100%? In other words, is it better to do something and launch it, rather than wait until it’s perfect? We know how this works. If we build websites, we’ve had this problem time and again. You know, things creep in that we need to do, and we never end up launching the product because we’re constantly, constantly making it perfect. So just some guidance on where we need to be there.

[00:33:05] Joe Dolson: So it’s a slightly different answer depending on whether we’re building a new product or making changes and retrofitting something old. When you’re retrofitting, in my opinion, it’s just, the goal is make it better every day. If you can ship an update that fixes one problem, then fix that one problem.

It’s better. It doesn’t have to go from zero to a hundred in an instant. There’s no reason to wait. To shift an improvement. When it’s a new product I would say 10% is awfully low, because we all know how priorities work And as soon as that product gets in front of users. Now you’ve got user demands. You’ve got clients who just are like, oh, I don’t, I don’t know that I want to pay anything more right now.

And so that additional percentage may just never happen. So going over 10% is definitely worthwhile. But you should always recognize that there is no a hundred percent. Like you’re not going to achieve a hundred percent accessibility. The range of human experience and human perception is far too great. All you can reach for is try and think of everything you can, and everything that seems reachable and that you understand and recognize that you’re going to make mistakes.

[00:34:20] Nathan Wrigley: You were mentioning earlier about the lawyering and how that has become a thing. And I’m wondering who is the person who’s responsible. So in other words, if you are the web designer and you’ve taken on that work and you’ve handed over to your client, but then they’ve taken over for example, and they’re maintaining and updating from this moment forward. Is there any guidance around that?

In other words, can you insulate yourself from the problems which may occur? And again, there’s a myriad set of different ways that we could build and hand over and all of those kind of things, but, I’m sure a lot of people listening to this will be thinking, okay, how can I protect myself, having done some of it, but not all of it?

[00:34:58] Joe Dolson: This is definitely one of the areas where that gap in regulation is a real problem. In terms of responsibility that ultimately falls on the business owner, the website owner, or the product owner. But of course, the terms of your contract will vary and your specific liability to the outcome of your product might vary.

And even in the most solidly constructed contract where you protect yourself, that doesn’t mean you couldn’t be sued for negligence. You know these things all revolve around. If a company ends up having to pay damages of $7 million because of an inaccessible website, it’s very reasonable to think they’re gonna go back to the people who they hired to work on that website and be like, we are not happy. I think that’s an extremely justified position to be in. So I think everybody needs to take a piece of this responsibility.

I know for a fact that, in the Ontario law, the AODA, they do explicitly specify that everything on the website has to be accessible, including third party products that you are using. So a common problem in a lot of websites that I’ve audited, you know, it’s a nonprofit, they’ve got a great accessible website, but they’re using this client relationships, module, a CRM to take their donations, and it’s a mess.

And you’re like, okay, this is an absolutely key part of keeping your organization operating, is getting these donations working and that’s not accessible. So you really do have a problem there. And that’s a third party application. You don’t have any direct control over it. You can’t directly fix it, and I think that’s a marketplace problem. Where all of these elements within the overall picture have to be thinking about what their responsibility is.

[00:36:50] Nathan Wrigley: You’re obviously very keen on this. And I’m just wondering if this is becoming an industry. In other words, a few years ago, we didn’t have SEO experts. Well, quite a long time ago now, but let’s say 20 years ago, there was no such thing as an SEO expert. It just, wasn’t a thing. Now there is. There’s people who you would hire in because you want to take over the SEO and give it to somebody else. And that’s now their responsibility.

Is there a growing collection of people like yourself, who you can hire in to examine and look, so you’re not relying on the tools, the automated tools. You’re really getting a, a human being in to do the real work, and yeah, is there a career there?

[00:37:30] Joe Dolson: Oh, absolutely. It is actually a huge growing market. I think the growth of the accessibility consulting and testing market is pretty high. I don’t know what it is right now off the top of my head, but it’s a growth market with no question.

And as somebody who’s been in accessibility for almost 20 years, there’s always been an industrial market for accessibility. 20 years ago, it was almost exclusively in government, universities, higher ed, that sort of area. And it has been growing very rapidly. There are a lot of large companies now that they exclusively provide accessibility consulting. There’s actually been a lot of consolidation and acquisition within the accessibility space. So there’s no question that this is absolutely a major career. It’s a market where if you engage in some training and accessibility, there are jobs to be had. They are all hiring, and this is because it has grown enormously in the last four or five years,

[00:38:31] Nathan Wrigley: Which brings me to nearly my last question, and that is, imagine that we’re working for a large agency and we are employed by a boss who, how to put this, does not care about the last half an hour’s conversation that we’ve had. And just simply wants to ship things as quickly as possible, and obviously what you are proposing is not as quickly as possible. There’s other work that needs to be done on top of that. So we could hire out, we could find somebody such as yourself, who’s able to guide us with our, your expertise. But, what do we say to those bosses? How do we persuade them that, not only does this matter, but it’s essential?

[00:39:08] Joe Dolson: So I think, you know, some people are unpersuadable. There are always going to be a group of people for whom this is simply not, not something they are going to choose to care about. And those people will ultimately only be persuaded by legal action. And so when their company gets sued, they will have no choice but to deal with that. But operating on the assumption that we’re working with somebody who at least is willing to listen to reason and to, justifications about why this needs to be done.

There are a lot of arguments in favor of it, in terms of the fact that it makes websites easier to use. It makes processes easier for customers. So there’s a, there’s an acquisition aspect. There’s a sales benefit. Just making things easier to use, making things possible to use by more people.

It’s an estimate of around 15% of the world population has some form of disability that could impact their experience on the web. And a lot of that is in cognitive impairments, where they might have problems with distraction, or lack of focus, short term memory loss, and all of those people are going to benefit enormously from the same kinds of principles that go into web accessibility.

And so on a, on a marketing argument, the very fact that by implementing accessibility, you can increase your potential market by 15% is something that should be relevant. I think there is a perception sometimes that people with disabilities aren’t a market with money to spend. That’s a bias that’s coming through things like, the social security programs for supporting people with disabilities.

But the fact is, in this era the percentage of people with disabilities who are able to be gainfully employed is rapidly increasing because the digital marketplace takes away a lot of the barriers. You don’t have to necessarily travel to your job, which might be very difficult if you are visually impaired. Or if you have problems with distraction in an environment, or you just need to be able to get away from over stimulation. So

that market is increasing. I think, I think it’s the US number right around now. I happen to do a presentation on Thursday morning about accessible advertising. So a lot of these numbers are things that I’m remembering from my presentation two days ago, that the estimated buying power of the US disability, people with disabilities, is around 350 billion. But an awfully high number of products cannot be purchased by those people, because they’re not accessible. There’s an awful lot of people with disabilities where I buy from this company. Why? Because it’s the only one I can.

[00:41:58] Nathan Wrigley: That is absolutely fascinating. And it really speaks to the question that I asked. If you have a boss who doesn’t care, potentially this is the quickest route to somebody caring. There is a market, it’s a growing market. You can be more profitable by making these tweaks.

Final question if that’s okay? We’ve talked about a lot. There’s probably gonna be a lot of confusion about where do I go, how do I find out more about these things? And you’ve sent me, we had a little shared show notes, and you’ve sent me a bunch of links. It’s gonna be difficult for us to spell them all out. I will put every link in the show notes and hopefully get them done correctly. Do you just wanna say something about the best places, the most reliable, the quickest wins, if you like that you have come across where people could? I don’t know, two or three or four of them that you’re happy to share.

[00:42:41] Joe Dolson: So yeah, I mean the list of people I’ve mentioned, they all have unique perspectives and great information. I always recommend when you’re trying to get the current best practices on how things really work and what is, what support is available for a particular interaction interface. I like to go to Adrian Roselli. He’s very, very thorough researcher on accessibility issues. And one of the best things about what he publishes is that he routinely updates things. So his website does not have stale content.

I shouldn’t say that absolutely. I haven’t read everything on his site. It might have stale content, but I’m not aware of it. So that’s a great place because you can trust that it’s going to be current and maintained and is very thorough.

I also like Haydon Pickering and Scott O’Hara. That might be O’Hara. I honestly don’t know. They both do a lot of nitty gritty experimental of, this is how you use these various accessible interactions. They’re great resources. And then there’s a general website, it’s the A11Y project, the accessibility project. And that publishes articles by a lot of very experienced accessibility practitioners who’ve been around for a long time, who are new to the industry, but writing really solid information about how things work.

And then of course there’s the actual WCAG documentation. There’s a lot of information from the web accessibility initiative, the WAI working group, and they have an enormous amount of information about just general, what it means to be accessible and what an accessible interface looks like.

[00:44:25] Nathan Wrigley: Overlays.

[00:44:26] Joe Dolson: Ha, yes.

[00:44:27] Nathan Wrigley: Overlays have cropped up. Essentially what we’re dealing with here is a, click a button, I will solve all of your website accessibility needs. That sounds too good to be true. It sounds too simple to be able to install something, let’s say it’s a plugin or a piece of JavaScript or whatever it may be, and to say to yourself, I’m done. I am compliant. I’ve done all of the things by installing some small bit of code. Tell me your thoughts about this.

[00:44:54] Joe Dolson: Well, you know, if things seem too good to be true, it might be because they’re false. And that is absolutely the case with overlays. If an overlay is claiming, I’m going to solve your problems, you don’t need to think about anything else, you are now compliant, that’s because they’re lying to you. Flat out lying to you. Because what overlays are is they’re kind of a side effect of the accident chasing, legal thing. They’re a reaction of, oh, we have all this AI. We can solve things. We can find all these problems. It’s amazing. This is fabulous. But they can’t, because the problems are vastly more complex than they actually think they are.

So many things simply, you can’t even test to identify the problem, let alone fix it. So overlays are basically just a disaster.

[00:45:44] Nathan Wrigley: Is there any scenario in which they represent a decent bridge? In other words if, if you just click that button, get that overlay on there, and then begin the good work that you’ve described during the podcast, all the other things that you can do. Is there any scenario where that could be recommended? Knowing that it was the temporary kludge.

[00:46:02] Joe Dolson: Mostly, no. Now I will say that’s a no in terms of any of the really major overlay vendors, because for the most part, they are actually going to make your website worse. There are certain of those vendors who will absolutely, definitely make it worse. And there are browser extensions that have been marketed directly to the disability community for the sole reason of disabling these overlays because of the problems they cause for people with disabilities.

There are some extremely narrow categories where an overlay can bridge that, and a lot of the major accessibility corporations as part of their work, they will build an overlay, a custom overlay, which specifically deals with specific problems on your website. And that’s going to be in cases where the process to actually get the backend code updated is too burdensome, and they need something fast. But it’s only gonna solve a tiny fraction of those problems.

That should be something that’s custom, that’s targeted. I have a plugin, WP Accessibility. It includes some overlay aspects within it, but they are very targeted because they are targeted at specific things that are known to happen with WordPress or with WordPress themes, and they have known answers.

And even then, I wouldn’t say that’s something that guaranteed to fix everything. It could still cause problems. And you shouldn’t keep it installed and operating in that manner any longer than you absolutely have to, because fundamentally what you need to do is get the fix in place But these big commercial overlays are just horrendous. They make things worse, period.

[00:47:44] Nathan Wrigley: There was one further question. Sorry, I was sneaking this one in right at the end. I also asked you to recommend a community that you thought was worth hanging out in, because that’s often a way to just sort of speed up the process. You find some friends in there and they help you and they point you in the right direction. So, you’ve mentioned one here. Do you just wanna tell us about that?

[00:48:01] Joe Dolson: So there’s a Slack community for web accessibility professionals. It’s web-a11y.slack.com, and there’s about 10,000 members of that Slack organization. And it’s a great place to ask questions, look for advice, read what other people have done, search for past conversations on various topics. It’s a pretty large Slack. It’s very active. It’s kind of the place where the community mostly hangs out I would say.

[00:48:32] Nathan Wrigley: And should anybody wish to find you Joe, off the back of this. If you’re willing to share, what are the best places to get in touch with you?

[00:48:39] Joe Dolson: I’d say the best places for me, you can find me on Twitter @joedolson, J O E D O L S O N. You can find me in the WordPress Slack, also Joe Dolson. Pretty much anywhere I am, you’ll find me as Joe Dolson.

[00:48:54] Nathan Wrigley: Thank you very much for joining us on the show.

[00:48:56] Joe Dolson: Thank you. Thanks for having me.

On the podcast today we have Joe Dolson.

Joe is a WordPress plugin developer, a core committer, and a web accessibility consultant. He’s part of the Make WordPress Accessible team, the team dedicated to improving accessibility in the WordPress ecosystem.

His recent presentation at WordCamp US entitled ‘Finding and Fixing the Six Most Common WCAG 2 Failures’, highlights some of the key areas where websites are not as accessible as they should be. The areas we discuss are:

  • low contrast text
  • missing alternative text
  • empty links
  • missing form labels
  • empty buttons
  • missing document language

Joe explains what each of these problems are, both in terms of how they can be fixed, as well as what people with accessibility requirements might experience when they visit your site.

We talk about how you can equip yourself with the tools that you need to diagnose these issues, and online resources you can use to discover more about website accessibility.

It’s Joe’s opinion that you’re better off making a start right now, carrying out incremental changes rather than attempting to solve every single problem that your website might have. Begin the journey and take it one problem at a time.

We also chat about the fact that there’s an ever growing legal compulsion to make websites follow accessibility guidelines. Lawsuits are going through the courts with greater regularity, so now might be the time to look into this topic.

That being said, Joe cautions against the use of tools which purport to solve your accessibility issues with minimal effort. A variety of pop-up solutions have emerged onto the market which claim that they can make your site compliant with almost no effort. Joe is adamant that these promises are almost always false and that there’s real work to be done on each website as they’re all unique and have unique problems to solve.

Typically, when we record the podcast, there’s not a lot of background noise, but that’s not always the case. Over the coming weeks, I’ll be bringing you recordings from a recent trip to WordCamp US 2022, and you might notice that the recordings have a little echo or other strange audio artefacts. Whilst the podcasts are more than listenable, I hope you understand that the vagaries of the real world were at play.

Useful links.

by Nathan Wrigley at September 28, 2022 02:00 PM under podcast

Matt: Tumblr Updates

Tumblr launched Community Labels yesterday, which allows consistent tagging of addiction, violent, and adult content, and for people to hide, blur, or show that content. It’s gone pretty well so far. We’ve still been getting a lot of questions if it’s going to be free-for-all with adult content again, and the short answer is no, but the longer answer is covered in Why “Go Nuts, Show Nuts” Doesn’t Work in 2022.

If you haven’t tried out Tumblr in a while, check it out. Lots of improvements the past few months, and it can be a refreshing alternative or add-on to your online social life. And get your friends on it too!

by Matt at September 28, 2022 09:40 AM under Asides

Do The Woo Community: Thoughts on Translating the WooCommerce Plugin

We share some thoughts on how to get started with WooCommerce translation and some of the challenges behind it.

>> The post Thoughts on Translating the WooCommerce Plugin appeared first on Do the Woo - a WooCommerce Builder Community .

by BobWP at September 28, 2022 09:00 AM under Site Builders

WPTavern: WooCommerce Blocks 8.6.0 Introduces Cross-Sells Products Block

WooCommerce Blocks 8.6.0 was released yesterday with support for a new block that displays cross-sells for products that are based on the current product in the customer’s cart. For example, if a customer is purchasing a new gardener’s kit, the store may cross-sell gardening gloves as a complementary product.

This is a new feature is only available to users in the cart, as the idea is to catch the customer at the moment of buying and encourage them to purchase additional products. These are not simply best-selling products but rather are carefully curated to be specific to the item in the cart.

Cross-sells will show up beneath the cart’s contents automatically after the store owner identifies them in the product’s “linked products” setting. At the moment, cross-sells are limited to two rows of three products.

Cross-sells show up near the bottom of the cart page before the customer clicks to checkout. This seems like it is squeezed into a crowded place as an afterthought. If you want to make the cross-sells more prominent or change where they appear on the page, it is possible but requires a few extra steps.

WooCommerce Blocks is like the Gutenberg plugin for WooCommerce – it’s a feature plugin that serves as a place to iterate and test new blocks, and get access to bleeding edge features. With this plugin installed, you can enable the block-based cart by deleting the cart shortcode on the cart page and adding the Cart block.

Cross-sells now appear in the block-based cart but it is locked in place and cannot be moved up or down on the page. If you want to customize this block further, you must uncheck the boxes that are disabling movement.

After testing the Cross-Sells block, I found that it is still very limited in how it can be customized. The current experience of this block seems more like a placeholder and it could definitely benefit from more customization options, such as background color options, width adjustment, and the ability to change how the individual products inside the box are displayed. Right now it only has one option to set the number of cross-sells products to display. I was able to move the block to the top of the cart page but could not do much more with it.

The WooCommerce team has requested feedback on the new block and will continue to iterate on it. Version 6.8.0 of WooCommerce Blocks also adds half a dozen fixes and improves compatibility with WooPay.

by Sarah Gooding at September 28, 2022 04:06 AM under woocommerce

WPTavern: WooSesh Publishes Schedule Ahead of Virtual Event October 11-13, 2022

WooSesh, a virtual conference for WooCommerce professionals and store builders, has published the schedule for the upcoming three-day event beginning on October 11. This year’s lineup includes 24 speakers from across the WooCommerce ecosystem, including engineers, product managers, sales directors, and WooCommerce core developers.

Each day of the event has a theme with sessions running from 12PM – 4PM EST. WooCommerce CEO Paul Maiorana will deliver the keynote address on Day 1, and the subsequent presentations will feature topics focused around where WooCommerce is going and how to improve sales.

Day 2 will be dedicated to automation, personalization, and expanding WooCommerce. This will include topics like “Think like a Product Manager When Launching Your Store” and more technical sessions such as “The Journey to Enterprise Headless WooCommerce.” Attendees will learn how to maximize retention with customer-controlled subscriptions, how to clone or migrate a WooCommerce shop, and more.

Day 3 will shift focus to speed, security, integrations, and stability, featuring sessions on improving product variations, how to fix performance issues, and how to work with WooCommerce REST APIs. Each day will recap with the “Do the Woo” podcast, produced by Bob Dunn.

Registration is still open and it’s free to attend. The event will have topics spanning every aspect of working with WooCommerce – from store management to product development to marketing. Tickets include access to all presentations and workshops as they are being broadcast live, the WPSessions Slack for event Q&A, and virtual swag from sponsors.

by Sarah Gooding at September 28, 2022 01:29 AM under woocommerce

September 27, 2022

Post Status: When and When Not to Use Headless WordPress

Keanan Koppenhaver explains over at WP Mayor: When and When Not to Use Headless WordPress:

If you have a strong frontend team that’s comfortable interfacing with APIs and is used to communicating changes and working with more distributed systems, then it might make sense for them to focus on the frontend of the site while a separate team works on the actual WordPress piece.

However, if you’re more of a solo freelancer or don’t have a lot of experience in more distributed systems, version control, deployment, etc, it might make sense to stick with a more traditional WordPress setup.

This is the best, briefest explanation I've seen of why Headless WordPress matters and who it matters to:

Headless WordPress can be a powerful paradigm that allows you to leverage modern technologies and bridge the gap between an editorial experience that content creators are familiar with, while still being able to use some newer tech that hasn’t come to the WordPress ecosystem yet.

A lot of writing about headless has focused on the technical “what” question. The when, why, and who questions matter much more.

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 27, 2022 08:37 PM under Headless

BuddyPress: Let’s talk about us, BuddyPress!

First, the facts.

After reaching a result of ~245k WordPress sites using actively BuddyPress at the end of 2019, the “active installations” statistic (the one which is displayed in the sidebar of our plugin’s page on the official WordPress Plugin Directory), has been decreasing progressively and recently fell just below 200k.

As the Plugin directory uses ranges to simplify the “active installations” statistic, we’re no longer in the 200k+ category but felt into the 100k+ one.

-19%

That’s the BuddyPress usage negative growth between the end of 2019 and today.

Meaning?

In short, some users don’t use community features on their WordPress site anymore or, more likely, fewer and fewer users are using BuddyPress to power their community site.

While such negative growth can lead to bankruptcy when you’re running a business, it does not mean maintaining our plugin is under immediate threat. You can count on the BuddyPress core team’s passion to carry on working on fixing bugs and improving features.

Let’s come together and reverse the trend!

Confronted by extraordinary difficulty, people from a family, a tribe, a team, a community, a company, a country, a continent, earth, temporarily forget about their individual need or personal feelings and unite together to find the best way to deal with this difficulty. This is happening because we know that if everyone focuses on a general benefit, we’ll have a better chance of achieving that benefit than if each of us tries to satisfy our own goals.

I believe the English quote for this idea is “In unity there is strength“.

More than ever, BuddyPress needs you to contribute to beta testing, support, documentation, translations and, of course, code.

As a start, we’d love to hear your voice about this simple question:

In your opinion, what is the most important thing that BuddyPress is missing?

Please, tell us about it by replying to this forum topic. Feel free to talk about every aspect of the project and to suggest ways to do better. If you could then take an extra step and share the link of this post or this topic with your friends, that would be awesome. Thanks in advance for your help 😍.

We (the BuddyPress software & community) are 14 years old. We were the first plugin to extend WordPress with community features, giving users a free and open source alternative to commercial “Social Media” (social network companies whose end goal is to sell advertisements based on your data). 

With WordPress and BuddyPress: you keep the freedom to share, data ownership and the control of every aspect of your community site. The BuddyPress core team is committed to preserving this free and totally open source tool for anyone.

by Mathieu Viet at September 27, 2022 07:52 PM under feedback

WordPress.org blog: WordPress 6.1 Beta 2 Now Available

WordPress 6.1 Beta 2 is now available for download and testing.

This version of the WordPress software is under development. Please do not install, run, or test this version of WordPress on production or mission-critical websites. Instead, it is recommended that you test Beta 2 on a test server and site. 

You can test WordPress 6.1 Beta 2 in three ways:

Option 1: Install and activate the WordPress Beta Tester plugin (select the “Bleeding edge” channel and “Beta/RC Only” stream).

Option 2: Direct download the Beta 2 version (zip).

Option 3: Use the following WP-CLI command:

wp core update --version=6.1-beta2

The current target for the final release is November 1, 2022, which is about five weeks away. 

Additional information on the 6.1 release cycle is available.

Check the Make WordPress Core blog for 6.1-related developer notes in the coming weeks detailing all upcoming changes.

Keep WordPress bug-free – help with testing

Testing for issues is critical for stabilizing a release throughout its development. Testing is also a great way to contribute. This detailed guide is an excellent start if you have never tested a beta release before.

Testing helps ensure that this and future releases of WordPress are as stable and issue-free as possible. Anyone can take part in testing – especially great WordPress community members like you.

Want to know more about testing releases like this one? Read about the testing initiatives that happen in Make Core. You can also join a core-test channel on the Making WordPress Slack workspace.

If you have run into an issue, please report it to the Alpha/Beta area in the support forums. If you are comfortable writing a reproducible bug report, you can file one on WordPress Trac. This is also where you can find a list of known bugs.

To review features in the Gutenberg releases since WordPress 6.0 (the most recent major release of WordPress), access the What’s New In Gutenberg posts for 14.1, 14.0, 13.9, 13.8, 13.7, 13.6, 13.5, 13.4, 13.3, 13.2, and 13.1.

This release contains more than 350 enhancements and 350 bug fixes for the editor, including more than 300 tickets for WordPress 6.1 core. More fixes are on the way in the remainder of the 6.1 release cycle.

Some highlights

Want to know what’s new in version 6.1? Read the initial Beta 1 announcement for some details, or check out the product walk-through recording.

What’s new in Beta 2

Here are some updates since last week’s Beta 1 release:


A haiku for Beta 2

WordPress six-point-one,
Please help test Beta 2 now.
Best release ever.


Thank you to the following contributors for collaborating on this post: @dansoschin, @robinwpdeveloper, @webcommsat, @jeffpaul, and @cbringmann.

by Jonathan Pantani at September 27, 2022 06:12 PM under releases

Do The Woo Community: Stories of Translation, Community and Sustainability with Vachan, Maja and Simon

Stories of Translation, Community and Sustainability with Vachan, Maja and Simon

>> The post Stories of Translation, Community and Sustainability with Vachan, Maja and Simon appeared first on Do the Woo - a WooCommerce Builder Community .

by BobWP at September 27, 2022 09:45 AM under Woo Builder Stories

WPTavern: Molten: A Free WordPress Block Theme for Restaurants

Molten is a new block theme from first-time WordPress.org theme author Paul Truong, designed for chefs and restaurateurs to showcase their work. The theme puts the spotlight on food photography offset with bold typography featuring the Playfair Display font for headings and Source Sans Pro for paragraph text.

Truong is working on setting up a marketing site for the theme so there is no demo at this time. One drawback is that it does not include any full-page patterns where you can quickly build a homepage or menu page without having to think about how the design should go together. You will have to rely on your own sense of design but Molten comes packaged with ample patterns for building pages.

Molten has four different hero patterns, three “coming soon” patterns, and six “call to action” patterns in various layouts (media and text, full width cover with text and button, and three columns with images and content). The theme also comes with a large gallery block pattern and multiple location pattern designs.

There’s almost nothing worse than a restaurant website that makes you download a PDF menu. It’s not mobile or SEO-friendly, and downloading a separate file is a terrible user experience. Restaurateurs have traditionally used PDFs because it’s easier to update it by uploading and replacing the old files. It’s also easier to design it to approximate the printed menu. Blocks can make it easier for restaurants to abandon this practice of using PDFs. A block-based menu can be quickly edited and expanded as necessary without messing with uploading any files.

Molten includes four Menu block patterns with different layouts for wine lists, dishes, and pricing.

Molten packages nine templates and five template parts for users who want to dig into full-site editing. There are multiple light and dark footer and header designs, search, archive, a completely blank template, and more. It includes four style variations which can significantly change the mood of the website.

Overall, the theme has just about anything a restaurant or “coming soon” establishment may need in terms of layout and design. The default color palette has a simple black and white typography-forward design that puts the emphasis on the food. Molten is available for free from the WordPress Themes Directory.

by Sarah Gooding at September 27, 2022 04:03 AM under free wordpress themes

September 26, 2022

Do The Woo Community: WordPress Translation Day

Every year WordPress has a Translation Day. Get involved and think about translating the WooCommerce plugin.

>> The post WordPress Translation Day appeared first on Do the Woo - a WooCommerce Builder Community .

by BobWP at September 26, 2022 12:43 PM under Do the Woo News

September 24, 2022

Gutenberg Times: Accessibility-ready Block Themes, Image AI for WordPress, WordPress 6.1 Beta – Weekend Edition 230

Howdy,

And so it begins. The first Beta release for WordPress 6.1 is out. The test team compiled an excellent call for testing with all the instructions on the features coming to a WordPress instance near you. Following it, would be a high-impact way to contribute to the open-source project, if you are searching for opportunities like that.

The rest of the news you’ll find below.

Yours, 💕
Birgit

Developing Gutenberg and WordPress

WordPress 6.1

WordPress 6.1 Beta 1 Now Available – It’s going to be another great release with some great new features for the block editor, the site editor and themes developers and also various new ways to extend the user experience for plugins and themes. To learn more about the release team and schedule for WordPress 6.1

Brian Alexander and team published the post Help Test WordPress 6.1 with instructions on how to set up your test environment, a list of features to test with details instructions. They also have a few testing tips for you. Going through the test scenarios, is actually a great way to learn about the new features fast, and contribute to WordPress.

🎙️ New episode: Gutenberg Changelog #73 – Gutenberg 14.1, next default theme, design Tools in WordPress 6.1 with special guest, Channing Ritter, and host Birgit Pauli-Haack

Theme Development for Full Site Editing and Blocks

Block-Based Template Parts: A Happy Medium Between Classic and Block Themes
I was one of the early adopters of the block editor as a developer. Despite the flak that the Gutenberg plugin was catching before it was merged into core WordPress,…

 “Keeping up with Gutenberg – Index 2022” 
A chronological list of the WordPress Make Blog posts from various teams involved in Gutenberg development: Design, Theme Review Team, Core Editor, Core JS, Core CSS, Test and Meta team from Jan. 2021 on. Updated by yours truly. The index 2020 is here

Nathan Wrigley interviewed Rich Tabor, early block adopter, now design director at Extendify in the 296 episode of the WPbuilds podcast: 296 – Gutenberg, FSE, Block Themes (Variants), Blocks, Rich Tabor on the whole lot

“Fun aside: I started, and nearly finished, Wei on the flight back from WordCamp Europe. A couple years ago, this would’ve taken weeks — at least.” Rich Tabor said. You can find Tabor’s block themes, Wei and Wabi, in the WordPress repository.


On the Torque Social Hour, Mike McAlister explains Why WordPressers should start building real sites with FSE.


Two new tools are available for faster development for the WordPress block editor. Victor Ramirez and the team of Abstract Agency have been working on two tools and made them available for developers on WPTests

The Block Unit Test in an update on Rich Tabor’s early and now closed plugin. After you install the plugin is adds a page to your site with every Gutenberg block and their variations, so you can ensure your theme fully supports the latest version of the block editor.

The Theme Test Data plugin make the import and export of the WordPress Theme Team Test Data easy.

A word of caution, these are early stages on the plugins, but they are already saving you a lot of time, testing themes for the block editor.


The resources for the Build your First Block Theme workshop, held by Daisy Olsen at WordCamp US are now available for any developer interested in following this workshop autonomously. Repo and slides.


I use Full Site Editing in WordPress for the first time is the recording of Mike Wilkinson’s experience of first using FSE and his thoughts on it.


Carolina Nymark explains How to add box-shadows with theme.json to your theme. The ability to add box-shadows to blocks is a new feature in Gutenberg 14.1 and in the upcoming WordPress 6.1 release, but you can only enable theme through the theme.json file. As this is the first version, they don’t have any interface representation in the site editor yet.

Need a plugin .zip from Gutenberg’s master branch?
Gutenberg Times provides daily build for testing and review.
Have you been using it? Hit reply and let me know.

GitHub all releases

Plugins, Themes, and Tools for #nocode site builders and owners

Sarah Gooding reports that Twenty Twenty-Two Is the First Default Block Theme to Get Tagged as Accessibility-Ready

“The accessibility-ready tag can be applied to themes in the directory that have successfully completed an accessibility audit for the minimum requirements established by the Themes team. Theme authors are encouraged to exceed those requirements, which are laid out in a tiered set of required and recommended guidelines.” Gooding wrote.

She also found two more block themes with the accessibility-ready tag:

  • Jace by Themes Team contributor Carolina Nymark, and 
  • W3CSSPress by Matteo Marchiori

After BrightMode, Brian Gardner also submitted Design Mode theme to the WordPress Directory. He described it like this: “It is stylish and sophisticated, and the minimalistic design is perfect for freelancers and agencies looking to showcase their services and work.”

Sarah Gooding has the skinny for you in Design Mode: A Free Portfolio Block Theme Designed for Freelancers and Agencies

AI-generated images for WordPress

Screenshot of two plugins offering AI-generated images for WordPress.

My exploration into Image AI and WordPress continues. A few days ago, I read Sarah Gooding’s article New Block Diffusion Plugin Creates AI-Generated Images from Text Prompts, covering a new plugin by Kevin Batdorf that uses the open-source Stable Diffusion AI and brings it to the content creators using WordPress. The plugin is called Block Diffusion. “This plugin interfaces with the Replicate API and allows you to run open-source models via their cloud API. Add the block to a page and select a model to enter your API token.”

I tested it against the plugin, I have been using: Imajinn – Magical AI Image Generation like DALL·E. The latter gives me more images, allows for more style settings, and offers improvements like additional variations or face correction, similar to Midjourney’s creation process.


Don’t want to miss the next Weekend Edition?

We hate spam, too and won’t give your email address to anyone except Mailchimp to send out our Weekend Edition

Thanks for subscribing.

by Birgit Pauli-Haack at September 24, 2022 12:55 PM under Weekend Edition

WPTavern: New Prototype Runs WordPress in the Browser with No PHP Server

Automattic-sponsored core contributor Adam Zielinski published a demo today of WordPress running in the browser with no PHP server. This is accomplished using WebAssembly (WASM), a format for a stack-based virtual machine that enables deployment on the web for client and server applications, and Emscripten, an open source compiler toolchain to WebAssembly. It’s not stable yet but the concept is intriguing, as it opens up a world of potential use cases.

image source: demo from wordpress-wasm repo

The project is available on GitHub and Zielinski briefly explained how it works:

  • PHP is compiled to WASM with Emscripten
  • WordPress is packaged into a data bundle
  • A service worker traps HTTP requests and re-routes them to WordPress

The project uses the wp-db-sqlite plugin to run WordPress with SQLite, as WASM doesn’t support MySQL.

Zielinski detailed some possible applications for running WordPress in the browser, which he said could “transform learning, contributing, and using WordPress:”

  •  making WordPress handbook code samples runeditable (early preview)
  • providing an in-browser IDE to assist new contributors without having without having to set up a local development environment (early preview)
  • creating an in-browser IDE for testing code on different WordPress, PHP, and Gutenberg versions
  • scaling WordPress up by spinning up many tiny self-contained WASM instances directly on the edge servers.
  • embedding a demos of a plugin, pattern, or theme (example: wpreadme.com)
  • importing an existing WordPress website into WASM runtime to create a staging website

The prototypes are in their very early stages and have a few limitations right now. The block editor works but not the site editor, and the sites in the browser cannot communicate with WordPress.org to fetch plugins and themes.

Zielinski is eager to recruit contributors to help build out this vision and make it a reality. It’s quite an undertaking but the benefits contributors and developers stand to gain from having the ability to instantly spin up an in-browser IDE for WordPress are enormous.

“Learning WordPress and writing code used to be separated,” Zielinski said regarding using Stackblitz to create more interactive docs. “Now they can be one and the same. From runnable code snippets to new, svelte-like docs formats, WebContainers + WebAssembly WordPress is an educational game-changer.”

For more technical details on how this works, check out Zielinski’s post and click through to the various demos. The repository for the project includes a pre-built demo that anyone can run with more instructions for building the assembly yourself.

by Sarah Gooding at September 24, 2022 03:50 AM under News

September 23, 2022

WPTavern: Twenty Twenty-Two Is the First Default Block Theme to Get Tagged as Accessibility-Ready

After a seven-month long effort across multiple contributor teams, the Twenty Twenty-Two (TT2) default theme will be tagged as “Accessibility-Ready” when WordPress 6.1 ships in November. It is the first block theme to meet the requirements for gaining this distinction. During its development the theme was also tested and found to meet WCAG AA level accessibility requirements.

The accessibility-ready tag can be applied to themes in the directory that have successfully completed an accessibility audit for the minimum requirements established by the Themes team. Theme authors are encouraged to exceed those requirements, which are laid out in a tiered set of required and recommended guidelines.

It is important to note that themes tagged as accessibility-ready do not necessarily meet any level of formal accessibility requirements, as those measurements apply to content and cannot be applied to a theme.

Getting the tag added to Twenty Twenty-Two was delayed due to a few issues that required collaboration across teams. One of the important ones was the theme having multiple H1 headings per page. Although WCAG guidelines do not prohibit more than one H1 on a page, the accessibility-ready guidelines required no more than one H1 per page. Some participants in the discussion suggested that the requirements needed to change.

“The reason the theme accessibility-ready guidelines are stricter than WCAG is mostly for clarity: the guidelines were written to be easily testable and explicit,” Accessibility Team contributor Joe Dolson commented on the ticket.

“The point being that we couldn’t provide extensive accessibility training to theme reviewers, so we needed the rules to be as narrow as possible. As long as we update the guidelines in a way that still meets that criteria, I think it would be fine.”

The Themes and Accessibility teams reached a consensus on how the accessibility-ready tag will apply to block themes so contributors could move forward with adding the tag.

“We should keep in mind that a breakage to the accessibility of WordPress block output will impact all block themes, so those failures are quite serious, but as it stands now the theme meets all expected criteria,” Dolson said.

The WordPress Themes Directory currently has just 94 themes tagged as “accessibility-ready” and only two of them also have support for full-site editingJace by Themes Team contributor Carolina Nymark, and W3CSSPress by Matteo Marchiori. Twenty Twenty-Two will be joining them on November 1, 2022, the anticipated release date of of WordPress 6.1.

by Sarah Gooding at September 23, 2022 09:45 PM under accessibility

Post Status: First of the Independents

It's a great time for WordPress agencies and product companies of any size

Consolidation through mergers and acquisitions isn't the only big business story in WordPress. Partnerships are increasing too. Founders investing in founders. Product companies and agencies expanding their own ecosystems. Informal partnerships to protect common interests. There are a lot of ways to grow on your own terms in WordPress.

Estimated reading time: 3 minutes

Ever since the spike in big acquisitions of (mostly product-based) WordPress companies last year the space has had a “last of the independents” mood as (mostly product companies) wonder if they're all going to be caught up in large conglomerates — or left behind. (The latest acquisition was announced yesterday. Congrats to PublishPress!)

But that's not the only kind of deal happening in the industry. Far from it!

Look at the partnerships Atarim has forged with MainWP and now Rocket.net after a funding round from Automattic, Newfold, and Yoast‘s founders, among others.

WordPress founders investing in WordPress founders will grow the market without mergers thinning out the ecosystem's biodiversity. GridPane‘s founder and CEO Patrick Gallagher said their funding round was “incredibly company-friendly because we've retained 100% control of the business and its direction.”

Or take the Gravity Forms ecosystem cultivating its own extension and services market, encouraging members of their own team to start businesses in that space (way back in 2015) and then bringing them back under Gravity's wing years later.

There are a lot of ways to grow on your own terms in WordPress.

Not all partnerships are about the direct exchange of dollars either. At WCUS I had a number of conversations about informal partnerships between hosting companies to deal with security issues, fraudsters, piracy, and other potential spoilers in the commons.

It's a unique and powerful way to sustain the Open Web —

Independence through partnership.

Growth by traveling together.

This article was published at Post Status — the community for WordPress professionals.

by Dan Knauss at September 23, 2022 07:58 AM under Yoast

Follow our RSS feed: 

WordPress Planet

This is an aggregation of blogs talking about WordPress from around the world. If you think your blog should be part of this site, send an email to Matt.

Official Blog

For official WordPress development news, check out the WordPress Core Blog.

Subscriptions

Last updated:

September 30, 2022 06:45 PM
All times are UTC.