@wpnuxt/blocks 0.0.2 → 0.0.3

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    enabled: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.d.ts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    enabled: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "configKey": "wpNuxtBlocks",
   "builder": {
     "@nuxt/module-builder": "0.8.1",

package/dist/module.mjs

@@ -1,9 +1,9 @@
-import fs from 'node:fs';
-import { defineNuxtModule, createResolver, addComponentsDir, addComponent, addTemplate } from '@nuxt/kit';
+import { promises } from 'node:fs';
+import { defineNuxtModule, createResolver, installModule, addComponentsDir, addComponent, addTemplate } from '@nuxt/kit';
 import { genDynamicImport } from 'knitwork';
 
 const name = "@wpnuxt/blocks";
-const version = "0.0.2";
+const version = "0.0.3";
 
 const module = defineNuxtModule({
   meta: {
@@ -12,12 +12,18 @@ const module = defineNuxtModule({
     configKey: "wpNuxtBlocks"
   },
   // Default configuration options of the Nuxt module
-  defaults: {},
+  defaults: {
+    enabled: true
+  },
   async setup(_options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const resolveRuntimeModule = (path) => resolve("./runtime", path);
     console.log("!!! Setup @wpnuxt/blocks module");
     nuxt.options.alias["#wpnuxt/blocks"] = resolve(nuxt.options.buildDir, "wpnuxt/blocks");
+    await installModule("@nuxt/ui");
+    await installModule("@nuxt/image", {
+      domains: ["wordpress.wpnuxt.com"]
+    });
     addComponentsDir({
       path: resolveRuntimeModule("./components/blocks"),
       pathPrefix: false,
@@ -28,7 +34,7 @@ const module = defineNuxtModule({
     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 promises.stat(blockComponents).catch(() => null);
       if (dirStat && dirStat.isDirectory()) {
         nuxt.hook("components:dirs", (dirs) => {
           dirs.unshift({

package/dist/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>

package/dist/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>

package/dist/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>

package/dist/runtime/components/blocks/EditorBlock.vue

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

package/dist/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
+  }
+}

package/dist/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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "WPNuxt Blocks",
   "repository": "wpnuxt/wpnuxt-blocks",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack; release-it --git.tagExclude='*[-edge]*'",
-    "release-edge": "npm run lint; release-it --no-github --preRelease=edge --config .release-it-edge.json",
+    "release": "pnpm run lint && pnpm run test && pnpm run prepack; release-it --git.tagExclude='*[-edge]*'",
+    "release-edge": "pnpm run lint && pnpm run test && pnpm run prepack; release-it --no-github --preRelease=edge --config .release-it-edge.json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
@@ -34,18 +34,20 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
+    "@nuxt/image": "^1.7.0",
     "@nuxt/kit": "^3.12.4",
-    "@vernaillen/wpnuxt": "^0.6.0-edge.0"
+    "@nuxt/ui": "^2.18.4",
+    "@vernaillen/wpnuxt": "^1.0.0-edge.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.9",
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.5.0",
     "@nuxt/module-builder": "^0.8.1",
     "@nuxt/schema": "^3.12.4",
     "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.14.11",
+    "@types/node": "^22.2.0",
     "changelogen": "^0.5.5",
-    "eslint": "^9.7.0",
+    "eslint": "^9.9.0",
     "nuxt": "^3.12.4",
     "release-it": "^17.6.0",
     "typescript": "latest",