---
title: "Shortcode + Gutenberg"
description: "Convert shortcode to the Gutenberg block using the Lazy Blocks WordPress plugin."
url: "https://www.lazyblocks.com/docs/examples/shortcode-gutenberg/"
lastUpdated: 2026-01-12
source: "examples/shortcode-gutenberg.mdx"
---
# Shortcode + Gutenberg

If you already have shortcodes and want to make it compatible with Gutenberg, you can easily make it possible.

## Lazy Block Edit

First, you need to add block Name, Slug, Icon, Category, Description, and Keywords. Then you can start adding Controls:

- Textarea control named Content will be used as shortcode content `[my_shortcode]Content[/my_shortcode]`
- Attribute control you can add as many as you want. You can also name it as you need, `Attribute 1` and `Attribute 2` for example only

## PHP

```php title="PHP"
echo do_shortcode(
  '[my_shortcode attribute_1="' . esc_attr( $attributes['attribute_1'] ) . '" attribute_2="' . esc_attr( $attributes['attribute_2'] ) . '"]' .
    $attributes['content'] .
  '[/my_shortcode]'
);
```

## Handlebars

```hbs title="Handlebars"
{{{do_shortcode "my_shortcode" this}}}
```

It will output shortcode automatically:

```php title="PHP"
[my_shortcode attribute_1="attr 1 value" attribute_2="" className="" align="" anchor=""]Shortcode Content[/my_shortcode]
```

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt