@wpnuxt/blocks 0.0.17 → 2.0.0-alpha.2

package/dist/module.d.mts

@@ -1,9 +1,24 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-interface ModuleOptions {
-    enabled: boolean;
+interface WPNuxtBlocksConfig {
+    /**
+     * Enable or disable the module
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Domains to allow for @nuxt/image
+     * @default []
+     */
+    imageDomains?: string[];
+    /**
+     * Enable Nuxt UI integration for enhanced button styling
+     * Set to false to use native HTML elements
+     * @default 'auto' - uses Nuxt UI if available
+     */
+    nuxtUI?: boolean | 'auto';
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: _nuxt_schema.NuxtModule<WPNuxtBlocksConfig, WPNuxtBlocksConfig, false>;
 
 export { _default as default };
-export type { ModuleOptions };
+export type { WPNuxtBlocksConfig };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.17",
   "configKey": "wpNuxtBlocks",
+  "version": "2.0.0-alpha.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,30 +1,36 @@
-import { promises } from 'node:fs';
-import { defineNuxtModule, createResolver, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
-import { genDynamicImport } from 'knitwork';
-
-const name = "@wpnuxt/blocks";
-const version = "0.0.17";
+import { existsSync, cpSync, promises } from 'node:fs';
+import { join } from 'node:path';
+import { defineNuxtModule, createResolver, hasNuxtModule, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
 
 const module$1 = defineNuxtModule({
   meta: {
-    name,
-    version,
+    name: "@wpnuxt/blocks",
     configKey: "wpNuxtBlocks"
   },
-  // Default configuration options of the Nuxt module
   defaults: {
-    enabled: true
+    enabled: true,
+    imageDomains: [],
+    nuxtUI: "auto"
   },
-  async setup(_options, nuxt) {
+  async setup(options, nuxt) {
+    if (!options.enabled) {
+      return;
+    }
     const { resolve } = createResolver(import.meta.url);
     const resolveRuntimeModule = (path) => resolve("./runtime", path);
-    console.log("::: Setting up @wpnuxt/blocks module");
     nuxt.options.alias["#wpnuxt/blocks"] = resolve(nuxt.options.buildDir, "wpnuxt/blocks");
-    await installModule("@nuxt/ui");
+    if (options.nuxtUI === true || options.nuxtUI === "auto" && hasNuxtModule("@nuxt/ui")) {
+      await installModule("@nuxt/ui");
+    }
     await installModule("@nuxt/image", {
-      // TODO: get wordpressUrl from @wpnuxt/core options
-      domains: ["wordpress.wpnuxt.com"]
+      domains: options.imageDomains
     });
+    await installModule("@radya/nuxt-dompurify");
+    const blocksQueriesPath = resolveRuntimeModule("./queries");
+    const mergedQueriesFolder = join(nuxt.options.srcDir, ".queries");
+    if (existsSync(mergedQueriesFolder) && existsSync(blocksQueriesPath)) {
+      cpSync(blocksQueriesPath, mergedQueriesFolder, { recursive: true });
+    }
     addComponentsDir({
       path: resolveRuntimeModule("./components"),
       pathPrefix: false,
@@ -47,31 +53,118 @@ const module$1 = defineNuxtModule({
         });
       }
     }
-    const componentsContext = { components: [] };
-    nuxt.hook("components:extend", (newComponents) => {
-      const moduleBlocksDir = resolveRuntimeModule("./components");
-      const userBlocksDir = (nuxt.options.srcDir || nuxt.options.rootDir) + "/components/blocks";
-      componentsContext.components = newComponents.filter((c) => {
-        if (c.filePath.startsWith(moduleBlocksDir) || c.filePath.startsWith(userBlocksDir)) {
-          return true;
-        }
-        return false;
-      });
-    });
     addTemplate({
       write: true,
       filename: "wpnuxt/blocks.mjs",
-      getContents({ options }) {
-        const components = options.getComponents().filter((c) => !c.island).flatMap((c) => {
-          const exp = c.export === "default" ? "c.default || c" : `c['${c.export}']`;
-          const isClient = c.mode === "client";
-          const definitions = [];
-          definitions.push(`export const ${c.pascalName} = ${genDynamicImport(c.filePath)}.then(c => ${isClient ? `createClientOnly(${exp})` : exp})`);
-          return definitions;
-        });
-        return components.join("\n");
-      },
-      options: { getComponents: () => componentsContext.components }
+      getContents() {
+        return `// Generated by @wpnuxt/blocks
+export * from '#build/graphql-operations'
+`;
+      }
+    });
+    addTemplate({
+      write: true,
+      filename: "wpnuxt/blocks.d.ts",
+      getContents() {
+        return `// Generated by @wpnuxt/blocks
+export * from '#build/graphql-operations'
+
+export interface EditorBlock {
+  __typename?: string
+  name?: string | null
+  clientId?: string | null
+  parentClientId?: string | null
+  renderedHtml?: string | null
+  attributes?: Record<string, unknown> | null
+  innerBlocks?: (EditorBlock | null)[] | null
+}
+
+export interface CoreParagraph extends EditorBlock {
+  __typename?: 'CoreParagraph'
+  attributes?: {
+    content?: string | null
+    anchor?: string | null
+    className?: string | null
+    fontSize?: string | null
+    textColor?: string | null
+    style?: string | null
+  } | null
+}
+
+export interface CoreHeading extends EditorBlock {
+  __typename?: 'CoreHeading'
+  attributes: {
+    content?: string | null
+    level: number
+    anchor?: string | null
+    className?: string | null
+    fontSize?: string | null
+    textColor?: string | null
+  }
+}
+
+export interface CoreImage extends EditorBlock {
+  __typename?: 'CoreImage'
+  attributes?: {
+    url?: string | null
+    alt?: string | null
+    width?: number | null
+    height?: number | null
+    scale?: string | null
+    caption?: string | null
+    className?: string | null
+  } | null
+}
+
+export interface CoreButton extends EditorBlock {
+  __typename?: 'CoreButton'
+  attributes: {
+    url?: string | null
+    text?: string | null
+    linkTarget?: string | null
+    rel?: string | null
+    style?: string | null
+    fontSize?: string | null
+    className?: string | null
+    cssClassName?: string | null
+    metadata?: string | null
+  }
+}
+
+export interface CoreButtons extends EditorBlock {
+  __typename?: 'CoreButtons'
+  innerBlocks?: (CoreButton | null)[] | null
+}
+
+export interface CoreQuote extends EditorBlock {
+  __typename?: 'CoreQuote'
+  innerBlocks?: (CoreParagraph | null)[] | null
+}
+
+export interface CoreGallery extends EditorBlock {
+  __typename?: 'CoreGallery'
+  innerBlocks?: (CoreImage | null)[] | null
+}
+
+export interface CoreSpacer extends EditorBlock {
+  __typename?: 'CoreSpacer'
+  attributes?: {
+    spacerHeight?: string | null
+    spacerWidth?: string | null
+    className?: string | null
+  } | null
+}
+
+export interface CoreDetails extends EditorBlock {
+  __typename?: 'CoreDetails'
+  attributes?: {
+    summary?: string | null
+    showContent?: boolean | null
+    className?: string | null
+  } | null
+}
+`;
+      }
     });
   }
 });

package/dist/runtime/components/BlockComponent.d.vue.ts

@@ -1,7 +0,0 @@
-import type { EditorBlock } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: EditorBlock;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/BlockComponent.vue

@@ -1,25 +1,22 @@
 <script setup>
 import { pascalCase } from "scule";
 import { resolveComponent } from "#imports";
-const manifest = await import("#wpnuxt/blocks").catch(() => ({}));
 const props = defineProps({
   block: { type: null, required: true }
 });
-const findComponentToRender = async () => {
+const componentToRender = (() => {
   if (props.block.parentClientId === null || props.block.parentClientId === void 0) {
     if (props.block.name) {
       const componentName = pascalCase(props.block.name);
-      const componentImporter = manifest[componentName];
-      if (typeof componentImporter === "function") {
-        return await componentImporter();
+      const resolved = resolveComponent(componentName);
+      if (typeof resolved !== "string") {
+        return resolved;
       }
     }
     return resolveComponent("EditorBlock");
-  } else {
-    return void 0;
   }
-};
-const componentToRender = await findComponentToRender();
+  return void 0;
+})();
 </script>
 
 <template>

package/dist/runtime/components/BlockComponent.vue.d.ts

@@ -1,7 +0,0 @@
-import type { EditorBlock } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: EditorBlock;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/BlockRenderer.d.vue.ts

@@ -1,7 +0,0 @@
-import type { NodeWithEditorBlocksFragment } from '#build/graphql-operations';
-type __VLS_Props = {
-    node: NodeWithEditorBlocksFragment;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/BlockRenderer.vue

@@ -7,10 +7,14 @@ defineProps({
 
 <template>
   <div>
-    <BlockComponent
+    <template
       v-for="block, index in node.editorBlocks"
       :key="index"
-      :block="block"
-    />
+    >
+      <BlockComponent
+        v-if="block"
+        :block="block"
+      />
+    </template>
   </div>
 </template>

package/dist/runtime/components/BlockRenderer.vue.d.ts

@@ -1,7 +0,0 @@
-import type { NodeWithEditorBlocksFragment } from '#build/graphql-operations';
-type __VLS_Props = {
-    node: NodeWithEditorBlocksFragment;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreButton.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreButton } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreButton;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,25 +1,52 @@
 <script setup>
 import { convertFontSize, getCssClasses } from "../../util";
-import { ref } from "#imports";
+import { ref, useNuxtApp } from "#imports";
 const props = defineProps({
   block: { type: null, required: true }
 });
 const variant = ref("solid");
 if (props.block.attributes?.metadata) {
-  variant.value = props.block.attributes?.metadata?.replaceAll('"', "");
+  const metadataVariant = props.block.attributes?.metadata?.replaceAll('"', "");
+  if (["solid", "outline", "soft", "subtle", "ghost", "link"].includes(metadataVariant)) {
+    variant.value = metadataVariant;
+  }
 }
+const nuxtApp = useNuxtApp();
+const hasNuxtUI = !!nuxtApp.vueApp.component("UButton");
 </script>
 
 <template>
+  <!-- Use Nuxt UI UButton when available -->
   <UButton
-    :to="block.attributes.url"
+    v-if="hasNuxtUI"
+    :to="block.attributes.url ?? void 0"
     :target="block.attributes.linkTarget"
     :rel="block.attributes.rel"
     :style="block.attributes.style"
     :variant
     :class="getCssClasses(block)"
-    :size="convertFontSize(block.attributes?.fontSize, '', 'md')"
+    :size="convertFontSize(block.attributes?.fontSize ?? void 0, '', 'md')"
   >
-    <span v-sanitize="block.attributes.text" />
+    <span v-sanitize-html="block.attributes.text" />
   </UButton>
+
+  <!-- Fallback to native link/button when Nuxt UI is not available -->
+  <a
+    v-else-if="block.attributes.url"
+    :href="block.attributes.url"
+    :target="block.attributes.linkTarget ?? void 0"
+    :rel="block.attributes.rel ?? void 0"
+    :style="block.attributes.style"
+    :class="['wp-block-button__link', getCssClasses(block)]"
+  >
+    <span v-sanitize-html="block.attributes.text" />
+  </a>
+  <button
+    v-else
+    type="button"
+    :style="block.attributes.style"
+    :class="['wp-block-button__link', getCssClasses(block)]"
+  >
+    <span v-sanitize-html="block.attributes.text" />
+  </button>
 </template>

package/dist/runtime/components/blocks/CoreButton.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreButton } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreButton;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreButtons.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreButtons } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreButtons;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -10,14 +10,16 @@ defineProps({
       v-for="innerBlock, index in block.innerBlocks"
       :key="index"
     >
-      <CoreButton
-        v-if="innerBlock.name === 'core/button'"
-        :block="innerBlock"
-      />
-      <EditorBlock
-        v-else
-        :block="innerBlock"
-      />
+      <template v-if="innerBlock">
+        <CoreButton
+          v-if="innerBlock.name === 'core/button'"
+          :block="innerBlock"
+        />
+        <EditorBlock
+          v-else
+          :block="innerBlock"
+        />
+      </template>
     </template>
   </div>
 </template>

package/dist/runtime/components/blocks/CoreButtons.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreButtons } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreButtons;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  block: { type: Object, required: true }
+});
+</script>
+
+<template>
+  <details
+    :open="block.attributes?.showContent ?? false"
+    :class="block.attributes?.className ?? void 0"
+  >
+    <summary v-sanitize-html="block.attributes?.summary" />
+    <div v-if="block.innerBlocks?.length">
+      <template
+        v-for="(innerBlock, index) in block.innerBlocks"
+        :key="innerBlock?.clientId ?? index"
+      >
+        <BlockComponent
+          v-if="innerBlock"
+          :block="innerBlock"
+        />
+      </template>
+    </div>
+  </details>
+</template>

package/dist/runtime/components/blocks/CoreGallery.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreGallery } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreGallery;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -20,7 +20,7 @@ props.block?.innerBlocks?.forEach((innerBlock) => {
     >
       <div
         v-if="imgBlock"
-        class="galleryImgWrapper rounded-lg overflow-hidden relative mb-4 md:mb-6  shadow-md hover:shadow-xl"
+        class="galleryImgWrapper rounded-lg overflow-hidden relative mb-4 md:mb-6 shadow-md hover:shadow-xl"
       >
         <CoreImage
           :block="imgBlock"

package/dist/runtime/components/blocks/CoreGallery.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreGallery } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreGallery;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreHeading.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreHeading } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreHeading;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -9,43 +9,43 @@ const cssClass = getCssClasses(props.block);
 <template>
   <template v-if="block.attributes.level === 1">
     <h1
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 2">
     <h2
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 3">
     <h3
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 4">
     <h4
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 5">
     <h5
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>
   <template v-else-if="block.attributes.level === 6">
     <h6
-      :id="block?.attributes?.anchor"
-      v-sanitize="block.attributes.content"
+      :id="block?.attributes?.anchor ?? void 0"
+      v-sanitize-html="block.attributes.content"
       :class="cssClass"
     />
   </template>

package/dist/runtime/components/blocks/CoreHeading.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreHeading } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreHeading;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreImage.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreImage } from '#graphql-operations';
-type __VLS_Props = {
-    block: CoreImage;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -11,13 +11,13 @@ const imgUrl = props.block?.attributes?.url;
       v-if="imgUrl"
       :src="imgUrl"
       :alt="block?.attributes?.alt"
-      :width="block?.attributes?.width"
-      :height="block?.attributes?.height"
-      :fit="block?.attributes?.scale"
+      :width="block?.attributes?.width ?? void 0"
+      :height="block?.attributes?.height ?? void 0"
+      :fit="block?.attributes?.scale ?? void 0"
     />
     <div
       v-else
-      v-sanitize="block?.renderedHtml"
+      v-sanitize-html="block?.renderedHtml"
     />
   </div>
 </template>

package/dist/runtime/components/blocks/CoreImage.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreImage } from '#graphql-operations';
-type __VLS_Props = {
-    block: CoreImage;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreParagraph.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreParagraph } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreParagraph;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -7,9 +7,9 @@ const props = defineProps({
 
 <template>
   <p
-    :id="block?.attributes?.anchor"
-    v-sanitize="block?.attributes?.content"
+    :id="block?.attributes?.anchor ?? void 0"
+    v-sanitize-html="block?.attributes?.content"
     :class="getCssClasses(props.block)"
-    :style="block?.attributes?.style"
+    :style="block?.attributes?.style ?? void 0"
   />
 </template>

package/dist/runtime/components/blocks/CoreParagraph.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreParagraph } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreParagraph;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreQuote.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreQuote } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreQuote;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -10,7 +10,7 @@ defineProps({
     :key="index"
   >
     <CoreParagraph
-      v-if="innerBlock.name === 'core/paragraph'"
+      v-if="innerBlock && innerBlock.name === 'core/paragraph'"
       class="text-sm text-primary-500"
       :block="innerBlock"
     />

package/dist/runtime/components/blocks/CoreQuote.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreQuote } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreQuote;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/blocks/CoreSpacer.d.vue.ts

@@ -1,7 +0,0 @@
-import type { CoreSpacer } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreSpacer;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -10,8 +10,8 @@ const cssClass = getCssClasses(props.block);
   <div
     :class="cssClass"
     :style="{
-  height: block.attributes?.spacerHeight,
-  width: block.attributes?.spacerWidth
+  height: block.attributes?.spacerHeight ?? void 0,
+  width: block.attributes?.spacerWidth ?? void 0
 }"
   />
 </template>

package/dist/runtime/components/blocks/CoreSpacer.vue.d.ts

@@ -1,7 +0,0 @@
-import type { CoreSpacer } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: CoreSpacer;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,7 +0,0 @@
-import type { EditorBlock } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: EditorBlock;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

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

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

@@ -1,7 +0,0 @@
-import type { EditorBlock } from '#wpnuxt/blocks';
-type __VLS_Props = {
-    block: EditorBlock;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/queries/fragments/CoreDetails.fragment.gql

@@ -0,0 +1,15 @@
+fragment CoreDetails on CoreDetails {
+  __typename
+  name
+  clientId
+  parentClientId
+  renderedHtml
+  attributes {
+    summary
+    showContent
+    className
+  }
+  innerBlocks {
+    ...EditorBlock
+  }
+}

package/dist/runtime/queries/fragments/EditorBlock.fragment.gql

@@ -1,10 +1,10 @@
-#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';
-#import '~/.queries/fragments/CoreSpacer.fragment.gql';
+#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"
+#import "~/.queries/fragments/CoreSpacer.fragment.gql"
 
 fragment EditorBlock on EditorBlock {
   apiVersion

package/dist/runtime/queries/fragments/NodeWithEditorBlocks.fragment.gql

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

package/dist/runtime/util/attributeColor.d.ts

@@ -1 +0,0 @@
-export declare const getColor: (textColor?: string) => string;

package/dist/runtime/util/attributeFontSize.d.ts

@@ -1 +0,0 @@
-export declare const convertFontSize: (fontSize: string, prefix?: string, defaultSize?: string) => string;

package/dist/runtime/util/index.d.ts

@@ -1,4 +0,0 @@
-import { convertFontSize } from './attributeFontSize.js';
-import { getColor } from './attributeColor.js';
-declare const getCssClasses: (block: any) => string;
-export { getCssClasses, convertFontSize, getColor };

package/dist/types.d.mts

@@ -1,3 +1,9 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
 export { default } from './module.mjs'
 
-export { type ModuleOptions } from './module.mjs'
+export { type WPNuxtBlocksConfig } from './module.mjs'

package/package.json

@@ -1,8 +1,21 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.17",
-  "description": "WPNuxt Blocks",
-  "repository": "wpnuxt/wpnuxt-blocks",
+  "version": "2.0.0-alpha.2",
+  "description": "Vue components for rendering WordPress Gutenberg blocks in Nuxt",
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "wordpress",
+    "gutenberg",
+    "blocks",
+    "vue",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpnuxt/wpnuxt.git",
+    "directory": "packages/blocks"
+  },
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -12,54 +25,39 @@
     }
   },
   "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "files": [
     "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "prepack": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
-    "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 --preRelease=edge --config .release-it-edge.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "wp-env": "wp-env",
-    "wp-env:create": "wp-env start --update && ./wordpress/wp-env-cli.sh",
-    "start": "pnpm run wp-env:create && pnpm run dev"
-  },
   "dependencies": {
+    "@nuxt/kit": "4.2.2",
     "@nuxt/image": "^2.0.0",
-    "@nuxt/kit": "^4.2.2",
-    "@nuxt/ui": "^4.3.0",
-    "@wpnuxt/core": "1.0.0-edge.30"
+    "@radya/nuxt-dompurify": "^1.0.5",
+    "scule": "^1.3.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.1.1",
-    "@nuxt/eslint-config": "^1.12.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.2.2",
-    "@nuxt/test-utils": "^3.21.0",
-    "@tailwindcss/typography": "^0.5.19",
+    "@nuxt/schema": "4.2.2",
     "@types/node": "^25.0.3",
-    "@wordpress/env": "^10.36.0",
-    "changelogen": "^0.6.2",
-    "eslint": "^9.39.2",
-    "nuxt": "^4.2.2",
-    "release-it": "^19.1.0",
-    "typescript": "5.9.3",
-    "vitest": "^4.0.16",
-    "vue-tsc": "^3.1.8"
+    "nuxt": "4.2.2",
+    "vue-tsc": "^3.2.1"
   },
   "peerDependencies": {
-    "knitwork": "^1.2.0",
-    "pathe": "^2.0.1"
+    "nuxt": "^4.0.0",
+    "@nuxt/ui": "^4.0.0"
   },
-  "packageManager": "pnpm@10.26.0+sha512.3b3f6c725ebe712506c0ab1ad4133cf86b1f4b687effce62a9b38b4d72e3954242e643190fc51fa1642949c735f403debd44f5cb0edd657abe63a8b6a7e1e402"
-}
+  "peerDependenciesMeta": {
+    "@nuxt/ui": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev:prepare": "nuxt-module-build build --stub",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rm -rf dist .nuxt node_modules"
+  }
+}

package/README.md

@@ -1,70 +0,0 @@
-# WPNuxt Blocks
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-A set of components to render Gutenberg Blocks with the WPNuxt module
-
-Allows to override each block component to be overriden by a custom component to have full control over how every Gutenberg Block is rendered in Nuxt.
-
-- [✨  Release Notes](/CHANGELOG.md)
-- [🏀 Online playground](https://stackblitz.com/github/wpnuxt/wpnuxt-blocks?file=playground%2Fapp%2Fpages%2F%5B...slug%5D.vue)
-- [📖  Documentation](https://wpnuxt.com)
-
-## Quick Setup
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add @wpnuxt/blocks
-```
-
-That's it! You can now use WPNuxt Blocks in your Nuxt app ✨
-
-
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-  
-  ```bash
-  # Install dependencies
-  pnpm install
-  
-  # Generate type stubs
-  pnpm run dev:prepare
-  
-  # Develop with the playground
-  pnpm run dev
-  
-  # Build the playground
-  pnpm run dev:build
-  
-  # Run ESLint
-  pnpm run lint
-  
-  # Run Vitest
-  pnpm run test
-  pnpm run test:watch
-  
-  # Release new version
-  pnpm run release
-  ```
-
-</details>
-
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@wpnuxt/core/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://www.npmjs.com/package/@wpnuxt/core
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/@wpnuxt/core.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npmjs.com/package/@wpnuxt/core
-
-[license-src]: https://img.shields.io/npm/l/@wpnuxt/core.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/@wpnuxt/core
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com

package/dist/runtime/queries/fragments/Page.fragment.gql

@@ -1,17 +0,0 @@
-#import '~/.queries/fragments/ContentNode.fragment.gql';
-#import '~/.queries/fragments/NodeWithFeaturedImage.fragment.gql';
-#import '~/.queries/fragments/NodeWithEditorBlocks.fragment.gql';
-
-fragment Page on Page {
-  ...ContentNode
-  ...NodeWithFeaturedImage
-  ...NodeWithEditorBlocks
-  content
-  isFrontPage
-  isPostsPage
-  isPreview
-  isPrivacyPage
-  isRestricted
-  isRevision
-  title
-}

package/dist/runtime/queries/fragments/Post.fragment.gql

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

package/dist/runtime/server/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../../.nuxt/tsconfig.server.json",
-}