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 -yDit 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@wordpress/pluginsinstalleert de modulepluginsvoor WordPress.@wordpress/scriptsinstalleert een verzameling herbruikbare scripts voor de ontwikkeling van WordPress.
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,
} );6. Compileer de code
Het enige dat nog ontbreekt is de build. Ga terug naar de opdrachtregel en voer het volgende commando uit:
npm run buildDit maakt een map build met de gecomprimeerde bestanden van het project.
Als je klaar bent, navigeer je naar het Plugins scherm in je WordPress dashboard en activeer je de plugin. Maak een nieuw bericht of pagina en klik op het plugin-icoon in de rechterbovenhoek om je custom zijbalk weer te geven.
7. Ontwikkelen en bouwen
We hebben het bestand index.js in de map src geplaatst. Het gebruik van een src map is een gebruikelijke conventie bij het ontwikkelen van WordPress plugins en thema’s, waardoor je code gemakkelijker te begrijpen is voor andere ontwikkelaars.
Door je JS code in de map src te plaatsen, kun je het npm start of npm run start commando gebruiken om een ontwikkelomgeving te starten die de scripts controleert en de code automatisch hercompileert als dat nodig is. Als je klaar bent met ontwikkelen, zal het npm build of npm run build commando de JavaScript code compileren in de build map, die de code bevat die geoptimaliseerd is voor productie.
Laten we nu het geleerde in de praktijk brengen en de plugin aanpassen die we in de vorige sectie hebben gemaakt om een nieuw paneel toe te voegen aan de zijbalk van de Post Editor voor het beheren van custom velden.
Een extra zijbalk maken om metavelden voor berichten te beheren
Ons doel is om een custom zijbalk te maken die een paneel bevat met een enkel tekstveld voor het toevoegen en bewerken van een custom metaveld.
Voordat we hierop ingaan, moeten we vermelden dat we een custom metavak kunnen gebruiken om hetzelfde resultaat te bereiken. Met WordPress 6.7 hebben meta vakjes een upgrade gekregen en zijn nu volledig compatibel met de Block Editor, dus je vraagt je misschien af waarom je meta velden beheert vanuit een custom zijbalk in plaats van een meta vak. De reden is dat je met een sidebar gebruik kunt maken van ingebouwde componenten. Dit helpt je om vriendelijkere interfaces te bouwen met krachtige besturingselementen die ook vertrouwd moeten zijn voor gebruikers.
Dit gezegd hebbende, volgt hier het proces voor het maken van een custom zijbalk waarmee je custom velden kunt beheren vanuit de editor.
my-sidebar-plugin.php
Stap 1: Registreer berichtmeta
Eerst moet je het metaveld registreren. Voeg de volgende code toe aan het hoofdbestand van de plugin:
function my_sidebar_plugin_register_meta() {
register_post_meta(
'post',
'meta_fields_book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Book title', 'my-sidebar-plugin' ),
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
)
);
}
add_action( 'init', 'my_sidebar_plugin_register_meta' );De functie register_post_meta accepteert drie argumenten:
- Het berichttype waarvoor een metasleutel moet worden geregistreerd. Als je een lege string instelt, wordt de metasleutel voor alle bestaande berichttypen geregistreerd.
- De metasleutel die moet worden geregistreerd. Merk op dat we geen underscore gebruiken aan het begin van de metasleutel. De metasleutel vooraf laten gaan door een underscore zou het custom veld verbergen, zodat je het misschien wilt gebruiken in een metabox. Het verbergen van het custom veld zou echter voorkomen dat het metaveld wordt gebruikt via de Block Bindings API in de inhoud van het bericht.
- Een array van argumenten. Merk op dat je
show_in_restmoet instellen optrue. Hierdoor wordt het metaveld blootgesteld aan de Rest API en kunnen we het metaveld binden aan blokattributen. Zie de functieverwijzing voor de andere attributen.
Stap 2: Registreer het metaveld
Om achterwaartse compatibiliteit voor je plugin te garanderen, moet je een custom metavak registreren zodat gebruikers je custom velden kunnen beheren, zelfs als ze de klassieke editor gebruiken. Voeg de volgende code toe aan het PHP bestand van je plugin:
/**
* Register meta box
*
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*
*/
function my_sidebar_plugin_register_meta_box(){
add_meta_box(
'book_meta_box', // Unique ID
__( 'Book details' ), // Box title
'my_sidebar_plugin_meta_box_callback', // Content callback
array( 'post' ), // Post types
'advanced', // context
'default', // priority
array('__back_compat_meta_box' => true) // hide the meta box in Gutenberg
);
}
add_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );Declareer nu de callback die het formulier opbouwt:
/**
* Build meta box form
*
* @link https://developer.wordpress.org/reference/functions/wp_nonce_field/
* @link https://developer.wordpress.org/reference/functions/get_post_meta/
*
*/
function my_sidebar_plugin_meta_box_callback( $post ){
wp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );
$title = get_post_meta( $post->ID, 'meta_fields_book_title', true );
?>
<div class="inside">
<p><strong><?php echo __( 'Book title', 'my-sidebar-plugin' ); ?></strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
</div>
<?php
}Schrijf vervolgens de functie om je metavelden op te slaan in de database:
/**
* Save metadata
*
* @link https://developer.wordpress.org/reference/functions/wp_verify_nonce/
* @link https://developer.wordpress.org/reference/functions/current_user_can/
* @link https://developer.wordpress.org/reference/functions/sanitize_text_field/
* @link https://developer.wordpress.org/reference/functions/update_post_meta/
*
*/
function my_sidebar_plugin_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )
return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
if ( ! isset( $_POST['meta_fields_book_title'] ) )
return;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
update_post_meta( $post_id, 'meta_fields_book_title', $title );
}
add_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );We zullen niet dieper op deze code ingaan omdat dit buiten het bestek van dit artikel valt, maar je kunt alle informatie die je nodig hebt vinden door de links in de headers van de functie te volgen.
Als laatste moeten we het bestand index.js van onze plugin enqueuen:
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' );Dat is alles voor het PHP bestand. Vervolgens moeten we de JS-code schrijven.
index.js
Je index.js staat in de map src, waar je je JS-bestanden opslaat tijdens de ontwikkelingsfase.
Open je index.js en voeg de volgende import declaraties toe:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';Je hebt deze bronnen nodig om de sidebar te bouwen met de vereiste besturingselementen.
Vervolgens moet je de sidebar component bouwen:
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginSidebar
name="my-sidebar-plugin"
icon="book"
title="My plugin sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );De functie registerPlugin registreert de plugin en rendert het component met de naam MyPluginSidebar.
De functie MyPluginSidebar declareert een paar constanten en geeft de JSX-code van het component terug.
useSelectis een custom hook voor het ophalen van props van geregistreerde selectors. We hebben deze gebruikt om het huidige berichttype op te halen. Zie ook deze blogpost van de WordPress Developer Blog.useEntityPropretourneert een array van metavelden en een setterfunctie om nieuwe metawaarden in te stellen. Zie ook de online referentie.updateBookTitleMetaValueis een event handler die de waarde van hetbookTitlemetaveld opslaat.
We hebben een paar ingebouwde componenten gebruikt om onze zijbalk te bouwen:
PluginSidebarHiermee kun je items toevoegen aan de werkbalk van de Post- of Site Editor pagina’s. (Zie de referentie van de component.)PanelBodymaakt een inklapbare container die je open of dicht kunt klappen. (Zie de referentie van de component.)PanelRowis een algemene container voor rijen binnen eenPanelBody. (Zie de referentie van de component.)TextControlis een eenregelig veld dat kan worden gebruikt voor vrije tekstinvoer. (Zie de referentie van de component.)
Voer nu het commando npm run build uit, activeer de plugin en maak een nieuw bericht. Er zou een nieuw boek-icoon moeten verschijnen in de bovenste zijbalk. Als je op dat pictogram klikt, verschijnt de zijbalk van je plugin.
Wat als je geen nieuwe zijbalk nodig hebt, maar je custom veld wilt weergeven in de ingebouwde zijbalk voor berichten? Dan hoef je alleen maar PluginSidebar te vervangen door PluginDocumentSettingPanel. Dit is je nieuwe index.js bestand:
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginDocumentSettingPanel
name="my-sidebar-plugin"
title="Book details"
className="my-sidebar-plugin"
>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );De volgende afbeelding toont het resultaat.
Een use case: een block pattern override om je workflow te automatiseren
Je kunt nu een waarde toevoegen voor het custom veld en deze zal beschikbaar zijn via de Block Bindings API voor gebruik met blokattributen. Je kunt bijvoorbeeld een Paragraph blok aan je inhoud toevoegen en het custom veld binden aan het content attribuut van de paragraaf.
Je bent vrij om de waarde van je custom veld te wijzigen en deze wijzigingen worden automatisch toegepast op de inhoud van je alinea.
Als je je afvraagt of je nog meer kunt doen met custom velden en blokbindingen, dan is het antwoord ja! Met Block Patterns en Block Bindings API kun je het hele proces voor het maken van content automatiseren.
Om een idee te krijgen, maak je een patroon met ten minste een kop of een alinea. In dit voorbeeld maken we een blokpatroon met een Columns blok, een Image, een Heading en een paar Row blokken met elk twee alinea’s.
Als je tevreden bent met je layout, selecteer je de wrapping-elementen en maak je een gesynchroniseerde pattern.
Voeg een naam en een categorie toe voor het blokpattern en zorg ervoor dat het gesynchroniseerd wordt.
Als je de pattern vervolgens in de Post Editor hebt gemaakt, selecteer je het en klik je op Edit original in de werkbalk van het blok. Je kunt ook naar het gedeelte Patterns van de Site Editor navigeren en de pattern vinden onder My patterns of in de patterncategorie die je eerder hebt ingesteld.
Open de Code Editor en zoek het blok dat je aan je custom veld wilt binden. Voeg in het scheidingsteken van het blok de volgende code toe:
<!-- wp:heading {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"meta_fields_book_title"
}
}
}
}
} -->
Sla de pattern op en maak een nieuw artikel. Voeg de pattern toe aan je inhoud en stel een waarde in voor het custom veld. Je zou moeten zien dat die waarde automatisch wordt toegepast op je pattern.
Nu kun je met deze plugin spelen. Dankzij custom velden en de Block Bindings API kun je meer velden en besturingselementen toevoegen om je layouts automatisch te vullen.
Samenvatting
Het ontwikkelen van een custom blok kan een uitdaging zijn. Maar moet je een blok bouwen als je meer kunt doen met een blokpattern?
Met de vooruitgang in blokpatterns en de introductie van krachtige ontwikkelfeatures, zoals de Block Bindings API, is het niet langer nodig om custom blokken te maken om geavanceerde en functionele websites te bouwen. Een eenvoudige plugin en een blokpattern kunnen effectief een aanzienlijk deel van je workflow automatiseren.
Deze tutorial liet zien hoe je functionaliteit kunt toevoegen aan de WordPress Post Editor door middel van een plugin. Wat we in dit artikel hebben behandeld is echter slechts een tipje van de sluier van wat je kunt bereiken met de robuuste features die WordPress nu biedt.
Heb je deze features al verkend en features toegevoegd aan de WordPress Editor? Zo ja, deel dan gerust je ervaringen en inzichten in de comments hieronder.
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
Laat een reactie achter