Feature: Added CoreListItem Block and updated CoreList block

[colinmurphy]

Overview

This is a solution for the issue reported #253 whereby a user might want to recursively query child blocks.

This PR has 2 main features

1. Adds a CoreListItem Block
2. Updates the CoreList Block with new fields so that you can recursively get children for the CoreListItem

Example

You have a list with 3 levels e.g.

The HTML for the block is

<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>List item 1</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List item 2<!-- wp:list {"className":"is-style-checkmark-list"} -->
<ul class="wp-block-list is-style-checkmark-list"><!-- wp:list-item -->
<li>Child list item 1<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Third level list item</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Child list item 2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List item 3</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List item 4</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

The following query will do the following

1. Check if the list is ordered (boolean)
2. Get an array of items (CoreListItem blocks) and get children and values for those blocks and child blocks

query postQuery($id: ID!) {
  post(id: $id, idType: DATABASE_ID, asPreview: false) {
    title
    editorBlocks(flat: false) {
      name
      ... on CoreList {
        ordered
        items {
          value
          children {
            value
            children {
              value
            }
          }
        }
      }
    }
  }
}

The response from WP GraphQL is

{
  "data": {
    "post": {
      "title": "Hello world!",
      "editorBlocks": [
        {
          "name": "core/list",
          "ordered": true,
          "items": [
            {
              "value": "<li>List item 1</li>",
              "children": []
            },
            {
              "value": "<li>List item 2</li>",
              "children": [
                {
                  "value": "<li>Child list item 1</li>",
                  "children": [
                    {
                      "value": "<li>Third level list item</li>"
                    }
                  ]
                },
                {
                  "value": "<li>Child list item 2</li>",
                  "children": []
                }
              ]
            },
            {
              "value": "<li>List item 3</li>",
              "children": []
            },
            {
              "value": "<li>List item 4</li>",
              "children": []
            }
          ]
        }
      ]
    }
  }
}

This should allow developers to loop through the items key and then children keys to get the value for each list item.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0793285

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wpengine/wp-graphql-content-blocks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[justlevine]

Just my 2c, but I really don't like this as a solve (the concept - not the code).

It's already problematic for stability/compat whenever we got to manually deviate from core, but in this case there is already an existing way to get CoreListItem blocks without any of this: the regular editorBlocks( flat = $flat ) {} fleid.

Per my comment in #253 (comment), the way to take that issue off the board is to update Faust to include a new CoreListItem component and fixing CoreList to support children.

[justlevine]

@colinmurphy I'm swamped ATM on SnapWP, but check your discord DMs for code snippets of how we're handling core-list/core-list-item with the current version of WPGraphQL Content Blocks

[colinmurphy]

Thanks @justlevine for the feedback. I will review what you sent on Discord and make changes accordingly 👍

[colinmurphy]

@justlevine and @theodesp

Can you review again please. For me if you run the following query you get valid HTML within the renderedHtml block for the CoreListItem

		query postQuery($id: ID!) {
			  post(id: $id, idType: DATABASE_ID, asPreview: false) {
			    title
			    editorBlocks(flat: false) {
			      name
			      ... on CoreList {
			        type
			        name
			        renderedHtml
			        innerBlocks {
			          ... on CoreListItem {
			            type
			            name
			      
			            renderedHtml
			          }
			        }
			      }
			    }
			  }
			}

{
  "data": {
    "post": {
      "title": "Hello world!",
      "editorBlocks": [
        {
          "name": "core/list",
          "type": "CoreList",
          "renderedHtml": "\n<ol class=\"wp-block-list\">\n<li>List item 1</li>\n\n\n\n<li>List item 2\n<ul class=\"wp-block-list is-style-default\">\n<li>Child list item 1\n<ul class=\"wp-block-list\">\n<li>Third level list item</li>\n</ul>\n</li>\n\n\n\n<li>Child list item 2</li>\n</ul>\n</li>\n\n\n\n<li>List item 3</li>\n\n\n\n<li>List item 4</li>\n</ol>\n",
          "innerBlocks": [
            {
              "type": "CoreListItem",
              "name": "core/list-item",
              "renderedHtml": "\n<li>List item 1</li>\n"
            },
            {
              "type": "CoreListItem",
              "name": "core/list-item",
              "renderedHtml": "\n<li>List item 2\n<ul class=\"wp-block-list is-style-default\">\n<li>Child list item 1\n<ul class=\"wp-block-list\">\n<li>Third level list item</li>\n</ul>\n</li>\n\n\n\n<li>Child list item 2</li>\n</ul>\n</li>\n"
            },
            {
              "type": "CoreListItem",
              "name": "core/list-item",
              "renderedHtml": "\n<li>List item 3</li>\n"
            },
            {
              "type": "CoreListItem",
              "name": "core/list-item",
              "renderedHtml": "\n<li>List item 4</li>\n"
            }
          ]
        },
        {
          "name": "core/paragraph"
        }
      ]
    }
  }
}

Let me know if I missed something.

[colinmurphy]

Closing PR as this is not needed. We will open a issue in Faust to address the issues brought up @justlevine with the core list component.