Zo til je Gutenberg blokken naar een hoger niveau met stijlvariaties en blokvariaties

Gutenberg heeft zich ontwikkeld tot een krachtige en zeer aanpasbare editor. Naast de robuuste out-of-the-box features kunnen WordPress ontwikkelaars tegenwoordig ook gebruik maken van een rijke set aan API’s om eenvoudig custom functies in hun websites te integreren. Deze uitbreidbaarheid maakt een hoge mate van ontwikkeling op maat mogelijk, waardoor ontwikkelaars zeer gepersonaliseerde en functierijke online ervaringen kunnen creëren.

In dit artikel worden twee minder bekende maar krachtige WordPress ontwikkelfuncties besproken: Stijlvariaties (ook bekend als blokstijlen) en Blokvariaties.

Hoewel hun nut in eerste instantie misschien onduidelijk lijkt, zul je verrast zijn hoe nuttig ze zijn en hoe je ze met een kleine tijdsinvestering naadloos kunt integreren in je workflow.

Aan de hand van een project uit de praktijk krijg je inzicht in wat ze zijn en hoe je ze kunt gebruiken. Je kunt dit project op je WordPress site implementeren door eenvoudigweg de code uit deze tutorial te kopiëren en te plakken en eventueel aanpassingen toe te voegen.

Laten we, voordat we in het project duiken, eerst de vereisten bekijken:

Lokale WordPress ontwikkelomgeving: Hoewel de meesten voldoen, raden we DevKinsta, de lokale ontwikkelsuite van Kinsta, ten zeerste aan. Het is eenvoudig te gebruiken en biedt veel instellingen en tools om snel een lokale WordPress site te starten en te beheren.
Node.js en npm: Deze zijn essentieel, omdat de Block Editor is gebouwd op React en een bouwproces vereist.
Basis frontend ontwikkelingsvaardigheden: Het is handig om een basiskennis te hebben van Node.js, JavaScript (met React), PHP en CSS.

Hoewel dit project niet al te complex is, moet je bereid zijn om wat code te schrijven. De volledige code is ook beschikbaar op GitHub.

Tijd om te beginnen!

Blokstijlen versus blokvariaties

Blokstijlen en blokvariaties zijn twee krachtige WordPress functies voor developers. Hoewel hun namen erg op elkaar lijken, verschillen ze in doel en gebruik.

Blokstijlen, ook bekend als stijlvariaties, zijn kant-en-klare sets CSS stijlen waarmee je met één klik kunt veranderen hoe een blok eruit ziet. Nadat je een blokstijl hebt geregistreerd, verschijnt er een knop in de zijbalk van het blok waarmee je een kant-en-klare set stijlen kunt toewijzen aan het blok. Je kunt de stijlen in- en uitschakelen en een voorbeeld van het blok in de editor bekijken.

Een screenshot van de WordPress-berichteditor met een afbeelding en de blokzijbalk — Het Image coreblok heeft twee standaardstijlvariaties.

Stijlvariaties veranderen de attributen van het blok niet. Ze wijzigen alleen het uiterlijk van een blok door een CSS klasse toe te wijzen aan het wrapper element van het blok.

Blokvariaties zijn een krachtiger hulpmiddel omdat je hiermee een vooraf geconfigureerde versie van een blok kunt maken met attributen en binnenblokken. Ze verschijnen ook in de blok inserter applicatie van de editor. In wezen verschijnt een blokvariatie voor de gebruiker alsof het een op zichzelf staand blok is, volledig onafhankelijk van het blok waarop het is gebouwd.

Met blokvariaties kun je het uiterlijk, de begininstellingen en de structuur van een blok aanpassen.

Met dat alles in gedachten, laten we deze hulpmiddelen gebruiken om Gutenberg blokken naar een hoger niveau te tillen!

Een geanimeerd polaroid effect op een Image coreblok

Laten we nu in ons project duiken! We gaan het coreblok Image uitbreiden met een Gutenberg plugin om:

Een Polaroid stijlvariatie te implementeren: Gebruikers kunnen een charmant polaroid effect toepassen op hun afbeeldingen met een enkele klik vanuit de instellingen zijbalk van het blok.
Een hover-animatie toe te voegen: We zullen Polaroid stijl afbeeldingen verbeteren met een subtiele hover-animatie.
Een “Animated Polaroid” blokvariatie te maken: Hiermee kunnen gebruikers snel voorgeconfigureerde polaroidafbeeldingen met een zweefeffect invoegen, rechtstreeks vanuit de blokinvoegtoepassing.

Ben je er klaar voor? Tijd om onze plugin in te stellen!

Een animatie-effect op een afbeeldingsblok

Omgeving instellen

Voordat we beginnen, moeten we een WordPress ontwikkelomgeving met Node.js opzetten. We gaan ervan uit dat je je lokale WordPress ontwikkelomgeving en de nieuwste versies van Node.js en npm al hebt geïnstalleerd. Als je hulp nodig hebt, bekijk dan onze tutorial over het bouwen van een Gutenberg plugin om functionaliteit toe te voegen aan de Block Editor.

Stap 1 – Maak de basisstructuur van de plugin

Voor deze tutorial noemen we onze plugin Image Hacker.

Navigeer naar je plugins map en maak een nieuwe image-hacker map aan. Maak binnen deze map een nieuw image-hacker.php bestand aan (het hoofdbestand van je plugin) en een src submap, waar je de functies van de plugin gaat opbouwen.

Dit is de basisstructuur van je plugin:

/wp-content/plugins/
└── /image-hacker/
	├── image-hacker.php
	└── /src/

Stap 2 – Maak de PHP code

Vervolgens moet je ervoor zorgen dat WordPress je plugin herkent. Om dit te doen, voeg je de volgende code toe aan image-hacker.php:

<?php
/**
 * Plugin Name: Image Hacker
 * Description: Adds new features to the core Image block
 * Version:     1.0.0
 * Author:      Your Name
 * License:     GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: image-hacker
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

Stap 3 – Initialiseer npm en installeer dependencies

Open je favoriete opdrachtprompt en navigeer naar de map van je plugin. Voer daar het volgende commando uit:

npm init -y

Dit commando initialiseert een nieuw package.json bestand, dat de dependencies en scripts van je project bevat.

Vervolgens moet je WordPress scripts en bouwtools zoals webpack en Babel installeren:

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

Dit commando voegt een map node_modules toe met node dependencies en een bestand package-lock.json. De afbeelding hieronder toont de huidige structuur van je project in Visual Studio Code:

Een screenshot van een Gutenberg-plug-in in Visual Studio Code — Een Gutenberg plugin in Visual Studio Code

Open vervolgens je package.json en werk de property scripts als volgt bij:

{
	"name": "image-hacker",
	"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.25.0",
		"@wordpress/scripts": "^30.18.0"
	}
}

Merk op dat devDependencies versies kunnen afwijken van de bovenstaande en afhankelijk zijn van de daadwerkelijke versies die in jouw omgeving zijn geïnstalleerd.

Stap 4 – Maak de bronbestanden van je plugin aan

De volgende stap is het aanmaken van de plugin bronbestanden. Navigeer naar de src map en voeg de volgende bestanden toe:

index.js
style.scss
editor.scss

De plugin structuur zou er nu zo uit moeten zien:

/wp-content/plugins/
└── /image-hacker/
	├── /node-modules/
	├── image-hacker.php
	├── package.json
	├── package-lock.json
	└── /src/
		├── index.js
		├── style.scss
		└── editor.scss

Open nu je WordPress admin paneel en navigeer naar het Plugins scherm. Zoek de plugin Image Hacker en activeer deze.

Stap 5 – Neem assets op in het bestand van je plugin

Vervolgens moet je plugin-assets opnemen in het hoofdbestand van de plugin. Voeg het volgende toe aan image-hacker.php:

/**
 * Enqueue block editor assets.
 */
function image_hacker_enqueue_editor_assets() {
	$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

	// Enqueue the script with our modifications
	wp_enqueue_script(
		'image-hacker-script',
		plugins_url( 'build/index.js', __FILE__ ),
		array( 'wp-plugins', 'wp-edit-post' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
	);

	// Enqueue the editor-only styles
	wp_enqueue_style(
		'image-hacker-editor-style',
		plugins_url( 'build/editor.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'build/editor.css' )
	);
}
add_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );

/**
 * Enqueue frontend and editor assets.
 */
function image_hacker_enqueue_assets() {
	$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

	// Enqueue styles for both frontend and editor
	wp_enqueue_style(
		'image-hacker-style',
		plugins_url( 'build/style-index.css', __FILE__ ),
		[],
		filemtime( plugin_dir_path( __FILE__ ) . 'build/style-index.css' )
	);
}
add_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );

Dit is wat deze code doet:

De action hook enqueue_block_editor_assets enquehed het index.js script en het editor.css bestand.
De action hook enqueue_block_assets callt het bestand style.css.

Merk op dat deze code de .js en .css onderdelen bevat die zich in de /build/ map van je plugin bevinden. Dit betekent dat je, om het te laten werken, het build commando moet uitvoeren in je commandoregel tool:

npm run build

Merk ook op dat als je een bestand met de naam style.scss importeert in index.js, het gecompileerde CSS-bestand niet style.css zal heten, maar style-index.css.

Blokstijl registreren

Je bent klaar met het instellen van je ontwikkelomgeving. Nu kun je verder gaan met het spannende deel van het project en je blokstijlvariatie registreren.

Er zijn verschillende manieren om blokstijlen te registreren en welke je kiest hangt af van je doelen en persoonlijke voorkeuren. Wij zullen de JS-aanpak volgen als we een Gutenberg-plugin bouwen. Open je /src/index.js bestand en plak de volgende code:

// Import the function to register block styles.
import { registerBlockStyle } from '@wordpress/blocks';

// Import the function to run code only when the DOM is ready.
import domReady from '@wordpress/dom-ready';

// This line tells the build process to include and compile our SCSS file.
import './style.scss';

/**
 * Use domReady to run code only when the DOM is ready.
 */
domReady(() => {
	// Register our new style variation for the core image block.
	registerBlockStyle('core/image', {
		name: 'polaroid',
		label: 'Polaroid',
	});
});

registerBlockStyle met domReady zorgt ervoor dat de stijlvariatie alleen wordt geregistreerd wanneer het DOM volledig is geladen. Zie ook de officiële documentatie.

Als de stijl Polaroid is geselecteerd, voegt WordPress automatisch de klasse .is-style-polaroid toe aan de blokwrapper.

De volgende stap is het aanleveren van de CSS voor je stijlvariatie. Open je /src/style.scss en voeg de volgende code toe:

.wp-block-image.is-style-polaroid {
	padding: 15px 15px 70px 15px;
	background-color: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	max-width: 360px;
	transform: rotate(-3deg);
	transition: transform 0.3s ease-in-out;

	figure { 
		margin: 0 !important; 
	}
	
	img { 
		display: block; 
		width: 100%; 
		height: auto; 
	}
	
	figcaption {
    	position: absolute; 
    	bottom: 15px; 
    	left: 0; 
    	right: 0;
    	text-align: center; 
    	font-family: 'Permanent Marker', cursive;
    	color: #333; 
    	font-size: 18px;
	}
}

Sla je code op, voer npm run build uit en ga naar je WordPress dashboard. Maak een nieuwe post of pagina en voeg een afbeelding toe. Als je de afbeelding hebt geselecteerd, klik je op het label Styles in de zijbalk van het blok en selecteer je Polaroid.

Een nieuwe stijlvariant voor het afbeeldingsblok — Een nieuwe stijlvariant voor het Image blok

Voeg een onderschrift toe, sla het bericht op en bekijk het resultaat op de front-end. Je zou een afbeelding in Polaroid-stijl moeten zien met een mooi cursief onderschrift.

Het element Image met de klasse is_style_polaroid

De logica bouwen

De volgende stap is het bouwen van de logica om de afbeelding te animeren. We zullen een eenvoudige animatie maken met behulp van de CSS property transform. Om te beginnen voeg je het volgende blok toe aan je src/style.scss:

.wp-block-image.is-style-polaroid.has-image-animation:hover {
	transform: rotate(0deg) scale(1.05);
}

Deze code zorgt ervoor dat het hover-effect alleen wordt toegepast als het blok een Polaroid afbeelding is en een has-image-animation klasse heeft van de toolbar toggle.

Nu heb je de logica nodig om de CSS-klasse toe te voegen aan de afbeeldingscontainer, die een figure element is. Daarvoor heb je een paar filters en callbackfuncties nodig.

Voeg eerst de volgende regel toe aan je src/index.js bestand:

import { addFilter } from '@wordpress/hooks';

Stap 1. Voeg een nieuw attribuut toe aan het Image blok

Je gaat addFilter gebruiken om het coreblok Image te manipuleren. Eerst voeg je een nieuw imageAnimation attribuut toe aan het blok Image:

function addImageAnimationAttribute( settings, name ) {
	if ( name !== 'core/image' ) {
		return settings;
	}
	settings.attributes = {
		...settings.attributes,
		imageAnimation: {
			type: 'boolean',
			default: false,
		},
	};
	return settings;
}

addFilter(
	'blocks.registerBlockType',
	'image-hacker/add-image-animation-attribute',
	addImageAnimationAttribute
);

De callback functie addImageAnimationAttribute neemt twee argumenten:

settings – Een array van huidige blokattributen
name – Specificeert de naam van het blok waarvan je de attributen wilt wijzigen.

De functie retourneert vervolgens de bijgewerkte matrix van attributen.

Stap 2. Voeg een toggle knop toe aan het Image blok

Vervolgens moet je een toggle/regelaar toevoegen aan de werkbalk van het afbeeldingsblok om de animatie in te schakelen.

Voeg eerst de volgende imports toe aan het bestand index.js:

import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

Voeg vervolgens de volgende code toe aan het einde van het bestand:

const withPolaroidControls = createHigherOrderComponent((BlockEdit) => {
	return (props) => {
		if (props.name !== 'core/image') {
			return <BlockEdit {...props} />;
		}

		const { attributes, setAttributes, isSelected } = props;
		const { imageAnimation, className, lightbox } = attributes;

		return (
			<Fragment>
				<BlockEdit {...props} />

				<BlockControls>
					<ToolbarGroup>
						<ToolbarButton
							icon="format-image"
							label={__('Toggle Animation', 'image-hacker')}
							isActive={imageAnimation}
							onClick={() =>
								setAttributes({ imageAnimation: !imageAnimation })
							}
						/>
					</ToolbarGroup>
				</BlockControls>
			</Fragment>
		);
	};
}, 'withPolaroidControls');

addFilter(
	'editor.BlockEdit',
	'image-hacker/with-polaroid-controls',
	withPolaroidControls
);

Dit is wat deze code doet:

De functie createHigherOrderComponent maakt een higher-order component (HOC) die BlockEdit wrapt, wat de hoofdcomponent is die verantwoordelijk is voor het weergeven van blokken in de editor.
De HOC onderschept de component en controleert of het een Image blok is. Dit zorgt ervoor dat al je bewerkingen alleen van toepassing zijn op het Image blok.
We gebruiken de destructuring opdracht om de vereiste properties en attributen uit de objecten props en attributes te halen.
We gebruiken BlockControls, ToolbarGroup, en ToolbarButton componenten om een knop Toggle Animation toe te voegen aan de werkbalk van het blok.
isActive Hiermee wordt de standaardtoestand van imageAnimation
onClick schakelt de waarde imageAnimation om.

Er is een custom knop toegevoegd aan de blokwerkbalk.

Nu heb je een attribuut en een knop. Als je echter op de knop klikt, gebeurt er niets.

Stap 3. Voeg de CSS klasse toe aan het wrapper element

De volgende stap is het toepassen van de has-image-animation klasse op het figure element dat de afbeelding wrapt. Om dat te doen, heb je een filter nodig waarmee je de CSS-klasse kunt toewijzen aan de afbeelding in de front-end.

Voeg de volgende code toe aan het bestand index.js:

function addAnimationFrontendClass(extraProps, blockType, attributes) {
	if (blockType.name === 'core/image' && attributes.imageAnimation) {
		extraProps.className = `${extraProps.className || ''} has-image-animation`;
	}
	return extraProps;
}

addFilter(
	'blocks.getSaveContent.extraProps',
	'image-hacker/add-animation-frontend-class',
	addAnimationFrontendClass
);

Deze code voegt dynamisch de CSS klasse has-image-animation toe aan het figure element wanneer het imageAnimation attribuut is ingesteld op true.

Laten we proberen in detail te begrijpen wat er gebeurt.

addFilter haakt in op de processen van de editor om gegevens of gedrag te wijzigen.
blocks.getSaveContent.extraProps is de specifieke hook waarop we ons richten. extraProps is een speciale hook waarmee je extra HTML-attributen kunt toevoegen aan het wrapper element.
image-hacker/add-animation-class is de unieke naam van je filter.
addAnimationFrontendClass is de naam van de callback functie die elke keer wordt uitgevoerd als de blocks.getSaveContent.extraProps hook wordt uitgevoerd. Deze functie neemt 3 argumenten:
- extraProps: Een object met de properties van het wrapper element van het blok, zoals className.
- blockType: Een object met details van het blok, zoals de name (core/image).
- attributes: Een object met blokattributen
De logica van de functie zorgt ervoor dat de code alleen wordt uitgevoerd als blockType.name === 'core/image' en attributes.imageAnimation true is.
Als beide voorwaarden waar zijn, retourneert de functie een nieuw object props met has-image-animation toegevoegd aan het bestaande klasse-object.

Nu kun je het zelf proberen. Voeg een afbeelding toe aan je inhoud, selecteer de Polaroid stijl in de zijbalk van het blok en klik op de knop Toggle Animation in de werkbalk van het blok. Sla je bericht op en controleer het resultaat op de front-end. Je afbeelding zou moeten draaien als je er met de muis overheen gaat.

is_style_polaroid en has_image_animation CSS klassen toegevoegd aan het Image blok

Blokvariatie registreren

Blokvariaties zijn vooraf geconfigureerde versies van een blok, met een set attributen en geneste blokken. WordPress behandelt blokvariaties als onafhankelijke blokken, maakt ze beschikbaar in de Block Inserter en markeert ze met een custom pictogram.

Je kunt een blokvariatie gebruiken om een nieuwe versie van het Image blok te maken, waarbij de Polaroid-stijl standaard wordt toegepast.

De eerste stap is het importeren van de registerBlockVariation functie in je /src/index.js bestand:

import { registerBlockStyle, registerBlockVariation } from '@wordpress/blocks';

Vervolgens voeg je een call naar de registerBlockVariation functie toe binnen domReady(), direct onder registerBlockStyle:

domReady(() => {
	// Register a style variation for the image block.
	registerBlockStyle('core/image', {
		name: 'polaroid',
		label: 'Polaroid',
	});

	// Register a block variation of the image block
	registerBlockVariation('core/image', {
		name: 'animated-polaroid',
		title: 'Animated Polaroid',
		icon: 'image-filter',
		attributes: {
			className: 'is-style-polaroid',
			imageAnimation: true,
		},
		scope: ['inserter'],
	});
});

De functie registerBlockVariation maakt een variatie voor een bestaand blok. Het accepteert twee argumenten: de naam van het blok en een object dat de variatie definieert. (Zie ook de inleiding tot blokvariaties en de blokvariaties API documentatie).

Sla je bestand op, voer de build uit om je wijzigingen toe te passen en ga dan terug naar je WordPress admin. Maak een nieuw bericht en zoek naar het Animated Polaroid blok in de Block Inserter.

Testen en debuggen

Laten we niet vergeten te testen. Voeg een of meer afbeeldingen toe aan een nieuw bericht. Selecteer de polaroidstijl voor elke afbeelding, schakel de animatie in en voeg links toe. Voer ook tests uit met het Gallery blok.

Alles lijkt te werken zoals verwacht. Echter, het toevoegen van een link met een lightbox effect aan een afbeelding met de Polaroid stijl geeft geen mooi resultaat.

Dit vreemde gedrag lijkt te wijten te zijn aan een compatibiliteitsprobleem tussen de WordPress lightbox en CSS overgangen.

Om een lang, ingewikkeld foutopsporingsproces te voorkomen, kun je misschien de optie Enlarge on click uitschakelen en een waarschuwing toevoegen om gebruikers te laten weten dat de lightbox is uitgeschakeld.

Je moet eerst wat extra bronnen importeren. Hieronder staat de volledige lijst met bronnen die zijn geïmporteerd uit het /src/index.js bestand:

import { registerBlockStyle, registerBlockVariation } from '@wordpress/blocks';
import domReady from '@wordpress/dom-ready';
import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment, useEffect } from '@wordpress/element';
import { InspectorControls, BlockControls } from '@wordpress/block-editor';
import { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import './style.scss';

We hebben de volgende imports toegevoegd:

useEffect van @wordpress/element. (Zie docs)
InspectorControls uit @wordpress/block-editor (Zie docs).
PanelBody en Notice van @wordpress/components (Zie documenten).
useDispatch van @wordpress/data. (Zie WordPress blog for developers)

Wijzig nu de functie withPolaroidControls als volgt:

const withPolaroidControls = createHigherOrderComponent((BlockEdit) => {
	return (props) => {
		if (props.name !== 'core/image') {
			return <BlockEdit {...props} />;
		}

		const { attributes, setAttributes, isSelected } = props;
		const { imageAnimation, className, lightbox } = attributes;

		const isPolaroid = className?.includes('is-style-polaroid');

		const { createNotice } = useDispatch('core/notices');

		useEffect(() => {
			if (isPolaroid && lightbox?.enabled) {
				// Disable the lightbox to prevent the conflict.
				setAttributes({ lightbox: { ...lightbox, enabled: false } });

				// Show the user a temporary 'snackbar' notice.
				createNotice(
					'warning', // The type of notice (info, success, warning, error)
					__('Lightbox disabled for Polaroid style.', 'image-hacker'),
					{
						type: 'snackbar',
						isDismissible: true,
					}
				);
			}
		}, [isPolaroid, lightbox]);

		return (
			<Fragment>
				<BlockEdit {...props} />

				<BlockControls>
					<ToolbarGroup>
						<ToolbarButton
							icon="format-image"
							label={__('Toggle Animation', 'image-hacker')}
							isActive={imageAnimation}
							onClick={() =>
								setAttributes({ imageAnimation: !imageAnimation })
							}
						/>
					</ToolbarGroup>
				</BlockControls>

				{isSelected && isPolaroid && (
					<InspectorControls>
						<PanelBody title={__('Polaroid Style', 'image-hacker')}>
							<Notice status="info" isDismissible={false}>
								{__(
									'The "Expand on click" (lightbox) feature is disabled for this style to prevent visual conflicts.',
									'image-hacker'
								)}
							</Notice>
						</PanelBody>
					</InspectorControls>
				)}
			</Fragment>
		);
	};
}, 'withPolaroidControls');

useEffect is een React Hook waarmee “je een component kunt synchroniseren met een extern systeem.” De code wordt uitgevoerd nadat het component is gerenderd en telkens wanneer een waarde in de depedency-array [isPolaroid, lightbox] verandert. De controle wordt alleen uitgevoerd als de gebruiker de polaroidstijl toepast of verwijdert of de lightbox activeert of deactiveert (zie React documentatie).
De voorwaarde if (isPolaroid() && lightbox.enabled) zorgt ervoor dat de code alleen wordt uitgevoerd als de afbeelding de polaroidstijl heeft en de lightboxoptie is ingeschakeld.
Als de voorwaarde true is, wordt de lightbox uitgeschakeld en verschijnt er een tijdelijke waarschuwing. (Zie ook verwijzing naar gegevens over meldingen).
De voorwaarde isSelected && isPolaroid genereert een nieuw paneel in de toolbar van het afbeeldingsblok om gebruikers te melden dat de lightbox is uitgeschakeld. In tegenstelling tot de snackbar geeft dit paneel een permanente waarschuwing weer.

De optie Enlarge on click bij klikken is uitgeschakeld.

Samenvatting

In deze tutorial hebben we ons verdiept in een aantal van de meest interessante en krachtige ontwikkelaarsfuncties van de WordPress block editor door de lens van een echt project: we hebben het kernblok Afbeelding uitgebreid met functionaliteiten die niet standaard beschikbaar zijn, met aangepaste stijlen en animatie-effecten.

We volgden een progressieve verbeteringsaanpak en maakten een blokstijlvariatie voor het Image blok. Hiermee kunnen gebruikers hun afbeeldingen eenvoudig een klassieke Polaroid-look geven.

Vervolgens hebben we een speciale knop toegevoegd aan de werkbalk van het Image blok, waarmee gebruikers een leuk hover-animatie-effect kunnen maken.

Tot slot hebben we alles afgerond door een blokvariatie te maken die standaard is voorgeconfigureerd met de Polaroid stijl- en animatie-instellingen.

We hopen dat de inzichten en technieken die je hebt opgedaan in deze tutorial je in staat zullen stellen om een aantal verrassende aanpassingen te maken voor de coreblokken van Gutenberg!

Veel plezier met coderen!

Carlo Daniele Kinsta

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.

WordPress features

Platform extensies

Nieuws

Sites resetten, DNS records beheren en meer met Kinsta API

Ideaal voor

Partnership programma's

Case studies

Een grote stap vooruit: De impact van Kinsta op de ontwikkel- en hostingstrategie van Twize

Verken

Tools en inzichten

Nieuwste artikelen