Video Block

The Video Block lets you upload and embed a video on your site from your media library or external URL …

WordPress Gutenberg Blocks – Video

WordPress Gutenberg - Video Block

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

***

Video Block Description

The Video Block lets you upload and embed a video on your site from your media library or external URL.

Add Videos to WordPress using the Video Block

(Add Videos to WordPress using the Video Block)

How To Use The Video Block

To add a Video Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Video’ block (in Most Used or Common Blocks section), or
    • Add the ‘Video’ block in the Content Area.
  • Add, paste in, or upload your content.
  • Use the tools in the Video Block Editor or Block Settings section to resize, edit, format, or customize your Video.

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 ‘Video’ block …

'Add Block' Tool - Add Video Block

(‘Add Block’ Tool – Add Video Block)

Or, select a Video Block in the Content Area

Add a Video Block from the Content Area

(Add a Video Block from the Content Area)

After adding a Video Block, you can add a video:

  • Using drag and drop.
  • Using the web browser uploader.
  • From your media library.
  • From an external URL.
  • Using a supported video embedding format.

Add A Video Using Drag & Drop

To add a video using drag and drop:

  • Make sure you have your ‘videos’ or media files folder open (you may have to resize your browser to view your post and your media folder).
  • Select a video from your media folder and drag it onto the active (shaded) gallery upload tool.
  • The video will be automatically uploaded to your media library and inserted into your Video Block.

Add a video to WordPress using drag and drop

(Add a video to WordPress using drag and drop)

Add A Video Using Your Web Browser Uploader

To add a video using your web browser uploader:

  • Make sure you know where your media files folder is located.
  • Hover your cursor over the Video Block and click the ‘Upload’ button to open your web browser’s video uploader window.
  • Select a video from your media folder and click the ‘Open’ button to import the video into your site.
  • The video will be automatically uploaded to your media library, inserted into your Video Block, and added to your post or page.

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Video Block …

Upload Video button

(Upload Video button)

This will bring up the ‘Upload Media’ window on your browser. Select a video from your media folder and click on ‘Open’ to import the video into the Video Block and add it to your post/page …

Upload a video

(Upload a video)

Add A Video From Your Media Library

To add a video from your media library:

  • Make sure that you have uploaded your video to your media library (if you need help with this step, see our How To Use The WordPress Media Library tutorial).
  • Hover your cursor over the Video Block and click on the ‘Media Library’ button.
  • Click on a video from the Media Library to select it.
  • Click on the ‘Select’ button.
  • Your video will be imported to the Video Block and added to your post or page.
  • Update or publish your post or page to save your changes and update your content.

Let’s go through the above steps:

Hover your cursor over the Video Block and click on the ‘Media Library’ button …

Media Library upload button

(Media Library upload button)

Select a video from your media library (or upload one from your media files folder) and click on the ‘Select’ button …

Upload a video from the Media Library

(Upload an video from the Media Library)

The video will be imported to your Video Block and added to your post or page …

Video added

(Video added)

Add A Video From An External URL

You can add a video to your post or page from an external URL.

To add a video from an external URL:

  • Make sure you have uploaded your videos to your server or external cloud storage location (e.g. Amazon S3, Dropbox, etc.)
  • Copy the video URL
  • Hover your cursor over your Video Block and click on ‘Insert from URL’
  • Paste your video URL into the URL field
  • Click ‘Apply’ to insert the video into your content.

Let’s go through the above process.

After uploading your video to your storage location and copying its URL, hover your cursor over the Video Block and click on ‘Insert from URL’ …

Insert video from URL

(Insert video from URL)

Paste the video URL into the URL field and click ‘Apply’ to add the video into your post or page …

Insert video from URL

(Insert video from URL)

Add A Video From A Supported Embedding Format

You can add a video from a supported embedding format (e.g. a YouTube video).

To add a video from a supported embedding format:

  • Add a Paragraph Block or Embed Block
  • Paste in the video URL
  • If your video source is supported, the Paragraph Block will be automatically converted into an Embed Block and display the video …

Paste in a video URL

(Paste in a video URL)

After adding videos:

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

How To Edit A Video Block

To edit a Video Block:

  • Click inside the Video Block to select it.
  • Use the Block Editor tools to:
    • Change the alignment of the video (left, center, right).
    • Change the width of the video (wide, full).
    • Add and format a video caption (bold, italics, strikethrough).
    • Add a hyperlink in the video caption.
  • Use the Block Settings to:
    • Configure video settings (autoplay, loop, muted).
    • Configure playback controls (auto, metadata, none)
    • Add a video thumbnail image.

Edit a Video Block

(Edit a Video Block)

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

How To Remove A Video Block

To delete or remove a video block:

  • Click inside the Video 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 Video Block

(Remove a Video 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 Video Blocks into Reusable Blocks.

Video Block Tools, Options & Settings

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

  • Video Block Editor
  • Video Block Settings

Video Block Editor

Video Block Editor

(Video Block Editor)

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

  • Change Block Type (See ‘Video Block – Additional Info’ section below.)
  • Align Video
    • Align video left
    • Align video center
    • Align video right
  • Video Player Width
    • Wide width
    • Fullwidth
  • Caption 
    • Bold
    • Italics
    • Strikethrough
  • Add Caption Hyperlink
    • 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

Video Block Editor

(Video Block Editor)

Video Block Settings

Video Block Settings

(Video Block Settings)

Video Block settings include:

  • Block description area
  • Video Settings
    • Autoplay (on/off) – Begin playing video automatically when page is loaded in visitor’s browser.
    • Loop (on/off) – Keep video looping after initial playback.
    • Muted(on/off) – Mute video soundtrack.
    • Playback Controls(on/off) – Display or hide video playback controls.
    • Preload
      • Auto – The audio should start loading as soon as the page loads.
      • Metadata – Only the metadata is preloaded: dimensions, first frame, track list, duration, etc.
      • None – No preload is done.
    • Poster Image – Select an image thumbnail for your video from your media gallery.
  • Advanced Settings
    • Additional CSS Class

Video Block Settings

(Video Block Settings)

Video Block – Additional Info

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

Change Block Type - Video Block

(Change Block Type – Video Block)

Additionally:

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

***

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

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

Stock video by Videezy

Quote Block

The Quote Block lets you add visual emphasis to your content with quoted text …

WordPress Gutenberg Blocks – Quote

WordPress Gutenberg - Quote Block

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

***

Quote Block Description

The Quote Block lets you add visual emphasis to your content with quoted text …

Add Quotes to WordPress using the Quote Block

(Add Quotes to WordPress using the Quote Block)

How To Use The Quote Block

To add a Quote Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Quote’ block (in Most Used or Common Blocks section), or
    • Add the ‘Quote’ block in the Content Area.
  • Type or paste in your quote.
  • Add a citation (quote source).
  • Use the tools in the Quote Block Editor or Block Settings section to edit and format your Quote.

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 ‘Quote’ block …

'Add Block' Tool - Add Quote Block

(‘Add Block’ Tool – Add Quote Block)

Or, select a Quote Block in the Content Area

Add a Quote Block from the Content Area

(Add a Quote Block from the Content Area)

After adding a Quote Block, type or paste in your quote and a citation …

Add quote text and a citation

(Add quote text and a citation)

After adding quotes:

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

How To Edit A Quote Block

To edit a Quote Block:

  • Click inside the Quote Block to select it.
  • Use the Block Editor tools to:
    • Change the alignment of the quote text.
    • Format the text (bold, italics, strikethrough).
    • Add a hyperlink to the quote or citation text.
  • Use the Block Settings to change the style of the quote.

Edit a Quote Block

(Edit a Quote Block)

How To Remove A Quote Block

To delete or remove a quote block:

  • Click inside the Quote 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 Quote Block

(Remove a Quote 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 Quote Blocks into Reusable Blocks.

Quote Block Tools, Options & Settings

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

  • Quote Block Editor
  • Quote Block Settings

Quote Block Editor

Quote Block Editor

(Quote Block Editor)

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

  • Change Block Type (See ‘Quote Block – Additional Info’ section below.)
  • Align Text
    • Align text left
    • Align text center
    • Align text right
  • Format 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

Quote Block Editor

(Quote Block Editor)

Quote Block Settings

Quote Block Settings

(Quote Block Settings)

Quote Block settings include:

  • Block description area
  • Styles
    • Regular
    • Large
  • Advanced Settings
    • Additional CSS Class

Quote Block Settings

(Quote Block Settings)

Quote Block – Additional Info

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

Change Block Type - Quote Block

(Change Block Type – Quote Block)

Info

Notes:

  • Clicking on ‘Change Block Type’ also lets you change styles for your quote.
  • Change the Quote Block into a Pullquote Block if you want the quote to have more emphasis and a different font color or background color.

Change Quote Block into other block types

(Change a Quote Block into other block types)

Additionally:

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

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Quote 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)

List Block

The List Block lets you create and add a bulleted or numbered list …

WordPress Gutenberg Blocks – List

WordPress Gutenberg - List Block

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

***

List Block Description

The List Block lets you create and add a bulleted or numbered list …

Add lists to WordPress using the List Block

(Add lists to WordPress using the List Block)

How To Use The List Block

To add a List Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘List’ block (in Most Used or Common Blocks section), or
    • Add the ‘List’ block in the Content Area.
  • Type your list.
  • Use the tools in the List Block Editor or Block Settings section to edit your list.

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 ‘List’ block …

'Add Block' Tool - Add List Block

(‘Add Block’ Tool – Add List Block)

Or, select a List Block in the Content Area

Add a List Block from the Content Area

(Add a List Block from the Content Area)

After adding a List Block, type or paste in your list content …

Type in your list items

(Type in your list items)

After adding lists:

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

How To Edit A List Block

To edit a List Block:

  • Click inside the List Block to select it.
  • Use the Block Editor tools to:
    • Select the type of list you want from the Block Editor tools (i.e. bulleted or numbered)
    • Format text in your list items (bold, italics, strikethrough)
    • Add a hyperlink to text in your list
  • Use the Block Settings to change the style of the list.

Edit your list

(Edit your list)

You can also nest images in your list …

Nest an image in your list

(Nest an image in your list)

See our tutorial on using Image Blocks for more details.

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

How To Remove A List Block

To delete or remove a list block:

  • Click inside the List 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 List Block

(Remove a List Block)

Additionally …

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

List Block Tools, Options & Settings

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

  • List Block Editor
  • List Block Settings

List Block Editor

List Block Editor

(List Block Editor)

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

  • Change Block Type (See ‘List Block – Additional Info’ section below.)
  • List Type
    • Bulleted (Unordered list) – Use unordered lists to display items in no particular order (e.g. a list of product benefits).
    • Numbered (Ordered list) – Use ordered lists to display items in sequential order (e.g. a checklist with step-by-step instructions).
  • List Indentation
    • Outdent list (Decrease indentation)
    • Indent list (Increase indentation)
  • Format List
    • 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

List Block Editor

(List Block Editor)

List Block Settings

List Block Settings

(List Block Settings)

List Block settings include:

  • Block description area
  • Advanced Settings
    • Additional CSS Class

List Block Settings

(List Block Settings)

List Block – Additional Info

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

Change Block Type - List Block

(Change Block Type – List Block)

Info

Notes:

  • Changing a List Block into a Paragraph Block turns each list item into a new Paragraph block.
  • Changing a List Block into a Quote Block turns list items into paragraphs within the quote and adds a line for citing the source of the quote.

Change List Block into other block types

(Change a List Block into other block types)

Additionally:

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

***

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

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com