{"id":44040,"date":"2026-05-20T07:37:52","date_gmt":"2026-05-20T07:37:52","guid":{"rendered":"https:\/\/getshortcodes.com\/?post_type=docs&p=44040"},"modified":"2026-05-20T07:41:10","modified_gmt":"2026-05-20T07:41:10","slug":"how-to-use-shortcodes-in-the-wordpress-block-editor","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/how-to-use-shortcodes-in-the-wordpress-block-editor\/","title":{"rendered":"How to Use Shortcodes in the WordPress Block Editor"},"content":{"rendered":"\n

WordPress shortcodes still work in the Block Editor. If you are wondering how to use shortcodes in Gutenberg, the simplest answer is: add a Shortcode block, paste your shortcode inside it, and preview the page on the front end.<\/p>\n\n\n\n

You can also paste some shortcodes into a Paragraph block, especially when a plugin supports that workflow. For users who do not want to write shortcode syntax manually, Shortcodes Ultimate<\/nobr><\/a> can generate shortcodes visually through its Insert Shortcode workflow.<\/p>\n\n\n\n

Quick answer:<\/strong> use the WordPress Shortcode block for most standalone shortcodes, use a Paragraph block only when the shortcode fits naturally inside text, and use Shortcodes Ultimate when you want to choose an element, configure options, and insert the generated shortcode without memorizing syntax.<\/p>\n\n\n

\n
\"\"
The built-in Shortcode block is the simplest native way to add a shortcode in Gutenberg.<\/figcaption><\/figure>\n<\/div>\n\n\n

Do shortcodes still work in the WordPress Block Editor?<\/h2>\n\n\n\n

Yes. WordPress shortcodes still work in the Block Editor, often called Gutenberg. The editor is built around blocks, but WordPress can still process shortcode syntax when it appears in a supported place, such as the built-in Shortcode block.<\/p>\n\n\n\n

Shortcodes are still useful for dynamic content, reusable elements, older content workflows, and plugin-generated layouts. Many WordPress sites already depend on shortcodes for galleries, buttons, accordions, forms, sliders, downloads, and other content elements.<\/p>\n\n\n\n

The main difference is placement. In the Classic Editor, users often pasted shortcodes into one large content field. In the Block Editor, it is clearer to place standalone shortcode output inside a dedicated block. Some shortcodes may also render differently in the editor preview than they do on the published page, so always check the front end before publishing important changes.<\/p>\n\n\n\n

For official background on the native block, you can refer to the WordPress Shortcode block documentation<\/a>.<\/p>\n\n\n\n

The easiest way: use the Shortcode block<\/h2>\n\n\n\n

The WordPress Shortcode block is the best default choice for most standalone shortcode output. It keeps the shortcode separate from surrounding text, makes the editor layout easier to understand, and clearly tells future editors that the content inside the block is meant to be processed as a shortcode.<\/p>\n\n\n\n

Add a Shortcode block<\/h3>\n\n\n\n
    \n
  1. Open a post or page in the WordPress Block Editor.<\/li>\n\n\n\n
  2. Click the block inserter +<\/strong>.<\/li>\n\n\n\n
  3. Search for Shortcode<\/strong>, or type \/shortcode<\/code> directly in the editor.<\/li>\n\n\n\n
  4. Select the Shortcode block.<\/li>\n\n\n\n
  5. Paste your shortcode into the block.<\/li>\n\n\n\n
  6. Preview or publish the page, then check the front end to confirm the output works as expected.<\/li>\n<\/ol>\n\n\n\n

    For example, a simple WordPress gallery shortcode could look like this:<\/p>\n\n\n\n

    [gallery ids=\"123,456,789\"]<\/code><\/pre>\n\n\n\n
    When you are teaching readers or documenting syntax, place shortcode examples in Code blocks, as shown above. If you put the same shortcode into a Shortcode block, WordPress may try to execute it instead of showing the syntax to the reader.<\/p>\n\n\n
    \n
    \"\"
    You can add the block from the inserter or by typing \/shortcode.<\/figcaption><\/figure>\n<\/div>\n\n\n
    Can you paste a shortcode into a Paragraph block?<\/h2>\n\n\n\n
    Sometimes, yes. Some WordPress Block Editor shortcodes can be pasted into a Paragraph block and still work, especially when they are simple, inline-friendly, or supported by a specific plugin workflow. This can be convenient when a shortcode is part of a sentence or a small piece of surrounding text.<\/p>\n\n\n\n
    However, for standalone output, the Shortcode block is usually clearer. A shortcode that creates a gallery, accordion, button group, form, or layout element should normally sit in its own block. That makes the page easier to edit and reduces confusion for other users who may update the content later.<\/p>\n\n\n\n
    Important:<\/strong> use a Code block when you want to show shortcode syntax to readers. Use a Shortcode block when you want WordPress to process the shortcode.<\/p>\n\n\n\n
    Insert shortcodes visually with Shortcodes Ultimate<\/h2>\n\n\n\n
    You can always paste shortcodes manually. Shortcodes Ultimate is helpful when you want to choose an element visually, configure options, and avoid writing shortcode syntax by hand.<\/p>\n\n\n\n
    In the Block Editor, Shortcodes Ultimate supports workflows where shortcodes can be inserted into Shortcode blocks, Paragraph blocks, and Classic blocks. Instead of remembering attributes, quotes, nesting rules, or exact shortcode names, you can use the Insert Shortcode tool to generate the shortcode for you.<\/p>\n\n\n\n
    This is especially useful for content elements such as buttons, tabs, accordions, spoilers, boxes, sliders, galleries, and other reusable interface components. You choose the element, adjust its settings, and insert the generated shortcode into your content.<\/p>\n\n\n\n
    Recommended setup in the Block Editor<\/h3>\n\n\n\n
      \n
    1. Open the WordPress Block Editor for any post or page.<\/li>\n\n\n\n
    2. Select a Paragraph block, Shortcode block, or Classic block.<\/li>\n\n\n\n
    3. Click the Insert Shortcode<\/strong> button.<\/li>\n\n\n\n
    4. Choose the content element you want to add.<\/li>\n\n\n\n
    5. Configure the available options in the visual picker.<\/li>\n\n\n\n
    6. Insert the generated shortcode and preview the page on the front end.<\/li>\n<\/ol>\n\n\n\n
      \"\"
      Shortcodes Ultimate lets you insert generated shortcodes from the editor toolbar.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Choose an element, adjust options, and insert the generated shortcode.<\/figcaption><\/figure>\n\n\n\n
      For more product-specific guidance, see the Shortcodes Ultimate documentation<\/a> and the list of available shortcodes<\/a>.<\/p>\n\n\n\n
      Which shortcode insertion method should you use?<\/h2>\n\n\n\n
      There is no single method that is best for every situation. The right choice depends on the type of shortcode, the user\u2019s editing workflow, and whether the shortcode is being written manually or generated by a plugin.<\/p>\n\n\n\n
      Method<\/th>Best for<\/th>Pros<\/th>Notes<\/th><\/tr><\/thead>
      Shortcode block<\/td>Most standalone shortcodes<\/td>Native, simple, and clear<\/td>Best default choice for adding a shortcode in Gutenberg<\/td><\/tr>
      Paragraph block<\/td>Inline or simple plugin-supported shortcodes<\/td>Quick and works in normal text flow<\/td>Test the front end because not every shortcode belongs in a paragraph<\/td><\/tr>
      Shortcodes Ultimate Insert Shortcode workflow<\/td>Users who do not want to write syntax manually<\/td>Visual picker, configurable options, and fewer syntax mistakes<\/td>Requires the correct user permissions<\/td><\/tr>
      Classic block<\/td>Legacy content workflows<\/td>Useful for older content and familiar editing patterns<\/td>Helpful for maintenance, but not the first choice for new posts<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Practical shortcode examples<\/h2>\n\n\n\n
      The following examples are shown inside Code blocks so they display as syntax instead of being executed by WordPress. Exact options depend on the shortcode you choose. The Shortcodes Ultimate Insert Shortcode workflow can help generate valid syntax without requiring you to type every attribute manually.<\/p>\n\n\n\n
      A button shortcode may include a URL, target behavior, style, and button text:<\/p>\n\n\n\n
      [su_button url=\"https:\/\/example.com\" target=\"blank\" style=\"flat\"]Download now[\/su_button]<\/code><\/pre>\n\n\n\n
      An accordion can contain multiple spoiler items, each with its own title and content:<\/p>\n\n\n\n
      [su_accordion]\n[su_spoiler title=\"What is included?\" open=\"yes\"]Your hidden content goes here.[\/su_spoiler]\n[su_spoiler title=\"Can I customize it?\"]Yes, you can adjust options in the shortcode settings.[\/su_spoiler]\n[\/su_accordion]<\/code><\/pre>\n\n\n\n
      Tabs are another common example of nested shortcode structure:<\/p>\n\n\n\n
      [su_tabs]\n[su_tab title=\"First tab\"]First tab content.[\/su_tab]\n[su_tab title=\"Second tab\"]Second tab content.[\/su_tab]\n[\/su_tabs]<\/code><\/pre>\n\n\n\n
      Developers can also output trusted shortcodes in template files with do_shortcode()<\/code>, but this should be used carefully and only with shortcode content you control:<\/p>\n\n\n\n
      <?php echo do_shortcode('[su_button url=\"https:\/\/example.com\"]Click me[\/su_button]'); ?><\/code><\/pre>\n\n\n\n
      Best practices for using shortcodes in Gutenberg<\/h2>\n\n\n\n