using @nuxt/ui, @nuxt/image and other updates

.gitignore

@@ -55,3 +55,4 @@ Network Trash Folder
 Temporary Items
 .apdisk
 playground/.queries/
+playground/app/.queries/

package.json

@@ -34,8 +34,10 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
+    "@nuxt/image": "^1.7.0",
     "@nuxt/kit": "^3.12.4",
-    "@vernaillen/wpnuxt": "^1.0.0-edge.2"
+    "@nuxt/ui": "^2.18.4",
+    "@vernaillen/wpnuxt": "^1.0.0-edge.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.9",

src/module.ts

@@ -1,5 +1,5 @@
-import fs from 'node:fs'
-import { defineNuxtModule, createResolver, addComponentsDir, addComponent, addTemplate } from '@nuxt/kit'
+import { promises as fsp } from 'node:fs'
+import { defineNuxtModule, installModule, createResolver, addComponentsDir, addComponent, addTemplate } from '@nuxt/kit'
 import { genDynamicImport } from 'knitwork'
 import type { Component } from '@nuxt/schema'
 import { name, version } from '../package.json'
@@ -23,6 +23,13 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.options.alias['#wpnuxt/blocks'] = resolve(nuxt.options.buildDir, 'wpnuxt/blocks')
 
+    await installModule('@nuxt/ui', {
+      icons: ['heroicons', 'uil', 'mdi']
+    })
+    await installModule('@nuxt/image', {
+      domains: ['wordpress.wpnuxt.com']
+    })
+
     addComponentsDir({
       path: resolveRuntimeModule('./components/blocks'),
       pathPrefix: false,
@@ -34,7 +41,7 @@ export default defineNuxtModule<ModuleOptions>({
     for (const layer of _layers) {
       const srcDir = layer.config.srcDir
       const blockComponents = resolve(srcDir, 'components/blocks')
-      const dirStat = await fs.promises.stat(blockComponents).catch(() => null)
+      const dirStat = await fsp.stat(blockComponents).catch(() => null)
       if (dirStat && dirStat.isDirectory()) {
         nuxt.hook('components:dirs', (dirs) => {
           dirs.unshift({
@@ -50,25 +57,6 @@ export default defineNuxtModule<ModuleOptions>({
     addComponent({ name: 'BlockInfo', filePath: resolveRuntimeModule('./components/BlockInfo') })
     addComponent({ name: 'BlockRenderer', filePath: resolveRuntimeModule('./components/BlockRenderer') })
 
-    // TODO: how to correctly merge the queries from 3 places: wpnuxt-module + wpnuxt/blocks + user?
-    /* const queryOutputPath = resolve((nuxt.options.srcDir || nuxt.options.rootDir) + '/.queries/')
-
-    const userQueryPath = '~/extend/queries/'
-      .replace(/^(~~|@@)/, nuxt.options.rootDir)
-      .replace(/^(~|@)/, nuxt.options.srcDir)
-    const userQueryPathExists = existsSync(userQueryPath)
-
-    fs.cpSync(resolveRuntimeModule('./queries/'), queryOutputPath, { recursive: true })
-    if (userQueryPathExists) {
-      console.log('!!! Extending queries:', userQueryPath)
-      fs.cpSync(resolve(userQueryPath), queryOutputPath, { recursive: true })
-    }
-    console.log('!!! Copied merged queries in folder:', queryOutputPath) */
-
-    // TODO: check if we can do this and still use hasNuxtModule('@wpnuxt/blocks') in the wpnuct core module
-    /* await installModule('../../wpnuxt-module/src', {
-    }) */
-
     const componentsContext = { components: [] as Component[] }
     nuxt.hook('components:extend', (newComponents) => {
       const moduleBlocksDir = resolveRuntimeModule('./components/blocks')

src/runtime/components/blocks/CoreButton.vue

@@ -8,7 +8,12 @@ defineProps<{
 
 <template>
   <UButton
-    :label="block.attributes.text"
     :to="block.attributes.url"
-  />
+    :target="block.attributes.linkTarget"
+    :class="block.attributes.cssClassName"
+    :rel="block.attributes.rel"
+    :style="block.attributes.style"
+  >
+    <span v-sanitize="block.attributes.text" />
+  </UButton>
 </template>

src/runtime/components/blocks/CoreHeading.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CoreHeading } from '#wpnuxt/blocks'
+
+defineProps<{
+  block: CoreHeading
+}>()
+</script>
+
+<template>
+  <template v-if="block.attributes.level === 1">
+    <h1 v-sanitize="block.attributes.content" />
+  </template>
+  <template v-if="block.attributes.level === 2">
+    <h2 v-sanitize="block.attributes.content" />
+  </template>
+  <template v-if="block.attributes.level === 3">
+    <h3 v-sanitize="block.attributes.content" />
+  </template>
+  <template v-if="block.attributes.level === 4">
+    <h4 v-sanitize="block.attributes.content" />
+  </template>
+  <template v-if="block.attributes.level === 5">
+    <h5 v-sanitize="block.attributes.content" />
+  </template>
+  <template v-if="block.attributes.level === 6">
+    <h6 v-sanitize="block.attributes.content" />
+  </template>
+</template>

src/runtime/components/blocks/CoreImage.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { getRelativeImagePath } from '../../util/images'
+// import { getRelativeImagePath } from '../../util/images'
 import type { CoreImage } from '#graphql-operations'
 
 const props = defineProps<{
   block: CoreImage
 }>()
-const imgUrl = getRelativeImagePath(props.block?.attributes?.url)
+// const imgUrl = getRelativeImagePath(props.block?.attributes?.url)
+const imgUrl = props.block?.attributes?.url
 </script>
 
 <template>

src/runtime/components/blocks/EditorBlock.vue

@@ -7,5 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <p v-sanitize="block.renderedHtml" />
+  <div v-sanitize="block.renderedHtml" />
 </template>

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

@@ -0,0 +1,20 @@
+fragment CoreHeading on CoreHeading {
+  attributes {
+    align
+    anchor
+    backgroundColor
+    className
+    content
+    cssClassName
+    fontFamily
+    fontSize
+    gradient
+    level
+    lock
+    metadata
+    placeholder
+    style
+    textAlign
+    textColor
+  }
+}

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

@@ -1,5 +1,6 @@
 #import '~/.queries/fragments/CoreButton.fragment.gql';
 #import '~/.queries/fragments/CoreGallery.fragment.gql';
+#import '~/.queries/fragments/CoreHeading.fragment.gql';
 #import '~/.queries/fragments/CoreImage.fragment.gql';
 #import '~/.queries/fragments/CoreParagraph.fragment.gql';
 #import '~/.queries/fragments/CoreQuote.fragment.gql';
@@ -15,6 +16,7 @@ fragment EditorBlock on EditorBlock {
   renderedHtml
   ...CoreButton
   ...CoreGallery
+  ...CoreHeading
   ...CoreImage
   ...CoreParagraph
   ...CoreQuote