Embed Block

The Embed Block lets you embed videos, images, tweets, audio, and other content from external sources …

WordPress Gutenberg Blocks – Embed

WordPress Gutenberg - Embed Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Embed Block Description

The Embed Block lets you embed videos, images, tweets, audio, and other content from external sources.

Add media elements to WordPress using the Embed Block

(Add media elements to WordPress using the Embed Block)

How To Use The Embed Block

To add an Embed Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select an ‘Embed’ block (in Most Used or Widgets section), or
    • Add the ‘Embed’ block in the Content Area.
  • Add or paste in your Embed URL.
  • Use the tools in the Embed Block Editor or Block Settings section to align, edit,  or configure your media elements.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select an ‘Embed’ block …

'Add Block' Tool - Add Embed Block

(‘Add Block’ Tool – Add Embed Block)

Or, select an Embed Block in the Content Area

Add an Embed Block from the Content Area

(Add an Embed Block from the Content Area)

After adding an Embed Block, you can:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit An Embed Block

To edit an Embed Block:

  • Click inside the Embed Block to select it.
  • Use the Block Editor tools to:
    • Change block alignment.
    • Format caption text (bold, italics, strikethrough).
    • Add a hyperlink to the embed caption.
  • Use the Block Settings to configure any additional settings for your embedded content.

Edit a Embed Block

(Edit a Embed Block)

Remember to update and publish your post or page to save your settings.

How To Remove An Embed Block

To delete or remove an Embed Block:

  • Click inside the Embed Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove an Embed Block

(Remove an Embed Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Embed Blocks into Reusable Blocks.

Embed Block Tools, Options & Settings

The Embed Block includes tools, options, and settings for:

  • Embed Block Editor
  • Embed Block Settings

Embed Block Editor

Embed Block Editor

(Embed Block Editor)

The Embed Block Editor includes tools that let you perform the following operations:

  • Display Block Type (See ‘Embed Block – Additional Info’ section below.)
  • Align Embedded Element
    • Align left
    • Align center
    • Align right
  • Embedded Element Width Display
    • Wide width
    • Full width
  • More Options

Embed Block Editor

(Embed Block Editor)

Embed Block Settings

Embed Block Settings

(Embed Block Settings)

Embed Block settings include:

  • Block description area
  • Media Settings
    • Resize for smaller devices – preserve aspect ration of embedded element when the browser is resized.
  • Advanced Settings
    • Additional CSS Class

Embed Block – Additional Info

  • The Embed Block cannot be converted into other block types:
  • Installing plugins or themes on your site may add new functionality, options, or settings to Embed Blocks.

Supported WordPress Embeds

WordPress supports embedding many third-party media elements (see table below). If you try to add an unsupported format, you will get a message that the element is not supported (“Sorry, we could not embed that content.”) and the option to try again, or convert the media element into a link.

Unsupported Embed Formats

(Unsupported Embed Formats)

WordPress currently supports the embed blocks listed below:

Embed Block ImageEmbed Block NameDescription

WordPress Gutenberg - Animoto Embed Block

AnimotoAnimoto is a cloud-based video creation service that produces video from photos, video clips, and music into video slideshows.

WordPress Gutenberg - Cloudup Embed Block

CloudupCloudup lets you instantly and securely share photos, music, links, and files.

WordPress Gutenberg - Embed Block

CollegeHumorCollegeHumor delivers daily comedic content, including videos, pictures, articles and jokes.

WordPress Gutenberg - Embed Block

DailymotionDailymotion is a video-sharing technology platform.

WordPress Gutenberg - Embed Block

EmbedGeneral embedding block

WordPress Gutenberg - Facebook Embed Block

FacebookEmbed content from Facebook.

WordPress Gutenberg - Flickr Embed Block

FlickrFlickr is an image hosting service and video hosting service.

WordPress Gutenberg - Embed Block

Funny or DieFunny videos, funny pictures, and funny articles featuring celebrities, comedians, and you.

WordPress Gutenberg - Embed Block

HuluHulu provides instant streaming content.

WordPress Gutenberg - Imgur Embed Block

ImgurImgur is an online image sharing community

WordPress Gutenberg - Instagram Embed Block

InstagramEmbed content from Instagram

WordPress Gutenberg - Embed Block

IssuuIssuu is an electronic publishing platform for flipbooks, digital magazines, and digital catalogs.

WordPress Gutenberg - Embed Block

KickstarterKickstarter is a global crowdfunding platform focused on creativity and merchandising.

WordPress Gutenberg - Embed Block

Meetup.comMeetup is a service used to organize online groups that host in-person events for people with similar interests. 

WordPress Gutenberg - Embed Block

MixcloudMixcloud is an online music streaming service.

WordPress Gutenberg - Embed Block

PhotobucketPhotobucket is an image and video hosting website.

WordPress Gutenberg - Embed Block

PolldaddyPolldaddy (Crowdsignal) lets you create polls, surveys, quizzes, and ratings.

WordPress Gutenberg - Reddit Embed Block

RedditEmbed content from Reddit a social news aggregation, web content rating, and discussion website.

WordPress Gutenberg - Embed Block

ReverbNationReverbNation provides tools and opportunities for musicians.

WordPress Gutenberg - Embed Block

ScreencastScreencast lets you share content created with image and video capturing software like Snagit and Camtasia.

WordPress Gutenberg - Embed Block

ScribdScribd is a digital library, e-book and audiobook subscription service

WordPress Gutenberg - Embed Block

SlideshareLinkedIn SlideShare is a hosting service for professional content including presentations, infographics, documents, and videos. 

WordPress Gutenberg - Embed Block

SmugMugSmugMug is an image sharing, image hosting service, and online video platform.

WordPress Gutenberg - SoundCloud Embed Block

SoundCloudSoundCloud is an online audio distribution platform and music sharing website

WordPress Gutenberg - Embed Block

Speaker DeckSpeaker Deck is an online presentation sharing site.

WordPress Gutenberg - Spotify Embed Block

SpotifySpotify is a music streaming platform.

WordPress Gutenberg - Embed Block

TEDTED provides videos from subject experts on education, business, science, tech, and creativity.

WordPress Gutenberg - Embed Block

TumblrTumblr is a microblogging and social networking website

WordPress Gutenberg - Twitter Embed Block

TwitterEmbed content from Twitter.

WordPress Gutenberg - Embed Block

VideoPressVideoPress lets you easily upload and share videos on your WordPress blog or any site.

WordPress Gutenberg - Vimeo Embed Block

VimeoVimeo is a video-sharing website where users can upload, share and view videos

WordPress Gutenberg - WordPress Embed Block

WordPressEmbed content from WordPress sites

WordPress Gutenberg - Embed Block

WordPress.tvWordPress.TV provides videos and recorded talks about the WordPress platform.

WordPress Gutenberg - YouTube Embed Block

YouTubeEmbed content from YouTube

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Embed Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

Shortcode Block

The Shortcode Block lets you insert custom elements into WordPress using shortcodes …

WordPress Gutenberg Blocks – Shortcode

WordPress Gutenberg - Shortcode Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Shortcode Block Description

The Shortcode Block lets you insert custom elements into WordPress using shortcodes.

Add shortcodes to WordPress using the Shortcode Block

(Add shortcodes to WordPress using the Shortcode Block)

How To Use The Shortcode Block

To add a Shortcode Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Shortcode’ block (in Most Used or Widgets section), or
    • Add the ‘Shortcode’ block in the Content Area.
  • Type or paste in your shortcode.
  • Save, publish, or update your post or page.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Shortcode’ block …

'Add Block' Tool - Add Shortcode Block

(‘Add Block’ Tool – Add Shortcode Block)

Or, select a Shortcode Block in the Content Area

Add a Shortcode Block from the Content Area

(Add a Shortcode Block from the Content Area)

There is nothing else to do after adding shortcodes. Save, publish, or update your post or page to save your settings.

How To Remove A Shortcode Block

To delete or remove a shortcode block:

  • Click inside the Shortcode Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Shortcode Block

(Remove a Shortcode Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Shortcode Blocks into Reusable Blocks.

Shortcode Block Tools, Options & Settings

The Shortcode Block includes:

  • Shortcode Block Editor
  • Shortcode Block Settings

Shortcode Block Editor

Shortcode Block Editor

(Shortcode Block Editor)

The Shortcode Block Editor contains only the following:

  • Display Block Type (See ‘Shortcode Block – Additional Info’ section below.)
  • Shortcode Field
    • Type or paste in your shortcode
  • More Options

Shortcode Block Settings

Shortcode Block Settings

(Shortcode Block Settings)

Shortcode Block settings include only:

  • Block description area

Shortcode Block – Additional Info

  • The Shortcode Block cannot be converted into other block types.
  • Installing plugins or themes on your site may add new functionality, options, or settings to Shortcode Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Shortcode Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

Preformatted Block

The Preformatted Block lets you add text with spacing, tabs, and styling …

Get Thrive Leads for WordPress

WordPress Gutenberg Blocks – Preformatted

WordPress Gutenberg - Preformatted Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Preformatted Block Description

The Preformatted Block lets you add text with spacing, tabs, and styling.

Add Preformatted texts to WordPress using the Preformatted Block

(Add Preformatted text to WordPress using the Preformatted Block)

Preformatted Blocks:

  • Preserve text spacing, tabs and  line breaks.
  • Display using your Theme’s styles.
  • Typically use a monospace font to make it stand out from other text on your post/page.
  • Are similar to Code Blocks, but don’t use the HTML <code> element.

How To Use The Preformatted Block

To add a Preformatted Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Preformatted’ block (in Most Used or Formatting section), or
    • Add the ‘Preformatted’ block in the Content Area.
  • Type of paste in your content.
  • Use the tools in the Preformatted Block Editor or Block Settings section to edit and format your Preformatted text.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Preformatted’ block …

'Add Block' Tool - Add Preformatted Block

(‘Add Block’ Tool – Add Preformatted Block)

Or, select a Preformatted Block in the Content Area

Add a Preformatted Block from the Content Area

(Add a Preformatted Block from the Content Area)

After adding a Preformatted Block, you can add preformatted text by typing or pasting in your content …

Preformatted text added

(Preformatted text added)

After adding preformatted text:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A Preformatted Block

To edit a Preformatted Block:

  • Click inside the Preformatted Block to select it.
  • Use the Block Editor tools to:
    • Format the text (bold, italics, strikethrough).
    • Add a hyperlink.
  • Use the Block Settings to change the style of your preformatted text using CSS.

Edit a Preformatted Block

(Edit a Preformatted Block)

Remember to update and publish your post or page to save your settings.

How To Remove A Preformatted Block

To delete or remove a preformatted block:

  • Click inside the Preformatted Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Preformatted Block

(Remove a Preformatted Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Preformatted Blocks into Reusable Blocks.

Preformatted Block Tools, Options & Settings

The Preformatted Block includes tools, options, and settings for:

  • Preformatted Block Editor
  • Preformatted Block Settings

Preformatted Block Editor

Preformatted Block Editor

(Preformatted Block Editor)

The Preformatted Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Preformatted Block – Additional Info’ section below.)
  • Format Preformatted Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Preformatted Block Editor

(Preformatted Block Editor)

Preformatted Block Settings

Preformatted Block Settings

(Preformatted Block Settings)

Preformatted Block settings include:

  • Block description area
  • Advanced Settings
    • Additional CSS Class

Preformatted Block – Additional Info

The Preformatted Block can be converted into the following block types:

Change Block Type - Preformatted Block

(Change Block Type – Preformatted Block)

Info

Notes:

  • Converting a Preformatted Block into a Paragraph Block removes any styling applied to text by your theme (i.e. your text displays like all other regular text in your content).
  • Line breaks are preserved in the Paragraph Block as ‘hard returns’ (i.e. SHIFT + ENTER).

Change Preformatted Block into other block types

(Change a Preformatted Block into other block types)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Preformatted Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Preformatted Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org