@wpnuxt/blocks 0.0.6 → 0.0.8

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "configKey": "wpNuxtBlocks",
   "builder": {
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -1,9 +1,9 @@
 import { promises } from 'node:fs';
-import { defineNuxtModule, createResolver, installModule, addComponentsDir, addComponent, addTemplate } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addComponentsDir, addTemplate } from '@nuxt/kit';
 import { genDynamicImport } from 'knitwork';
 
 const name = "@wpnuxt/blocks";
-const version = "0.0.6";
+const version = "0.0.8";
 
 const module = defineNuxtModule({
   meta: {
@@ -22,10 +22,11 @@ const module = defineNuxtModule({
     nuxt.options.alias["#wpnuxt/blocks"] = resolve(nuxt.options.buildDir, "wpnuxt/blocks");
     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
@@ -46,12 +47,9 @@ const module = defineNuxtModule({
         });
       }
     }
-    addComponent({ name: "BlockComponent", filePath: resolveRuntimeModule("./components/BlockComponent") });
-    addComponent({ name: "BlockInfo", filePath: resolveRuntimeModule("./components/BlockInfo") });
-    addComponent({ name: "BlockRenderer", filePath: resolveRuntimeModule("./components/BlockRenderer") });
     const componentsContext = { components: [] };
     nuxt.hook("components:extend", (newComponents) => {
-      const moduleBlocksDir = resolveRuntimeModule("./components/blocks");
+      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)) {

package/dist/runtime/components/BlockComponent.vue

@@ -27,11 +27,9 @@ const componentToRender = await findComponentToRender()
 </script>
 
 <template>
-  <div>
-    <component
-      :is="componentToRender"
-      v-if="componentToRender"
-      :block="block"
-    />
-  </div>
+  <component
+    :is="componentToRender"
+    v-if="componentToRender"
+    :block="block"
+  />
 </template>

package/dist/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[]
+  post: NodeWithEditorBlocksFragment
 }>()
 </script>
 
 <template>
   <div>
     <BlockComponent
-      v-for="block, index in blocks"
+      v-for="block, index in post.editorBlocks"
       :key="index"
       :block="block"
     />

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

@@ -1,18 +1,29 @@
 <script setup lang="ts">
+import { convertFontSize, getCssClasses } from '../../util'
 import type { CoreButton } from '#wpnuxt/blocks'
+import { ref } from '#imports'
 
-defineProps<{
+const props = defineProps<{
   block: CoreButton
 }>()
+const variant = ref('solid')
+/* if (props.block.attributes?.cssClassName?.includes('is-style-outline')) {
+  variant.value = 'outline'
+} */
+if (props.block.attributes?.metadata) {
+  variant.value = props.block.attributes?.metadata?.replaceAll('"', '')
+}
 </script>
 
 <template>
   <UButton
     :to="block.attributes.url"
     :target="block.attributes.linkTarget"
-    :class="block.attributes.cssClassName"
     :rel="block.attributes.rel"
     :style="block.attributes.style"
+    :variant
+    :class="getCssClasses(block)"
+    :size="convertFontSize(block.attributes?.fontSize, '', 'md')"
   >
     <span v-sanitize="block.attributes.text" />
   </UButton>

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

@@ -7,17 +7,19 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    v-for="innerBlock, index in block.innerBlocks"
-    :key="index"
-  >
-    <CoreButton
-      v-if="innerBlock.name === 'core/button'"
-      :block="innerBlock"
-    />
-    <EditorBlock
-      v-else
-      :block="innerBlock"
-    />
+  <div>
+    <template
+      v-for="innerBlock, index in block.innerBlocks"
+      :key="index"
+    >
+      <CoreButton
+        v-if="innerBlock.name === 'core/button'"
+        :block="innerBlock"
+      />
+      <EditorBlock
+        v-else
+        :block="innerBlock"
+      />
+    </template>
   </div>
 </template>

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

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

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

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

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { getCssClasses } from '../../util'
+import type { CoreSpacer } from '#wpnuxt/blocks'
+
+const props = defineProps<{
+  block: CoreSpacer
+}>()
+const cssClass = getCssClasses(props.block)
+</script>
+
+<template>
+  <div
+    :class="cssClass"
+    :style="{
+      height: block.attributes?.spacerHeight,
+      width: block.attributes?.spacerWidth
+    }"
+  />
+</template>

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

@@ -0,0 +1,11 @@
+fragment CoreSpacer on CoreSpacer {
+  attributes {
+    anchor
+    className
+    spacerHeight: height
+    spacerWidth: width
+    lock
+    metadata
+    style
+  }
+}

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

@@ -4,6 +4,7 @@
 #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
@@ -20,4 +21,5 @@ fragment EditorBlock on EditorBlock {
   ...CoreImage
   ...CoreParagraph
   ...CoreQuote
+  ...CoreSpacer
 }

package/dist/runtime/queries/fragments/{EditorBlocks.fragment.gql → NodeWithEditorBlocks.fragment.gql}

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

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

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

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

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

package/dist/runtime/util/attributeColor.js

@@ -0,0 +1,4 @@
+export const getColor = function getColor2(textColor) {
+  if (textColor == "accent-3") return "text-primary-500";
+  return "";
+};

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

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

package/dist/runtime/util/attributeFontSize.js

@@ -0,0 +1,18 @@
+export const convertFontSize = function convertFontSize2(fontSize, prefix, defaultSize) {
+  if (!prefix) prefix = "";
+  if (fontSize && fontSize !== "" && fontSize !== "null") {
+    switch (fontSize) {
+      case "small":
+        return prefix + "sm";
+      case "medium":
+        return prefix + "md";
+      case "large":
+        return prefix + "lg";
+      case "x-large":
+        return prefix + "xl";
+      case "xx-large":
+        return prefix + "2xl";
+    }
+  }
+  return defaultSize ? prefix + defaultSize : "";
+};

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

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

package/dist/runtime/util/index.js

@@ -0,0 +1,9 @@
+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 + " " : " ";
+  return passedOn + text + " " + color;
+};
+export { getCssClasses, convertFontSize, getColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpnuxt/blocks",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "WPNuxt Blocks",
   "repository": "wpnuxt/wpnuxt-blocks",
   "license": "MIT",
@@ -31,21 +31,25 @@
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+    "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/image": "^1.7.0",
     "@nuxt/kit": "^3.12.4",
     "@nuxt/ui": "^2.18.4",
-    "@wpnuxt/core": "^1.0.0-edge.6"
+    "@wpnuxt/core": "^1.0.0-edge.8"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.9",
     "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/module-builder": "^0.8.1",
+    "@nuxt/module-builder": "^0.8.3",
     "@nuxt/schema": "^3.12.4",
-    "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^22.2.0",
+    "@nuxt/test-utils": "^3.14.1",
+    "@types/node": "^22.4.1",
+    "@wordpress/env": "^10.5.0",
     "changelogen": "^0.5.5",
     "eslint": "^9.9.0",
     "nuxt": "^3.12.4",
@@ -57,5 +61,6 @@
   "peerDependencies": {
     "knitwork": "^1.1.0",
     "pathe": "^1.1.2"
-  }
+  },
+  "packageManager": "pnpm@9.7.0"
 }