Render Gutenberg Blocks

Rendered Content from WordPress

When using @wpnuxt/blocks each block type can be overridden by a custom component.

Example CoreImage:

this custom CoreImage component adds a scale effect on hover to the image, picks up the alt text (that was added in the the wordpress block editor) from the block attributes and displays it in a figcaption.
this is an alt text added in wordpress on the Gutenberg image block
this is an alt text added in wordpress on the Gutenberg image block

Example CoreQuote:

this custom CoreQuote component renders it as a Nuxt UI UAlert component, and uses the citation attribute (if present) as the title of the alert.

— Here comes the citation

Quote Block

TestHeading

Details block

Tabel cell 1Tabel cell 2
Tabel cell 3Tabel cell 4
tabel caption
Verse
this custom CoreButton component renders it as a Nuxt UI UButton component, adds a subtle variant to the button, and a size of xl.