How to Hide Block Toolbar Links in the Gutenberg Editor

Over the last couple of years, more and more WordPress users have adopted the Gutenberg block editor. We use it for all the PublishPress sites, and an increasing number of support tickets are about Gutenberg.

We had an interesting support ticket this week: a customer wanted to hide links in the menu that is attached to each block. You can see a screenshot of this menu below.

In this guide, I'll show you how to remove items from this toolbar. We'll be hiding items for specific user roles. In this example, we'll start by hiding the “Create Reusable block” link and icon in the Gutenberg toolbar menu.

This guide uses the Editor Features option in the PublishPress Capabilities Pro plugin.

  • Go to “Capabilities”, then “Editor Features”.
  • In the top left corner, choose the user role you want to hide the link for. You can choose “Editor”, “Author”, or any other WordPress role.
  • Scroll down to the “Custom Gutenberg Items” area at the bottom of the screen.
  • Enter the following code into the “Element IDs or Classes” box.
.components-popover.components-dropdown__content.block-editor-block-settings-menu__popover.components-dropdown-menu__popover .components-popover__content .components-dropdown-menu__menu div.components-menu-group:nth-child(3) div .components-button.components-menu-item__button:nth-child(2)
  • Click “Add”.
  • Click “Save Post Restrictions”.
  • Now when you check the Gutenberg editor, the link will be removed:

You can adjust this code to remove other items in the screenshot. This code uses the numbers to target different elements.

For example, change the final number from “2” to “1” and you'll be able to hide the “Lock” link. Change the final number from “2 to “3” and you can hide the “Group” link.

.components-popover.components-dropdown__content.block-editor-block-settings-menu__popover.components-dropdown-menu__popover .components-popover__content .components-dropdown-menu__menu div.components-menu-group:nth-child(3) div .components-button.components-menu-item__button:nth-child(1)

Or you can move to other areas in this menu. The “Copy block” link is the first link in the first area, so you can hide this link by changing both numbers to 1.

.components-popover.components-dropdown__content.block-editor-block-settings-menu__popover.components-dropdown-menu__popover .components-popover__content .components-dropdown-menu__menu div.components-menu-group:nth-child(1) div .components-button.components-menu-item__button:nth-child(1)

The “Remove Paragraph” link is the first link in the fourth area, so you can hide this link by changing the first number to “4” and the last number to “1”.

.components-popover.components-dropdown__content.block-editor-block-settings-menu__popover.components-dropdown-menu__popover .components-popover__content .components-dropdown-menu__menu div.components-menu-group:nth-child(4) div .components-button.components-menu-item__button:nth-child(1)

More about Controlling Access to Gutenberg

The PublishPress plugins offer a wide variety of ways to control the Gutenberg editor. For example, there are ways to disable the Gutenberg editor for specific roles. You can also hide specific blocks, or hide metaboxes from 3rd party plugins.

Leave a Reply

Your email address will not be published. Required fields are marked *