Refactor: Added CoreListItem block to fix repeating sublist issue

.changeset/brown-games-jog.md

@@ -0,0 +1,52 @@
+---
+'@faustwp/blocks': minor
+---
+
+### WHAT
+
+Refactor: Added CoreListItem block to fix repeating sublist issue
+
+- Added CoreListItem block
+- Updated CoreList block
+- Updated Corelist.test to accomodate new HTML structure
+- Added a new scenario to test nested lists
+
+### WHY
+
+CoreList was rendering values attribute, which happens to return nested list items multiple times.
+
+### HOW
+
+You need to add new CoreListItem fragments to your queries:
+
+```javascript
+gql`
+  ${blocks.CoreListItem.fragments.entry}
+`;
+```
+
+Example query:
+
+```javascript
+SingleTemplate.query = gql`
+  ${blocks.CoreList.fragments.entry}
+  ${blocks.CoreListItem.fragments.entry}
+  query GetPost(
+    $uri: ID!
+  ) {
+    post(id: $uri, idType: URI) {
+      title
+      content
+      editorBlocks {
+        name
+        __typename
+        renderedHtml
+        id: clientId
+        parentId: parentClientId
+        ...${blocks.CoreList.fragments.key}
+        ...${blocks.CoreListItem.fragments.key}
+      }
+    }
+  }
+`;
+```

packages/blocks/src/blocks/CoreList.tsx

@@ -1,10 +1,15 @@
 import { gql } from '@apollo/client';
 import React from 'react';
 import { useBlocksTheme } from '../components/WordPressBlocksProvider.js';
-import { ContentBlock } from '../components/WordPressBlocksViewer.js';
+import {
+  BlockWithAttributes,
+  ContentBlock,
+  WordPressBlocksViewer,
+} from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
+import { CoreListItemFragmentProps } from './CoreListItem.js';
 
-export type CoreListFragmentProps = ContentBlock & {
+export type CoreListFragmentProps = Omit<ContentBlock, 'innerBlocks'> & {
   attributes?: {
     anchor?: string;
     backgroundColor?: string;
@@ -22,6 +27,7 @@ export type CoreListFragmentProps = ContentBlock & {
     values?: string;
     cssClassName?: string;
   };
+  innerBlocks?: Array<BlockWithAttributes | CoreListItemFragmentProps | null>;
 };
 
 export function CoreList(props: CoreListFragmentProps) {
@@ -33,18 +39,42 @@ export function CoreList(props: CoreListFragmentProps) {
     return null;
   }
 
+  const innerBlocks = props?.innerBlocks ?? [];
+  const hasInnerBlocks = innerBlocks.some((ib) => ib?.attributes);
+
   const ListLevel = attributes?.ordered ? 'ol' : 'ul';
 
+  if (process.env.NODE_ENV === 'development' && !hasInnerBlocks) {
+    console.warn(`[Faust.js] To ensure compatibility with the next major release, update your template queries to use 'blocks.CoreListItem.fragments'. 
+
+Without this update, CoreList will NOT render list items in the next major version.
+
+This warning is shown only in development mode.
+    `);
+  }
+
+  const listProps = {
+    style,
+    className: attributes?.cssClassName,
+    reversed:
+      attributes?.ordered && attributes?.reversed === true ? true : undefined,
+    start:
+      attributes?.ordered && attributes?.start ? attributes?.start : undefined,
+  };
+
+  if (hasInnerBlocks) {
+    return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      <ListLevel {...listProps}>
+        <WordPressBlocksViewer blocks={innerBlocks} />
+      </ListLevel>
+    );
+  }
+
   return (
     <ListLevel
-      style={style}
-      className={attributes?.cssClassName}
-      reversed={
-        attributes?.ordered && attributes?.reversed === true ? true : undefined
-      }
-      start={
-        attributes?.ordered && attributes?.start ? attributes?.start : undefined
-      }
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...listProps}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: attributes.values }}
     />

packages/blocks/src/blocks/CoreListItem.tsx

@@ -0,0 +1,82 @@
+import { gql } from '@apollo/client';
+import React from 'react';
+import { useBlocksTheme } from '../components/WordPressBlocksProvider.js';
+import {
+  BlockWithAttributes,
+  ContentBlock,
+  WordPressBlocksViewer,
+} from '../components/WordPressBlocksViewer.js';
+import { getStyles } from '../utils/index.js';
+
+export type CoreListItemFragmentProps = ContentBlock & {
+  attributes?: {
+    content?: string;
+    anchor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    className?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    gradient?: string;
+    lock?: string;
+    metadata?: string;
+    placeholder?: string;
+    style?: string;
+    textColor?: string;
+  };
+  innerBlocks?: Array<BlockWithAttributes | null>;
+};
+
+export function CoreListItem(props: CoreListItemFragmentProps) {
+  const theme = useBlocksTheme();
+  const style = getStyles(theme, { ...props });
+  const { attributes, innerBlocks } = props;
+
+  const content = attributes?.content;
+
+  if (!content) {
+    return null;
+  }
+
+  const ownContent = content ? content.split('\n')[0] : '';
+
+  return (
+    <li style={style} className={attributes?.className}>
+      <div
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: ownContent }}
+      />
+
+      <WordPressBlocksViewer blocks={innerBlocks ?? []} />
+    </li>
+  );
+}
+
+CoreListItem.fragments = {
+  key: `CoreListItemFragment`,
+  entry: gql`
+    fragment CoreListItemFragment on CoreListItem {
+      attributes {
+        content
+        anchor
+        backgroundColor
+        borderColor
+        className
+        fontFamily
+        fontSize
+        gradient
+        lock
+        metadata
+        placeholder
+        style
+        textColor
+      }
+    }
+  `,
+};
+
+CoreListItem.config = {
+  name: 'CoreListItem',
+};
+
+CoreListItem.displayName = 'CoreListItem';

packages/blocks/src/blocks/index.ts

@@ -10,6 +10,7 @@ import { CoreImage } from './CoreImage.js';
 import { CoreSeparator } from './CoreSeparator.js';
 import { CoreList } from './CoreList.js';
 import { CoreHeading } from './CoreHeading.js';
+import { CoreListItem } from './CoreListItem.js';
 
 export default {
   CoreParagraph: CoreParagraph,
@@ -20,6 +21,7 @@ export default {
   CoreImage: CoreImage,
   CoreSeparator: CoreSeparator,
   CoreList: CoreList,
+  CoreListItem: CoreListItem,
   CoreButton: CoreButton,
   CoreButtons: CoreButtons,
   CoreHeading: CoreHeading,

packages/blocks/src/types/blocks.ts

@@ -6,6 +6,7 @@ type BlockKeys =
   | 'core/heading'
   | 'core/gallery'
   | 'core/list'
+  | 'core/list-item'
   | 'core/quote'
   | 'core/shortcode'
   | 'core/archives'