WordPress Gutenberg — Add visible Duplicate and Delete buttons above block
The WordPress block editor “Gutenberg” has several controls for each block such as “Copy”, “Duplicate”, “Remove block”, etc.
Typically, the most used buttons are “Duplicate” and “Remove block”. Currently, to perform these tasks, you must:
1) navigate to the relevant block,
2) click on the hamburger (more options) menu, and
3) choose the item from the menu.
This article presents a small plugin that adds the “Duplicate” and “Delete” buttons to the main menu. This simplifies cloning and removing blocks.
It applies a simple Gutenberg render plugin to add a “blockControls” component to our custom Duplicate and Remove block buttons.
The buttons perform their actions via the @WordPress.data select and dispatch API.
Let’s see it in action!
Note: Currently, there is no hook available to set the placement of the buttons inside the controls, so some blocks may have other controls after the buttons.