BlockFlow

About this plugin

BlockFlow is a Figma plugin that allows you to easily convert your designs into WordPress blocks. This plugin is designed to simplify the process of transforming your visual projects into functional WordPress code. The exported blocks do not contain inline styles and rely solely on the logical attributes of the supported blocks.

Playground file https://www.figma.com/community/file/1414876266658754316/blockflow-playground

Usage

1. Select the design elements you want to convert into WordPress blocks
2. Open the BlockFlow plugin from the Figma toolbar
3. Click the "Convert to blocks" button in the plugin interface
4. The plugin will automatically convert the selected elements into WordPress blocks
5. Once the conversion is complete, the HTML code of the blocks will be copied to your clipboard
6. Paste the copied code into your WordPress editor or HTML file

Supported blocks

1. Group
2. Separator
3. Image
4. Buttons
5. Paragraph
6. Headings
7. Cover
8. Columns
9. List
10. Media & Text
11. Blockquote
12. Pullquote
13. Details
14. Icon block - third party plugin
15. Advanced Columns – third party plugin

Tips for optimal use

1. Follow instructions on the Playground file https://www.figma.com/community/file/1414876266658754316/blockflow-playground
2. Organize your Figma design logically, grouping related elements using the auto-layout feature when necessary.
3. If you need to create a list, you can use a group by naming the block list and the child elements list-item.
4. A list can also be created by applying the text list style and naming the element list.
5. The aspect ratio from rectangles with an image layer will be automatically extracted and adjusted to the closest WordPress predefined default ratio.
6. The list item block in WordPress only supports text, so any other element in your list group will not be exported.
7. Configure the layout size in the advanced settings panel according to your theme settings.

Note

In this early experimental phase, the plugin does not provide controls to define or import the information found in the theme.json file.