Draft Layout Blocks is a WordPress plugin that allows you to build sites faster with Tailwind and HTML code, while letting clients edit those same styles in the Block/Gutenberg drag-and-drop visual editor.
This guide outlines how the plugin works and how to set up an optimal and efficient development workflow with it.
After downloading the plugin's .zip file, go to your WordPress dashboard's "Plugins > Add Plugin > Upload Plugin" and select the ZIP file to upload.
After uploading and activating the plugin, enter your license key to register the site (see the "WP Dashboard > Draft Layout" menu).
It's also recommended to enable auto-updates so you always have the latest features and fixes.
Now you're ready to start coding, designing, and building!
If you're going to use AI to generate Tailwind HTML code, you can host your WordPress site on any external or cloud server.
But if you're a developer and you'll use a code editor (like VS Code), running a local dev installation on your computer will allow you to easily build the site's theme.
Now you can open up the Block/Gutenberg editor to start editing a page or a post.
Inside the editor, click the 3-dots "Options/More" menu (top-right of your screen) and select the "Draft Layout Code Editor" panel.
A code editing interface should show up near the bottom of your screen.
Here, you're free to write almost any HTML code with Tailwind classes, or paste code from a separate code editor or AI tool.
Note: if you already have any of WP's default Blocks or elements on the page, those show up in the code editor as well as special <wp-blocks /> tags.
Once you've written some code, click "Update Preview" and you should see your code rendered inside the visual editor.
Draft Layout will also automatically add a <style> tag or Block element to your page; this is where all the generated Tailwind styles and CSS are stored.
When you see a preview of your code rendered in the visual editor, open up Block Editor's “Document Overview” panel (near the top-left of your screen) and you should see the nested hierarchy/structure of your HTML tags mirrored in the Block elements of the visual editor.
These are custom Blocks added by the Draft Layout plugin, but you can drag and drop and move them just like normal WP Blocks.
Select one of these Blocks, and you'll notice a custom “Styles” panel on the right of your screen.
This is where you can access the input fields and UI controls to visually change the Tailwind styles.
For example, if in your code you had an HTML tag with the bg-orange-100 class, you'll notice how the “Background Color” dropdown menu shows “Orange 100” as the value.
Now, close the Draft Layout Code Editor panel, change the Background Color to something else (like “Red 100”) using the visual editor, and open up the Code Editor panel again.
You'll notice that the corresponding HTML tag's Tailwind classes have been updated to include the new color (like bg-red-100).
So you have full, 2-way sync between the code editor and the visual editor.
Using this strategy with Draft Layout, you can now start building and styling an entire WordPress site and theme as you wish.
You can use HTML & Tailwind to build headers, footers, template parts, and templates for rendering various kinds of pages/posts.
You can use WP's default Blocks and elements (as well as ones provided by 3rd-party plugins) alongside the Draft Layout HTML/Tailwind Blocks.
You can take entire sections and turn them into reusable Patterns.
You can also create Patterns for common elements (like headings, links, buttons, flexbox/grid layouts, bullet/numbered lists, etc.) so they can be reused across the site.
If you're familiar with code editors or IDEs like VS Code, you can write your code there and copy/paste it into the Block editor.
This lets you use Git to version control your code, though if you want a more direct, seamless approach without copy/pasting, check out our own Visual Editor plugin instead.