Title: Shortcode block
Author: Milana Cap
Published: March 7, 2019
Last modified: May 18, 2026

---

# Shortcode block

## In this article

 * [Block Toolbar](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#block-toolbar)
 * [Block Settings](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#block-settings)
 * [Changelog](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#wp--skip-link--target)

[Go back to the list of **Blocks**](https://wordpress.org/documentation/article/blocks/)

A shortcode is a WordPress-specific code that lets you do nifty things with very
little effort. Shortcodes can embed files or create objects that would normally 
require lots of complicated, ugly code in just one line. **Shortcode = shortcut**.

The _shortcode block_ can be added to a page by clicking on the Add Block button.
It can be found in _Widgets_ section. Alternatively, you can type /shortcode and
press enter.

[⌊Add shortcodes with a slash command.
⌉⌊Add shortcodes with a slash command.
⌉[

Add shortcodes with a slash command.

[Detailed instructions on adding blocks](https://wordpress.org/documentation/article/adding-a-new-block/)

In this video, you can see how you can use the short block and the different settings
to modify how your content will appear.

How the shortcode block works

## 󠀁[Block Toolbar](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#block-toolbar)󠁿

Unlike other common blocks, the _shortcode block_ does not include any specific 
settings in the block toolbar or editor sidebar.

[⌊Shortcode Block Editor Sidebar⌉⌊Shortcode Block Editor Sidebar⌉[

Shortcode Block Editor Sidebar

**Writing Your Shortcode**

You may type your shortcode into the box provided or paste it from the available
shortcodes.

[⌊Image showing where to add the shortcode ⌉⌊Image showing where to add the shortcode
 ⌉[

The shortcode block interface.

**More Options**

These controls give you the option to copy, duplicate, and edit your block as HTML.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block Settings](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#block-settings)󠁿

Every block has specific options in the editor sidebar in addition to the options
found in the block toolbar. _If you do not see the sidebar, simply click the ‘cog’
icon next to the Publish button._

As you can see, the _shortcode block_ doesn’t include specific settings in the block
settings.

![Shortcode Block Editor Sidebar](https://wordpress.org/documentation/files/2019/
03/shortcode-block-1024x500.png)

You can transform a _shortcode block_ into a group or into a columns, so you can
further apply custom settings to the block.

![Shortcode Block transform](https://wordpress.org/documentation/files/2019/03/shortcode-
block-transform.png)

**Color **

Text and background colors can be set on a per-block basis, allowing you to call
attention to important content.

Via the “Custom Color” link you can further modify the color choice.

[[[See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

Accessibility parameters are built into the new editor to warn you when the text
may become illegible for persons with reading impairments.

![Settings for the group block](https://user-images.githubusercontent.com/6752710/
152538651-2a906364-0488-4f56-a81e-72864e18b490.jpg)

**Advanced**

In the advanced panel of the block options, you’ll see options for HTML Anchor and
Additional CSS Class.

![Advanced settings for the shortcode](https://wordpress.org/documentation/files/
2022/06/Screen-Shot-2022-06-22-at-12.07.36-PM.png)

“HTML anchor” allows you to [make a unique web address](https://wordpress.org/documentation/article/page-jumps/)
for a particular Heading block. Then, you’ll be able to link directly to the Heading
block of your page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing
you to write custom CSS and style the block as you see fit.

## 󠀁[Changelog](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#changelog)󠁿

 * Updated 2026-05-18
    - Updated block screenshot and transform (@rollybueno)
 * Updated 2022-11-27
    - Added alt text to images
    - Removed redundant content
 * Updated 2022-02-04
    - Updated 5.9 screenshot
 * Updated 2020-09-07
    - Updated 5.5 screenshot
    - Added block settings
    - Added changelog
    - Added more options
    - Added go to list block
 * Created 2019-03-07

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/shortcode-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fshortcode-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

March 7, 2019

Last updated

May 18, 2026