Pinch of Yum
Pinch of Yum is a food blog that sees over 4 million visitors per month. I’ve worked on this site for the past year, mostly in creating new content editing experiences in the new React-powered Block Editor in WordPress.
See it live at pinchofyum.com.
Powerful content creation with new React tools
Pinch of Yum is a complete WordPress site – meaning WordPress powers the both the server-side rendering of the front-end and the content management in the editor. On Pinch of Yum, I’ve worked mostly in creating new editing experiences that enable content creators to quickly and easily build high-quality content.
One example of this is the “Top Recipes” pages. Content creators are able to add a new “Top Recipes” block with as many items as desired. Each item has dedicated areas for the recipe title, image, description, ingredients, and a link to the recipe.
When the page renders, any items that come from the
pinchofyum.com domain are included in a ItemList structured data block, which enables carousels in mobile search results for that recipe query.
The rendered page is very similar to the edit page, which makes for a very nice content creation experience.
See a live example of this here.
Modern design updates & templating
Pinch of Yum has been around since 2011, and it’s seen a number of design trends come and go. As changes become necessary to stay relevant, our designers create PSD mockups of new features or updated designs. I work with the designers to make sure the designs conform to the existing site standards, perform well on mobile, and provide a good experience for users overall.
Since joining the project, we style with Sass and compile it down to CSS using
grunt-postcss. When not writing CSS-in-JS, Sass is my preferred way to write CSS.
Pretty good performance
Performance has not been a focus of my work on the Pinch of Yum site, but when I find the time I do like to tinker with it. I pioneered the move to a better host in 2018, which resulted in a bit of a performance improvement and a lot of reliability improvement.