Ein erster einfacher Block mit etwas ES6 Code – es ist nicht so furchteinflößend, wie es vielleicht klingt

Ich bin gerade im Urlaub und hatte ein paar technikfreie Tage, daher kommt mein Blog-Beitrag diese Woche ein wenig später. In meinem vorherigen Beitrag habe ich euch gezeigt, wie ihr einen Block ohne ES6/React Code schreiben könnt. Diese Woche möchte ich euch nun zeigen, was ihr mindestens tun müsste, um das volle Potenzial aus der modernen JavaScript-Entwicklung zu holen, ohne dabei zu komplex zu werden.

Erstellen eines Blocks mit dem „create-block“ Skript

Wie ich bereits im letzten Beitrag erwähnt hatte, würde ich euch sehr stark empfehlen, euch das create-block Paket anzusehen, mit dem ihr ein kleines Plugin erstellen könnt. Es erstellt eine ganz Menge von Dateien, mit denen ihr dann sofort loslegen könnt. Wir erstellen hier nun das gleiche Beispiel wie auch dem letzten Beitrag, indem wir innerhalb des wp-content/plugins Ordners den folgenden Befehl ausführen:

npx @wordpress/create-block random-posts-server-side-render-block-es6

Dies erstellt die folgenden Dateien im neu erstellten Plugin-Ordner:

$ tree
.
├── node_modules
├── package.json
├── random-posts-server-side-render-block-es6.php
├── readme.txt
└── src
    ├── block.json
    ├── edit.js
    ├── editor.scss
    ├── index.js
    ├── save.js
    └── style.scss

Im node_modules Ordner befinden sich alle Dateien, die für die Kompilierung von ES6 Code notwendig ist, damit der Browser diesen ausführen kann. Die package.json Datei definiert alle dazu notwendigen Abhängigkeiten sowie die Befehle, die ausgeführt werden.

Die Block-Definition

Die wichtigste Datei in einem „Block-Plugin“ ist die src/block.json Datei. In dieser werden Name, Titel, Icon und andere Details definiert:

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "rpssrb/random-posts",
    "version": "0.1.0",
    "title": "Random Posts",
    "category": "widgets",
    "icon": "smiley",
    "description": "An example for a ServerSideRender block using minimal ES6 code.",
    "supports": {
        "html": false
    },
    "textdomain": "random-posts-server-side-render-block-es6",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

Am Ende dieser Datei findet ihr drei sehr nützliche Zeilen. Diese definieren, wo die Asset-Dateien liegen. Während wir also im letzten Beitrag noch wp_enqueue_scripts verwendet haben, um die JavaScript-Datei zu laden, bekommen wir das nun einfach so dazu. Es ist also nicht mehr notwendig in PHP zu prüfen, ob die Datei existiert, diese mit ihren Abhängigkeiten zu laden und einen Timestamp für das Caching anzuhängen. Allein dieses kleine Feature ist es schon wert, dass man sich ein wenig mehr mit moderner Block-Entwicklung beschäftigt.

Ihr könntet nun weiterhin ES5 Code in diese JavaScript-Datei schreiben, aber sehen wir uns doch unser Beispiel mal mit ein wenig modernem JavaScript-Code an.

Registrierung des Server-Side-Rendered-Blocks mit ES6

Wie ihr oben im Auszug des Dateisystems gesehen habt, werden mit dem Skript drei JS Dateien erzeugt. Die index.js Datei registriert den Block. Die edit.js Datei ist zuständig für die Ausgabe des Blocks im Block-Editor, inkl. der Einstellungsoptionen. Die save.js wird abschließend verwendet, um den Block in den Inhalt des Beitrags zu speichern. Diese beiden zusätzlichen Dateien können verwendet werden, aber man kann auch alles in die index.js schreiben. Bei wirklich komplexen Blöcken würde man die Dateien sogar noch mehr aufspalten und beispielsweise die edit.js in kleinere (wiederverwendbare) Teile zerlegen. Aber um es weiterhin möglichst einfach zu halten, verwenden wir nur die index.js Datei:

import ServerSideRender from '@wordpress/server-side-render';
import { registerBlockType } from '@wordpress/blocks';
import './editor.scss';
import './style.scss';
import metadata from './block.json';

registerBlockType(
    metadata.name,
    {
        edit() {
            return (
                <ServerSideRender
                    block="rpssrb/random-posts"
                />
            );
        }
    }
);

Um eine Komponente oder Funktion in ES6 nutzen zu können, müssen wir sie zuerst importieren. Wir werden in dem Beispiel die Komponente ServerSideRender sowie die Funktion registerBlockType einsetzen. Wenn ihr den Code insgesamt mit unserem Beispiel von letzter Woche vergleicht, dann werdet ihr feststellen, dass er gar nicht so anders aussieht. Dieser „komisch aussehende HTML-Tag“ ist JSX, eine Erweiterung für HTML, die von React verwendet wird, um dessen Komponenten zu erstellen. Wenn man an diese Komponenten einen Parameter übergeben möchte, dann verwendet man dazu Attribute, genau wie in HTML (anstatt ein JSON-Objekt zu verwenden, wie in der ES5-Variante). In diesen Attributen kann man auch direkt JavaScript-Code verwenden. Für unsere ServerSideRender Komponente übergeben wir aber nur einen statischen Blocknamen.

Euch ist vielleicht ebenfalls aufgefallen, dass wir den Namen des Blocks für die registerBlockType Funktion aus dem metadata Objekt erhalten, das wir ebenfalls importieren. Das gibt uns die Möglichkeit, auf alle darin deklarierten Werte zuzugreifen. In diesem sehr einfachen Beispiel ist das nur der Name. Wir könnten sogar auch den Wert für das block Attribut der ServerSideRender dynamisch aus den Metadaten setzen, aber wir verwenden hier einen statischen String.

Die zwei Zeilen, die ich bisher noch nicht angesprochen habe, sind die Imports für die SCSS-Dateien. Wenn ihr das @wordpress/scripts Paket verwendet, das mit dem npx Befehl oben installiert wird, dann bekommt ihr eine Sass-Kompilierung einfach mit dazu. Ihr benennt einfach zwei Dateien mit editor.scss und style.scss und diese werden dann automatisch nur für den Block-Editor oder auch für das Frontend kompiliert.

Jetzt, nachdem ihr diesen schönen Code geschrieben habt, könnt ihr ihn endlich kompilieren. Wenn ihr das nur einmal machen wollt (in einer minifizierten Version, vorgesehen für den produktiven Einsatz), dann führt ihr npm run build aus. Während der aktiven Entwicklung verwendet ihr aber eher npm run start, um immer eine aktuelle (ausführliche und somit besser für das Debugging geeignete) Version zu haben, die den Code widerspiegelt, den ihr gerade schreibt.

Registrierung der PHP-Callback-Funktion für den Server-Side-Rendered-Block

Da wir hier noch immer einen Block schreiben, der seinen Inhalt aus dem PHP-Backend bekommt, müssten wir noch immer eine Callback-Funktion registrieren. Das sieht ziemlich ähnlich zu unserem vorherigen Beispiel aus. Allerdings verwenden wir hier die index.js Datei, um den Block in PHP zu registrieren und fügen die Callback-Funktion über die weiteren Parameter hinzu.

function create_block_rpssrb_block_init() {
	register_block_type(
		__DIR__ . '/build',
		[
			'render_callback' => 'rpssrb_render_callback',
		]
	);
}
add_action( 'init', 'create_block_rpssrb_block_init' );

Statt den Blocknamen zu verwenden, geben wir also nur den Pfad zum build Ordner an, der durch das Build-Skript erstellt wird. In diesem Ordner sucht PHP nach einer index.js Datei und darin dann nach dem Namen für den Block.

Wir verwenden auch weiterhin die gleiche Callback-Funktion aus dem vorherigen Beitrag. Auch hier können wir wieder den „Bonus“ haben, um die gleiche Callback-Funktion auch mit einem Shortcode zu verwenden.

Fazit

Es ist nicht wirklich schwer, einen Block mit ES6 Syntax zu schreiben. Wenn man dazu noch das create-block Paket (oder das @wordpress/script Paket) verwendet, wird auch der schwierige Teil für die Kompilierung sehr viel einfacher. Das Einzige, was ihr noch tun müsst – und das etwas schwerer sein kann – ist die Installation von node sowie die anschließende Installation von npm auf eurem System. Aber selbst dann müsst ihr dafür sogar, dann diese beiden immer aktuell und kompatibel mit den Paketen sind, die ihr verwendet. Das kann von Zeit zu Zeit schon etwas nervig sein.

Den Grund für all das werde ich in meinem nächsten Blogbeitrag behandeln, wenn wir ein paar einfache Einstellungsoptionen zum Block hinzufügen, um ihn noch besser nutzbar zu machen.

Einen Shortcode durch einen Block ersetzen, mit so wenig und so einfachem Code wie möglich

Mitte der Woche hatte Topher auf Twitter eine interessante Frage zum aktuellen Stand der Block-Entwicklung gestellt:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Übersetzung: Ich habe es mir schon lange nicht mehr angesehen, ist es schon so einfach einen Gutenberg Block zu schreiben wie einen Shortcode?

Das hat mich ein wenig zum Nachdenken gebracht, wie ich diese Frage übersetzen würde. Als ich meine ersten Blöcke geschrieben habe, waren es meisten „Server-Side-Rendered-Blocks“. Bei diesen Blöcken wird der Inhalt nicht direkt im Editor erzeugt, sondern von PHP-Code in einer Callback-Funktion gerendert, so wie man es von Shortcodes her kennt.

Der andere komplizierte Teil bei der Entwicklung von Blöcken ist die Notwendigkeit so viele neue Dinge zu lernen: React, JSX, Kompilierung von modernem JavaScript mit webpack und vieles mehr. Das alles zusammen macht es eben nicht „so einfach“ wie die Arbeit mit Shortcodes. Aber ich sollte dennoch einmal zeigen, wie man mit wenig Code einen Block entwickeln kann, der einen Shortcode ersetzt, ohne dabei all diese neuen Dinge lernen zu müssen.

Einen Server-Side-Rendered-Block entwickeln – der PHP Teil

Der einfachste Teil ist die Registrierung des Blocks und der Render-Callback-Funktion in PHP. Während man bei einem Shortcode die Funktion add_shortcode()für die Callback-Funktion verwenden würde, ist es ein Parameter bei der Registrierung eines Blocks in PHP:

function rpssrb_init() {
	register_block_type(
		'rpssrb/random-posts',
		[
			'render_callback' => 'rpssrb_render_callback',
		]
	);
}
add_action( 'init', 'rpssrb_init' );

Für diesen Blogbeitrag erstellen wir einen Block, der zufällig ein paar Beiträge rendert. Der Inhalt der Callback-Funktion ist hier sehr ähnlich zu der eines Shortcodes. Ihr könnt auch die gleichen Hilfsfunktionen wie bei einem Shortcode verwenden. Der Callback könnte wie folgt aussehen:

function rpssrb_render_callback( $atts ) {
	$atts = shortcode_atts(
		[
			'post_type'      => 'post',
			'orderby'        => 'rand',
			'posts_per_page' => 5,
		],
		$atts
	);

	$query = new WP_Query( $atts );

	$output = '';
	if ( $query->have_posts() ) {
		$output .= '<ul>';
		while ( $query->have_posts() ) {
			$query->the_post();
			$output .= sprintf(
				'<li><a href=%s>%s</a></li>',
				get_permalink(),
				get_the_title()
			);
		}
		$output .= '</ul>';
	}

	return $output;
}

Wir setzen ein paar Standard-Attribute und führen dann eine WP_Query aus, um 5 zufällige Beiträge zu bekommen. Diese geben wir dann in einer einfachen unsortierten Liste aus, wobei wir einfach den Titel ausgeben und auf den Beitrag verlinken.

Implementierung des Blocks in JavaScript – nur mit ES5 Code

Wie schon zuvor erwähnt ist das schwierigste bei der Block-Programmierung das Erlernen von React, JSX usw. und die Kompilierung davon. Wenn ihr euch damit noch nicht auskennt, kann es wirklich kompliziert werden. Daher zeige ich euch hier, wie ich mit etwas ES5 („altem JavaScript“) einen Block schreiben könnt. Das sieht im einfachsten Fall wie folgt aus:

wp.blocks.registerBlockType(
	'rpssrb/random-posts',
	{
		title: 'Random Posts',
		edit: function () {
			return wp.element.createElement(
				wp.serverSideRender,
				{
					block: 'rpssrb/random-posts'
				}
			);
		}
	}
);

Wir verwenden die wp.blocks.registerBlockType Funktion im ES5-Stil und geben ansonsten nur einen title und eine edit Funktion an. In dieser Funktion erstellen wir dann ein React-Element mit der wp.serverSideRender Komponente.

Die edit Funktion wird verwendet, um den Inhalt des Blocks im Editor anzuzeigen (in unserem Fall also das Ergebnis des PHP-Callback-Funktion). Wir brauchen diese Funktion nicht einmal zwingen, würden dann aber nichts im Block-Editor sehen (der Block würde aber auch keinen Raum einnehmen, da er leer ist), im Frontend würden wir aber die Ausgabe sehen.

Laden der JavaScript-Datei

Dieser JavaScript-Code muss nun geladen werden, wenn der Block-Editor verwendet wird. Falls ihr schon eine Datei habt, die im Block-Editor geladen wird, könnt ihr den Code in diese Datei speichern. Ansonsten ladet ihr die Datei einfach wie jede andere, verwendet dabei aber einen anderen Hook:

function rpssrb_register_scripts() {
	wp_enqueue_script(
		'random-posts-server-side-render-block',
		plugin_dir_url( __FILE__ ) . 'index.js',
		[ 'wp-blocks', 'wp-server-side-render' ],
		filemtime( plugin_dir_path( __FILE__ ) . 'index.js' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'rpssrb_register_scripts' );

In den Abhängigkeiten fügen wir noch wp-blocks und wp-server-side-render, wobei diese eigentlich normalerweise ohnehin geladen werden, wenn der Block-Editor verwendet wird.

Bonus: auch einen Shortcode verwenden

Da wir schon eine Callback-Funktion geschrieben, die genau so auch bei einem Shortcode genutzt werden kann, können wir mit einer einzelnen weiteren Zeile diese auch als Shortcode nutzbar machen (z.B. mit dem Shortcode-Block):

add_shortcode( 'rpssrb_random_posts', 'rpssrb_render_callback' );

Einschränkung: die Verwendung von Attributen ist kompliziert!

Der Block, den wir gebaut haben, kann keine Attribute verwenden. Diese zum Bock hinzuzufügen wäre einfach, dafür dann aber Kontroll-Elemente für eine einfache Verwendung zu implementieren ist nicht so einfach. Es wäre zwar mit ES5 möglich, aber ich würde dies nicht empfehlen.

Konsequenz: Learn JavaScript, deeply.

Wie uns Matt beim WCUS 1015 als Hausaufgabe mitgegeben hat, würde auch ich sehr empfehlen, mit dem Lernen von modernem JavaScript anzufangen. Der schwierigste Teil ist am Anfang dabei die Kompilierung mit webpack. Falls ihr gar keine Idee habt, wie ihr starten sollt, dann würde ich der Antwort von Birgit auf den Tweet zustimmen: verwendet das create-block Paket.

Mit dem create-block Paket könnt ihr nicht nur einen funktionierenden Block innerhalb eines WordPress Plugins erstellen, es installiert euch auch all die JavaScript-Pakete, die ihr für die Kompilierung von modernem JavaScript benötigt. Dazu verwendet es das @wordpress/scripts Paket und da Haupt-Skript, das ihr hiervon verwenden würdet, ist das start Skript. Versucht es einfach mal selbst aus und lest ein wenig in der Dokumentation, wie man Attribute hinzufügt, um euren Block noch einfacher nutzbar zu machen.

Fazit: einen Block zu erstellen ist einfach, aber es reicht eventuell nicht aus

Während ihr also einen Block schreiben könnt, der nur eine PHP-Datei und eine JavaScript-Datei mit ES5-Syntax benötigt, würde ich es auch nicht unbedingt empfehlen. Sobald ihr euch einmal mit den Grundlagen der Block-Erstellung vertraut gemacht habt, könnt ihr die Nutzbarkeit erheblich verbessern. Es klingt sicher am Anfang etwas einschüchternd und ihr werdet sicher in alle möglichen Fehler laufen, aber es ist es wert.

Falls ihr den vollständigen Code zu diesem Beitrag sehen wollt, dann findet ihr ihn auf GitHub als Plugin.

Mein Blog ist jetzt ein Teenie!

Schon 13 Jahre schreibe ich hier auf diesem Blog für euch. In den letzten Jahren auch immer sehr regelmäßig. Damit ist mein Blog nun im Teenager-Alter angekommen. Ob er damit auch anfängt verhaltensauffällig zu werden, ist abzuwarten 😁

Fleißig Bloggen in Deutsch und Englisch

Mindestens einmal alle 14 Tage habe ich auch in den vergangenen 12 Monaten einen Beitrag geschrieben und diesen mit #project26 bzw. #projekt26 auf Twitter mit euch geteilt. Leider musste ich feststellen, dass nur noch sehr wenige aktiv beim Projekt 26 mitmachen.

Ein neuer Besucherrekord!

Ich hatte zu Januar 2021 meine Statistiken von Google Analytics auf Matomo umgestellt. Daher sind die Zahlen vielleicht nicht ganz vergleichbar, aber ich denke, dass ich einen neuen Besucherrekord verkünden kann: am 25. Januar 2022 hatte ich 809 Seitenaufrufe. Interessanterweise entfallen davon 131 auf Archivseiten und der Rest verteilt sich auf viele Beiträge. Aber auch die beliebtesten Beiträge habe ich wieder ermittelt.

Top3 im letzten Jahr

  1. Direkte Downloads mit dem „download“ Attribute
  2. Formatierten Quellcode mit Syntaxhervorhebung in Word einfügen
  3. Arrays und andere komplexe Daten mit PHP in einer MySQL-Datenbank speichern

Der ehemalige Platz 3 ist um einen abgerutscht und ein altbekannter Beitrag hat es wieder in die Top3 geschafft. Aber auch an der Spitze gab es einen Platzwechsel zwischen Platz 1 und 2 im Vergleich zum Vorjahr, einen recht deutlichen sogar.

Ein neues Theme

Nein, keine Angst, ihr habt es nicht übersehen, noch ist es nicht da 😁 Aber ich habe mir fest vorgenommen das Theme zu ersetzen. Nicht optisch, aber technisch. Ich habe noch immer die Idee, das Waipou Theme als FSE-Theme nachzubauen. Das wird eine spannende, aber sicher auch herausfordernde Aufgabe. Aber dafür habe ich jetzt ein wenig mehr Zeit.

WordCamp Europe 2022

Eine Sache, die mich nämlich im vergangenen Jahr sehr beschäftigt hat, war die Organisation des WordCamp Europe 2022, das endlich in Porto stattfinden konnte. Mit über 2300 Teilnehmenden aus 91 Ländern konnte ich die wunderschöne Stadt, das Land und vor allem seine freundlichen Menschen und das tolle Essen kennenlernen. Aber nun ist für mich erst einmal eine Auszeit von der Organisation von WordCamps angesagt und ich konzentriere mich auch andere Dinge. Zum Abschluss meines Beitrags gibt es daher als traditionelles Video dieses Mal eines passenden zum WordCamp Europe, nämlich das mit der Ankündigung zum Event im nächsten Jahr!

Click here to display content from YouTube.
Erfahre mehr in der Datenschutzerklärung von YouTube.

WordCamp Europe 2022 – Die Community trifft sich endlich in Porto

Es ist drei Jahre her. Drei Jahre, seitdem wir unser letztes WordCamp Europe mit Teilnehmenden vor Ort hatten, 2019 in Berlin. Damals war ich der Local Lead und bin anschließend dem nächsten Organisationsteam als einer von drei Global Leads beigetreten. Dann kam die Pandemie und hat die Welt verändert und WordCamp fanden nur noch online statt. Obwohl das WCEU dieses Jahr nicht das erste Event mit Teilnehmenden vor Ort war, so war es doch das größte und es fühlte sich – fast – wie immer an.

Meine erste Reise nach Portugal

Schon 2020 sollte ich zu einem Besuch der Venue nach Porto reisen, die wir für das WCEU 2020 verwenden wollten. Aber die Pandemie traf und alle, wir verlegten das WordCamp in die Online-Welt und stoppten alle lokalen Organisationstätigkeiten. Dann sollte ich eigentlich dieses Jahr im Februar erneut zu einem Besuch der Venue nach Porto reisen, dieses Mal mit dem neuen Organisationsteam, aber nur wenige Tage zuvor bekam ich das erste Mal Corona. Somit war es dann am Montag, dem 30. Mai endlich so weit und ich konnte Portugal das erste Mal bereisen.

Vorbereitung des Events

Am Dienstag hatte ich dann auch gleich die Gelegenheit mir die grandiose Venue selbst anzusehen, die Super Bock Arena – Pavilhão Rosa Mota. Die Crew war gerade dabei, die Expo-Area und den Bildschirm für Track 1 vorzubereiten:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Ich hatte auch die Gelegenheit, ein paar Mitglieder des Organisationsteams persönlich kennenzulernen und hatte ein Abendessen mit einigen von ihnen. Da die meisten Dinge schon durch die verschiedenen Team vorbereitet waren, konnte ich sogar am Mittwochabend an der „Piraten-Party“ teilnehmen, die auch eine Fahrt auf dem Fluss beinhaltete:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Auftakt mit dem Contributor Day

Wie viele andere WordCamp auch hatten wir einen Contrbutor Day am Donnerstag organisiert.

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Der Contributor Day fand vor der Bühne von Track 1 statt. Wir hatten etwa 800 Contributoren, viele von ihnen waren zum ersten Mal dabei. Das war ein neuer Rekord für WordCamps!

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Der erste Konferenztag

Freitag war der erste Tag mit Vorträgen und Workshops. Die Tische vom Contributor Day wurden durch Sitzplätze für die Vorträge ersetzt:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Ich hatte die Ehre das WordCamp Europe 2022 mit unserem Local Lead Jose Freitas und den drei anderen Global Leads Lesley Molecke, Moncho (José Ramón Padrón García) und Taeke Reijenga zu eröffnen:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Leider konnte ich mir am ersten Tag keine Talks anhören. Lediglich die erste Hälfte von Majas Vortrag konnte ich sehen, bevor ich wieder zu Organisationsarbeit eilen musste.

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Wie auch in Berlin 2019 hatten wir mehr als nur Vorträge und Workshops zu bieten. Wir haben den „Wellness Track“ weitergeführt, in dem es Yoga und Meditation im wunderschönen Park außerhalb der Venue gab. Weiterhin hatten wir auch wieder das WP Café, in dem Teilnehmende zu verschiedenen Themen diskutieren konnten und erstmals hatten wir auch ein Live-Streaming-Studio. Hier wurden verschiedene Personen des Events interviewt und diese dann in den Livestream von Track 1 in den Pausen zwischen den Vorträgen übertragen. Ich hatte hier auch einmal die Gelegenheit in einer Pause in einem Interview dabei zu sein:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Der zweite Konferenztag

Samstag war schon wieder der letzte Tag des WordCamp Europe. Dieser Tag vergeht für Organizer in der Regel wie im Flug. Am Ende konnten wir etwa 2304 Teilnehmende in Porto begrüßen und mit vielen von ihnen kurz vor dem Mittagessen ein Familienfoto machen:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Der letzte Talk des WordCamp Europe 2022 war eine Fragestunde mit Josepha and Matt:

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Nach dieser Session war es dann Zeit für die Verabschiedung. Wir hatten insgesamt 91 Organizer und 164 Volunteers, die alle dabei geholfen haben, dies alles möglich zu machen und ein großartiges Event mit Menschen vor Ort zu organisieren.

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Und wie immer haben wir auch dieses Mal am Ende bekannt gegeben, in welcher Stadt das nächste WordCamp Europe stattfinden wird und das neue Organisationsteam begrüßt …

WordCamp Europe 2022 Athen

Nächstes Jahr trifft sich die WordPress Community in Athen in Griechenland! Ein weiters Land, das ich bisher noch nicht besucht habe.

Click here to display content from Twitter.
Erfahre mehr in der Datenschutzerklärung von Twitter.

Zeit, meinen „Hut an den Nagel zu hängen“

Für mich war dieses Jahr das letzte als WordCamp Europe Organizer. Ich bin 2017 dem Team beigetreten und habe nur letztes Jahr für die zweite Online-Ausgabe eine Pause eingelegt. Der „Tradition“ folgend war ich Local Lead, dann Global Lead und werde dann vermutlich nächstes Jahr einen Vortrag halten, vielleicht ja zusammen mit den anderen Global Leads aus 2020 und 2022. So sehr ich es auch geliebt habe, diese vielen Events zu organisieren, ist es doch an der Zeit, Platz für neue Community-Mitglieder zu machen. Ich freue mich schon sehr darauf zu sehen, womit und das Team des WCEU 2023 überraschen wird!

Änderungen an PHP ini Werten machen, ohne dass diese bei einem Update verloren gehen

Wenn ihr schon einmal selbst einen Server aufgesetzt habt, dann wird euch sicher auch aufgefallen sein, dass viele Standardwerte für PHP-Variablen nicht mehr zeitgemäß für eine modere Website sind. Die upload_max_filesize ist beispielsweise auf nur 2 MB festgelegt. Ihr könnt also keine Datei, die größer als 2 MB groß ist, in die WordPress Mediathek hochladen. Diesen Wert wollt ihr also ziemlich wahrscheinlich ändern. Aber wie könnt ihr den Wert am besten ohne zu riskieren, dass eure Anpassung wieder zurückgesetzt werden, sobald ihr PHP oder den Server aktualisiert.

Ändern der globalen PHP ini Werte

Dieser Blog läuft auf einem Ubuntu 22.04 Server mit PHP-FPM und einem nginx Webserver. Wenn ich also Änderungen an einer PHP ini Variable machen möchte, dann muss ich die Änderungen in der Datei /etc/php/8.1/fpm/php.ini global vornehmen. Wie ihr im Dateipfad sehen könnt, müsste ich diese Änderungen dann in jeder php.ini Datei für jede PHP Version vornehmen. Ihr müsstet sie auch für jede „Server API“ vornehmen, wenn ihr also zusätzlich noch CGI/FastCGI für manche Seiten verwendet, dann müsstet ihr auch die Datei /etc/php/8.1/fpm/php.ini anpassen.

Der Vorteil dieser Änderung ist, dass sie für alle Seiten gilt, die auf diesem Server gehostet werden, ihr könnt hier also gute Standardwerte für jede Seite einstellen. Wenn der Paketmanager versucht, die Konfigurationsdateien zu aktualisieren, wird er Änderungen feststellen und euch fragen, ob ihr die neue Datei verwenden wollt, die alte Datei, oder ob ihr euch die Änderungen genauer ansehen und das Problem selbst lösen wollt. Abhängig davon, wie viele Änderungen ihr gemacht habt, kann das recht kompliziert werden.

Um globale Änderungen an PHP ini Werte vorzunehmen, habe ich daher eine neue Datei mit dem Namen /etc/php/conf.d/90-custom.ini erstellt, die per Symlink in den verschiedenen Konfigurationspfaden eingebunden ist:

$ tree /etc/php/   
/etc/php/
|-- 7.3
|   |-- cgi
|   |   |-- conf.d
|   |   |   |-- 10-mysqlnd.ini -> /etc/php/7.3/mods-available/mysqlnd.ini
|   |   |   |-- ...
|   |   |   `-- 90-custom.ini -> /etc/php/conf.d/90-custom.ini
|   |   `-- php.ini
|   |-- cli
|   |   |-- conf.d
|   |   |   |-- 10-mysqlnd.ini -> /etc/php/7.3/mods-available/mysqlnd.ini
|   |   |   |-- ...
|   |   |   `-- 90-custom.ini -> /etc/php/conf.d/90-custom.ini
|   |   `-- php.ini
|   |-- fpm
|   |   |-- conf.d
|   |   |   |-- 10-mysqlnd.ini -> /etc/php/7.3/mods-available/mysqlnd.ini
|   |   |   |-- ...
|   |   |   `-- 90-custom.ini -> /etc/php/conf.d/90-custom.ini
|   |   |-- php-fpm.conf
|   |   |-- php.ini
|   |   `-- ...
|-- ...
|-- 8.1
|   |-- cgi
|   |   |-- conf.d
|   |   |   |-- 10-mysqlnd.ini -> /etc/php/8.1/mods-available/mysqlnd.ini
|   |   |   |-- ...
|   |   |   `-- 90-custom.ini -> /etc/php/conf.d/90-custom.ini
|   |   `-- php.ini
|   |-- cli
|   |   |-- conf.d
|   |   |   |-- 10-mysqlnd.ini -> /etc/php/8.1/mods-available/mysqlnd.ini
|   |   |   |-- ...
|   |   |   `-- 90-custom.ini -> /etc/php/conf.d/90-custom.ini
|   |   `-- php.ini
|   |-- fpm
|   |   |-- conf.d
|   |   |   |-- 10-mysqlnd.ini -> /etc/php/8.1/mods-available/mysqlnd.ini
|   |   |   |-- ...
|   |   |   `-- 90-custom.ini -> /etc/php/conf.d/90-custom.ini
|   |   |-- php-fpm.conf
|   |   |-- php.ini
|   |   `-- ...
|-- ...
|-- conf.d
|   `-- 90-custom.ini

Da die neue Datei 90-custom.ini nicht vom Paketmanager hinzugefügt/überschrieben wird, sind sämtliche Anpassungen dazu sicher vor Upgrades.

Ändern von PHP ini Werten pro Seite

Manchmal möchte man bestimmte Seite nur für eine spezifische Seite ändern. Dann würde die Verwendung der globalen Datei nicht funktionieren. Falls ihr den Apache Webserver verwendet, dann könntet ihr eventuell die Werte über die Apache Konfigurationsdateien anpassen oder sogar die .htaccess Datei verwenden. In dieser Datei würde man dann eine Anweisung wie php_value upload_max_filesize 64M verwenden, um etwa das Upload-Limit zu erhöhen. Das funktioniert allerdings nur, wenn ihr PHP als Apachemodul einsetzt.

Wenn ihr Apache mit PHP-FPM oder einen anderen Webserver verwendet – so wie ich nginx einsetze – dann könnt ihr keine .htaccess Datei nutzen, um Änderungen an den PHP ini Werten vorzunehmen.

Verwendung der „user_ini“ Datei für Änderungen pro Seite

Glücklicherweise gibt es einen anderen Weg, um einen PHP ini Wert zu ändern. Dies kann erreicht weden, indem ihr die „user_ini“ Datei verwendet, die in der Regel im Hauptverzeichnis der Website gespeichert wird. Zuerst einmal müsst ihr herausfinden, sie diese Datei heißen muss. Dies könnt ihr mit der phpinfo() Funktion oder mit dem Befehl php -i tun und darin dann nach dem Wert von user_ini.filename suchen. Ihr erstellt dann eine Datei mit diesen Namen und macht darin die Anpassungen in der gleichen Art und Weise wie in einer php.ini Datei, wie z.B. upload_max_filesize = 64M um das Upload-Limit zu ändern.

Nachdem ihr die Änderungen gemacht habt und dann kontrolliert, ob sie funktionieren, dann wird es vermutlich nicht der Fall sein. Das heißt aber nicht, dass ihr etwas falsch gemacht habt. Es bedeutet vermutlich nur, dass die Datei noch nicht erneut vom PHP-Prozess eingelesen wurde, denn die Datei wird gecacht. Wie lange, könnt ihr über den Wert von user_ini.cache_ttl herausfinden. Dies ist die Zeit in Sekunden für das Caching der Datei. Bei einem Wert von 300 müsst ihr also bis zu 5 Minuten warten, bis die Änderungen für die Seite angenommen werden. Wenn die Änderungen sofort greifen sollen, dann müsst ihr den PHP-Prozess (wie etwa PHP-FPM) oder den Webserver (bei der Verwendung der PHP Apachemoduls) neu starten.

Fazit

Es gibt mehrere Wege Änderungen an PHP ini Werten zu machen. Wenn ihr also Anpassungen machen müsst, dann tut dies mit einer Methode, die nicht zu Problemen mit Updates führt (oder bei der eure Anpassungen bei einem Upgrade verloren gehen). Für meinen eigenen Server habe ich mich für den ersten Ansatz entschieden, der eine globale ini Datei verwendet. Die user_ini Datei hat aber den Vorteil, dass diese Seite sehr einfach zu einem neuen Server übertragen werden können, wenn ihr die Seite migriert. Sie ist also gerade dann sinnvoll, wenn das PHP-System sehr spezifische Werte benötigt.

Den Matomo Opt-out iframe reparieren, wenn sichere Server-Header verwendet werden

Letztes Jahr habe ich einen Beitrag darüber geschrieben, wie man eine Website mit sicheren Server-Headern besser schützen kann. Wenn man etwas an den Security-Headern ändert, dann besteht immer die Möglichkeit, dass Dinge nicht mehr funktionieren, da sie „weniger sichere“ Einstellungen benötigen. Eines dieser Beispiele ist der Matomo Opt-out iframe und in diesem Beitrag möchte ich euch zeigen, wie ihr das Problem lösen könnt.

Das Opt-out wird vom Browser blockiert

Wenn ihr Matomo zum Tracken einsetzt und Statistiken zu den Zugriffen auf eurer Seite erhebt, dann solltet ihr das immer in der datenschutzfreundlichsten Art und Weite tun. Ihr solltet hierzu das Tracking ohne Cookies durchführen und auch die Do-not-Track Unterstützung aktivieren. Aber selbst dann muss es möglich sein, dass jemand dem Tracking durch ein Opt-out widerspricht. Hierzu könnt ihr in den Privatsphäre-Einstellungen einen Opt-out iframe erstellen. Diesen fügt ihr dann auf eurer Datenschutzseite ein. Wenn ihr aber mit Security-Headern für Matomo macht, dann könnte es sein, dass ihr folgende Fehlermeldung im Browser seht:

Refused to display ‚https://matomo.example.com/‘ in a frame because it set ‚X-Frame-Options‘ to ’sameorigin‘.

Das passiert, wenn die Security-Header zu eng eingestellt sind und eine Einbindung der Seite auf einer anderen Domain verboten wurde.

Externe Domains erlauben

Eine Sache, die ihr nun tun könntet, wäre es, den Wert für X-Frame-Options so zu ändern, dass er weniger sicher ist. Aber das wollen wir natürlich nicht. Stattdessen könnt ihr die Einbindung des iframe auf bestimmten Seiten explizit erlauben. Dies macht ihr mit dem Content-Security-Policy Header:

Apache

Header set Content-Security-Policy "frame-ancestors 'self' https://example.com/ https://www.example.com/"

nginx

add_header Content-Security-Policy "frame-ancestors 'self' https://example.com/ https://www.example.com/"

Ihr habt vielleicht schon eine Content-Security-Policy in euren Server-Headern. I diesem Fall könnt ihr diese Optionen einfach anhängen. Wenn ihr nicht wisst, die man zwei Optionen kombiniert, dann kann euch vielleicht der Generator von Report UI dabei helfen.

Fazit

Die Absicherung einer Website ist sehr wichtig. Aber manchmal kann ein höherer Grad an Sicherheit auch anderen Dingen in die Quere kommen. Daher solltet ihr immer alle Funktionen testen, sobald ihr etwas an den Server-Headern verändert habt. Wenn plötzlich das Opt-out vom Tracking nicht mehr möglich ist, dann habt ihr zwar vielleicht ein Sicherheitsproblem gelöst, dafür aber ein Datenschutzproblem erzeugt.

Die Bearbeitung von Inhalten durch mehrere Personen erlauben

WordPress hat verschiedene Rollen und in der Regel ist es keine gute Idee allen die „Administrator“ Rolle zuzuweisen. Die nächstkleinere Rolle wäre „Redakteur“. Hiermit können alle Inhalte bearbeitet werden, eigene und die von anderen. Aber ich manchen Fällen ist auch das zu weitreichend.

Die Bearbeitung eigener Inhalte erlauben

Möchte man nur die Bearbeitung von eigenen Seiten und Beiträgen erlauben, dann sollte am besten die Rolle „Autor“ zugewiesen werden. Mit dieser Rolle können zwar die Inhalte andere angesehen werden, eine Bearbeitung ist aber nicht möglich. Das ist perfekt, wenn man Externen Zugriff auf „die eigene Seite“ geben möchte, beispielsweise auf das Profil einer Firma. Die Firma kann dann ihr eigenes Profil erstellen oder man erstellt es für die Firma und weist dann deren Profil als Autor der Seite zu.

Aber früher oder später kommt dann die Anforderung, dass mehr als eine Person aus dem Unternehmen die Seite bearbeiten können soll. Da aber WordPress immer einen User als Autor pro Seite erlaubt, ist das nicht einfach möglich, denn man möchte dem Unternehmen ja auch nicht vorschlagen, das Passwort zu teilen. Es muss also eine bessere Lösung her.

Das „Co-Authors Plus“ Plugin zur Rettung

Durch einen Tweet, in dem einige häufig verwendete Plugin genannt wurden, bin ich auf das Plugin Co-Authors Plus aufmerksam geworden, das es schon ziemlich lange gibt. Es erlaubt es einem mehr als einen Autor einer Seite oder einem Beitrag zuzuweisen. Der erste Autor wird hierbei in der Einzelansicht ausgegeben. Das Plugin stellt aber auch Funktionen bereit (die man dann im Child-Theme verwendet), mit denen die anderen ausgegeben werden können.

Diese verschiedenen Autoren können aber auch andere Rollen haben. Jeder Zugang, egal ob primärer/erster oder weiterer Autor, kann die Seite bearbeiten, solange dessen Rolle es ohnehin erlauben würden.

Da WordPress den Autoren eines Beitrags oder einer Seite normalerweise in einer einzelnen Spalte in der wp_posts Tabelle speicher, hat es mich sehr interessiert, wie es im Plugin gelöst wurde. Tatsächlich wird hierfür ein Custom-Post-Type verwendet, der die Zuordnung übernimmt.

Fazit

Während die normalen Rollen von WordPress in den meisten Fällen ausreichen, ist der Wunsch nach einer Bearbeitung durch mehrere Personen so ein Fall, in dem ich mir eine Lösung durch den Core gewünscht hätte. Mit diesem zusätzlichen Plugin (welches noch immer Updates erhält und sich auch gut in den Block-Editor und die „QuickEdit“ Funktion integriert), kann auch dies recht einfach erreicht werden.

Den „ERROR 1153“ beim Import großer Datenbanken lösen

Migrationen von WordPress-Seiten ist etwas, das ich wöchentlich mehrfach tue. Viele Migrationen sind zwischen lokalen Umgebungen oder Production und Staging. Nicht alle Quell- und Ziel-Systeme haben dabei unbedingt die gleichen Einstellungen. Manchmal muss man eine Seite mit einer großen Datenbank migrieren und stößt dabei eventuell auf diesen Fehler:

ERROR 1153 (08S01) at line 56: Got a packet bigger than 'max_allowed_packet' bytes

Das kann passieren, wenn ein einzelnes INSERT Statement beim Import zu groß ist. In diesem Beitrag möchte ich euch Tipps geben, wie ihr eine solche Datenbank importieren könnt.

Erstellen eines neuen Backups mit kleineren Imports

Wenn man eine Datenbank exportiert, dann verwendet man hierzu vermutlich das mysqldump Kommand, den wp db export Befehl oder ein Datenbank-Management-Tool wie Adminer oder phpMyAdmin. In den Standardeinstellungen werden hierbei INSERT Statements erstellt, die nicht nur eine Zeile in die Tabelle importieren, sondern mehrere auf einmal. Das ist oft auch eine gute Idee, da es den Import beschleunigt. Aber eben in genau diesen Fällen kommt es dann zu dem beschriebenen Fehler.

Um dies zu lösen, könnt ihr versuchen, einen Datenbank-Export zu erstellen, der immer nur ein Zeile in jedem INSERT Statement macht. Damit dauert der Import zwar etwas länger, er sollte aber erfolgreich durchlaufen.

Um einen solchen Export zu erstellen, könnt ihr die WP-CLI verwenden und ein paar mysqldump Argumente anhängen:

wp db export --extended-insert=FALSE --complete-insert=TRUE

Dies sollte eine solche Export-Datei erstellen. Jetzt solltet ihr diese hoffentlich importieren können

Erhöhen des Werts von „max_allowed_packet“

Wenn ihr noch immer das gleiche Problem habt, dann solltet ihr versuchen den Wert von „max_allowed_packet“ zu erhöhen. Der Standardwert kann vermutlich nur mit Administrationsrechten auf dem Server angepasst werden. Ihr könnt den Wert aber oft temporär ändern. Hierzu vebindet ihr euch zum MySQL-Server, erhöht den Wert und importiert dann die Datei. Ich verwende hierfür in meisten den wp db cli Befehl. Damit bin ich dann mit der richtigen Datenbank zu meiner WordPress-Installation verbunden. Anschließend führe ich dann die folgenden Befehle aus:

SET GLOBAL max_allowed_packet=1*1024*1024*1024;
SOURCE db_dump_filename.sql;

Der erste Befehl erhöht die Variable global auf 1 GB. Im Gegensatz zur MySQL-Konfigurationsdatei könnt iher hier als Wert nicht „1G“ im Statement verwenden, ihr müsst stattdessen den Wert in Bytes angeben. Ihr könnt aber eine Berechnung verwenden, daher habe ich diese Notation verwendet, mit der man besser erkennen kann, auf welchen Byte-Wert man die Variable setzt.

Fazit

Das Importieren von großen Datenbanken kann ein echtes Problem darstellen. Hoffentlich könnt ihr das Problem mit diesen Tipps selbst lösen. Falls nicht, fragt am besten jemanden mit Administrationsrechten, denn sie haben vermutlich entsprechenden Tools, um euch beim Import zu helfen. Und falls ihr selbst Daten in die Datenbank schreibt, dann achtet darauf, dass Zeilen nicht zu lang werden.

Entfernen des „Update Lock“ nach einer fehlgeschlagenen WordPress Aktualisierung

Das Aktualisieren von WordPress und seinen Plugins und Themes recht unkompliziert. Hierzu navigiert man zu „Dashboard | Aktualisierungen“ und aktualisiert hier die gewünschten Komponenten. Wenn während des Updates des Cores oder von Plugins/Themes ein Fehler passiert, dann kann WordPress dies meist abfangen und rückgängig machen, aber manchmal geht etwas schief.

Eine fehlgeschlagene Aktualisierung legt die Seite lahm

Wenn eine Aktualisierung abbricht, dann kann es sein, dass die Seite nicht mehr aufrufbar ist. In diesen Fällen erhält man die folgende Nachricht:

Wegen Wartungsarbeiten ist diese Website kurzzeitig nicht verfügbar. Schau in einer Minute nochmal vorbei.

Wenn WordPress den Core aktualisiert (oder mehrere Plugins), dann aktiviert es einen Wartungsmodus und schreibt einen Lock in die Datenbank.

Reparieren der Seite

Die zwei Sperren werden automatisch nach 15 Minuten entfernt. Da sie aber nicht nur das Backend, sondern auch das Frontend unerreichbar machen, möchte man sicher nicht 15 Minuten warten.

Deaktivieren des Wartungsmodus

Das Erste, was ihr tun solltet, ist nach einer Datei mit dem Namen .maintenance im Hauptverzeichnis eurer WordPress-Installation zu suchen. In dieser Datei befindet sich eine einzelne PHP-Zeile mit dem UNIX-Timestamp, der den Beginn des Installationsprozesses angibt:

<?php $upgrading = 1648994440; ?>

Wenn ihr diese Datei löscht, dann sollte die Nachricht verschwinden und ich solltet wieder das Frontend und Backend von WordPress sehen können.

Fortsetzen der vorherige Aktualisierung

Selbst nach dem Entfernen der .maintenance Datei kann es sein, dass ihr den WordPress-Core nicht direkt wieder updaten können. Wenn ihr ein erneutes Update versucht, könntet ihr auf diese Meldung stoßen:

Momentan wird eine andere Aktualisierung durchgeführt.

Dies wird durch die Option core_updater.lock hervorgerufen, die WordPress setzt, sobald der Update-Prozess startet:

$ wp option get core_updater.lock
1648994423

Wie ihr hier sehen könnt, ist der Zeitpunkt ein klein wenig früher (es ist der Zeitpunkt, bevor die ZIP-Datei heruntergeladen und entpackt wird). Wenn ihr euch also sicher seid, dass der vorherige Update-Prozess wirklich abgebrochen ist, dann könnt ihr die Option löschen, entweder über ein Datenbank-Tool oder über die WP-CLI:

$ wp option delete core_updater.lock
Success: Deleted 'core_updater.lock' option.

Jetzt solltet ihr die Aktualisierung erneut starten können, dieses Mal dann hoffentlich ohne weitere Fehler, die die Seite gleich wieder lahm legt.

Fazit

Obwohl WordPress-Updates normalerweise problemlos durchlaufen, kann es auch hier zu Fehlern kommen. In diesen Fällen ist es dann gut zu wissen, wie ihr die Seite direkt wieder zum Laufen bekommt und nicht 15 Minuten warten müsst, bis sich die Sperren von alleine lösen.

Ein defektes Git Repository Dateisystem reparieren

Vor ein paar Wochen hatte ich ein sehr ungewöhnliches Problem mit Git. In einem Repository, mit dem ich schon länger nicht mehr gearbeitet hatte, sollte ich mir mit git status ansehen, was ich zuletzt gemacht hatte, und bekam folgendes Ergebnis:

$ git status
error: Objektdatei .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2 ist leer.
error: Objektdatei .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2 ist leer.
fatal: Loses Objekt 6eeab7d4770c705a0491cafbc95830af69d5c6a2 (gespeichert in .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2) ist beschädigt.

Das hatte ich bisher noch nie bekommen. Zum Glück gibt es von Git einen Befehl, mit dem man den Zustand des Dateisystems überprüfen kann.

$ git fsck --full
error: Objektdatei .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2 ist leer.
error: Konnte mmap nicht auf .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2 ausführen.: Datei oder Verzeichnis nicht gefunden
error: 6eeab7d4770c705a0491cafbc95830af69d5c6a2: Objekt fehlerhaft oder nicht vorhanden: .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2
Prüfe Objekt-Verzeichnisse: 100% (256/256), fertig.
error: Objektdatei .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2 ist leer.
error: Objektdatei .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2 ist leer.
fatal: Loses Objekt 6eeab7d4770c705a0491cafbc95830af69d5c6a2 (gespeichert in .git/objects/6e/eab7d4770c705a0491cafbc95830af69d5c6a2) ist beschädigt.

Das hat mir ein wenig mehr Informationen zum Fehler geben, aber leider noch immer keine Lösung dazu, wie es Git oft macht, wenn man ein Kommando verwendet.

Die Lösung

Mit diesen neuen Informationen konnte ich mich dann aber auf die Suche machen und eine Lösung bei Stack Overflow finden. Ich musste hierzu lediglich die beschädigte/leere Datei löschen. In meinem Fall war es wirklich nur diese eine Datei, wenn man aber in einem Git Repository mehrere solche Dateien hat, dann kann man mit dem folgenden Befehl recht schnell alle „leeren“ Dateien im Git-Ordner löschen:

$ find .git/objects/ -type f -empty | xargs rm

Nach der Ausführung dieses Befehls fehlen dann natürlich all diese Dateien im Repository. Diese bekommt man schnell wieder zurück, indem man sie von einem Remote lädt:

After this command, all corrupt files are missing from the repository. We can get them back by fetching the data from the remote:

$ git fetch -p
remote: Enumerating objects: 228, done.
remote: Counting objects: 100% (228/228), done.
remote: Compressing objects: 100% (91/91), done.
remote: Total 210 (delta 121), reused 188 (delta 99), pack-reused 0
Empfange Objekte: 100% (210/210), 90.23 KiB | 1.43 MiB/s, fertig.
Löse Unterschiede auf: 100% (121/121), abgeschlossen mit 11 lokalen Objekten.

Zuletzt können wir noch einmal eine Dateisystem-Prüfung machen und kontrollieren, ob nun alle Fehler behoben wurden:

$ git fsck --full
Prüfe Objekt-Verzeichnisse: 100% (256/256), fertig.
Prüfe Objekte: 100% (221/221), fertig.
blob c5446110414804bbba2a5316a3e996ff37666bb9 unreferenziert
blob 45dd1301284105bcfc7e183bc805b65bf1465f47 unreferenziert
blob 70376fcbe5060d0db11490249bed5b553c0d04cc unreferenziert

Fazit

Normalerweise gibt uns Git immer sehr hilfreiche Fehlermeldungen, wenn wir etwas falsch machen. In diesem Fall musste ich aber ein wenig recherchieren, um eine Lösung zu finden. Zum Glück hatten schon andere vor mir das gleiche Problem und konnten es lösen.

Unsere Lösung hat aber nur deshalb ohne Verluste funktioniert, weil wir die beschädigten/leeren Objekte von einem Remote neu laden konnten. Daher empfehle ich Leuten immer, dass sie ihren Code auch in einem Remote Repository haben sollten und häufigen Committen und Pushen.