@wpnuxt/blocks 2.0.0-alpha.1 → 2.0.0-alpha.11

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present - WPNuxt Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/module.d.mts

@@ -17,6 +17,11 @@ interface WPNuxtBlocksConfig {
      * @default 'auto' - uses Nuxt UI if available
      */
     nuxtUI?: boolean | 'auto';
+    /**
+     * Skip the WPGraphQL Content Blocks plugin check
+     * @default false
+     */
+    skipPluginCheck?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<WPNuxtBlocksConfig, WPNuxtBlocksConfig, false>;
 

package/dist/module.d.ts

@@ -0,0 +1,29 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+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';
+    /**
+     * Skip the WPGraphQL Content Blocks plugin check
+     * @default false
+     */
+    skipPluginCheck?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<WPNuxtBlocksConfig, WPNuxtBlocksConfig, false>;
+
+export { _default as default };
+export type { WPNuxtBlocksConfig };

package/dist/module.json

@@ -1,7 +1,10 @@
 {
   "name": "@wpnuxt/blocks",
   "configKey": "wpNuxtBlocks",
-  "version": "2.0.0-alpha.0",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "2.0.0-alpha.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,16 +1,21 @@
 import { existsSync, cpSync, promises } from 'node:fs';
 import { join } from 'node:path';
-import { defineNuxtModule, createResolver, hasNuxtModule, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
+import { useLogger, defineNuxtModule, createResolver, hasNuxtModule, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
 
+const logger = useLogger("@wpnuxt/blocks");
 const module$1 = defineNuxtModule({
   meta: {
     name: "@wpnuxt/blocks",
-    configKey: "wpNuxtBlocks"
+    configKey: "wpNuxtBlocks",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
   },
   defaults: {
     enabled: true,
     imageDomains: [],
-    nuxtUI: "auto"
+    nuxtUI: "auto",
+    skipPluginCheck: false
   },
   async setup(options, nuxt) {
     if (!options.enabled) {
@@ -26,6 +31,42 @@ const module$1 = defineNuxtModule({
       domains: options.imageDomains
     });
     await installModule("@radya/nuxt-dompurify");
+    if (!options.skipPluginCheck) {
+      const wpNuxtConfig = nuxt.options.runtimeConfig?.public?.wpNuxt;
+      const wordpressUrl = wpNuxtConfig?.wordpressUrl || process.env.WPNUXT_WORDPRESS_URL;
+      const graphqlEndpoint = wpNuxtConfig?.graphqlEndpoint || process.env.WPNUXT_GRAPHQL_ENDPOINT || "/graphql";
+      if (wordpressUrl) {
+        const graphqlUrl = `${wordpressUrl}${graphqlEndpoint}`;
+        const introspectionQuery = `
+          query CheckEditorBlocks {
+            __type(name: "Post") {
+              fields {
+                name
+              }
+            }
+          }
+        `;
+        try {
+          const response = await fetch(graphqlUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ query: introspectionQuery })
+          });
+          if (response.ok) {
+            const data = await response.json();
+            const fields = data?.data?.__type?.fields || [];
+            const hasEditorBlocks = fields.some((f) => f.name === "editorBlocks");
+            if (!hasEditorBlocks) {
+              logger.warn("WPGraphQL Content Blocks plugin not detected on WordPress.");
+              logger.warn("Install it from: https://github.com/wpengine/wp-graphql-content-blocks");
+              logger.warn("Without this plugin, BlockRenderer will not work correctly.");
+            }
+          }
+        } catch (error) {
+          logger.debug("Could not check for WPGraphQL Content Blocks plugin:", error);
+        }
+      }
+    }
     const blocksQueriesPath = resolveRuntimeModule("./queries");
     const mergedQueriesFolder = join(nuxt.options.srcDir, ".queries");
     if (existsSync(mergedQueriesFolder) && existsSync(blocksQueriesPath)) {

package/dist/runtime/components/BlockComponent.vue

@@ -1,22 +1,45 @@
 <script setup>
 import { pascalCase } from "scule";
-import { resolveComponent } from "#imports";
+import { computed, resolveComponent, getCurrentInstance } from "vue";
 const props = defineProps({
   block: { type: null, required: true }
 });
-const componentToRender = (() => {
+const registrationCache = /* @__PURE__ */ new Map();
+const instance = getCurrentInstance();
+function isComponentRegistered(name) {
+  if (registrationCache.has(name)) {
+    return registrationCache.get(name);
+  }
+  if (!instance) {
+    registrationCache.set(name, false);
+    return false;
+  }
+  const appComponents = instance.appContext.components;
+  const isGlobal = name in appComponents;
+  const localComponents = instance.type.components;
+  const isLocal = !!(localComponents && name in localComponents);
+  const result = isGlobal || isLocal;
+  registrationCache.set(name, result);
+  return result;
+}
+const hot = import.meta.hot;
+if (hot) {
+  hot.on("vite:beforeUpdate", () => {
+    registrationCache.clear();
+  });
+}
+const componentToRender = computed(() => {
   if (props.block.parentClientId === null || props.block.parentClientId === void 0) {
     if (props.block.name) {
       const componentName = pascalCase(props.block.name);
-      const resolved = resolveComponent(componentName);
-      if (typeof resolved !== "string") {
-        return resolved;
+      if (isComponentRegistered(componentName)) {
+        return resolveComponent(componentName);
       }
     }
     return resolveComponent("EditorBlock");
   }
   return void 0;
-})();
+});
 </script>
 
 <template>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { convertFontSize, getCssClasses } from "../../util";
-import { ref, useNuxtApp } from "#imports";
+import { computed, ref, useNuxtApp, useRuntimeConfig, isInternalLink, toRelativePath } from "#imports";
 const props = defineProps({
   block: { type: null, required: true }
 });
@@ -13,13 +13,24 @@ if (props.block.attributes?.metadata) {
 }
 const nuxtApp = useNuxtApp();
 const hasNuxtUI = !!nuxtApp.vueApp.component("UButton");
+const config = useRuntimeConfig();
+const wordpressUrl = config.public.wpNuxt?.wordpressUrl;
+const isInternal = computed(() => {
+  const url = props.block.attributes?.url;
+  return !!url && isInternalLink(url, wordpressUrl);
+});
+const buttonUrl = computed(() => {
+  const url = props.block.attributes?.url;
+  if (!url) return void 0;
+  return isInternal.value ? toRelativePath(url) : url;
+});
 </script>
 
 <template>
   <!-- Use Nuxt UI UButton when available -->
   <UButton
     v-if="hasNuxtUI"
-    :to="block.attributes.url ?? void 0"
+    :to="buttonUrl"
     :target="block.attributes.linkTarget"
     :rel="block.attributes.rel"
     :style="block.attributes.style"
@@ -30,7 +41,17 @@ const hasNuxtUI = !!nuxtApp.vueApp.component("UButton");
     <span v-sanitize-html="block.attributes.text" />
   </UButton>
 
-  <!-- Fallback to native link/button when Nuxt UI is not available -->
+  <!-- Fallback: use NuxtLink for internal, <a> for external -->
+  <NuxtLink
+    v-else-if="block.attributes.url && isInternal"
+    :to="buttonUrl"
+    :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" />
+  </NuxtLink>
   <a
     v-else-if="block.attributes.url"
     :href="block.attributes.url"

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

@@ -1,13 +1,13 @@
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   block: { type: null, required: true }
 });
-const imageBlocks = [];
-props.block?.innerBlocks?.forEach((innerBlock) => {
-  if (innerBlock && innerBlock.name === "core/image") {
-    const imgBlock = innerBlock;
-    imageBlocks.push(imgBlock);
-  }
+const imageBlocks = computed(() => {
+  if (!props.block?.innerBlocks) return [];
+  return props.block.innerBlocks.filter(
+    (block) => block !== null && block.__typename === "CoreImage"
+  );
 });
 </script>
 

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

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

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

@@ -0,0 +1,22 @@
+#import "~/.queries/fragments/NodeWithExcerpt.fragment.gql"
+#import "~/.queries/fragments/ContentNode.fragment.gql"
+#import "~/.queries/fragments/NodeWithFeaturedImage.fragment.gql"
+#import "~/.queries/fragments/NodeWithContentEditor.fragment.gql"
+#import "~/.queries/fragments/NodeWithEditorBlocks.fragment.gql"
+
+fragment Post on Post {
+  ...NodeWithExcerpt
+  ...ContentNode
+  ...NodeWithFeaturedImage
+  ...NodeWithContentEditor
+  ...NodeWithEditorBlocks
+  title
+  categories {
+    nodes {
+      id
+      name
+      uri
+      description
+    }
+  }
+}

package/dist/runtime/util/index.js

@@ -1,9 +1,10 @@
 import { convertFontSize } from "./attributeFontSize.js";
 import { getColor } from "./attributeColor.js";
 const getCssClasses = function getCssClasses2(block) {
-  const text = convertFontSize(block.attributes?.fontSize, "text-");
-  const color = getColor(block.attributes?.textColor);
-  const passedOn = block?.attributes?.className != null ? block?.attributes?.className + " " : " ";
+  const attrs = block.attributes;
+  const text = convertFontSize(attrs?.fontSize, "text-");
+  const color = getColor(attrs?.textColor);
+  const passedOn = attrs?.className != null ? attrs.className + " " : " ";
   return passedOn + text + " " + color;
 };
 export { getCssClasses, convertFontSize, getColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.11",
   "description": "Vue components for rendering WordPress Gutenberg blocks in Nuxt",
   "keywords": [
     "nuxt",
@@ -33,21 +33,23 @@
     "access": "public"
   },
   "dependencies": {
-    "@nuxt/kit": "4.2.2",
     "@nuxt/image": "^2.0.0",
+    "@nuxt/kit": "4.3.1",
     "@radya/nuxt-dompurify": "^1.0.5",
     "scule": "^1.3.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "4.2.2",
-    "@types/node": "^25.0.3",
-    "nuxt": "4.2.2",
-    "vue-tsc": "^3.2.1"
+    "@nuxt/schema": "4.3.1",
+    "@nuxt/test-utils": "^4.0.0",
+    "@types/node": "^25.2.2",
+    "nuxt": "4.3.1",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.3"
   },
   "peerDependencies": {
-    "nuxt": "^4.0.0",
-    "@nuxt/ui": "^4.0.0"
+    "@nuxt/ui": "^4.0.0",
+    "nuxt": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@nuxt/ui": {
@@ -56,7 +58,9 @@
   },
   "scripts": {
     "build": "nuxt-module-build build",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
+    "dev:prepare": "nuxt-module-build build --stub",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "typecheck": "vue-tsc --noEmit",
     "clean": "rm -rf dist .nuxt node_modules"
   }