Gutenberg hat sich zu einem leistungsstarken und stark anpassbaren Editor entwickelt. Neben den robusten Out-of-the-Box-Funktionen können WordPress-Entwickler jetzt eine Vielzahl von APIs nutzen, um benutzerdefinierte Funktionen ganz einfach in ihre Websites zu integrieren. Diese Erweiterbarkeit ermöglicht einen bemerkenswerten Grad an maßgeschneiderter Entwicklung, der es Entwicklern ermöglicht, hoch personalisierte und funktionsreiche Online-Erlebnisse zu schaffen.
Dieser Artikel befasst sich mit zwei weniger bekannten, aber leistungsstarken WordPress-Entwicklungsfunktionen: Stilvariationen (auch bekannt als Blockstile) und Blockvariationen.
Ihr Nutzen mag auf den ersten Blick unklar erscheinen, aber du wirst überrascht sein, wie nützlich sie sind und wie du sie mit wenig Zeitaufwand nahtlos in deinen Arbeitsablauf integrieren kannst.
Anhand eines realen Projekts erfährst du, was sie sind und wie du sie einsetzen kannst. Du kannst dieses Projekt auf deiner WordPress-Seite umsetzen, indem du einfach den Code aus diesem Tutorial kopierst und einfügst und eventuell Anpassungen hinzufügst.
Bevor wir in das Projekt eintauchen, lass uns kurz die Voraussetzungen besprechen:
- Eine lokale WordPress-Entwicklungsumgebung: Obwohl jede beliebige Umgebung ausreicht, empfehlen wir DevKinsta, die lokale Entwicklungsumgebung von Kinsta. Sie ist einfach zu bedienen und bietet viele Einstellungen und Werkzeuge, um schnell eine lokale WordPress-Website zu starten und zu verwalten.
- Node.js und npm: Diese sind unerlässlich, da der Block-Editor auf React basiert und einen Build-Prozess erfordert.
- Grundlegende Kenntnisse in der Frontend-Entwicklung: Grundlegende Kenntnisse in Node.js, JavaScript (mit React), PHP und CSS sind von Vorteil.
Dieses Projekt ist zwar nicht übermäßig komplex, aber du solltest darauf vorbereitet sein, etwas Code zu schreiben. Der vollständige Code ist auch auf GitHub verfügbar.
Los geht’s!
Blockstile vs. Blockvariationen
Blockstile und Blockvariationen sind zwei leistungsstarke WordPress-Funktionen für Entwickler. Obwohl ihre Namen ziemlich ähnlich klingen, unterscheiden sie sich in ihrem Zweck und ihrer Verwendung.
Blockstile, auch als Stilvariationen bekannt, sind vorgefertigte CSS-Stile, mit denen du das Aussehen eines Blocks mit einem einzigen Klick ändern kannst. Nachdem du einen Blockstil registriert hast, erscheint in der Seitenleiste des Blocks eine Schaltfläche, mit der du dem Block einen vorgefertigten Satz von Stilen zuweisen kannst. Du kannst die Stile ein- und ausschalten und eine Vorschau des Blocks im Editor in Echtzeit anzeigen.
Stilvariationen verändern nicht die Attribute des Blocks. Sie verändern nur das Aussehen des Blocks, indem sie dem Wrapper-Element des Blocks eine CSS-Klasse zuweisen.
Blockvariationen sind ein mächtigeres Werkzeug, weil du damit eine vorkonfigurierte Version eines Blocks mit Attributen und inneren Blöcken erstellen kannst. Sie werden auch im Block-Inserter des Editors angezeigt. Im Wesentlichen erscheint eine Blockvariation für den Benutzer wie ein eigenständiger Block, der völlig unabhängig von dem Block ist, auf dem er aufbaut.
Blockvariationen ermöglichen es, das Aussehen, die Grundeinstellungen und die Struktur eines Blocks anzupassen.
Nutzen wir also diese Werkzeuge, um Gutenberg-Blöcke auf die nächste Stufe zu heben!
Ein animierter Polaroid-Effekt für einen Bild-Block
Beginnen wir nun mit unserem Projekt! Wir werden den Kern-Bilderblock mit einem Gutenberg-Plugin erweitern:
- Eine Polaroid-Stilvariation zu implementieren: Mit einem einzigen Klick in der Einstellungsleiste des Blocks können die Nutzer/innen einen charmanten Polaroid-Effekt auf ihre Bilder anwenden.
- Hinzufügen einer Hover-Animation: Wir werden Bilder im Polaroid-Stil mit einer subtilen Hover-Animation verbessern.
- Erstelle eine „Animierte Polaroid“-Blockvariante: Damit können Nutzer/innen schnell vorkonfigurierte Polaroid-Bilder mit Schwebeeffekt direkt aus dem Block-Inserter einfügen.
Bist du bereit? Dann lass uns unser Plugin einrichten!
Einrichten der Umgebung
Bevor wir beginnen, müssen wir eine WordPress-Entwicklungsumgebung mit Node.js einrichten. Wir gehen davon aus, dass du deine lokale WordPress-Entwicklungsumgebung und die neuesten Versionen von Node.js und npm bereits installiert hast. Wenn du Hilfe brauchst, schau dir unsere Anleitung an, wie du ein Gutenberg-Plugin erstellst, um den Block-Editor um neue Funktionen zu erweitern.
Schritt 1 – Erstellen der grundlegenden Plugin-Struktur
Für dieses Tutorial nennen wir unser Plugin Image Hacker.
Navigiere zu deinem Verzeichnis plugins und erstelle einen neuen Ordner image-hacker. In diesem Ordner erstellst du eine neue Datei image-hacker.php (die Hauptdatei deines Plugins) und einen Unterordner src, in dem du die Funktionen des Plugins einrichten wirst.
Hier ist die Grundstruktur deines Plugins:
/wp-content/plugins/
└── /image-hacker/
├── image-hacker.php
└── /src/Schritt 2 – Erstelle den PHP-Code
Als Nächstes musst du sicherstellen, dass WordPress dein Plugin erkennt. Dazu fügst du den folgenden Code in image-hacker.php ein:
<?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.
}Schritt 3 – Initialisiere npm und installiere die Abhängigkeiten
Öffne dein bevorzugtes Kommandozeilentool und navigiere zum Verzeichnis deines Plugins. Dort führst du den folgenden Befehl aus:
npm init -yDieser Befehl initialisiert eine neue package.json Datei, die die Abhängigkeiten und Skripte deines Projekts enthält.
Als Nächstes musst du WordPress-Skripte und Build-Tools wie webpack und Babel installieren:
npm install @wordpress/plugins @wordpress/scripts --save-devDieser Befehl fügt einen Ordner node_modules mit Node-Abhängigkeiten und eine Datei package-lock.json hinzu. Die folgende Abbildung zeigt die aktuelle Struktur deines Projekts in Visual Studio Code:
Als Nächstes öffnest du dein package.json und aktualisierst die Eigenschaft scripts wie folgt:
{
"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"
}
}Beachte, dass die Versionen von devDependencies von den oben genannten abweichen können und von den tatsächlich in deiner Umgebung installierten Versionen abhängen.
Schritt 4 – Erstelle die Quelldateien deines Plugins
Der nächste Schritt besteht darin, die Quelldateien des Plugins zu erstellen. Navigiere zum Ordner src und füge die folgenden Dateien hinzu:
index.jsstyle.scsseditor.scss
Die Struktur des Plugins sollte nun wie folgt aussehen:
/wp-content/plugins/
└── /image-hacker/
├── /node-modules/
├── image-hacker.php
├── package.json
├── package-lock.json
└── /src/
├── index.js
├── style.scss
└── editor.scssÖffne nun dein WordPress-Administrationspanel und navigiere zum Bildschirm Plugins. Suche das Image Hacker Plugin und aktiviere es.
Schritt 5 – Einfügen von Assets in die Plugin-Datei
Als Nächstes musst du die Plugin-Assets in die Hauptdatei des Plugins einfügen. Füge Folgendes zu image-hacker.php hinzu:
/**
* 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' );Dieser Code bewirkt Folgendes:
- Der Aktionshaken
enqueue_block_editor_assetsreiht das Skriptindex.jsund die Dateieditor.cssein. - Der
enqueue_block_assetsAktionshaken reiht diestyle.cssDatei ein.
Beachte, dass dieser Code die Dateien .js und .css enthält, die sich im Ordner /build/ deines Plugins befinden. Das bedeutet, dass du den Build-Befehl in deinem Kommandozeilentool ausführen musst, damit er funktioniert:
npm run buildWenn du eine Datei namens style.scss in index.js importierst, heißt die kompilierte CSS-Datei nicht style.css, sondern style-index.css.
Blockstil registrieren
Damit hast du die Einrichtung deiner Entwicklungsumgebung abgeschlossen. Jetzt kannst du zum spannenden Teil des Projekts übergehen und deine Blockstilvariation registrieren.
Es gibt mehrere Möglichkeiten, Blockstile zu registrieren. Welche du wählst, hängt von deinen Zielen und persönlichen Vorlieben ab. Wir werden den JS-Ansatz verfolgen, wenn wir ein Gutenberg-Plugin erstellen. Öffne deine /src/index.js Datei und füge den folgenden Code ein:
// 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 mit domReady stellt sicher, dass die Stilvariation nur registriert wird, wenn das DOM vollständig geladen ist. Siehe auch die offizielle Dokumentation.
Wenn der Stil Polaroid ausgewählt wird, fügt WordPress dem Block-Wrapper automatisch die Klasse .is-style-polaroid hinzu.
Der nächste Schritt ist die Bereitstellung des CSS für deine Stilvariation. Öffne deine /src/style.scss und füge den folgenden Code hinzu:
.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;
}
}Speichere deinen Code, führe npm run build aus und gehe in dein WordPress-Dashboard. Erstelle einen neuen Beitrag oder eine neue Seite und füge ein Bild hinzu. Klicke bei ausgewähltem Bild auf das Label Stile in der Seitenleiste des Blocks und wähle Polaroid.
Füge eine Bildunterschrift hinzu, speichere den Beitrag und sieh dir das Ergebnis im Frontend an. Du solltest ein Bild im Polaroid-Stil mit einer schönen kursiven Beschriftung sehen.
Baue die Logik
Der nächste Schritt besteht darin, die Logik für die Animation des Bildes zu erstellen. Wir werden eine einfache Animation erstellen, indem wir die CSS-Eigenschaft transform verwenden. Dazu fügst du den folgenden Block in deine src/style.scss ein:
.wp-block-image.is-style-polaroid.has-image-animation:hover {
transform: rotate(0deg) scale(1.05);
}Dieser Code stellt sicher, dass der Hover-Effekt nur dann angewendet wird, wenn es sich bei dem Block um ein Polaroid-Bild handelt und die Klasse has-image-animation vom Toolbar-Toggle angewendet wurde.
Jetzt brauchst du die Logik, um die CSS-Klasse zum Bildcontainer hinzuzufügen, der ein figure Element ist. Dazu brauchst du ein paar Filter und Callback-Funktionen.
Füge zunächst die folgende Zeile in deine src/index.js Datei ein:
import { addFilter } from '@wordpress/hooks';Schritt 1. Füge ein neues Attribut zum Image-Block hinzu
Du wirst addFilter verwenden, um den Image-Block zu manipulieren. Zuerst fügst du ein neues Attribut imageAnimation zum Image-Block hinzu:
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
);Die Callback-Funktion addImageAnimationAttribute nimmt zwei Argumente entgegen:
settings– Ein Array mit den aktuellen Blockattributenname– Gib den Namen des Blocks an, dessen Attribute du ändern möchtest.
Die Funktion gibt dann das aktualisierte Array der Attribute zurück.
Schritt 2. Hinzufügen eines Umschaltreglers zum Bildblock
Als Nächstes musst du ein Steuerelement in die Symbolleiste des Bildblocks einfügen, um die Animation zu aktivieren.
Zuerst fügst du die folgenden imports zur Datei index.js hinzu:
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';Füge dann den folgenden Code am Ende der Datei ein:
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
);Das macht dieser Code:
- Die Funktion
createHigherOrderComponenterstellt eine Komponente höherer Ordnung (HOC), dieBlockEditumhüllt. ist die Hauptkomponente, die für die Anzeige von Blöcken im Editor verantwortlich ist. - Die HOC fängt die Komponente ab und prüft, ob es sich um einen Bildblock handelt. So wird sichergestellt, dass alle deine Änderungen nur für den Image-Block gelten.
- Wir verwenden die Destrukturierungszuweisung, um die erforderlichen Eigenschaften und Attribute aus den Objekten
propsundattributesherauszuziehen. - Wir verwenden
BlockControls,ToolbarGroup, undToolbarButtonKomponenten, um der Symbolleiste des Blocks eine Schaltfläche „Animation umschalten“ hinzuzufügen. isActivesetzt den Standardzustand vonimageAnimationonClickschaltet den WertimageAnimationum.
Jetzt hast du ein Attribut und eine Schaltfläche. Wenn du jedoch auf die Schaltfläche klickst, passiert nichts.
Schritt 3. Hinzufügen der CSS-Klasse zum Wrapper-Element
Der nächste Schritt besteht darin, die Klasse has-image-animation auf das figure Element anzuwenden, das das Bild einhüllt. Dazu brauchst du einen Filter, mit dem du dem Bild im Frontend die CSS-Klasse zuweisen kannst.
Füge den folgenden Code in die Datei index.js ein:
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
);Dieser Code fügt dem Element figure die CSS-Klasse has-image-animation hinzu, wenn das Attribut imageAnimation auf true gesetzt ist.
Versuchen wir zu verstehen, was im Detail passiert.
addFilterDer Hook greift in die Prozesse des Editors ein, um Daten oder das Verhalten zu ändern.blocks.getSaveContent.extraPropsist der spezifische Hook, auf den wir abzielen.extraPropsist ein spezieller Hook, mit dem du dem Wrapper-Element zusätzliche HTML-Attribute hinzufügen kannst.image-hacker/add-animation-classist der eindeutige Name deines Filters.addAnimationFrontendClassist der Name der Callback-Funktion, die jedes Mal ausgeführt wird, wenn derblocks.getSaveContent.extraProps-Hook ausgeführt wird. Diese Funktion benötigt 3 Argumente:extraProps: Ein Objekt, das die Eigenschaften des Wrapper-Elements des Blocks enthält, wie z. B.className.blockType: Ein Objekt mit den Details des Blocks, z. B.name(core/image).attributes: Ein Objekt mit den Attributen des Blocks
- Die Logik der Funktion stellt sicher, dass der Code nur ausgeführt wird, wenn
blockType.name === 'core/image'undattributes.imageAnimationtrueist. - Wenn beide Bedingungen erfüllt sind, gibt die Funktion ein neues
propsObjekt zurück, bei demhas-image-animationan das bestehende Klassenobjekt angehängt wird.
Jetzt kannst du es selbst ausprobieren. Füge ein Bild zu deinem Inhalt hinzu, wähle den Polaroid-Stil in der Block-Seitenleiste und klicke auf die Schaltfläche Animation umschalten in der Block-Symbolleiste. Speichere deinen Beitrag und überprüfe das Ergebnis auf dem Frontend. Dein Bild sollte sich drehen, wenn du den Mauszeiger darüber bewegst.
Blockvariationen registrieren
Blockvariationen sind vorkonfigurierte Versionen eines Blocks, mit einer Reihe von Attributen und verschachtelten Blöcken. WordPress behandelt Blockvariationen als eigenständige Blöcke, macht sie im Block-Inserter verfügbar und kennzeichnet sie mit einem eigenen Symbol.
Du kannst eine Blockvariation verwenden, um eine neue Version des Bildblocks zu erstellen, die standardmäßig im Polaroid-Stil gestaltet ist.
Der erste Schritt besteht darin, die Funktion registerBlockVariation in deine /src/index.js Datei zu importieren:
import { registerBlockStyle, registerBlockVariation } from '@wordpress/blocks';Dann fügst du einen Aufruf der Funktion registerBlockVariation in domReady() ein, direkt unter 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'],
});
});Die Funktion registerBlockVariation erstellt eine Variation für einen bestehenden Block. Sie nimmt zwei Argumente entgegen: den Namen des Blocks und ein Objekt, das die Variation definiert. (Siehe auch die Einführung in Blockvariationen und die Dokumentation der Blockvariationen-API).
Speichere deine Datei, führe den Build aus, um deine Änderungen anzuwenden, und kehre dann zu deinem WordPress-Admin zurück. Erstelle einen neuen Beitrag und suche im Blockinserter nach dem Block Animated Polaroid.
Testen und Fehlersuche
Lass uns ein paar Tests machen. Füge ein oder mehrere Bilder zu einem neuen Beitrag hinzu. Wähle für jedes Bild den Polaroid-Stil, aktiviere die Animation und füge Links hinzu. Führe auch Tests mit dem Galerie-Block durch.
Alles scheint wie erwartet zu funktionieren. Wenn du jedoch einen Link mit einem Lightbox-Effekt zu einem Bild im Polaroid-Stil hinzufügst, wird kein schönes Ergebnis erzielt.
Dieses seltsame Verhalten scheint auf ein Kompatibilitätsproblem zwischen dem WordPress-Leuchtpult und CSS-Übergängen zurückzuführen zu sein.
Um eine langwierige und komplizierte Fehlersuche zu vermeiden, solltest du die Option „Bei Klick vergrößern“ deaktivieren und eine Warnung hinzufügen, die die Nutzer/innen darauf hinweist, dass der Leuchtkasten deaktiviert ist.
Zuerst musst du einige zusätzliche Ressourcen importieren. Nachfolgend findest du die vollständige Liste der Ressourcen, die aus der Datei /src/index.js importiert wurden:
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';Wir haben die folgenden Importe hinzugefügt:
useEffectfrom@wordpress/element. (Siehe Doku)InspectorControlsvon@wordpress/block-editor(Siehe Doku).PanelBodyundNoticevon@wordpress/components(Siehe Doku).useDispatchvon@wordpress/data(siehe WordPress Entwickler Blog)
Ändere nun die Funktion withPolaroidControls wie folgt:
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');useEffectist ein React Hook, mit dem du „eine Komponente mit einem externen System synchronisieren kannst.“ Der Code wird ausgeführt, nachdem die Komponente gerendert wurde und jedes Mal, wenn sich ein Wert im Abhängigkeitsarray[isPolaroid, lightbox]ändert. Die Prüfung wird nur ausgeführt, wenn der Nutzer den Polaroid-Stil anwendet oder entfernt oder den Leuchtkasten aktiviert oder deaktiviert (siehe React-Dokumentation).- Die Bedingung
if (isPolaroid() && lightbox.enabled)stellt sicher, dass der Code nur ausgeführt wird, wenn das Bild den Polaroid-Stil hat und die Option Leuchtkasten aktiviert ist. - Wenn die Bedingung
truelautet, wird das Leuchtpult deaktiviert und ein vorübergehender Warnhinweis erscheint. (Siehe auch Datenreferenz für Warnhinweise.) - Die Bedingung
isSelected && isPolaroiderzeugt ein neues Panel in der Symbolleiste des Bildblocks, um die Benutzer darauf hinzuweisen, dass der Leuchtkasten deaktiviert ist. Im Gegensatz zur Snackbar zeigt dieses Panel eine permanente Warnung an.
Zusammenfassung
In diesem Tutorial haben wir einige der aufregendsten und leistungsstärksten Entwicklerfunktionen des WordPress-Block-Editors anhand eines realen Projekts erkundet: Wir haben den Kernblock Bild um Funktionen erweitert, die nicht standardmäßig verfügbar sind, und zwar um benutzerdefinierte Stile und Animationseffekte.
Wir folgten einem progressiven Verbesserungsansatz und entwickelten eine Blockstil-Variation für den Bild-Block. Damit können Nutzer/innen ihren Bildern ganz einfach einen klassischen Polaroid-Look verleihen.
Als Nächstes fügten wir der Symbolleiste des Bildblocks eine eigene Schaltfläche hinzu, mit der die Nutzer/innen einen fesselnden Schwebeeffekt erzeugen können.
Zum Schluss haben wir eine Blockvariante erstellt, die standardmäßig mit dem Polaroid-Stil und den Animationseinstellungen vorkonfiguriert ist.
Wir hoffen, dass du mit den Erkenntnissen und Techniken, die du in diesem Tutorial gewonnen hast, einige wirklich überraschende Anpassungen für die Kernblöcke von Gutenberg erstellen kannst!
Viel Spaß beim Programmieren!
Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.
