WordPress File Upload Gutenberg Blocks

Introduction

Version 4.11 of WordPress File Upload plugin introduced WordPress File Upload Gutenberg Blocks.

Gutenberg is the new and exciting WordPress page / post editor. It is block-based, as many 3rd part page builders. As of WordPress 5.0, Gutenberg is the default page / post editor and it is really a major leap for making WordPress even easier and more entertaining. WordPress File Upload plugin has been compatible with Gutenberg since its public release.

Gutenberg is a very extensible editor. It allows plugins to add their own custom blocks. So, WordPress File Upload has released its own Gutenberg blocks and this article explains how to user them.

The Blocks

WordPress File Upload introduces two custom blocks:

	Plugin upload form shortcode
	Plugin front-end file viewer shortcode

These blocks can be found  under Widgets block category:

WFU Uploader Shortcode Block

Add this block on a post in order to create a new upload form. When it is added it looks like this:

It is similar to a Gutenberg Shortcode block that contains all the attributes of a shortcode.

By default the plugin sets uploadid attribute to a random 4-digit number, in order to ensure that no two WFU uploader shortcode blocks have the same ID. This is necessary when having more than one uploader forms on the same page. However the user can change the ID.

When page is opened for preview it will look like this:

WFU File Viewer Shortcode Block

Add this block on a post in order to create a new file viewer form. When it is added it looks like this:

By default the plugin sets browserid attribute to a random 4-digit number, in order to ensure that no two WFU file viewer shortcode blocks have the same ID. This is necessary when having more than one file viewers on the same page. However the user can change the ID.

When page is opened for preview it will look like this:

Editing the Blocks

The two block types can be edited in many ways. The easiest is to use the plugin’s shortcode composer.

In order to invoke the shortcode composer, first activate the plugin block. When it is activated and the mouse cursor is inside the block, an edit icon will appear as shown below:

When the icon is pressed, the shortcode composer will open in a new browser tab.

When user finishes editing and presses Update button, the shortcode composer will close and changes will be shown in the block:

The blocks can also be edited manually by editing straight inside them.

Migrating from Classic Editor

When passing from the old classic WordPress editor to Gutenberg, it is very easy to convert [wordpress_file_upload…] and [wordpress_file_upload_browser…] shortcodes into blocks.

Here is how a page looks like when migrating from classic editor to Gutenberg:

The shortcodes are in textual form. Gutenberg offers an option to convert the classic page into blocks. When this option is selected, the plugin will automatically identify its shortcodes and convert then to blocks. Here is how the page will look like after conversion:

Converting Between Block Types

It is also possible to convert other blocks to WordPress File Upload blocks and the opposite. For instance suppose the following paragraph block that contains the uploader shortcode:

The block has an option to convert to other block types:

The plugin recognizes automatically that the uploader shortcode is in the paragraph text and adds WFU Uploader Shortcode block in the Transform To list.

The plugin’s blocks can also be transformed to other block types (Paragraph, Custom HTML or Shortcode blocks).

Reusing Blocks

Gutenberg provides an exciting feature, re-usability of blocks, which has been a long-waited request by the plugin’s users.

It is possible to store blocks so that they can later be used on another post or page.

To do this select Add to Reusable Blocks from the block’s options:

Then give a name for the reused block:

The block has now been saved in WordPress Reusable Blocks and can be retrieved at any time:

Gutenberg also provides Manage All Reusable Blocks option to edit and delete all the stored reusable blocks.

For any questions or more information do not hesitate to Contact us.

The Iptanus Team