Simone Maranzana

4/ For BlockFlow, I'm planning to let you upload your own font version (optimized subset, variable or custom) instead of the defaults.
More flexibility at export time, less bloat.

3/ #WordPress Font Library handles this the same way. It doesn't compress multi-weight families into single files — each variant is separate.

The solutions are manual:
— Subset fonts to used characters
— Use a variable font

Theme json example of font families declaration

2/ Say you design with Inter font, but you use weights 300, 400, 600, 800, 900 and 400 italic.

That's 6 separate .woff2 files in your export. Now add another font family with 2 weights.

You're now shipping 8 font files and the user's browser downloads all of them by default.

WordPress font library interface

Right now BlockFlow exports themes with Google Fonts only, following WordPress's native approach to fonts.

This ensures consistency and compatibility, but inherits a design challenge: more font variants mean heavier exports.

The issue I'm dealing with right now. 🧵

I'm actively working on these gaps.
The goal is bridging design and code without manual intervention, making no-code workflows truly seamless.

3️⃣ Responsive behavior: Both #Figma and #WordPress lack native responsive design tools.

Updates across screen sizes need custom CSS, which limits true no-code design-to-site workflows.

Figma group control panel

2️⃣ Horizontal alignment: Figma default groups lack alignment controls.

BlockFlow defaults to center alignment during export, requiring manual adjustments in WordPress for left/right positioning.

1️⃣ Unit measurements: Figma uses only pixels, but web needs rem, %, vh.

BlockFlow converts px to rem for fonts and % for widths, but viewport units like vh for cover blocks aren't handled yet.

This means manual tweaks in WordPress for full-height sections.

As I build BlockFlow, the disconnect between #Figma's design system and #WordPress blocks creates challenges.

Here are the 3 technical limitations I've encountered so far. 🧵

Problem: every design is different, I don't want to force a single workflow. So I've started analyzing the #WordPress Blue Note community #Figma file to understand how to adapt to common patterns. Fewer forced patterns, more real designs, so let's see where this leads.

4/ It simplifies responsive design a lot. Still in prototype, but I'm excited about it.

WordPress theme.json export example for font sizes

3/ When you export the theme, the plugin generates the theme.json structure that WordPress needs for fluid fonts (automatically converting them to rem). WordPress takes care of the clamp() function automatically.

2/ Here's how it works. In the design tokens panel, you create a font size variable and set it as fluid with min and max values, this generates two Figma variables. Then apply that variable to text elements in Figma.

I've been experimenting with fluid typography in my BlockFlow prototype. The challenge: Figma doesn't support fluid font sizes, but WordPress does with clamp(). My solution: define min/max values in design tokens, let WordPress handle the rest. 🧵

BlockFlow converts structured Figma layouts into real WordPress block themes, not static HTML.

More than simple prototype you can actually extend with custom logic, plugins, and real content.

Block themes are more powerful than people give them credit for.

The goal isn’t to replace development, that’s unrealistic.

It’s about making design more portable, so developers can start from something real instead of rebuilding layouts from scratch.

BlockFlow theme json interface

I’m experimenting with new ways to reduce friction between Figma and WordPress block themes.

The handoff is still mostly manual, repetitive, and error-prone.

Image export is still rough around the edges (e.g. duplicate assets across artboards), something I’m actively thinking about, but still optional in the export process.

If you’ve worked on similar design → block workflows: where would this feel too strict, or not strict enough?

Variables aren’t strictly mandatory in design files. If an element isn’t explicitly linked to one, the export maps the raw value to the closest matching variable, mostly to avoid breaking less disciplined design systems.

A few people asked what the Figma-side setup looks like for this "#Figma to #WordPress" workflow, so here’s a quick snapshot.

The core configuration lives directly inside the Figma file: Blockflow creates standard Figma variables for the required options, so the setup travels always with the file.

Quick question on your side: when you say “build our components”, what do you mean exactly?
Are you thinking block patterns, custom blocks, or something else in your workflow?

Right now there are a few Figma plugins around, but most of them export toward non-native solutions (page builders like Elementor or proprietary setups).
That gap is actually why I’m exploring this problem, I haven’t seen anything focused on native block themes yet.

That’s great to hear.
I’m trying to understand where existing workflows break and what’s actually worth automating vs keeping manual.
Where does your team usually hit friction today when moving from design to block themes?

I’m experimenting with exporting a full #Figma file as a #WordPress block theme (templates, patterns, theme.json, fonts, assets).

I’m trying to understand what parts of the block-theme workflow are actually worth automating.

Feedback and thoughts welcome 🙂

With Full Site Editing maturing in WordPress,
do you still rely on Figma (or similar app) for theme design,
or has the Site Editor replaced it for you?

BlockFlow Pro – Figma to WordPress Block Theme Made with Tally, the simplest way to create forms.

For those using Figma: would you find it useful if you could export your whole Figma file as a WordPress Block theme (fonts & images included)?

I’m currently building this and testing ideas, If you’d like updates here’s the waitlist:

Create professional layouts with WordPress - Advanced Columns Built on the CSS grid foundation, the Advanced Columns plugin is the most powerful and flexible layout builder block for professional WordPress websites.

We're out with update 1.5.0:
👉 Subgrid functionality
👉 Grid layout for the Post template block
👉 Improved frontend rendering performance
👉 and more

#WordPress #Gutenberg #plugin #BlockEditor

Download ⬇️
advancedcolumns.com

👉 full changelog
advancedcolumns.com/...

This is huge! 🔥🔥

I suggest using @11ty.dev , and if you need a CMS, you can integrate Tina (tina.io) or something similar

Create professional layouts with WordPress - Advanced Columns Built on the CSS grid foundation, the Advanced Columns plugin is the most powerful and flexible layout builder block for professional WordPress websites.

We're out with update 1.4.4:
👉 Fixed an issue that occurred with nested columns block
👉 Fixed an issue that prevented the complete deletion of the license
👉 Minor bug fixes

#WordPress #Gutenberg #plugin #BlockEditor

Download here ⬇️
advancedcolumns.com