Block Components

@wpnuxt/blocks includes Vue components for common Gutenberg blocks.

How It Works

The BlockRenderer component iterates over editorBlocks and renders each block using the appropriate component based on the block's name attribute.

core/paragraph  →  CoreParagraph.vue
core/heading    →  CoreHeading.vue
core/image      →  CoreImage.vue

Unsupported blocks fall back to EditorBlock, which renders the saved HTML.

Included Components

CoreParagraph

Renders paragraph blocks with support for anchors, CSS classes, and inline styles.

<!-- Output -->
<p id="anchor" class="custom-class" style="...">
  Content here
</p>

CoreHeading

Renders heading blocks (h1-h6) based on the level attribute.

<!-- Output for level 2 -->
<h2 id="anchor" class="custom-class">
  Heading text
</h2>

CoreImage

Renders images using <NuxtImg> for optimization. Falls back to rendered HTML if URL is missing.

<!-- Output -->
<NuxtImg
  src="/wp-content/uploads/image.jpg"
  alt="Description"
  width="800"
  height="600"
/>

CoreButton

Renders button blocks. Automatically uses <UButton> when Nuxt UI is available, otherwise falls back to native elements.

<!-- With Nuxt UI -->
<UButton to="/page" variant="solid" size="md">
  Click me
</UButton>

<!-- Without Nuxt UI -->
<a href="/page" class="wp-block-button__link">
  Click me
</a>

CoreButtons

Container for multiple button blocks. Renders inner CoreButton components.

<!-- Output -->
<div class="wp-block-buttons">
  <CoreButton :block="innerBlock" />
  <!-- ... -->
</div>

CoreQuote

Renders blockquote with inner paragraph blocks.

<!-- Output -->
<blockquote>
  <p class="text-sm text-primary-500">Quote text</p>
</blockquote>

CoreGallery

Renders image galleries with inner image blocks.

CoreSpacer

Renders vertical and horizontal spacing.

<!-- Output -->
<div style="height: 50px; width: 100px" />

CoreDetails

Renders expandable details/summary blocks.

<!-- Output -->
<details>
  <summary>Click to expand</summary>
  <!-- Inner blocks rendered here -->
</details>

EditorBlock (Fallback)

Renders the saved HTML for unsupported blocks.

<!-- Output -->
<div v-sanitize-html="block.renderedHtml" />

Custom Components

Override any component by creating a file in components/blocks/:

<script setup lang="ts">
import type { CoreParagraph } from '#wpnuxt/blocks'

defineProps<{
  block: CoreParagraph
}>()
</script>

<template>
  <p class="my-custom-paragraph">
    <span v-sanitize-html="block?.attributes?.content" />
  </p>
</template>

Your component automatically takes precedence over the default.

Adding New Block Types

Create a component for any WordPress block:

<script setup lang="ts">
defineProps<{
  block: {
    attributes?: {
      content?: string
      language?: string
    }
  }
}>()
</script>

<template>
  <pre><code :class="`language-${block.attributes?.language}`">{{ block.attributes?.content }}</code></pre>
</template>

The component name must match the block name pattern:

• core/code → CoreCode.vue
• core/list → CoreList.vue
• acf/custom-block → AcfCustomBlock.vue

Type Imports

Import block types for TypeScript support:

import type {
  CoreParagraph,
  CoreHeading,
  CoreImage,
  CoreButton,
  EditorBlock
} from '#wpnuxt/blocks'