How To Extend The WordPress Core Gallery Block With a Custom ToggleControl

This tutorial shows you the most basic, minimalistic way to add a custom ToggleControl to your core gallery block sidebar settings when using the Gutenberg block editor in WordPress.

The tutorial includes working code you can use in your own plugin or as a new plugin to modify/extend the default gallery block when using Gutenberg.

Skip to Video Tutorial

The arrow in the following image shows exactly what the code in this tutorial achieves :

Requirements

• Node.js
• Local installation ( Local by Flywheel or equivalent )
• Command line ( Terminal ( for Mac ) or equivalent )

Step 1

Download, install and activate the core-gallery-toggle plugin folder as a new plugin.

This plugin includes :

1. A main plugin file named core-gallery-toggle.php which includes the code to load the javascript from the index.js file
2. A package.json file with absolute minimal code for running the development build process including dependencies like Webpack.
3. A src ( source ) folder containing an index.js file. This file contains all the javascript code with components you need to add the ToggleControl to the default gallery block.

Here’s what the plugin contains, only 3 files and 1 folder :

Step 2

Using command line, CD into your core-gallery-toggle folder.

cd ~/Local\ Sites/october-2024/app/public/wp-content/plugins/core-gallery-toggle

Remember to swap out the path above with your own local installation path.

Step 3

In your command line application, run :

 npm install

Installation of dependencies might take a few minutes. Once, completed, run :

 npm start

And then run :

 npm run build

Once completed, you’ll find new files and folders making your plugin folder look like this :

Note : If you want to modify the javascript in the src folders index.js file, make sure you run npm run build after saving your modifications. Do NOT modify the code in the build folder, node_modules or package-lock.json file.

To zip the production ready version of the plugin, modify your package.json file to include this :

    "plugin-zip": "wp-scripts plugin-zip",
    "zip": "wp-scripts plugin-zip"

And then run :

npm run zip

Step 4

Test your new ToggleControl :

• Create a gallery using the gallery block.
• Click the parent gallery block and toggle on and off the setting to see a line of text displayed before the gallery.
• The code for the output uses the render_block function located inside the main plugin file named core-gallery-toggle.php. You can modify this PHP code to do anything you like.

Video Tutorial

This video screencast walks you through everything in this tutorial.

Production ready plugin

Here’s the production ready plugin created from the build you can install, use, extend and modify to your own requirements.

Plugins Using ToggleControl

• Like Button For Jetpack Carousel
• Smooth Scroll Per Page for Blocks