Implement ACF Field Type Settings Block

components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

wp-blocks/AcfFieldTypeSettingsBlock.js

@@ -0,0 +1,61 @@
+import { gql } from '@apollo/client';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+export function AcfFieldTypeSettingsBlock(props) {
+  const { fieldTypeSettings } = props?.fieldTypeSettingsBlockFields;
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Name</TableHead>
+          <TableHead>Description</TableHead>
+          {/* <TableHead className="text-right whitespace-nowrap">Impact on WPGraphQL</TableHead> */}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {fieldTypeSettings?.nodes?.map((item, index) => (
+          <TableRow key={item.id}>
+            <TableCell className="font-medium whitespace-nowrap">{item.name}</TableCell>
+            <TableCell>{item.description}</TableCell>
+            {/* <TableCell>{item.impactOnWpgraphql}</TableCell> */}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+AcfFieldTypeSettingsBlock.displayName = `AcfFieldTypeSettingsBlock`;
+AcfFieldTypeSettingsBlock.config = {
+  name: `AcfFieldTypeSettingsBlock`,
+};
+AcfFieldTypeSettingsBlock.fragments = {
+  key: `AcfFieldTypeSettingsBlockFragment`,
+  entry: gql`
+    fragment AcfFieldTypeSettingsBlockFragment on AcfFieldTypeSettingsBlock {
+      fieldTypeSettingsBlockFields {
+        fieldTypeSettings(first: 100) {
+          nodes {
+            __typename
+            id
+            ...on ACFFieldTypeSetting {
+              name
+              description
+              fieldTypeSettingsMeta {
+                impactOnWpgraphql
+              }
+            }
+          }
+        }
+      }
+    }
+  `,
+};

wp-blocks/CoreHeading.js

@@ -2,7 +2,7 @@ import { CoreBlocks } from '@faustwp/blocks'
 import slugify from '@sindresorhus/slugify'
 const { CoreHeading: FaustCoreHeading } = CoreBlocks
 
-function CoreHeading(props) {
+function Component(props) {
   const { attributes } = props
 
   const customAttributes = {
@@ -19,8 +19,8 @@ function CoreHeading(props) {
   )
 }
 
-CoreHeading.displayName = { ...FaustCoreHeading.displayName }
-CoreHeading.config = { ...FaustCoreHeading.config }
-CoreHeading.fragments = { ...FaustCoreHeading.fragments }
+Component.displayName = { ...FaustCoreHeading.displayName }
+Component.config = { ...FaustCoreHeading.config }
+Component.fragments = { ...FaustCoreHeading.fragments }
 
-export default CoreHeading
+export default Component

wp-blocks/index.js

@@ -1,12 +1,12 @@
 import { CoreBlocks } from '@faustwp/blocks'
 
-import AcfFieldTypeSettings from './AcfFieldTypeSettings'
+import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
 import CustomHeading from './CoreHeading'
 
 const blocks = {
   ...CoreBlocks,
   CoreHeading: CustomHeading,
-  AcfFieldTypeSettings: AcfFieldTypeSettings,
+  AcfFieldTypeSettingsBlock,
 }
 
 export default blocks

wp-templates/single-field_type.js

@@ -6,16 +6,7 @@ import { Separator } from '@radix-ui/react-separator'
 import { Layout } from '@/components/Layout'
 import { Badge } from '@/components/ui/badge'
 import blocks from '@/wp-blocks'
-
-
-// const nodeContent =`
-//     <div className="prose dark:prose-invert">
-//             <h2>Description</h2>
-//             <h2>Field Settings</h2>
-//             <h2>Query in GraphQL</h2>
-//             <pre>{JSON.stringify(node, null, 2)</pre>
-//         </div>
-// `;
+import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock';
 
 export const SingleFieldType = ({ data }) => {
   const { node } = data
@@ -75,30 +66,7 @@ export const SingleFieldType = ({ data }) => {
           })}
         </div>
       )}
-      {/* {
-                node.editorBlocks && node.editorBlocks.map( ( block, i ) => {
-                    switch( block.__typename ) {
-                        case 'CoreHeading':
-                            let Tag = `h${block.attributes.level}`;
-                            return (
-                                <Tag key={i} id={slugify(block.attributes.content)}>
-                                    {block.attributes.content}
-                                </Tag>
-                            );
-                            break;
-                        case 'AcfTestBlock': 
-                                return <pre>{JSON.stringify(block, null, 2)}</pre>
-                        default:
-                            return <span key={i} dangerouslySetInnerHTML={{ __html: block.renderedHtml }} />;
-                            break;
-                    }
-                })
-            } */}
       <WordPressBlocksViewer blocks={blockList} />
-      {/* <h2>Raw Blocks List</h2>
-            <pre>{JSON.stringify( blockList, null, 2)}</pre>
-            <h2>Raw editorBlocks</h2>
-            <pre>{JSON.stringify(node.editorBlocks, null, 2)}</pre> */}
     </Layout>
   )
 }
@@ -141,13 +109,16 @@ query SingleAcfFieldType($uri: String!) {
                 ...${blocks.CoreSeparator.fragments.key}
                 ...${blocks.CoreList.fragments.key}
                 ...${blocks.CoreHeading.fragments.key}
+                ...AcfFieldTypeSettingsBlockFragment
             }
         }
         ...aCFFieldTypeCategoriesFragment
     }
 }
 ${Layout.fragment}
 ${aCFFieldTypeCategoriesFragment}
+${AcfFieldTypeSettingsBlock.fragments.entry}
+
 ${blocks.CoreParagraph.fragments.entry}
 ${blocks.CoreColumns.fragments.entry}
 ${blocks.CoreColumn.fragments.entry}