Sign in

Simone Maranzana

@simonemaranzana.com
77 followers 129 following 59 posts

Frontend developer and co-founder of justevolve.it and advancedcolumns.com

PostsRepliesMedia
Simone Maranzana @simonemaranzana.com · 18/03/2026
I can smooth some of those mismatches. Better mapping layers, smarter export logic, cleaner handling of edge cases. But there's a floor. Some gaps are structural. So the real question isn't "can I fix this?" It's "is a strong partial solution better than nothing?"
000
Simone Maranzana @simonemaranzana.com · 18/03/2026
I keep wondering: does BlockFlow need to be perfect to be useful? #Figma and #WordPress don't speak the same language. It's not a limitation I can code around. They prioritize different things, use different paradigms, sometimes lack the same tools entirely.
120
Simone Maranzana @simonemaranzana.com · 16/03/2026
4/ There are still edge cases to fix and block supports to improve, but the foundation feels right now. The workflow is starting to hold together in a much more solid way.
100
Simone Maranzana @simonemaranzana.com · 16/03/2026
3/ Export is more flexible now too: you can export individual blocks, pull out theme.json, export patterns, templates and parts separately, or batch export multiple selections together.
100
Simone Maranzana @simonemaranzana.com · 16/03/2026
2/ The UI rebuild is still ongoing, but the improvements are already noticeable. A big part of that work is keeping the tool understandable as more complexity builds underneath it.
100
Simone Maranzana @simonemaranzana.com · 16/03/2026
The last few weeks were mostly about workflow: BlockFlow can now read existing #WordPress configs through theme.json import, and it also supports pattern export.🧵
110
Simone Maranzana @simonemaranzana.com · 24/02/2026
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.
000
Simone Maranzana @simonemaranzana.com · 24/02/2026
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
110
Simone Maranzana @simonemaranzana.com · 24/02/2026
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.
Theme json example of font families declaration
100
Simone Maranzana @simonemaranzana.com · 24/02/2026
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. 🧵
WordPress font library interface
110
Simone Maranzana @simonemaranzana.com · 19/02/2026
I'm actively working on these gaps. The goal is bridging design and code without manual intervention, making no-code workflows truly seamless.
000
Simone Maranzana @simonemaranzana.com · 19/02/2026
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.
110
Simone Maranzana @simonemaranzana.com · 19/02/2026
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.
Figma group control panel
120
Simone Maranzana @simonemaranzana.com · 19/02/2026
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.
120
Simone Maranzana @simonemaranzana.com · 19/02/2026
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. 🧵
120
Simone Maranzana @simonemaranzana.com · 16/02/2026
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.
030
Simone Maranzana @simonemaranzana.com · 11/02/2026
4/ It simplifies responsive design a lot. Still in prototype, but I'm excited about it.
000
Simone Maranzana @simonemaranzana.com · 11/02/2026
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.
WordPress theme.json export example for font sizes
110
Simone Maranzana @simonemaranzana.com · 11/02/2026
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.
110
Simone Maranzana @simonemaranzana.com · 11/02/2026
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. 🧵
140
Simone Maranzana @simonemaranzana.com · 30/01/2026
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.
000
Simone Maranzana @simonemaranzana.com · 30/01/2026
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.
100
Simone Maranzana @simonemaranzana.com · 30/01/2026
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.
BlockFlow theme json interface
120
Simone Maranzana @simonemaranzana.com · 28/01/2026
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?
000
Simone Maranzana @simonemaranzana.com · 28/01/2026
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.
100
Simone Maranzana @simonemaranzana.com · 28/01/2026
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.
110
Simone Maranzana @simonemaranzana.com · 27/01/2026
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?
000
Simone Maranzana @simonemaranzana.com · 27/01/2026
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.
110
Simone Maranzana @simonemaranzana.com · 27/01/2026
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?
100
Simone Maranzana @simonemaranzana.com · 26/01/2026
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 🙂
020
Simone Maranzana @simonemaranzana.com · 19/01/2026
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?
010
Simone Maranzana @simonemaranzana.com · 14/01/2026
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:
tally.so
BlockFlow Pro – Figma to WordPress Block Theme
Made with Tally, the simplest way to create forms.
130
Reposted by Simone Maranzana
Advanced Columns @advancedcolumns.com · 03/04/2025
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/...
advancedcolumns.com
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.
022
Simone Maranzana @simonemaranzana.com · 17/01/2025
This is huge! 🔥🔥
020
Simone Maranzana @simonemaranzana.com · 06/01/2025
I suggest using @11ty.dev , and if you need a CMS, you can integrate Tina (tina.io) or something similar
020
Reposted by Simone Maranzana
Advanced Columns @advancedcolumns.com · 19/12/2024
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
advancedcolumns.com
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.
031
Simone Maranzana @simonemaranzana.com · 17/12/2024
I understand that the goal is a more generic approach, and the mobile-first strategy is probably geared towards a more skilled audience. However, the data structure (and style engine) should support it—perhaps through a theme.json configuration for pro users?
010
Simone Maranzana @simonemaranzana.com · 17/12/2024
I know—it was just too hard to resist making a joke! 😂
110
Simone Maranzana @simonemaranzana.com · 17/12/2024
Fun fact: since I tend to use at least one height query in every project, we have designed @advancedcolumns to support all kinds of media queries. However, we have temporarily hidden this functionality because it can be too challenging for casual or intermediate users to use
020
Simone Maranzana @simonemaranzana.com · 17/12/2024
That's why it's called advanced 🙃
120
Reposted by Simone Maranzana
Advanced Columns @advancedcolumns.com · 13/12/2024
We're out with update 1.4.3: 👉 Fixed unintended behavior that could affect external dynamic blocks #WordPress #Gutenberg #plugin #BlockEditor Download here ⬇️ advancedcolumns.com
advancedcolumns.com
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.
022
Simone Maranzana @simonemaranzana.com · 12/12/2024
5/ What’s next? We’re bringing CSS Subgrid support to the next major update of the @advancedcolumns.com #WordPress plugin. You’ll also get even more controls over individual item dimensions—making it easier than ever to build precise, beautiful layouts. 👇
152
Simone Maranzana @simonemaranzana.com · 12/12/2024
4/ How does CSS Subgrid work? Subgrid can propagate rows, columns, or both. This opens the door to much more advanced layout solutions, all while keeping your CSS cleaner and simpler. I highly recommend @ishadeed.com guide: buff.ly/3wMy61j As always, it explains the concept brilliantly.
120
Simone Maranzana @simonemaranzana.com · 12/12/2024
3/ What is CSS Subgrid? Subgrid is a grid propagation method that allows a child element (e.g., a single column) to inherit the grid structure of its parent. In our example, Subgrid enables you to share the same alignment across all elements in every column—without messy workarounds.
110
Simone Maranzana @simonemaranzana.com · 12/12/2024
2/ What’s the challenge here? You want all elements across the columns to align perfectly—but the nested elements inside each column don’t inherit the parent grid’s structure. That’s where CSS Subgrid comes in.
110
Simone Maranzana @simonemaranzana.com · 12/12/2024
Why I think you need CSS Subgrid, even if you don’t know it yet. 🙃 Take one of the most common layouts you’ll find on almost every website: A simple 2 (or more) column card layout, with 3 elements in each column. 🧵
130
Simone Maranzana @simonemaranzana.com · 10/12/2024
I’ve been thinking a lot about subgrid, and I believe it’s a highly useful feature for @advancedcolumns.com that can solve some fundamental layout needs. Has anyone here used subgrid in a project before? For example, we’ve already used it on the advancedcolumns.com landing page.
advancedcolumns.com
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.
130
Reposted by Simone Maranzana
Advanced Columns @advancedcolumns.com · 10/12/2024
We're out with update 1.4.2: 👉 Added support for shadows on the Columns and Column blocks #WordPress #Gutenberg #plugin #BlockEditor Download here ⬇️ advancedcolumns.com
advancedcolumns.com
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.
012
Simone Maranzana @simonemaranzana.com · 07/12/2024
Uhm, this is strange since the filter should behave the same as the block.json property. On the frontend, we are using the core get_block_wrapper_attributes function. I did a quick test, and indeed it is not working with the filter, but it is working with the block.json 😕 I need to debug it further
100
Simone Maranzana @simonemaranzana.com · 07/12/2024
Sure, we will add it in the next update. Meanwhile, you can enable it using a filter if you want: nickdiego.com/how-to-modif...
nickdiego.com
How to modify block supports in WordPress using client-side filters
Learn how to add or modify block supports in the Editor using client-side filters. This includes adding functionality not yet in WordPress.
110