Skip to main content

Convert Notion page to WordPress (Gutenberg) HTML

Workflow preview

Convert Notion page to WordPress (Gutenberg) HTML preview
Open on n8n.io

Important notice

This workflow is provided as-is. Please review and test before using in production.

Overview

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.