Refactor: Added CoreListItem block to fix repeating sublist issue #2041

ahuseyn · 2025-02-17T16:54:12Z

Tasks

I have signed a Contributor License Agreement (CLA) with WP Engine.
If a code change, I have written testing instructions that the whole team & outside contributors can understand.
I have written and included a comprehensive changeset to properly document the changes I've made.

Description

CoreList was rendering values attribute, which happens to return nested list items multiple times. New CoreListItem block fixes this issue by recursively rendering nested lists.

Related Issue(s):

Testing

Setup a basic headless project with to be able to render blocks (https://toolkit.faustjs.org/docs/how-to/rendering-blocks/)
Add the single component to wp-templates folder with the component below. This component has CoreListItem fragments (${blocks.CoreListItem.fragments.entry}) to support CoreListItem

import { gql } from "@apollo/client";
import { WordPressBlocksViewer } from "@faustwp/blocks";
import { flatListToHierarchical } from "@faustwp/core";
import blocks from "../wp-blocks";

export default function PostTemplate({ data }) {
  const { title, editorBlocks } = data?.post ?? { title: "" };
  const blockList = flatListToHierarchical(editorBlocks, {
    childrenKey: "innerBlocks",
  });

  return (
    <div className='is-layout-constrained'>
      <h1>{title}</h1>

      <WordPressBlocksViewer blocks={blockList} />
    </div>
  );
}

PostTemplate.query = gql`
  ${blocks.CoreParagraph.fragments.entry}
  ${blocks.CoreColumns.fragments.entry}
  ${blocks.CoreColumn.fragments.entry}
  ${blocks.CoreCode.fragments.entry}
  ${blocks.CoreButtons.fragments.entry}
  ${blocks.CoreButton.fragments.entry}
  ${blocks.CoreQuote.fragments.entry}
  ${blocks.CoreImage.fragments.entry}
  ${blocks.CoreSeparator.fragments.entry}
  ${blocks.CoreList.fragments.entry}
  ${blocks.CoreListItem.fragments.entry}
  ${blocks.CoreHeading.fragments.entry}
  query GetPost(
    $uri: ID!

  ) {
    post(id: $uri, idType: URI) {
      title
      content
      editorBlocks {
        name
        __typename
        renderedHtml
        id: clientId
        parentId: parentClientId
        ...${blocks.CoreParagraph.fragments.key}
        ...${blocks.CoreColumns.fragments.key}
        ...${blocks.CoreColumn.fragments.key}
        ...${blocks.CoreCode.fragments.key}
        ...${blocks.CoreButtons.fragments.key}
        ...${blocks.CoreButton.fragments.key}
        ...${blocks.CoreQuote.fragments.key}
        ...${blocks.CoreImage.fragments.key}
        ...${blocks.CoreSeparator.fragments.key}
        ...${blocks.CoreList.fragments.key}
        ...${blocks.CoreListItem.fragments.key}
        ...${blocks.CoreHeading.fragments.key}
      }
    }
  }
`;

PostTemplate.variables = (seedQuery) => {
  return {
    uri: seedQuery?.uri,
  };
};

Create a post at your WordPress dashboard and add a list block to the post. Add nested list items to test the behavior.
Run your nextjs project and check your post at http://localhost:3000/{your-post-slug}

Screenshots

Before	After

Documentation Changes

N/A

Dependant PRs

N/A

changeset-bot · 2025-02-17T16:54:17Z

🦋 Changeset detected

Latest commit: 9dc0abd

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

This PR includes changesets to release 1 package

Name	Type
@faustwp/blocks	Minor

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

github-actions · 2025-02-17T16:57:22Z

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

colinmurphy · 2025-02-17T18:20:58Z

cc @justlevine

colinmurphy

LGTM

theodesp · 2025-02-18T11:33:40Z

.changeset/brown-games-jog.md

@@ -0,0 +1,52 @@
+---
+'@faustwp/blocks': major


I don;t think this should be a major release. It should be a minor

The thing is, after this change we'll need to include blocks.CoreListItem.fragments to the queries to be able to render the lists. Without that CoreList won't work. That's why I came up with major release. How should we proceed in this case?

Would. existing users be affected when using ${blocks.CoreList.fragments.entry} only and not ${blocks. CoreListItem.fragments.entry}? if Yes then its a major release.

Yes, existing users will stop seeing the list items if they just use ${blocks.CoreList.fragments.entry}.

You could include the ... on CoreListItem {} fragment inside CoreList.fragments.entry for backwards compatibility. It would just get merged with whatever is defined separately on CoreListItem.fragments.entry.

I'm not entirely sure how the overloading DX works for y'all from a SemVer POV though: Is there a reason a user would be overloading CoreList.fragments.entry (and therefore not get the ...on CoreListItem frag(s) ) but not overloading the CoreList React component (and therefore need the CoreListItem component and a frag to populate it)?

Thank you @justlevine for your suggestion. As we're using flatListToHierarchical on client side to build innerBlocks from editorBlocks flat list, it prevents us to benefit CoreListItem fragment inside CoreList.

Thus, we're intending to achieve backward compatibility by rendering the parsed CoreList attribute.values for those who don't add CoreListItem fragments temporarily and fully switching to CoreListItem with the first major release.

Not sure I understand the relevance of innerBlocks here, but if y'all have a solution that maintains backwards compat and stops this from beaking a breaking change, then no need for me to wallflower 🚀

I was thinking something like this:

CoreList.fragments = { key: `CoreListBlockFragment`, entry: gql` fragment CoreListBlockFragment on CoreList { attributes { anchor backgroundColor className fontFamily fontSize gradient lock ordered reversed start style textColor type values cssClassName } innerBlocks { ... on CoreListItem { attributes { content anchor backgroundColor borderColor className fontFamily fontSize gradient lock metadata placeholder style textColor } } } } `, };

@justlevine do you think this is the misinterpreted version of your suggestion? 😅

Update: I think this is the correct one, isn't it?

CoreList.fragments = { key: `CoreListBlockFragment ...CoreListItemFragment`, entry: gql` fragment CoreListBlockFragment on CoreList { attributes { anchor backgroundColor className fontFamily fontSize gradient lock ordered reversed start style textColor type values cssClassName } } fragment CoreListItemFragment on CoreListItem { attributes { content anchor backgroundColor borderColor className fontFamily fontSize gradient lock metadata placeholder style textColor } } `, };

colinmurphy · 2025-02-21T16:27:05Z

.changeset/brown-games-jog.md

+
+Example query:
+
+```javascript


@ahuseyn

Great docs for the CHANGELOG 👏

Thanks @colinmurphy 🙂

colinmurphy · 2025-02-24T12:47:46Z

Released in the latest version @faustwp/blocks version 6.1.0

#2044

ahuseyn added 3 commits February 17, 2025 15:56

Refactor: add CoreListItem block

4b10ec7

Test: update CoreList tests

53d2eea

Chore: add changeset

9f68de8

ahuseyn requested a review from a team as a code owner February 17, 2025 16:54

colinmurphy approved these changes Feb 17, 2025

View reviewed changes

theodesp reviewed Feb 18, 2025

View reviewed changes

theodesp requested review from colinmurphy and theodesp February 18, 2025 16:25

Fix: make CoreList backward compatible

9dc0abd

theodesp approved these changes Feb 21, 2025

View reviewed changes

colinmurphy reviewed Feb 21, 2025

View reviewed changes

ahuseyn merged commit 4b1090a into canary Feb 21, 2025
19 checks passed

ahuseyn deleted the refactor/CoreList-component branch February 21, 2025 16:38

ahuseyn mentioned this pull request Feb 21, 2025

Refactor the core list component #2034

Closed


		Example query:

		```javascript

Refactor: Added CoreListItem block to fix repeating sublist issue #2041

Refactor: Added CoreListItem block to fix repeating sublist issue #2041

Uh oh!

Conversation

ahuseyn commented Feb 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tasks

Description

Related Issue(s):

Testing

Screenshots

Documentation Changes

Dependant PRs

Uh oh!

changeset-bot bot commented Feb 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

Uh oh!

colinmurphy commented Feb 17, 2025

Uh oh!

colinmurphy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ahuseyn Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

colinmurphy commented Feb 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ahuseyn commented Feb 17, 2025 •

edited

Loading

changeset-bot bot commented Feb 17, 2025 •

edited

Loading

github-actions bot commented Feb 17, 2025 •

edited

Loading

ahuseyn Feb 20, 2025 •

edited

Loading