Create list and list item blocks

backend/api/project/models/project.settings.json

@@ -51,10 +51,10 @@
     "blocks": {
       "type": "dynamiczone",
       "components": [
-        "project.title-block",
         "project.blockquote-block",
         "project.image-block",
-        "project.paragraph-block"
+        "project.paragraph-block",
+        "project.list-block"
       ],
       "pluginOptions": {
         "i18n": {

backend/components/blocks/list-item.json

@@ -0,0 +1,13 @@
+{
+  "collectionName": "components_blocks_list_items",
+  "info": {
+    "name": "listItem",
+    "icon": "ban"
+  },
+  "options": {},
+  "attributes": {
+    "text": {
+      "type": "string"
+    }
+  }
+}

backend/components/project/list-block.json

@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_project_list_blocks",
+  "info": {
+    "name": "listBlock",
+    "icon": "list-ul"
+  },
+  "options": {},
+  "attributes": {
+    "items": {
+      "type": "component",
+      "repeatable": true,
+      "component": "blocks.list-item"
+    }
+  }
+}

frontend/features/project/blocks/ListBlock.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  Block,
+  BlockComponentProps,
+  BlocksControls,
+  InlineBlocks,
+} from "react-tinacms-inline";
+
+import { Box } from "@chakra-ui/react";
+import { listItemBlock } from "./ListItemBlock";
+
+export type ListBlockData = BlockTemplateData<
+  "listBlock",
+  {
+    id: string;
+    items: {
+      text: Nullable<string>[];
+    };
+  }
+>;
+
+export default function ListBlock() {
+  return (
+    <Box
+      as="ul"
+      w={{ base: "full", md: "container.md" }}
+      lineHeight="1.8em"
+      mt="12"
+      mx="auto"
+      mb="0"
+      pl="5"
+      fontFamily="Europa, sans-serif"
+      boxSizing="border-box"
+    >
+      <InlineBlocks name="items" blocks={{ listItem: listItemBlock }} />
+    </Box>
+  );
+}
+
+function BlockComponent({ index, data }: BlockComponentProps) {
+  return (
+    <BlocksControls index={index} focusRing={{ offset: 0 }} insetControls>
+      <ListBlock {...data} />
+    </BlocksControls>
+  );
+}
+
+export const listBlock: Block = {
+  Component: BlockComponent,
+  template: {
+    label: "List block",
+    defaultItem: {
+      blocks: [],
+    },
+    fields: [],
+  },
+};

frontend/features/project/blocks/ListItemBlock.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Block,
+  BlockComponentProps,
+  BlocksControls,
+  InlineText,
+} from "react-tinacms-inline";
+
+import { Box } from "@chakra-ui/react";
+
+export type ListItemBlockData = BlockTemplateData<
+  "listItemBlock",
+  {
+    id: string;
+    text: string;
+  }
+>;
+
+export default function ListItemBlock() {
+  return (
+    <Box as="li" mb="1">
+      <InlineText name="text" />
+    </Box>
+  );
+}
+
+function BlockComponent({ index, data }: BlockComponentProps) {
+  return (
+    <BlocksControls index={index} focusRing={{ offset: 0 }} insetControls>
+      <ListItemBlock {...data} />
+    </BlocksControls>
+  );
+}
+
+export const listItemBlock: Block = {
+  Component: BlockComponent,
+  template: {
+    label: "List item block",
+    defaultItem: {
+      text: "Default item text",
+    },
+    fields: [],
+  },
+};