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.
This plugin, Gutenberg Easy Clone/Remove block buttons, is based on the @wordpress/create-block package and modified to be a Gutenberg plugin instead of a custom block.
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.
custom-remove-duplicate-buttons.php
This file is the main PHP plugin file. It registers the plugin by plugin name and loads the rendered JavaScript file (generated by the Gutenberg plugin) in the editor screen.
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.
