use NodeWithEditorBlocksFragment

src/module.ts

@@ -29,11 +29,12 @@ export default defineNuxtModule<ModuleOptions>({
 
     await installModule('@nuxt/ui')
     await installModule('@nuxt/image', {
+      // TODO: get wordpressUrl from @wpnuxt/core options
       domains: ['wordpress.wpnuxt.com']
     })
 
     addComponentsDir({
-      path: resolveRuntimeModule('./components/blocks'),
+      path: resolveRuntimeModule('./components'),
       pathPrefix: false,
       prefix: '',
       global: true
@@ -55,13 +56,9 @@ export default defineNuxtModule<ModuleOptions>({
         })
       }
     }
-    addComponent({ name: 'BlockComponent', filePath: resolveRuntimeModule('./components/BlockComponent') })
-    addComponent({ name: 'BlockInfo', filePath: resolveRuntimeModule('./components/BlockInfo') })
-    addComponent({ name: 'BlockRenderer', filePath: resolveRuntimeModule('./components/BlockRenderer') })
-
     const componentsContext = { components: [] as Component[] }
     nuxt.hook('components:extend', (newComponents) => {
-      const moduleBlocksDir = resolveRuntimeModule('./components/blocks')
+      const moduleBlocksDir = resolveRuntimeModule('./components')
       // TODO: support layers
       const userBlocksDir = (nuxt.options.srcDir || nuxt.options.rootDir) + '/components/blocks'
       componentsContext.components = newComponents.filter((c) => {

src/runtime/components/BlockRenderer.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import BlockComponent from './BlockComponent.vue'
-import type { EditorBlock } from '#wpnuxt/blocks'
+import type { NodeWithEditorBlocksFragment } from '#build/graphql-operations'
 
 defineProps<{
-  blocks: EditorBlock[] | undefined
+  post: NodeWithEditorBlocksFragment
 }>()
 </script>
 
 <template>
   <div>
     <BlockComponent
-      v-for="block, index in blocks"
+      v-for="block, index in post.editorBlocks"
       :key="index"
       :block="block"
     />

src/runtime/components/blocks/CoreParagraph.vue

@@ -5,14 +5,13 @@ import type { CoreParagraph } from '#wpnuxt/blocks'
 const props = defineProps<{
   block: CoreParagraph
 }>()
-const cssClass = getCssClasses(props.block)
 </script>
 
 <template>
   <p
     :id="block?.attributes?.anchor"
     v-sanitize="block?.attributes?.content"
-    :class="cssClass"
+    :class="getCssClasses(props.block)"
     :style="block?.attributes?.style"
   />
 </template>

src/runtime/queries/fragments/EditorBlocks.fragment.gql → src/runtime/queries/fragments/NodeWithEditorBlocks.fragment.gql

@@ -1,6 +1,6 @@
 #import '~/.queries/fragments/EditorBlock.fragment.gql';
 
-fragment EditorBlocks on NodeWithEditorBlocks {
+fragment NodeWithEditorBlocks on NodeWithEditorBlocks {
   editorBlocks {
     ...EditorBlock
     innerBlocks {

src/runtime/queries/fragments/Page.fragment.gql

@@ -1,10 +1,11 @@
 #import '~/.queries/fragments/ContentNode.fragment.gql';
 #import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/EditorBlocks.fragment.gql';
+#import '~/.queries/fragments/NodeWithEditorBlocks.fragment.gql';
 
 fragment Page on Page {
   ...ContentNode
   ...NodeWithFeaturedImage
+  ...NodeWithEditorBlocks
   content
   isFrontPage
   isPostsPage
@@ -13,5 +14,4 @@ fragment Page on Page {
   isRestricted
   isRevision
   title
-  ...EditorBlocks
 }

src/runtime/queries/fragments/Post.fragment.gql

@@ -1,13 +1,13 @@
 #import "~/.queries/fragments/NodeWithExcerpt.fragment.gql";
 #import '~/.queries/fragments/ContentNode.fragment.gql';
 #import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/EditorBlocks.fragment.gql';
+#import '~/.queries/fragments/NodeWithEditorBlocks.fragment.gql';
 
 fragment Post on Post {
   ...NodeWithExcerpt
   ...ContentNode
   ...NodeWithFeaturedImage
+  ...NodeWithEditorBlocks
   content
   title
-  ...EditorBlocks
 }