In de loop der jaren hebben we Gutenberg vanuit vele perspectieven verkend. We hebben de functionaliteiten van de editor ontleed, vergeleken met die van andere paginabouwers, statische en dynamische custom blokken gebouwd en nog veel meer.

Met de nieuwste versies van WordPress kun je dankzij nieuwe features en tools gemakkelijker complexe layouts maken door de functionaliteit van de Block Editor te verrijken en te verbeteren zonder dat je custom blokken hoeft te bouwen.

Dankzij de introductie van blokpatterns en ontwikkelaarstools zoals de Block Bindings API, zijn er minder gebruikssituaties voor custom blokken. Je kunt nu complexe blokstructuren maken, metadata waarden in je inhoud injecteren en een groot deel van je workflow automatiseren zonder de interface van de editor te verlaten. Kortom, vandaag de dag kun je met WordPress complexe sites maken met net zo weinig klikken als ooit tevoren.

Het toevoegen van custom besturingselementen en tools aan de editor kan helpen om het maken van content soepeler te laten verlopen. Je kunt bijvoorbeeld een paneel toevoegen aan de Post zijbalk om functionaliteit toe te voegen of een custom zijbalk maken om meerdere metavelden te beheren.

Laten we aan de slag gaan!

Hoe je een plugin voor een Blok Editor maakt zonder een custom blok te maken

WordPress biedt een handige opdrachtregeltool waarmee je een lokale Node.js ontwikkelomgeving kunt installeren met alle benodigde bestanden en afhankelijkheden om een custom blok te maken. Typ gewoon npx @wordpress/create-block in de opdrachtregeltool, wacht een paar seconden en je bent klaar.

Het maken van een custom blok is echter niet nodig als je alleen een zijbalk of een eenvoudig instellingenpaneel hoeft toe te voegen. In dat geval moet je een Gutenberg plugin maken.

WordPress biedt geen tools om het proces van het maken van een plugin voor Gutenberg te automatiseren, dus je moet het handmatig doen. Maar maak je niet te veel zorgen. Het proces is relatief eenvoudig en wij zullen je er doorheen leiden. Dit zijn de stappen die je moet volgen:

1. Download en installeer een lokale ontwikkelomgeving

Eerst het belangrijkste: Hoewel je je Gutenberg plugin in een externe omgeving kunt ontwikkelen, kan het handiger voor je zijn om lokaal een ontwikkel WordPress website te installeren. Je kunt elke omgeving gebruiken die gebaseerd is op PHP en MySQL. Van de vele alternatieven die er zijn, raden we DevKinsta aan. Het is gratis, volledig uitgerust, eenvoudig te gebruiken en 100% compatibel met Kinsta hosting.

Zodra je je ontwikkelsite hebt ingesteld, ben je klaar om een Gutenberg Block Editor plugin te maken.

2. Download en installeer Node.js en npm

Download Node.js van nodejs.org en installeer het op je computer. Hiermee installeer je ook npm, de Node package manager.

Zodra je dit hebt gedaan, start je je command line tool en voer je node -v en npm -v uit. Je zou de geïnstalleerde versies van Node.js en npm moeten zien.

3. Maak de map van je plugin

Maak een nieuwe map onder wp-content/plugins en hernoem deze my-sidebar-plugin of iets dergelijks. Onthoud dat deze naam de naam van je plugin moet weergeven.

Open de terminal, navigeer naar de map van de plugin en initialiseer een npm project met het volgende commando:

npm init -y

Dit zal een basis package.json bestand aanmaken.

4. Dependencies installeren

Typ het volgende commando in je opdrachtregeltool:

npm install @wordpress/plugins @wordpress/scripts --save-dev

Er zou een nieuwe map node_modules moeten zijn toegevoegd aan je project.

Open nu je package.json en werk scripts als volgt bij:

{
	"name": "my-sidebar-plugin",
	"version": "1.0.0",
	"main": "index.js",
	"scripts": {
		"build": "wp-scripts build",
		"start": "wp-scripts start"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"description": "",
	"devDependencies": {
		"@wordpress/plugins": "^7.14.0",
		"@wordpress/scripts": "^30.7.0"
	}
}

Nu kun je de map van de plugin controleren:

5. Maak de plugin bestanden

Maak in de map van je plugin een nieuw .php bestand aan en geef het dezelfde naam als je map. In ons voorbeeld is dat my-sidebar-plugin.php.

Open het bestand en plak de volgende code om de plugin op de server te registreren:

<?php
/**
 * Plugin Name: My Sidebar Plugin
 */

function my_sidebar_plugin_register_script() {
	wp_enqueue_script(
		'my_sidebar_plugin_script',
		plugins_url( 'build/index.js', __FILE__ ),
		array( 'wp-plugins', 'wp-edit-post' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
	);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );

Maak vervolgens een map src aan in de map van je plugin. Maak daarin een nieuw index.js bestand met de volgende code:

import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';

const MyPluginSidebar = () => (
	<PluginSidebar
		name="my-sidebar-plugin"
		title="My Sidebar Plugin"
	>
		<div>
			Hello my friends!
		</div>
	</PluginSidebar>
);

registerPlugin( 'my-sidebar-plugin', {
	render: MyPluginSidebar,
} );