Gutenberg-Blöcke mit ACF erstellen: Eine Schritt-für-Schritt-Anleitung
Die Erstellung benutzerdefinierter Blöcke in Gutenberg ist unter WordPress-Entwicklern und Website-Betreibern, die mehr Kontrolle über die Darstellung ihrer Inhalte haben möchten, mittlerweile gängige Praxis. Zwar ist es möglich, Gutenberg-Blöcke von Grund auf neu zu erstellen, doch gibt es eine Alternative, die sich als deutlich praktischer und leistungsfähiger erwiesen hat: die Verwendung von Advanced Custom Fields (ACF) zur Erstellung benutzerdefinierter Blöcke.
Warum sollten Sie ACF als Ihren wichtigsten Verbündeten bei der Erstellung von Gutenberg-Blöcken in Betracht ziehen? Die Antwort liegt in den zahlreichen Vorteilen, die diese Kombination mit sich bringt. In diesem Artikel zeigen wir Ihnen, warum ACF zu einem unverzichtbaren Werkzeug für alle geworden ist, die den Entwicklungsprozess benutzerdefinierter Gutenberg-Blöcke optimieren und beschleunigen möchten. Von intuitiven Lösungen für die Benutzeroberfläche bis hin zur vereinfachten Datenverwaltung erweist sich ACF als idealer Partner, der Ihnen dabei hilft, Gutenberg-Blöcke zu erstellen, die sich durch Funktionalität und Vielseitigkeit auszeichnen.
Schritt 1: Einrichten der Klasse
Zunächst erstellen wir eine PHP-Klasse, die die Funktionalität unseres benutzerdefinierten Blocks kapselt. Diese Klasse übernimmt die Registrierung des Blocks, das Rendering und die Feldverwaltung. Hier ist die Grundstruktur:
1
2
3
4
5
6
class GithubItemBlock {
public function __construct() {
add_action('acf/init', array($this, 'registerBlock'));
add_action('acf/include_fields', array($this, 'addFields'));
}
}
In dieser Klasse verwenden wir den Konstruktor __construct() , um unsere Aktionen zur Registrierung des Blocks und zum Hinzufügen benutzerdefinierter Felder einzurichten.
Schritt 2: Registrieren des Gutenberg-Blocks
Die registerBlock Funktion registriert unseren benutzerdefinierten Gutenberg-Block. Sie legt Blockdetails wie Name, Titel, Beschreibung, Rendering-Callback, Kategorie, Symbol und Schlüsselwörter fest. So funktioniert es:
1
2
3
4
5
6
7
8
9
10
11
12
13
public function registerBlock() {
if (function_exists('acf_register_block')) {
acf_register_block(array(
'name' => 'github-item',
'title' => __('GitHub Item'),
'description' => __('A custom block for GitHub items.'),
'render_callback' => array($this, 'renderCallback'),
'category' => 'layout',
'icon' => 'excerpt-view',
'keywords' => array('github'),
));
}
}
Als Alternative zum render_callbackkönnen Sie eine render_template für Ihren Gutenberg-Block definieren. Die Verwendung einer Vorlage kann die Verwaltung des HTML-Markups Ihres Blocks weiter vereinfachen und Ihren Code übersichtlicher und besser strukturiert machen.
Schritt 3: Rendern des Blocks
Die renderCallback Funktion definiert, wie unser Gutenberg-Block im Frontend angezeigt werden soll. Sie ruft Daten aus dem ACF-Feld ab und generiert die HTML-Struktur des Blocks. Hier ist der Code:
1
2
3
4
5
6
public function renderCallback($block) {
$repository_url = get_field('repository_url', $block['id']) ?: '';
$class = 'wp-github-repository-' . $block['id'];
echo '<div class="wp-github-repository ' . $class . '">' . $repository_url . '</div> ';
}Schritt 4: Hinzufügen benutzerdefinierter Felder
In der addFields Funktion definieren wir die benutzerdefinierten Felder für unseren Block mithilfe von ACF. Diese Felder werden in den Einstellungen des Blocks im Gutenberg-Editor angezeigt. So geht’s:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public function addFields() {
if (function_exists('acf_add_local_field_group')) {
acf_add_local_field_group(array(
'key' => 'group_64fc74a48fabe',
'title' => 'GitHub Item Block',
'fields' => array(
array(
'key' => 'field_64fc74a43d180',
'label' => 'Repository URL',
'name' => 'repository_url',
'aria-label' => '',
'type' => 'url',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
),
),
'location' => array(
array(
array(
'param' => 'block',
'operator' => '==',
'value' => 'acf/github-item',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => true,
'description' => '',
'show_in_rest' => 0,
));
}
}
In dieser umfassenden Anleitung haben wir Sie durch den Prozess der Erstellung eines benutzerdefinierten Gutenberg-Blocks mithilfe von Advanced Custom Fields (ACF) geführt. Indem wir die Funktionalität des Blocks in einer Klasse gekapselt haben, haben wir den Code übersichtlicher und wartungsfreundlicher gestaltet. Sie haben nun ein besseres Verständnis dafür, wie Sie benutzerdefinierte Blöcke registrieren, rendern und benutzerdefinierte Felder hinzufügen können, um die Funktionen Ihrer WordPress-Website zu erweitern. Experimentieren Sie mit verschiedenen Blockdesigns und -funktionalitäten, um Ihren spezifischen Inhaltsanforderungen gerecht zu werden. Viel Spaß beim Erstellen von Blöcken!