Blog

Behind the WordPress Block: Fueled.com’s Animated 3D Objects

on

One of the more ambitious design goals behind the new Fueled.com involved bringing to life animated 3D objects in the browser—without relying on WebGL or heavy, real-time rendering.

The solution was a custom animation system that simulates 3D using optimized image sequences, built leveraging WebP image formats, Motion.js, and Intersection Observer techniques. The final product offers smooth, high-quality animation that works reliably across devices and browsers.

Packaged within a custom Gutenberg block, editors can easily select from multiple 3D objects, customize styles with blend modes, and see a preview directly inside the WordPress editor.

I’ve published a deep dive article breaking down the path to the final product—from early experiments with videos and sprite sheets to lightweight image sequences and smart rendering logic to our approach to the custom WordPress editor block.

Read the full article on LinkedIn, and get in touch if you’d like help creating this kind of experience for your own digital properties.

Getting Basic Styles From Figma to WordPress in Minutes: A New Figma Plugin

on

At Fueled, we aim to close the gap between tools designers love and platforms developers trust, while automating repetitive busy work. That philosophy inspired the creation of the Figma to WordPress Automation: a new open source plugin for Figma that streamlines a tedious, time-consuming step that’s a part of every modern WordPress project.

This tool exports design tokens from Figma directly into a WordPress theme.json file, which defines a theme’s global design system—like colors, typography, and spacing—so styles are consistent and selectable in the content editor. This automation transforms what was once a tedious 10–15 hour task into a process that takes about an hour.

Read the full story on the Fueled blog.

Bringing Out 9to5Mac’s Dark Side

on

9to5mac Dark Mode Example

Brightly colored screens in low-light environments can keep people up at night, contribute to eyestrain, and even burn up battery life on newer devices with OLED displays. In recent years, all major operating systems — macOS, iOS, Windows, and Android — have added a dark-mode option. With this setting, the OS and any application that supports dark mode can switch from a light color scheme to darker tone, which offers UI personalization and reduces eye fatigue.

With all major web browsers now supporting the dark-mode setting, web developers can also serve either a light or dark theme, based on the user’s device setting.

Apple news site 9to5mac, a long-term client, added dark-mode support to its site just before the official release of iOS 13 last Fall — the first version of the iPhone operating system to offer dark mode.

Read More on Bringing Out 9to5Mac’s Dark Side

FanSided 250 Launches, Ranking The Top 250 Fandoms For 2019

on

FanSided 250

Last week FanSided published its annual FanSided 250, the ultimate ranking of the 250 best fandoms in the world, from celebrities and movie franchises to sports figures and more. While my New England Patriots didn’t rank as high as I think they should have (anything less than #1 for us is a disappointment), I am ecstatic to be part of the 10up team that collaborated with FanSided to bring the bold new FanSided 250 website to life.

“We’re thrilled with the look and feel of the FanSided 250. Working with 10up has been an extremely rewarding venture. Every aspect of the experience has been upgraded from previous years, and the FanSided 250 has never looked and operated better.”

—Michael Dunlap, VP of Corporate Communications & Business Development

Read More on FanSided 250 Launches, Ranking The Top 250 Fandoms For 2019

Get Started With Gutenberg

on • 2 Comments

Get Started with Gutenberg Books

I recently contributed an article to Get Started With Gutenberg, a free publication produced by Heart Internet. Jumpstart Your Gutenberg Designs With SketchPress provides a detailed tutorial on using SketchPress: a library of WordPress admin interfaces, symbols, and icons for use with the popular design toolkit, Sketch. With SketchPress designers can create high-fidelity mockups of custom blocks and other editorial interfaces for both Gutenberg and classic versions of the WordPress admin. SketchPress and other open-source projects from 10up are available on GitHub. You can pick up a copy of the book at WordCamp Europe or download the digital copy.

Nate Allen contributes to the WordPress Dashicon Library

on

Iconography design might seem an uncommon undertaking for a developer, but Senior Engineer Nate Allen recently saw an opportunity to make WordPress’s Dashicon library more inclusive. He took the initiative to tackle the design challenge himself, learning Adobe Illustrator in order to supplement the existing “businessman” icon with additional icons for “businesswoman” and “businessperson.” These icons, along with many more new icons, will be released with WordPress 5.2.

Nate’s determination to stretch his core skills and proactively contribute a creative, open source solution is a small but meaningful representation of the 10up way. Thanks for your dedication to the community and your craft, Nate!

Early Perceptions of the New WordPress Editor

on

Prior to the release of WordPress 5.0, I conducted a survey asking WordPress users with Gutenberg experience to offer their perspective on the new editor. The survey was conducted as part of a broader user-research effort designed to understand more about how content publishers view page-building and site-building tools, and how the new content editor matches expectations. This research was intended to explore the behaviors and opinions of people who had already tried Gutenberg. Updates to the new editor based on this research are being tracked on Github and MakeWordPress.org.

Read More on Early Perceptions of the New WordPress Editor

Testing the Gutenberg Publishing Userflow

on • 3 Comments

The WordPress Design Team recently had an in-depth conversation in Github about enhancing the publisher flow in Gutenberg. After watching Gutenberg go through several iterations since our last user test, I decided to try testing the current flow to see how well it was received by publishers. I hoped to identify friction or pain points in the Gutenberg authoring experience in the interests of helping refine the publishing flow.

Read More on Testing the Gutenberg Publishing Userflow

User Testing Gutenberg

on • 1 Comment

A new WordPress content editing experience—Gutenberg—is coming soon to WordPress core, and 10up’s User Experience team is eager to understand how it will impact the experience for content creators. As a starting point, I created a usability test to study the experiences of professional, digital content publishers who are used to writing stories in the current editor. Building on other Gutenberg usability tests that focused on re-creating a prescribed layout, I instead asked professional writers to produce the same kind of content they already produce every day: write a simple story.

The user test asked ten participants to complete the following prompt:

Write a news-style blog post about somewhere interesting you have visited. Please include the following elements in your post:

  • A title
  • A paragraph or two about the place
  • An image
  • An extra item such as a video or blockquote

These tests were taken with Gutenberg 2.9.2 (the current build at the time the test was created). As of this post, the current version is 3.0.1.

During the unmoderated test, participants described what they were thinking as they progressed through the task. Their words and screen movements were recorded with permission.

Userfeel Interface

Read More on User Testing Gutenberg