{"id":11285951,"date":"2019-03-07T12:42:01","date_gmt":"2019-03-07T12:42:01","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11285951"},"modified":"2024-06-08T19:26:45","modified_gmt":"2024-06-08T19:26:45","slug":"shortcode-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/shortcode-block\/","title":{"rendered":"Shortcode block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n

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<\/strong>.<\/p>\n\n\n\n

The shortcode block<\/em> can be added to a page by clicking on the Add Block button. It can be found in Widgets<\/em> section. Alternatively, you can type \/shortcode and press enter.<\/p>\n\n\n\n

\"Add<\/a>
Add shortcodes with a slash command.
<\/figcaption><\/figure>\n\n\n\n

Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n


In this video, you can see how you can use the short block and the different settings to modify how your content will appear.<\/p>\n\n\n\n

How the shortcode block works<\/figcaption><\/figure>\n\n\n\n


Block Toolbar<\/h2>\n\n\n\n

Unlike other common blocks, the shortcode block<\/em> does not include any specific settings in the block toolbar or editor sidebar.<\/p>\n\n\n\n

\"Shortcode<\/a>
Shortcode Block Editor Sidebar<\/figcaption><\/figure>\n\n\n\n

Writing Your Shortcode<\/strong><\/p>\n\n\n\n

You may type your shortcode into the box provided or paste it from the available shortcodes.
<\/p>\n\n\n\n

\"Image<\/a>
The shortcode block interface.<\/figcaption><\/figure>\n\n\n\n

More Options<\/strong><\/p>\n\n\n\n

These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n\n\n\n

Read about these and other settings.<\/a><\/p>\n\n\n\n

Block Settings<\/h2>\n\n\n\n

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.<\/em><\/p>\n\n\n\n

As you can see, the shortcode block<\/em> doesn’t include specific settings in the block settings.<\/p>\n\n\n\n

\"Block<\/figure>\n\n\n\n

You can transform a shortcode block<\/em> into a group or into a columns, so you can further apply custom settings to the block.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Color <\/strong><\/p>\n\n\n\n

Text and background colors can be set on a per-block basis, allowing you to call attention to important content.<\/p>\n\n\n\n

Via the \u201cCustom Color\u201d link you can further modify the color choice.<\/p>\n\n\n\n

<\/a>See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n

Accessibility parameters are built into the new editor to warn you when the text may become illegible for persons with reading impairments.<\/p>\n\n\n\n

\"Settings<\/figure>\n\n\n\n

Advanced<\/strong><\/p>\n\n\n\n

In the advanced panel of the block options, you\u2019ll see options for HTML Anchor and Additional CSS Class.<\/p>\n\n\n\n

\"Advanced<\/figure>\n\n\n\n

\u201cHTML anchor\u201d allows you to make a unique web address<\/a> for a particular Heading block. Then, you\u2019ll be able to link directly to the Heading block of your page.<\/p>\n\n\n\n

The \u201cAdditional CSS class(es)\u201d lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.<\/p>\n\n\n\n

\n

Changelog <\/h2>\n\n\n\n
    \n
  • Updated 2022-11-27\n
      \n
    • Added alt text to images <\/li>\n\n\n\n
    • Removed redundant content <\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Updated 2022-02-04\n
        \n
      • Updated 5.9 screenshot<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Updated 2020-09-07\n
          \n
        • Updated 5.5 screenshot<\/li>\n\n\n\n
        • Added block settings<\/li>\n\n\n\n
        • Added changelog<\/li>\n\n\n\n
        • Added more options <\/li>\n\n\n\n
        • Added go to list block<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Created 2019-03-07<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

          Go back to the list of 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 […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,90],"class_list":["post-11285951","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-widget-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11285951"}],"version-history":[{"count":4,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285951\/revisions"}],"predecessor-version":[{"id":16360400,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285951\/revisions\/16360400"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11285951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11285951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}