Back to Templates

Convert Notion Page to WordPress (Gutenberg) HTML

Created by

Created by: Konrad Roziewski || kroziewski

Konrad Roziewski

Last update

Last update 20 hours ago

Categories

Share


This workflow fetches the complete content of a specific Notion page and converts all its blocks into a single HTML string compatible with the WordPress Gutenberg block editor.

It's designed to be used as a sub-workflow. You can call it from a parent workflow (e.g., "when a Notion page is updated") by passing it a notion_url. It returns a single item containing the complete, ready-to-use HTML for a WordPress post body.


Key Features

  • Full Page Conversion: Fetches all blocks from a page, including nested blocks (like content inside columns or toggles).
  • Rich Text Support: Correctly parses and converts rich text annotations, including bold, italic, <u>underline</u>, <s>strikethrough</s>, and links.
  • Gutenberg-Compatible: Wraps content in the appropriate Gutenberg HTML comments (e.g., , , ``) so WordPress recognizes them as blocks.
  • Handles Complex Layouts: Includes specific logic to correctly rebuild Notion's column and column_list blocks into a responsive Gutenberg-friendly format.
  • Supports Various Blocks: Converts paragraphs, all heading types (H1, H2, H3), bulleted and numbered lists, images, videos (YouTube/Vimeo), embeds, code blocks, and dividers.

How It Works

  1. Input: The workflow is triggered by an Execute Workflow node, which expects a notion_url in the input data. (A manual trigger with a sample URL is included for testing).
  2. Fetch Data: It first gets the Notion page specified by the URL and then uses a second Notion node to fetch all child blocks recursively (fetchNestedBlocks: true).
  3. Process Rich Text: A Code node (decode paragraphs) iterates over text-based blocks (paragraphs, lists) and uses a helper function to convert the Notion annotations array into standard HTML tags (e.g., <strong>, <em>, <a>).
  4. Convert Blocks: A second Code node (decode blocks) uses a large switch statement to map each Notion block type to its corresponding Gutenberg HTML structure.
  5. Rebuild Columns: A crucial Code node (column&column_list) runs once on all blocks. It finds all column blocks, then finds their children, and finally wraps them inside their parent column_list block. This is essential for correctly handling nested layouts.
  6. Filter & Aggregate: The workflow filters out all nested blocks, keeping only the top-level ones (since the nested content is now inside its parent, like the column block). It then aggregates all the generated HTML snippets into a single array.
  7. Final Output: A final Set node joins the array of HTML blocks with newline characters, producing a single text string in a field named wp. This string can be directly used in the "Content" field of a WordPress node in your parent workflow.

Setup

  1. Notion Credentials: You must configure your Notion credentials in the two Notion nodes:
    • Get a database page
    • Get many child blocks
  2. Trigger: To use this, call it from another workflow using an Execute Workflow node. Pass the URL of the Notion page you want to convert in the notion_url field.