The WordPress Block Editor - File Block

WordPress Block Editor – File Block

WordPress Block Editor - File Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

***

File Block – Description

The File Block lets you place a download button on your posts and pages that users can click on to download documents and other files from your website.

File block
Add a File block to your posts and pages.

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

Download files using the File block.
The File block lets users download files from your site.

info

How To Use The File Block

In this section, we’ll cover:

  • How to add a File block to your content.
  • How to edit and configure your File block and block settings.
  • How to remove the File block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A File Block

To add a File block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the File block (in Most Used or Media section),
    • 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 - File Block
Add a File block to your posts and pages using the Add Block tool.

Or, select a File block using the Inserter tool in the Content Area.

 Inserter tool - File block.
Use the Inserter tool to add a File block to your content.

Either of the above methods will insert a File block into your content.

File block.
File block (no downloadable files added yet)

The File block includes the following options for adding a downloadable file to your content:

  • Upload – select this option to upload a new file from your media storage device.
  • Media Library – choose this option to select a file you’ve already uploaded to your site’s Media Library.

After adding a File block to your content, you can:

  • Add a file:
    • Using drag and drop (Upload button).
    • Using the web browser uploader (Upload button).
    • From your media library.
  • Edit the download link and download button text.

Let’s go through the methods of adding a downloadable file to your content.

Add A File Using Drag & Drop

Drag and Drop a File into your File block.
Upload a file to your site automatically using drag and 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 the media files folder in your media storage device and drag it into the File block.
  • The file will be automatically uploaded to your media library and inserted into your File block.
Uploading a file to the File block using drag and drop.
Drag and drop a file into your File block to upload it to your post or page (and Media Library).

Add A File Using Your Web Browser Uploader

To add a file using your web browser uploader:

  • Make sure you know where the media files folder in your storage device 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 (Step 1).

File Block - Upload Button.
Click on the Upload button.

This will bring up the ‘Upload Media’ window on your browser. Select a file from your media storage device (Step 2) and click on ‘Open’ to import the file into the File block and add it to your post or page (Step 3).

Upload a file to your site.
Upload a file to your site in 3 easy steps.

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 tutorial on How To Use The WordPress Media Library).
  • Go to 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:

Go to your File block and click on the ‘Media Library’ button.

File Block - Media Library Button.
Click on the Media Library button.

Select a file from your media library (or upload one from your storage device) and click on the ‘Select’ button.

Media Library - Select File.
Click the Select button

The file will be imported to your File block and added to your post or page.

File Block with downloadable file added.
Your downloadable file has been added to the File block.

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 (left, center, right, wide width, full width).
    • Replace your file.
    • Copy the file link to your clipboard.
    • Edit and format the file link text and download button text.
  • Use the Block Settings to:
    • Change your file link settings.
    • Open the download file link in a new browser window.
    • Display or hide the download button.

Let’s go through the above.

Use the Replace and Copy button in the File block editor to replace your downloadable file and copy the download link to your clipboard.

File block - Editor menu
Replace and copy file links using the File block Editor menu.

The Replace link lets you select another file to replace your current file using the following options:

  • Open Media Library – Select a file you have previously uploaded to your Media Library.
  • Upload – Upload a new file from your media storage device.
File block - Replace link options.
Replace link options.

You can also edit your download file name and button.

To change the download link text associated with your file, change the title of your file in the Media Library.

Media Library - Edit Title.
Change the file name in the Title field.

If working in the post or page editor, click on the file name to change or format your link text.

File Block Editor - Edit and format file link text.
Edit and Format your file link text.

You can also edit and format your download button text by clicking on the button in your File block.

File Block Editor - Edit and format download button text.
Edit and form your download button 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 from your content:

  • Click inside the File block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove block’.
  • This will remove the File block from your content.
File block: More Options - Remove Block.
Use the More Options menu to remove a File block from your content.

Additionally…

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

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.)
  • Drag & Drop Tool
  • Move Up and Down Tool
  • Change Alignment
    • Align left
    • Align center
    • Align right
    • Wide width – A wide-aligned block sticks out on either side of normal content.
    • Full width – This stretches the block area to cover the entire width of the browser window (normal content remains within margins on either side).
  • Replace – Select another file.
  • Copy URL – Copy the file’s download link to your clipboard
  • Bold – Add bold text formatting to your file’s link text.
  • Italic – Add italicized text formatting to your file’s link text.
  • More Rich Text Controls – See How To Use Blocks to learn more about using rich text control settings.
  • More Options – See How To Use Blocks to learn how to use this section.

File Block Settings

File block settings.
File block settings.

File block settings include:

  • Block description area
  • Text Link Settings
    • Link to
      • Media file – Add a direct link to your download file.
      • Attachment page – Link to a content page containing the link to your download file.
    • Open In New Tab (On/Off)
  • Download Button Settings
    • Show Download Button (On/Off)
  • Advanced Settings
    • HTML Anchor – Create a unique web address to send users directly to the block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
    • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

File Block – Additional Info

You can convert a File block into the following block types:

File block - Change block type or style.
Change the File block into other block types.

Installing plugins or themes on your site may also add new functionality, options, or settings to a File block.

Sample post with File blocks.
Add downloadable files to your site’s content using File blocks.

Congratulations! Now you know how to use the WordPress content editor’s File block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024

Terms Of Use | Privacy Policy

Scroll to Top