WordPress 5.0 steht vor der Tür, und viele von uns fühlen sich gleichzeitig aufgeregt und besorgt. Gutenberg bringt große Veränderungen in der Verwendung von WordPress mit sich. Es gibt definitiv Bedenken, was mit unseren Websites passieren wird, wenn wir unsere Installationen aktualisieren, ohne sie vorher zu testen. Aber mach dir keine Sorgen, wir haben einen Beitrag darüber, wie du den Gutenberg WordPress Editor deaktivieren kannst (auch wenn es nur vorübergehend ist), um zu verhindern, dass nicht unterstützte Designs und Plugins unsere Websites beschädigen.
Du bist vielleicht überrascht zu hören, dass wir bereits WordPress 5.0 verwenden. Tatsächlich ist es so! Wie Matt in WordPress-Blog erstellen erklärt:
Wenn wir das 5.0-Release auf streng 4.9.8 + Gutenberg beibehalten, wird es ein Release geben, das sowohl bedeutsam ist als auch in Bezug auf den neuen Code ein Non-Event ist. Es ist alles kampferprobt. In gewisser Weise ist 5.0 bereits de facto in freier Wildbahn. Einige vorausschauende Hoster installieren und aktivieren Gutenberg bereits für neue Installationen.
Dies bedeutet, dass bereits WordPress 5.0 auf unseren Servern ausgeführt wird: Es ist nur WordPress 4.9.8, mit Gutenberg im Kern. Eigentlich ist das nicht alles, denn WordPress 5.0 enthält einen zusätzlichen Eintrag, der brandneue Twenty Nineteen Default Theme.
Lass uns eintauchen und sehen, was neu ist.
- Über Gutenberg und Twenty Nineteen
- Installieren von Twenty Nineteen
- Der Look und das Gefühl von Twenty Nineteen
- Theming für Gutenberg: Ein Ansatz für Entwickler
Über Gutenberg und Twenty Nineteen
Einige von euch mögen Gutenberg nicht mögen. Darüber hinaus ist die Debatte über den neuen Redakteur noch lange nicht zu Ende, bedenke jedoch den erklärten Umfang von Gutenberg:
Diese benutzerdefinierten Blöcke ändern die Art und Weise, wie User, Entwickler und Hoster mit WordPress interagieren, um umfassende Webinhalte zu erstellen, die einfacher und intuitiver sind und das Publizieren und Arbeiten für jedermann unabhängig von den technischen Fähigkeiten demokratisieren.
Das ist es, was Gutenberg anstrebt, und Twenty Nineteen bringt die Dinge vorwärts, indem sie mit Gutenberg und für Gutenberg gebaut werden. Es handelt sich um ein minimales, typografieorientiertes Blogging-Thema mit einem einspaltigen Layout. Es kann zum Erstellen einer breiten Palette von Websites verwendet werden, von persönlichen Blogs bis hin zu Websites für kleine Unternehmen.
Über Twenty Nineteen zu schreiben, bedeutet meistens, dass wir über Gutenberg schreiben. Mit Gutenberg können User in Twenty Nineteen nicht nur reichhaltige Inhalte erstellen, sondern sogar ihre gesamte Website im Editor. Laut Allan Cole in WordPress-Blog erstellen,
Gutenberg bietet Usern ein beispielloses Maß an Freiheit, um Layout und Design ihrer Website anzupassen. Um ihre Vision voll verwirklichen zu können, benötigen die User eine neue Generation flexibler Themen, welche die kreative Freiheit von Gutenberg nutzen sollen.
Vor diesem Hintergrund wird WordPress 5.0 mit einem brandneuen Standarddesign gestartet: Twenty Nineteen
Im Twenty Nineteen Theme ist Gutenberg mehr als nur ein Content Builder, sondern ein Site Builder. WordPress-User können ihre gesamten Websites mithilfe von Blöcken erstellen. Und wenn Gutenberg noch nicht dein Ding ist, bieten die meisten der beliebten Page Builder-Plugins Unterstützung für Gutenberg.
(Literaturempfehlung: Eine Einführung in das Twenty Twenty Thema)
Installieren von Twenty Nineteen
Twenty Nineteen sollte dem Veröffentlichungsplan der neuen Hauptversion von WordPress folgen. WordPress 5.0 sollte jedoch am 19. November veröffentlicht werden, und es ist möglich, dass eine funktionierende Version von Twenty Nineteen zu diesem Zeitpunkt nicht fertig ist. Siehe alle möglichen Release-Daten für WordPress 5.0. Das Theme steht auf Github zum Download zur Verfügung und bleibt dort, bis es in den Kern integriert ist.
Twenty Nineteen basiert auf dem _s und Gutenberg-Starter-Theme und ist mit Sass ausgestattet. Wenn du das ZIP-Paket erhalten hast, extrahierst du das Design und lädst den Designordner in das Verzeichnis /wp-content/themes deiner Entwicklungsinstallation. Du kannst es auch aus deinem WordPress-Dashboard hochladen.
Kinsta-Clients können es in ihren Staging-Umgebungen installieren. Wenn du nicht bei Kinsta bist, kannst du es trotzdem auf deinem lokalen Computer installieren.
Der Look und das Gefühl von Twenty Nineteen
Das einspaltige Layout betont den Inhalt und passt am besten zu Blöcken mit voller und großer Breite. Das Design unterstützt nun eine Fußzeilen-Sidebar und verfügt über drei Navigationsmenüs: das Primärmenü und das Social Links Menu, beide im Header positioniert, und das Footer-Menü, das sich in der Fußzeile befindet.
Die Blogseite sieht aus wie eine reguläre Blogseite mit aktivierten Bildern. Einzelne Posts und Seiten zeigen das Potenzial der aktuellen Version von Gutenberg als Site Builder am besten.
Da sie vollständig auf Gutenberg basiert, hängen die Merkmale von Twenty Nineteen hauptsächlich vom Entwicklungszyklus von Gutenberg und von der Verfügbarkeit von Blöcken ab. Wir können Widget-Blöcke, Shortcode-Blöcke, Galerien, HTML-Code usw. hinzufügen. All diese Blöcke decken jedoch noch lange nicht alle unsere Bedürfnisse ab. Glücklicherweise verfügen wir jedoch über mehrere Plugins, mit denen wir neue Blöcke zu Gutenberg hinzufügen können, z. B. Atomic Blocks, Advanced Gutenberg und Stackable. Es gibt sogar Projekte wie die Gutenberg Cloud, die aufgetaucht sind.
Wenn du der Meinung bist, dass das Thema zu minimal wirkt, denke daran, dass Twenty Nineteen noch in Arbeit ist. Wir sind nicht sicher, ob es bis zur Veröffentlichung von WordPress 5.0 in den Kern integriert sein wird, und wir werden in der nächsten Zukunft mit einigen Ergänzungen und Fehlerbehebungen rechnen. Darüber hinaus gibt es viele Probleme, die noch nicht gelöst sind, und Funktionen, die implementiert werden müssen.
Jetzt unterstützt Twenty Nineteen Untermenüs, aber nicht Custom Headers und Video Headers. Wie auch immer, wir können erwarten, dass zusätzliche Features in einem angemessenen Zeitrahmen hinzugefügt werden.
Wenn du dich für den Zustand des Themes interessierst, schau dir die vollständige Liste der Probleme auf Github an.
Theming für Gutenberg: Ein Ansatz für Entwickler
Sofort bietet Gutenberg grundlegende Unterstützung für Blockstile in Themes. Entwickler können die Standardstile von Gutenberg mit ihren benutzerdefinierten Stilen überschreiben. Entwickler können jedoch auch benutzerdefinierte Stile vollständig weglassen und sich dafür entscheiden, Gutenberg ausschließlich für Stilblöcke auf der Vorderseite der Website zu verwenden.
Ein Editor, der wie der resultierende Inhalt aussieht und sich so anfühlt, verbessert das Schreiberlebnis des Autors und ermöglicht jedem, sich mit der Useroberfläche vertraut zu machen.
Für einige Gutenberg-Stile und Präsentationsfunktionen ist es jedoch erforderlich, dass Themes ausdrücklich Unterstützung für diese hinzufügen. Dies kann durch Aufrufen von add_theme_support in der functions.php -Datei erfolgen, wenn die Aktion after_setup_theme ausgelöst wird. Hier ist ein Beispiel für eine Feature-Implementierung:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Nachfolgend findest du eine Auswahl dieser Gutenberg-Funktionen, von denen einige auch von Twenty Nineteen unterstützt werden. Die vollständige Liste der Funktionen findest du im Gutenberg Handbuch.
Unterstützung für Gutenberg-Block-Präsentationsstile hinzufügen
Eines der Ziele des Teams hinter Gutenberg bestand darin, ein flexibles System für das Styling in Themes zu erstellen und so nahe wie möglich „an die visuelle Parität zwischen Frontend und Editor“ heranzukommen. Der Zweck besteht darin, dem User eine genaue Vorschau des Inhalts zu geben, so wie es auf der Front-Site aussehen wird.
Um dieses Ziel zu erreichen, musste das Team Präsentationsstile und Strukturstile trennen. Standardmäßig werden Präsentationsstile nicht im Frontend geladen, um das Erscheinungsbild der Seite nicht zu beeinträchtigen. Auf jeden Fall können neue Themes die Präsentationsstile von Gutenberg nutzen, indem du sie einfach mit der folgenden Registrierung aktivierst (weitere Informationen findest du im Handbuch).
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );As you may expect, Twenty Nineteen supports Gutenberg’s block styles. The single post page looks on the front-end much like the editing post page, with the sole difference of the featured image, which displays on a desktop as a background image covering the whole viewport. The image below shows Gutenberg in action on the back-end.
Wie zu erwarten, unterstützt Twenty Nineteen die Blockstile von Gutenberg. Die einzelne Post-Seite sieht auf dem Frontend sehr ähnlich aus wie die bearbeitende Post-Seite. Der einzige Unterschied ist das abgebildete Bild, das auf einem Desktop als Hintergrundbild für das gesamte Ansichtsfenster angezeigt wird. Das Bild unten zeigt Gutenberg im Backend in Aktion.
Und hier ist der gleiche Beitrag auf der Frontseite.
Breite und vollständige Ausrichtung
Gutenberg bietet auch zwei zusätzliche Ausrichtungsoptionen: Wide und Full-width -Ausrichtung.Du kannst jedoch nur dann eine Wide oder Full-width-Ausrichtung auswählen, wenn dein Motiv sie unterstützt. In diesem Fall zeigt Gutenberg zwei zusätzliche Ausrichtungssymbole.
Das Bild unten zeigt Ausrichtungsmitte, Wide und Full-width in Twenty Nineteen.
Theme-Entwickler können Unterstützung für Ausrichtungen für Wide und Full-width hinzufügen, indem sie in der Funktionsdatei mit einer einzigen Anweisung aktiviert werden:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Sobald wir die Unterstützung für Wide- und Full-Width-Ausrichtungen hinzugefügt haben, sollten wir die CSS-Deklarationen für zwei zusätzliche CSS-Klassen bereitstellen: alignfull und alignwide. Twenty Nineteen bietet die folgenden Stile:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Notiz: Sei vorsichtig, wenn du diese Option verwendest, da dies zu Problemen führen kann, wenn du das Theme wechselst (lies mehr zu diesem Thema unter Github).
Editor-Stil
Der Editor-Stil ist eine mit WordPress 3.0 eingeführte Funktion, mit der Theme-Entwickler dem TinyMCE-Editor benutzerdefinierte Stile hinzufügen können. Gutenberg unterstützt auch diese Funktion, funktioniert jedoch anders als der klassische Editor, der Stile direkt in den iframe des Editors lädt. Gutenberg fügt bestimmte CSS-Selektoren hinzu, da kein iframe verwendet wird.
Unterstützung für Editorstile können wir wie folgt hinzufügen:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Diese Funktion wird auch von Twenty Nineteen unterstützt. In Editor-Stile in Gutenberg kannst du tiefer in dieses Thema eintauchen.
Block Farb-Paletten
Gutenberg bietet im Bereich der Farbeinstellungen des Editors eine allgemeine Farbauswahl. Theme-Entwickler können dieses Tool durch Hinzufügen von benutzerdefinierten Farbpaletten verbessern, sodass User schnell die richtige Farbe für Blockhintergrund und Text finden können. Dies ist ein zweistufiger Prozess:
Zuerst müssen wir eine Reihe von Farben angeben:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Dann müssen wir die entsprechenden Stile im Stylesheet des Themes angeben:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Klassennamen beginnen mit has-, gefolgt von der Farbschneide in Kebab-Case und endet mit dem Kontext, de color oder background-color sein kann. Momentan unterstützt Twenty Nineteen keine Blockfarbenpaletten, aber wir können dies leicht mit einem Child-Theme ändern.
Wenn du eine benutzerdefinierte Farbpalette deaktivieren möchtest, musst du der Funktionsdatei des Themes oder des Child-Themes die folgende Zeile hinzufügen:
add_theme_support( 'disable-custom-colors' );Block Schriftgrößen
Ein Theme kann auch den Standardsatz der Schriftgrößen von Gutenberg überschreiben. Hier ist ein Beispiel für den Code, den du zur Funktionsdatei hinzufügen solltest:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );Die neuen Schriftgrößen werden der Schriftgrößenauswahl in den Gutenberg-Texteinstellungen hinzugefügt.
Im Folgenden müssen wir die entsprechenden Stile im Stylesheet des Themes angeben. Klassennamen beginnen mit has-, gefolgt vom Namen der Schriftgröße in Kebab-Case und endet mit -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen bietet keine spezifischen Schriftgrößen und ist auf die Standardwerte von Gutenberg angewiesen.
Notiz: Denke daran, dass du den Code durch die Aktion after_setup_theme verknüpfen musst, damit der gesamte Code funktioniert.
Zusammenfassung
Twenty Nineteen könnte für persönliche Blogs gut funktionieren, und du kannst es dir eher wie eine weiße Leinwand als ein voll funktionsfähiges WordPress-Theme vorstellen. Ein so minimaler Ansatz könnte ein wenig einschränkend sein, wenn es um das Erstellen von Websites für Unternehmen und E-Commerce geht. Mach dir jedoch keine Sorgen: Neue Funktionen sollten in Kürze implementiert werden, und wir könnten bald eine leistungsfähigere Version von Twenty Nineteen sehen.
In der Zwischenzeit kannst du dir auch einige Themes ansehen, die Gutenberg bereits unterstützen. Atomic Blocks, GeneratePress, Gutentype und Divi, um nur einige zu nennen, aber viele andere sollten bald kommen. Da WordPress 5.0 so schnell näherkommt, ist die Unterstützung von Gutenberg keine Option, und Entwickler sollten den neuen WordPress-Editor so schnell wie möglich nutzen, um der Konkurrenz einen Schritt voraus zu sein.
Hast du Twenty Nineteen oder irgendein Theme installiert, das Gutenberg unterstützt? Wir würden in den Kommentaren gerne hören, was du denkst.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Schreibe einen Kommentar