Automattic / vip-decoupled-bundle

WordPress VIP decoupled plugin bundle
29 stars 5 forks source link

Add support for Gutenberg inner blocks #38

Closed chriszarate closed 2 years ago

chriszarate commented 2 years ago

Add support for Gutenberg inner blocks in contentBlocks output. This required a little refactoring to make the process function callable recursively.

A classic use case is columns:

{
  "name": "core/columns",
  "tagName": null,
  "innerHTML": null,
  "outerHTML": null,
  "attributes": [],
  "innerBlocks": [
    {
      "name": "core/column",
      "tagName": "div",
      "innerHTML": "",
      "outerHTML": "<div class=\"wp-block-column\"></div>",
      "attributes": [],
      "innerBlocks": [
        {
          "name": "core/paragraph",
          "tagName": "p",
          "innerHTML": "<strong>column 1</strong>",
          "outerHTML": "<p><strong>column 1</strong></p>",
          "attributes": []
        }
      ]
    },
    {
      "name": "core/column",
      "tagName": "div",
      "innerHTML": "",
      "outerHTML": "<div class=\"wp-block-column\"></div>",
      "attributes": [],
      "innerBlocks": [
        {
          "name": "core/paragraph",
          "tagName": "p",
          "innerHTML": "<em>column 2</em>",
          "outerHTML": "<p><em>column 2</em></p>",
          "attributes": []
        }
      ]
    }
  ]
}

Note that fetching nested inner blocks requires an explicit query to a fixed depth:

fragment ContentBlockParts {
  name
  tagName
  innerHTML
  outerHTML
  attributes {
    name
    value
  }
}

query MyQuery {
  posts {
    nodes {
      title
      contentBlocks {
        blocks {
          ...ContentBlockParts
          innerBlocks {
            ...ContentBlockParts
            innerBlocks {
              ...ContentBlockParts
            }
          }
        }
      }
    }
  }
}