How to Remove TikTok Block from Gutenberg

TikTok is arguably the most popular short video service. People around the world use it to share funny content with their friends. If you have a WordPress website, you can share a TikTok content you consider interesting via a blog post by embedding it. Gutenberg — the default WordPress editor — has made it easier for you to embed social media content, including TikTok.

However, some people don’t like TikTok for a certain reason or two. If you fall into this group of people, you may want to remove the TikTok block from Gutenberg. This post will show you how.

Removing TikTok Block from Gutenberg

TikTok is one of the social media platforms supported by Gutenberg. There is a block dedicated to embedding a TikTok video to a blog post or page you create with Gutenberg. To embed a TikTok video, you just need to paste the video URL to the available field on the TikTok block.

What if you don’t like TikTok and want to disable the block instead?

In Gutenberg, TikTok is one of the blocks available on a block group called Embeds. In addition to TikTok, there are also other blocks such as YouTube, SoundCloud, Spotify, and so on in the block group. Gutenberg itself has a feature to disable the unneeded blocks, which you can access from the settings panel. However, there is no option to disable specific social media block under the Embeds block category. What available is the option to disable the Embeds block group.

If you enable the above option, all blocks under the Embeds block group will be gone. A little trick is required to disable a certain block only, including the TikTok block.

First, create a JavaScript file consisting of the following content.

wp.domReady(function () {
  wp.blocks.unregisterBlockVariation('core/embed', 'tiktok');
});

You can save the above file under the js folder on your active theme (full path: wp-content/themes/your-theme/js/remove-tiktok.js). If your theme has no js folder yet, you can create it manually. Some WordPress themes, including Divi, already have one. To create the file itself, you can use the built-in file manager of your hosting service. If your web hosting doesn’t have a file manager, you can create the file using your favorite text editor (e.g., TextEdit), and upload it using an FTP client app like FileZilla, Cyberduck, of WinSCP.

Once done creating the file, go to Appearance -> Theme File Editor on your WordPress dashboard. If you use block theme, you can find Theme File Editor under the Tools menu. Select the functions.php file to edit it.

Paste the following code snippet right after the last line of the functions.php file content.

function wpb_embedblock() {
    wp_enqueue_script(
        'deny-list-blocks',
        get_template_directory_uri() . '/js/remove-tiktok.js',
        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
    );
}
add_action( 'enqueue_block_editor_assets', 'wpb_embedblock' );

On the fourth line, make sure to tailor the file name of the JavaScript with the file name you created. Click the Update File button to apply the change.

That’s it. The TikTok block should now gone from your Gutenberg.