Export custom Gutenberg blocks from Google Docs and Notion to WordPress

​

Introduction

When you export content to WordPress, Cloudpress will automatically convert the content to the correct Gutenberg blocks. It will convert your text with the formatting, your headings, tables, code blocks, etc.

Sometimes, however, you may want to include a custom Gutenberg block in the content exported by Cloudpress. For example, you may want to insert an email sign-up form, call to action, or countdown timer block.

Neither Google Docs nor Notion has the concept of a countdown timer, for example, so you cannot add this to your source document in Google Docs or Notion.

To work around this problem, Cloudpress introduced a feature called Raw Content Blocks that allows you to add custom Gutenberg code. When Cloudpress exports your content and encounters a raw content block, it will send the content of that block to WordPress as-is.

The rest of this document will walk you through this feature by demonstrating how to add the Countdown block from Spectra blocks to your content.

​

Get the source code for your custom Gutenberg block

The first thing you need to do is to get the source code for your custom Gutenberg block. The easiest way is to create an empty post and add the block.

After configuring your Gutenberg block block to your desire, you can view the post’s source code by switching to the code editor.

Highlight the code for the Gutenberg block you want to export. Ensure you highlight all the code for the block and copy it to your clipboard.

Next, you will need to add this content to your document. The process is different depending on whether you use Google Docs or Notion.

​

Export your custom Gutenberg block from Google Docs

To export the custom Gutenberg block from a Google Doc, add a single-cell table to your document - in other words, a table with one row and one column.

Give the table a _dotted border- by placing your cursor inside the table and selecting the dotted border from the Border dash toolbar item.

Then, paste the source code of the Gutenberg block that you copied previously, inside the table.

Next, you must configure Cloudpress to interpret the content of the table as raw content. The procedure differs depending on whether you use the Cloudpress Google Docs Add-on or the Export Content page.

​

Enabling raw content in the Google Docs Add-on

Open the settings for the Google Docs Add-on and enable the setting called Treat single-cell tables with a dotted border as raw content.

After enabling the setting, click the Save button to save your settings. From now on, any document you export via the Google Docs Add-on will treat the content inside a single-cell table with a dotted border as raw content.

​

Enabling raw content in the Export Content page

If you use the Export Content page, you can enable the option to export raw content when you select the documents you want to export. Click on the Show Settings button.

Enable the Treat single-cell tables with a dotted border as raw content setting.

This setting does not persist, so you must enable it whenever you export content that includes raw content. After enabling the setting, you can proceed with exporting your document. Cloudpress will treat the content inside any single-cell table with a dotted border as raw content.

​

Tutorial video

The tutorial video below walks you through exporting custom Gutenberg blocks from Google Docs to WordPress.

​

Export your custom Gutenberg block from Notion

Cloudpress uses Code blocks to denote raw content in Notion. However, code blocks are also used when you want to include code snippets in your content. For example, you may have a blog geared towards software developers and often include code snippets in your content. In this case, you can instruct Cloudpress to treat only code blocks in a specific language as raw content and all others as code blocks.

​

Enable raw content for your Notion connection

Go to the Connections page in Cloudpress and click on your Notion connection. Go to the Content Conversion tab.

1. In the Raw content blocks section, enable the option to convert code blocks to raw content. With this enabled, Cloudpress will treat all code blocks as raw content.
2. Next, limit raw content only to a specific language. As mentioned before, this is useful when using code blocks for code snippets. In the screenshot below, you can see that Cloudpress will only treat code blocks for HTML as raw content. All other code blocks will be exported as code blocks.

Click Save Changes to save your changes. Cloudpress will now treat code blocks for the specified language in all pages exported from this connection as raw content.

​

Add the Gutenberg block to your Notion page

Add a code block to your page.

Paste the code for the Gutenberg block you copied earlier in the code block and set the language to the same language you configured in your connection settings.

The screenshot below demonstrates a code block containing the Gutenberg block code with the language set to HTML.

You can now export the content to WordPress. If the code block’s language matches your Notion connection configuration, Cloudpress will export the Gutenberg code as raw content.

​

Tutorial video

The tutorial video below walks you through exporting custom Gutenberg blocks from Notion to WordPress.