--- title: "Block Components" description: "Reference for all included Gutenberg block components" canonical_url: "https://wpnuxt.com/reference/block-components" --- # Block Components > Reference for all included Gutenberg 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. ```text 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.
Attribute Type Description
content string HTML content
anchor string Element ID for linking
className string Custom CSS classes
style string Inline styles
```vue

Content here

``` ### CoreHeading Renders heading blocks (h1-h6) based on the `level` attribute.
Attribute Type Description
content string HTML content
level number Heading level (1-6)
anchor string Element ID for linking
className string Custom CSS classes
```vue

Heading text

``` ### CoreImage Renders images using `` for optimization. Falls back to rendered HTML if URL is missing.
Attribute Type Description
url string Image URL
alt string Alt text
width number Image width
height number Image height
scale string Object fit mode
```vue ``` Requires `@nuxt/image` module. Configure `imageDomains` in `wpNuxtBlocks` config. ### CoreButton Renders button blocks. Automatically uses `` when Nuxt UI is available, otherwise falls back to native elements.
Attribute Type Description
text string Button text
url string Link URL
linkTarget string Target attribute ( _blank , etc.)
rel string Rel attribute
style string Inline styles
fontSize string Font size preset
metadata string Button variant (solid, outline, soft, etc.)
```vue Click me Click me ``` ### CoreButtons Container for multiple button blocks. Renders inner `CoreButton` components. ```vue
``` ### CoreQuote Renders blockquote with inner paragraph blocks.
Attribute Type Description
innerBlocks array Nested paragraph blocks
```vue

Quote text

``` ### CoreGallery Renders image galleries with inner image blocks. ### CoreSpacer Renders vertical and horizontal spacing.
Attribute Type Description
spacerHeight string Spacer height (e.g., 50px )
spacerWidth string Spacer width (optional)
```vue
``` ### CoreDetails Renders expandable details/summary blocks.
Attribute Type Description
summary string Summary text (visible)
innerBlocks array Content blocks (hidden until expanded)
```vue
Click to expand
``` ### EditorBlock (Fallback) Renders the saved HTML for unsupported blocks. ```vue
``` ## Custom Components Override any component by creating a file in `components/blocks/`: ```vue [components/blocks/CoreParagraph.vue] ``` Your component automatically takes precedence over the default. ## Adding New Block Types Create a component for any WordPress block: ```vue [components/blocks/CoreCode.vue] ``` 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: ```ts import type { CoreParagraph, CoreHeading, CoreImage, CoreButton, EditorBlock } from '#wpnuxt/blocks' ``` ## Sitemap See the full [sitemap](https://wpnuxt.com/sitemap.md) for all pages.