File

The File field creates a field where you can upload documents (non-image files). You can upload a new file or select an existing one from the media library.

Click image to enlarge

1. Field Label: The field label will be displayed next to the field when adding the block to the post or page.
2. Field Name (slug): The field name should auto-fill based on the field label, but can be customized. This will be used in the PHP as part of the block template.
3. Field Type: Choose the File field type.
4. Field Location: Choose a location to display the field.
   • Editor will show the field in the main editing area of a post or page.
   • Inspector will display the field in the right-hand sidebar under the block inspector.
5. Field Width: Select how widely the field should be displayed.
6. Help Text: Enter instructions to describe the data needed in the field. (optional).

Supported File Types

The following file types can be uploaded via the File field:

• .pdf (Portable Document Format; Adobe Acrobat)
• .doc, .docx (Microsoft Word Document)
• .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
• .odt (OpenDocument Text Document)
• .xls, .xlsx (Microsoft Excel Document)
• .psd (Adobe Photoshop Document)

Note: Some web hosts limit the types and size of files that can be uploaded. If you are having issues, please check with your web host.

PHP API Controls

• Name
• Label
• Control
• Order
• Location
• Width
• help

Template Usage

To display the File field in your template, use the field name you provided.

There are two ways you can do this.

1. Template Editor: Using the built-in template editor is the easiest way to create the required block template. The template editor accepts HTML markup, field names (enclosed in 2 brackets), and CSS only.

Here’s an example of the HTML we used in the template editor:

<div>
     <ul>
         <li><a href="{{privacy-practices}}">Privacy Practices</a></li>
         <li><a href="{{medical-records-transfer-request}}">Medical Records Transfer Request</a></li>
     </ul>
</div>

2. PHP Template: If you need to use logic, loop syntax, define variables, or use PHP, you can create the template manually using the PHP templating method instead.
   

For example:

<a href="<?php block_field( 'privacy-practices' ); ?>" download>
     <?php esc_html_e( 'Download', 'your-textdomain' ); ?>
</a>

Calling block_value() will return the Attachment Post ID of the chosen field as an integer, and calling block_field() will echo the URL of the chosen field as a string.

<?php
$attachment_id = block_value( 'privacy-practices' );
echo wp_get_attachment_url( $attachment_id );
?>

Example template file: /blocks/block-example.php

<?php
// Example File Field
?>

<ul>
<li><a href="<?php block_field( 'privacy-practices' ); ?>" download>
     <?php esc_html_e( 'Download', 'your-textdomain' ); ?>
</a></li>

<li><a href="<?php block_field( 'medical-records-transfer-request' ); ?>" download>
     <?php esc_html_e( 'Download', 'your-textdomain' ); ?>
</a></li>
</ul>

Block Usage

To use the block with the File field on your site, locate it in the blocks menu.

Click image to enlarge

It will then display within your post or page editor where you can upload your files.

Click image to enlarge

After uploading the files, you’ll see the file names in the post or page editor.

Click image to enlarge

And after publishing the post or page, the links to the files you uploaded will appear on the front end of your site.

Click image to enlarge