Zo maak je WordPress bloktemplates

ict

[ad_1]

In het Gutenberg tijdperk is het ontwerpproces niet strikt gebonden aan WordPress thema’s. Out of the box voorziet het CMS gebruikers van alle ontwerptools die nodig zijn om een geweldige websitelayout te bouwen waarbij thema’s als doel hebben om nog meer bouw- en ontwerptools toe te voegen.

Bloktemplates zijn een feature die nog meer krachten vrijmaakt bij het bouwen van sites. Volgens het Block Editor Handbook:

Een bloktemplate wordt gedefinieerd als een lijst met blokitems. Zulke blokken kunnen vooraf gedefinieerde attributen hebben, placeholder content en statisch of dynamisch zijn. Met bloktemplates kun je een standaard beginstate opgeven voor een redactiesessie.

Met andere woorden, bloktemplates zijn vooraf samengestelde verzamelingen blokken die worden gebruikt om dynamisch een standaardtoestand in te stellen op de client.

👉 Bloktemplates verschillen van templatebestanden.

Templatebestanden zijn PHP bestanden zoals index.php, page.php en single.php, en werken op dezelfde manier met zowel klassieke als blokthema’s, volgens de WordPress templatehiërarchie. Bij klassieke thema’s zijn deze bestanden geschreven in PHP en HTML. Bij blokkenthema’s bestaan ze volledig uit blokken.

👉 Bloktemplates zijn anders dan blokpatronen.

Blokpatronen moeten handmatig worden toegevoegd aan je pagina’s, terwijl bloktemplates automatisch zorgen voor de initiële layout en standaardinstellingen wanneer jij of je teamleden een nieuw bericht maken.

Je kunt ook specifieke bloktemplates binden aan je aangepaste berichttypes en bepaalde blokken of features vergrendelen om gebruikers te dwingen je standaardwaarden te gebruiken of om fouten te voorkomen.

Je hebt een paar manieren om bloktemplates te maken. Je kunt de blok API gebruiken om een array van bloktypes te declaren via PHP, of je kunt een aangepast bloktype maken met behulp van de component InnerBlocks.

Tijd om alles uitgebreid te bespreken!

Een bloktemplate maken met PHP

Als je een ouderwetse developer bent, kun je een aangepast bloktemplate definiëren met behulp van een plugin of de functions.php van je thema. Als je kiest voor een plugin, start dan je favoriete code editor, maak een nieuw PHP bestand aan en voeg de volgende code toe:

<?php
/*
 * Plugin Name:       My Block Templates
 * Plugin URI:        https://example.com/
 * Description:       An example plugin
 * Version:           1.0
 * Requires at least: 5.5
 * Requires PHP:      8.0
 * Author:            Your name
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Update URI:        https://example.com/my-plugin/
 */

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

In de code hierboven, get_post_type_object wordt een berichttype op naam opgehaald.

Sla je bestand op in de map wp-content/plugins, navigeer naar het Plugins scherm in je WordPress dashboard en activeer de My Block Templates plugin.

Als je nu een nieuw bericht maakt, start de editor automatisch je bloktemplate met een Image blok, een heading en een alinea.

Een bloktemplate dat automatisch wordt geladen in de bericht-editor
Een bloktemplate dat automatisch wordt geladen in de Post Editor

Je kunt daarnaast een array met instellingen voor elk blok toevoegen en geneste structuren van blokken maken. De volgende feature bouwt een geavanceerder bloktemplate met binnenliggende blokken en instellingen:

function myplugin_register_my_block_template() {

	$block_template = array(
		array( 'core/image' ),
		array( 'core/heading', array(
			'placeholder'	=> 'Add H2...',
			'level'			=> 2
		) ),
		array( 'core/paragraph', array(
			'placeholder'	=> 'Add paragraph...'
			
		) ),
		array( 'core/columns', 
			array(), 
			array( 
				array( 'core/column',
					array(),
					array(
						array( 'core/image' )
					)
				), 
				array( 'core/column',
					array(),
					array(
						array( 'core/heading', array(
							'placeholder'	=> 'Add H3...',
							'level'			=> 3
						) ),
						array( 'core/paragraph', array(
							'placeholder'	=> 'Add paragraph...'
						) )
					) 
				)
			) 
		)
	);
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );

Je kunt de uitvoer van bovenstaande code zien in de volgende afbeelding:

Een geavanceerder bloktemplate
Een geavanceerder bloktemplate

Tot nu toe hebben we alleen coreblokken gebruikt. Maar je kunt ook aangepaste blokken of blokpatronen opnemen in je bloktemplates, zoals in het volgende voorbeeld:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'page' );
	$post_type_object->template = array(
		array( 'core/pattern', array(
			'slug' => 'my-plugin/my-block-pattern'
		) ) 
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

Er is niet veel verschil in het geval dat je besluit om een standaard bloktemplate te maken voor een al geregistreerd aangepast posttype. Verander gewoon het posttype van get_post_type_object in de naam van je aangepaste posttype, zoals in het volgende voorbeeld:

<?php
function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'book' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

Nu je weet hoe je bloktemplates maakt, kunnen we verder gaan en meer use cases verkennen. Laten we eens wat dieper duiken.

Bloktemplates met aangepaste berichttypen

Zoals we al eerder zeiden, kun je een bloktemplate koppelen aan een aangepast berichttype. Je kunt dat doen nadat je aangepaste berichttype al is geregistreerd, maar je kunt er de voorkeur aan geven om een bloktemplate te definiëren bij de registratie van het aangepaste berichttype.

In dat geval kun je de argumenten template en template_lock van de register_post_type functie gebruiken:

function myplugin_register_book_post_type() {
	$args = array(
		'label' => esc_html__( 'Books' ),
		'labels' => array(
			'name' => esc_html__( 'Books' ),
			'singular_name' => esc_html__( 'Book' ),
		),
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true,
		'show_in_rest' => true,
		'rest_namespace' => 'wp/v2',
		'has_archive' => true,
		'show_in_menu' => true,
		'show_in_nav_menus' => true,
		'supports' => array( 'title', 'editor', 'thumbnail' ),
		'template' => array(
			array( 'core/paragraph', array(
				'placeholder'	=> 'Add paragraph...'
			) ),
			array( 'core/columns', 
				array(), 
				array( 
					array( 'core/column',
						array(),
						array(
							array( 'core/image' )
						)
					), 
					array( 'core/column',
						array(),
						array(
							array( 'core/heading', array(
								'placeholder'	=> 'Add H3...',
								'level'			=> 3
							) ),
							array( 'core/paragraph', array(
								'placeholder'	=> 'Add paragraph...'
							) )
						) 
					)
				)
			)
		)
	);
	register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );

En dat was het. De afbeelding hieronder toont het bloktemplate in de interface van de editor voor een aangepast berichttype voor boeken.

Een bloktemplate voor een aangepast berichttype
Een bloktemplate voor een aangepast berichttype

Als je klaar bent met de layout, wil je misschien spelen met de blokinstellingen om het gedrag en het uiterlijk van je bloktemplate te finetunen.

Het bloktemplate finetunen met blokattributen

We hebben een bloktemplate gedefinieerd als een lijst van blokken. Elk item in de lijst moet een array zijn die de naam van het blok en een array van optionele attributen bevat. Met geneste matrices wil je misschien een derde matrix toevoegen voor child blokken.

Een template met een blok Columns kan als volgt worden weergegeven:

$template = array( 'core/columns', 
	// attributes
	array(), 
	// nested blocks
	array(
		array( 'core/column' ),
		array( 'core/column' ) 
	) 
);

Zoals hierboven vermeld, is de tweede matrix in de lijst een optionele matrix van blokattributen. Met deze attributen kun je het uiterlijk van je template aanpassen, zodat jij of je gebruikers zich kunnen concentreren op de inhoud van het bericht zonder zich zorgen te maken over de layout en het ontwerp van de pagina.

Om te beginnen kun je de Block Editor gebruiken om een structuur van blokken te maken die je kunt gebruiken als referentie voor je template.

Een blokindeling in de Block Editor
Een blokindeling in de Block Editor

Voeg je blokken toe, pas de layout en stijlen aan, schakel dan over naar de Code Editor en zoek blok delimiters.

The block delimiter of a Columns block
De blok delimiter van een Columns blok

Blok delimiters slaan blokinstellingen en stijlen op in sleutel/waardeparen. Je kunt eenvoudigweg sleutels en waarden uit de blok markup kopiëren en plakken om je reeks attributen te vullen:

$template = array( 'core/columns', 
	array(
		'verticalAlignment'	=> 'center',
		'align'				=> 'wide',
		'style'				=> array( 
			'border'	=> array(
				'width'	=> '2px',
				'radius'	=> array(
					'topLeft'		=> '12px', 
					'topRight'		=> '12px', 
					'bottomLeft'	=> '12px', 
					'bottomRight'	=> '12px'
				)
			)
		),
		'backgroundColor' => 'tertiary'
	),
	array(
		array( 'core/column' ),
		array( 'core/column' ) 
	) 
);

Herhaal dit proces voor elk blok in de template en je bent klaar.

$template = array(
	array( 'core/paragraph', array(
		'placeholder'	=> 'Add paragraph...'
	) ),
	array( 'core/columns', 
		array(
			'verticalAlignment'	=> 'center',
			'align'				=> 'wide',
			'style'				=> array( 
				'border'	=> array(
					'width'		=> '2px',
					'radius'	=> array(
						'topLeft'		=> '12px', 
						'topRight'		=> '12px', 
						'bottomLeft'	=> '12px', 
						'bottomRight'	=> '12px'
					)
				)
			),
			'backgroundColor' => 'tertiary',
			'lock' => array(
				'remove'	=> true,
				'move'		=> true
			)
		), 
		array( 
			array( 'core/column',
				array( 'verticalAlignment'	=> 'center' ),
				array(
					array( 'core/image', 
						array(
							'style'	=> array( 'border' => array( 'radius' => '8px' ) ) 
						) 
					)
				)
			), 
			array( 'core/column',
				array( 'verticalAlignment'	=> 'center' ),
				array(
					array( 'core/heading', array(
						'placeholder'	=> 'Add H3...',
						'level'			=> 3
					) ),
					array( 'core/paragraph', array(
						'placeholder'	=> 'Add paragraph...'
					) )
				) 
			)
		)
	)
);

Blokken vergrendelen

Je kunt specifieke blokken of alle blokken in je template vergrendelen met de propery template_lock van de $post_type_object.

Het vergrendelen van templates kan heel handig zijn als je een blog hebt met meerdere auteurs en wilt voorkomen dat alle of specifieke gebruikers de layout van je blokkentemplate wijzigen.

In het volgende voorbeeld vergrendelen we alle blokken in het blokkentemplate:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph' )
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );

Vergrendelde blokken tonen een sloticoon in de werkbalk en lijstweergave van de blokken:

Een vergrendeld Heading blok
Een vergrendeld Heading blok

Gebruikers kunnen blokken ontgrendelen via het menu Options in de toolbar voor blokken.

Een blok ontgrendelen
Een blok ontgrendelen

Als je op Unlock klikt, krijg je een modale popup waarmee je de beweging kunt in-/uitschakelen, verwijderen kunt voorkomen of beide:

Opties voor vergrendelen
Opties voor vergrendelen

template_lock kan een van de volgende waarden aannemen:

  • all – Voorkomt dat gebruikers nieuwe blokken toevoegen, bestaande blokken verplaatsen en verwijderen
  • insert – Voorkomt dat gebruikers nieuwe blokken toevoegen en bestaande blokken verwijderen
  • contentOnly – Gebruikers kunnen alleen de inhoud van de blokken in het template bewerken. Merk op dat contentOnly alleen gebruikt kan worden op pattern- of templateniveau en beheerd moet worden met code. (Zie ook API’s vergrendelen).
Template_lock instellen om te voorkomen dat templateblokken worden verwijderd
Template_lock instellen om te voorkomen dat templateblokken worden verwijderd

Als je specifieke blokken wilt vergrendelen, kun je het lock attribuut op elk blok gebruiken:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading' ),
		array( 'core/paragraph', array(
			'lock' => array(
				'remove'	=> true,
				'move'		=> true
			)
		) )
	);
}
add_action( 'init', 'myplugin_register_my_block_template' );

Het lock attribuut kan een van de volgende waarden aannemen:

  • remove: Voorkomt dat gebruikers een blok verwijderen.
  • move: Voorkomt dat gebruikers een blok verplaatsen.

En je kunt lock ook gebruiken in combinatie met template_lock om het gedrag van de blokken in je bloktemplate te finetunen. In het volgende voorbeeld vergrendelen we alle blokken behalve de heading:

function myplugin_register_my_block_template() {
	$post_type_object = get_post_type_object( 'post' );
	$post_type_object->template = array(
		array( 'core/image' ),
		array( 'core/heading', array(
			'lock' => array(
				'remove'	=> false,
				'move'		=> false
			) 
		) ),
		array( 'core/paragraph' )
	);
	$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );

De afbeelding hieronder toont het bloktemplate met vergrendelde en ontgrendelde blokken:

Een bloktemplate met vergrendelde en ontgrendelde blokken
Een bloktemplate met vergrendelde en ontgrendelde blokken

Blokontwikkelaars kunnen ook het lock attribuut gebruiken in de blokdefinitie op het attributes niveau (zie ook Individuele blokvergrendeling).



[ad_2]

https://kinsta.com/nl/blog/wordpress-blok-templates/