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: 36 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
⚠️ 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
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.
- New to me: W3.CSS is a good, free alternative to Bootstrap that's smaller, faster, and easier to use. TRY →
- rtCamp keeps improving WP Plugin Compare. Searching the whole WordPress.org plugin repository, you can find and compare up to four plugins by their attributes: author, keyword, number of active installs, review rating, support score, minimum WordPress version, tested WordPress version, and minimum PHP version. TRY →
- “After self-hosting my email for twenty-three years I have thrown in the towel. The oligopoly has won,” says Carlos Fenollosa. “Worse, Email deliverability is deliberately nerfed by Big Tech,” and “This doesn't only affect contrarian nerds.” Carlos offers a simple proposal where everyone wins. READ →
Each week we feature one cool tool that can help make your life easier as a WordPress builder.
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.
- 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!→