How to Add Google Drive Files with the Block Editor (Gutenberg)

If you’re looking for a simple way to show your Google Drive files on a page built with the WordPress block editor, you’re in the right place. You can easily do this with DriveHub.

DriveHub adds its own DriveHub Module block, so you can drop a gallery, a file list or an embedded document into any page or post without copying shortcodes around.

Here is an easy, step-by-step guide to help you set it all up!

Step 1: Install DriveHub and Connect Google Drive #

First, make sure DriveHub is installed and your Google account is connected:

• From your WordPress admin, click on Plugins > Add New.
• Search for DriveHub.
• Click Install and then Activate.
• Follow the setup screen to add your Google account.

Read our step by step setup guide to avoid any confusion.

Step 2: Check That the Block Editor Integration Is On #

The DriveHub block only shows up when the block editor integration is turned on. It is on by default, but it is worth checking:

• Go to DriveHub > Integrations.
• Find the Block editor card under Editors and page builders.
• Make sure the switch is on and the card says Active.
• If you turned it on just now, click Save changes in the bar at the bottom of the screen.

Step 3: Create a Page and Open the Block Inserter #

Now open the page where you want to show your Google Drive files:

• Go to Pages > Add Page, or open an existing page or post.
• Give your page a title (for example, Client Gallery).
• Click the + button at the top left to open the block inserter.

Step 4: Add the DriveHub Module Block #

Next, find the DriveHub block and add it to your page:

• In the search box, type DriveHub.
• Click on the DriveHub Module block.

Step 5: Choose a Module #

The block now shows two choices: Insert Existing Module or Create New Module.

• To use a module you have already built, click on Select Module.
• To build a new one, click on + Add New Module instead, then click Add module in the window that opens.

The Insert DriveHub Module window opens with a list of your modules:

• Find the module you want (we’ll use the Studio Photo Gallery gallery module).
• Click on Insert module next to it.

Step 6: Check the Module in the Editor #

The block now shows the module type and name, so you always know what is on the page:

• The block card shows a Gallery badge and the module name, Studio Photo Gallery.
• To pick a different module, click on Change.
• In the right sidebar, under DriveHub Module, you can also switch modules from the Module field, or click Configure / Add New to open the module window again.

The editor shows a short summary of the module instead of the full gallery. Your visitors see the real gallery on the live page.

Step 7: Publish Your Page #

Once you’re happy with the page, it’s time to make it live:

• Click on Publish at the top right.
• Click Publish again in the panel that opens to confirm.

And that’s it. Your Google Drive files are now live on your page. Visitors now see the photos straight from your Google Drive, shown with the layout and options you set in the module.

Benefits of Using DriveHub with the Block Editor #

• No shortcodes to copy: Pick your module from a list right inside the editor.
• Clear labels: Each block shows the module type and name, so pages are easy to edit later.
• Build on the spot: Create a new module without leaving the page you are working on.
• Save WordPress storage: Your files stay in Google Drive instead of your Media Library.
• Always up to date: Change files in Google Drive and your page follows.

With DriveHub and the block editor, adding Google Drive files to a page takes just a few clicks.