This week Daniel shares some resources for creating React Apps using Gutenberg Data, static WordPress sites with Eleventy, and a Figma to FSE workflow. Also a reminder to test and give feedback on fluid typography — and one cool tool: Programming Fonts.
Estimated reading time: 8 minutes
WordPress Development Around the Web
A glimpse of what’s going on in the world of development and design in the WordPress space.
Create your First App with Gutenberg Data
Are you struggling to understand how to work with React in WordPress? Automattic developer Adam Zieliński has put together a very nice tutorial to get you comfortable creating a simple React application and learning how to work with data. I know I’ve tried to learn React several times, but this was very succinct and explained the details in a way that made me realize the “why” for creating something like this.
Block Theme Builders: Figma to Block Theme
Last week I alluded to some folks working on finding a good workflow from Figma to FSE. This week there’s a webinar on one of those methods! Even if you can’t join, I’d encourage you to check it out later. This session is the follow up to a previous webinar, Block Theme Builders: Design in Figma, which showed how to use the Theme Template — something I did NOT know existed! Very exciting!!!
WordPress & Eleventy: Part 1 | Part 2
Have you ever wanted to try using WordPress to create a static site? Here’s a great walkthrough on how to do that from interaction designer and front-end developer Dana Byerly. They show us how to use WordPress with the static site generator Eleventy. I have to say, this was one of the easiest and most straightforward tutorials I’ve seen in a long time. Very well done! Also their site design is simply gorgeous and wonderfully accessible. Hat tip to Maciek Palmowski for the find!
Testing and Feedback for the Fluid Typography Feature
The Make WordPress team is looking for feedback on this new feature in Gutenberg. In case you’re not familiar, fluid typography will scale to the screen’s available room so it always looks good. It’s important that theme developers take a look and see how it might work. For instance, in the comments, Post Status member Mark Root-Wiley mentions that using
clamp might have some accessibility issues that need to be looked into further.
Each week we’ll feature one cool tool that can help make your life easier as a WordPress builder.
This website helps you test drive monospaced fonts for programming. My personal favorite for the past few years in VS Code and the terminal has been Fira Code, but using this little website I discovered JetBrains Mono, and I’m in love! 😍