Der WordPress Block Editor, auch bekannt als Gutenberg, hat die Art und Weise, wie Inhalte auf Webseiten erstellt und verwaltet werden, revolutioniert. Mit seiner intuitiven Drag-and-Drop-Oberfläche und einer Vielzahl von Blöcken für verschiedene Inhaltstypen hat er das Erstellen von Beiträgen und Seiten erheblich vereinfacht. Dennoch gibt es einige kleine Ärgernisse, die den Workflow stören können. Eines dieser Probleme ist das Fehlen eines automatisch eingefügten leeren Blocks nach dem Hinzufügen eines neuen Blocks.
Dieses Problem mag auf einem Desktop-Rechner schon störend sein, aber auf einem Tablet oder einem anderen mobilen Gerät wird es noch viel gravierender. Jedes Mal, wenn Sie einen neuen Block hinzufügen, müssen Sie manuell einen weiteren leeren Block einfügen, um fortzufahren. Dies kann den kreativen Fluss unterbrechen und die Produktivität erheblich beeinträchtigen.
In diesem Artikel zeige ich Ihnen eine Lösung, um dieses Problem zu beheben. Durch die Verwendung von benutzerdefiniertem JavaScript können wir den WordPress Block Editor so anpassen, dass automatisch ein leerer Block eingefügt wird, nachdem ein neuer Block hinzugefügt wurde. Dies wird Ihren Workflow erheblich verbessern, insbesondere auf mobilen Geräten.
Warum ist dieses Problem so störend?
Auf dem Desktop
Auf einem Desktop ist die manuelle Einfügung eines neuen Blocks bereits mühsam. Sie müssen die Maus bewegen, das Menü öffnen und den gewünschten Block auswählen. Dieser zusätzliche Schritt kann besonders frustrierend sein, wenn Sie viele Blöcke hintereinander einfügen möchten. Die ständige Unterbrechung kann den kreativen Fluss beeinträchtigen und den Arbeitsprozess verlangsamen.
Auf dem Tablet
Auf einem Tablet wird dieses Problem noch deutlicher. Die Benutzerfreundlichkeit von Touchscreens ist zwar gut, aber die Bedienung ist nicht so präzise wie mit einer Maus. Das Öffnen des Menüs und das Auswählen eines neuen Blocks kann zu einem zeitraubenden und ungenauen Prozess werden. Darüber hinaus kann das ständige Wechseln zwischen Tippen und Wischen sehr ermüdend sein, insbesondere bei längeren Arbeitssitzungen.
Die Lösung: Automatisches Einfügen eines leeren Blocks ohne Plugin
Zum Glück gibt es eine einfache Lösung für dieses Problem. Durch das Hinzufügen von benutzerdefiniertem JavaScript zu Ihrem WordPress-Theme können Sie den Editor so anpassen, dass nach jedem neuen Block automatisch ein leerer Block eingefügt wird. Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie dies umsetzen können.
Schritt 1: JavaScript in Ihr Theme einfügen
Zuerst müssen wir sicherstellen, dass das benutzerdefinierte JavaScript in den Editor geladen wird. Dies erreichen wir, indem wir das JavaScript in die functions.php-Datei Ihres Themes einfügen.
- Öffnen Sie die
functions.php-Datei Ihres aktiven WordPress-Themes. - Fügen Sie den folgenden Code hinzu, um das JavaScript einzubinden:
function enqueue_custom_admin_script() {
wp_enqueue_script(
'custom-gutenberg-script',
get_stylesheet_directory_uri() . '/js/custom-gutenberg.js',
array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'),
filemtime(get_stylesheet_directory() . '/js/custom-gutenberg.js'),
true
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_admin_script');Schritt 2: JavaScript-Datei erstellen
Als nächstes erstellen wir die JavaScript-Datei, die die gewünschte Funktionalität enthält. Erstellen Sie eine Datei namens custom-gutenberg.js im Verzeichnis js Ihres Themes (erstellen Sie dieses Verzeichnis, falls es noch nicht existiert) und fügen Sie den folgenden Code hinzu:
wp.domReady(() => {
const { subscribe, select, dispatch } = wp.data;
let isAddingBlock = false;
subscribe(() => {
if (isAddingBlock) return;
const blocks = select('core/block-editor').getBlocks();
if (blocks.length === 0) return;
const lastBlock = blocks[blocks.length - 1];
// Überprüfen, ob der letzte Block kein Absatzblock ist
if (lastBlock.name !== 'core/paragraph') {
isAddingBlock = true;
dispatch('core/block-editor').insertBlocks(
wp.blocks.createBlock('core/paragraph')
).then(() => {
isAddingBlock = false; // Rücksetzen der isAddingBlock-Variable nach erfolgreichem Hinzufügen
});
}
});
});Schritt 3: Testen
Nachdem Sie die Änderungen vorgenommen haben, testen Sie den Editor, um sicherzustellen, dass die Funktion wie gewünscht funktioniert. Fügen Sie einen neuen Block hinzu und überprüfen Sie, ob automatisch ein leerer Absatzblock hinzugefügt wird.
Anpassungen und Erweiterungen
Verwendung eines Plugins
Wenn Sie es vorziehen, keine Änderungen an Ihrem Theme vorzunehmen, können Sie stattdessen ein Plugin verwenden, um den JavaScript-Code einzufügen. Plugins wie „Code Snippets“ ermöglichen es Ihnen, benutzerdefinierten Code hinzuzufügen, ohne die Theme-Dateien direkt zu bearbeiten.
Erweitern der Funktionalität
Die oben beschriebene Lösung fügt immer einen Absatzblock ein. Sie können diese Funktionalität jedoch erweitern, um verschiedene Arten von Blöcken hinzuzufügen, je nach Ihren Bedürfnissen. Zum Beispiel könnten Sie nach jedem Absatzblock automatisch ein Bild- oder Video-Block hinzufügen.
Sicherheitsaspekte
Wenn Sie benutzerdefinierten Code zu Ihrer Website hinzufügen, sollten Sie immer sicherstellen, dass dieser sicher und effizient ist. Überprüfen Sie den Code regelmäßig und stellen Sie sicher, dass er mit den neuesten WordPress-Updates kompatibel ist.
Fazit
Das manuelle Hinzufügen eines neuen Blocks im WordPress Block Editor kann den Arbeitsfluss erheblich beeinträchtigen, insbesondere auf mobilen Geräten wie Tablets. Durch die Implementierung eines benutzerdefinierten JavaScripts, das automatisch einen leeren Block nach jedem neuen Block einfügt, können Sie diesen Prozess erheblich vereinfachen und Ihre Produktivität steigern.
Diese Anpassung ist einfach zu implementieren und kann Ihren Workflow erheblich verbessern. Indem Sie den kreativen Fluss aufrechterhalten, können Sie sich besser auf das Erstellen großartiger Inhalte konzentrieren und weniger Zeit mit unnötigen Unterbrechungen verschwenden.
Probieren Sie diese Lösung aus und erleben Sie selbst, wie viel reibungsloser und effizienter das Arbeiten im WordPress Block Editor sein kann.