File Block

The File Block lets you add a link to a downloadable file …

WordPress Gutenberg Blocks – File

WordPress Gutenberg - File Block

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

***

File Block Description

The File Block lets you add a link that users can click on to download files from your WordPress site …

Add downloadable files to WordPress using the File Block

(Add downloadable files to WordPress using the File Block)

Clicking on the download link lets users save these files to their hard drives or media storage devices …

Download files from your WordPress site

(Download files from your WordPress site)

Info

How To Use The File Block

To add a File Block:

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

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

'Add Block' Tool - Add File Block

(‘Add Block’ Tool – Add File Block)

Or, select a File Block in the Content Area

Add a File Block from the Content Area

(Add a File Block from the Content Area)

After adding a File Block, you can add a file:

  • Using drag and drop.
  • Using the web browser uploader.
  • From your media library.

Add A File Using Drag & Drop

To add a file using drag and drop:

  • Make sure you have the folder containing your file open (you may have to resize your browser to view your post and your file folder).
  • Select a file from your hard drive and drag it onto the active (shaded) gallery upload tool.
  • The file will be automatically uploaded to your media library and inserted into your File Block.

Add an image to WordPress using drag and drop

(Add a file to WordPress using drag and drop)

Add A File Using Your Web Browser Uploader

To add a file using your web browser uploader:

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

Let’s go through the above steps:

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

File Block - Upload button

(File Block – Upload button)

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

Upload a file

(Upload a file)

Add A File From Your Media Library

To add a file from your media library:

  • Make sure that your file(s) have been uploaded 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 File Block and click on the ‘Media Library’ button.
  • Click on an image from the Media Library to select it.
  • Click on the ‘Select’ button.
  • Your file will be imported to the File 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 File Block and click on the ‘Media Library’ button …

File Block - Media Library button

(File Block – Media Library button)

Select a file from your media library (or upload one from your hard drive) and click on the ‘Select’ button …

Upload a file from the Media Library

(Upload a file from the Media Library)

The file will be imported to your File Block and added to your post or page …

File added

(File added)

After adding files:

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

How To Edit A File Block

To edit a File Block:

  • Click inside the File Block to select it.
  • Use the Block Editor tools to:
    • Change the alignment of the file text (left, center, right).
  • Use the Block Settings to:
    • Change the text link settings.
    • Display/hide the download button

Edit a File Block

(Edit a File Block)

To change the link text, change your file title in the Media Library …

Download Link Text

(Download Link Text)

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

How To Remove A File Block

To delete or remove a file block:

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

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

File Block Tools, Options & Settings

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

  • File Block Editor
  • File Block Settings

File Block Editor

File Block Editor

(File Block Editor)

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

  • Change Block Type (See ‘File Block – Additional Info’ section below.)
  • Align File
    • Align left
    • Align center
    • Align right
  • Width
    • Wide width
    • Full width
  • Edit
    • Replace File
  • More Options

File Block Editor

(File Block Editor)

File Block Settings

File Block Settings

(File Block Settings)

File Block settings include:

  • Block description area
  • Text Link Settings
    • Link To
      • Media file
      • Attachment Page
    • Open In New Tab (On/Off)
  • Download Button Settings
    • Show Download Button (On/Off)
  • Advanced Settings
    • Additional CSS Class

File Block Settings

(File Block Settings)

File Block – Additional Info

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

***

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

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as File Block.