SlideShare ist ein Scribd-Unternehmen logo
1 von 30
Downloaden Sie, um offline zu lesen
UX-Probleme mit dem neuen
Block-Editor (Gutenberg)
WordCamp Osnabrück 2019
Torsten Landsiedel
@zodiac1978
Spalten in Spalten - BOOM!
Gefixt in Gutenberg 5.2
(kommt dann mit WordPress 5.2)
Abstandshalter reagiert nicht?
● Mindestwert 20
● 10er-Schritte
Abstandshalter
WordPress Workflow Weirdness
File-Block einbauen, Datei auswählen, URL kopieren, File-Block löschen - Really?
Workflow für einen PDF-Link
Block-Editor
Classic-Editor
Workflow für einen Mailto-Link
Kaputter Block - was nun?
Kaputter Block
Egal was ich mache oder klicke ...
Kaputter Block
… es endet in jedem Fall in Plain HTML.
Wo zur Hölle ist noch mal ...
Konsistenz im UI?
Warum kann man fast alle Elemente in der
Toolbar zentrieren, aber Überschriften in der
Sidebar?
Ansicht anpassen
Custom Fields aktivieren?
Überflüssiges ausblenden?
Optionen – Voilá!
Wo ist der Anfasser?
Usability-Aufgabe: Nimm einen Block in einem Mehr-Spalten-Design und
ziehe ihn an einen anderen Ort.
Jedes Mal wieder scheitere ich daran den “Anfasser” zu finden ...
Page Builder?
Davor haben mich meine
Eltern doch immer gewarnt ...
Lock-in Effekt + Performance-Problem
Installiert man sich mehrere Block-Plugins (oder Sammlungen) ist es sehr schwierig davon wieder
wegzukommen. Benötigt man einen Block, den diese Sammlung nicht hat, installiert man die nächste …
Es fehlt ein globales An- und Ausschalten aller Blocks, um diesen Effekt abzufedern.
Eine Portabilität zwischen Blöcken wird es wohl nur bei bestimmten Core-Blöcken geben. Richtig
praktisch wäre eine Migrationsmöglichkeit zu anderen Block-Sammlungen.
Umlauterer Wettbewerb
Normalisieren zu NFC
Insbesondere am Mac ein Problem von “unechten”
Sonderzeichen, wo das Zeichen (z.B. “ä”) aus zwei
Zeichen kombiniert wird (a + ̈) und so
Rechtschreibprüfung, Suche, Transliteration, etc. kaputt
macht.
Wird in Gutenberg beim Einfügen repariert, aber nur bei
modernen Browsern, die das unterstützen und nur im
Inhaltsbereich.
HTML-Ansicht beim
Block-Editor?
Gibt es die überhaupt noch?
Per Seite/Beitrag
Code Editor
Am Block
Edit as HTML
“Disable visual editor when writing”
Disable visual editor when writing
Disable visual editor when writing
Disable visual editor when writing
Ich sehe keinen sinnvollen Anwendungsfall mehr für diese Checkbox in der Gutenberg-Zeit.
Ist Gutenberg noch nie aktiv gewesen, startet man mit einem Classic-Block ohne Möglichkeit in Blöcke zu
konvertieren und ohne jegliche Styling-Möglichkeit (keine Toolbar).
Ist Gutenberg schon länger aktiv, dann landet man nicht in der “Edit as HTML”-Ansicht der Blöcke, die
das Anbieten, sondern Gutenberg wird komplett in den Quelltext-Modus gesetzt. Inklusive dem
Kommentar-Markup zur Steuerung der Blöcke. Mit hohem Risiko bei Änderungen alles kaputt zu
machen.
Quo vadis WordPress-Suche?
Interne Suche von WordPress korrumpiert
Gutenberg speichert alle Blöcke mit HTML-Kommentaren im post content ab. Dadurch werden Suchen
nach “paragraph” oder “image” ziemlich nutzlos, da sie für fast jede Seite/jeden Beitrag nun ein Ergebnis
liefern.
Das Problem existiert eigentlich schon immer, aber bei HTML-Befehlen ist das Problem nicht so schlimm
(paragraph -> p, image -> img).
Und es kommen immer mehr Blöcke dazu, das Problem nimmt also zu.
Kommentare im “post content”
Vielen Dank für eure Aufmerksamkeit!
Frage?
Anmerkungen?
Kritik?
Eigene Erfahrungen?

Weitere ähnliche Inhalte

Ähnlich wie UX-Probleme mit dem neuen Block-Editor (Gutenberg)

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)Michael Whittaker
 
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...busitec GmbH
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitFabian Jakobs
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web ToolkitTorben Brodt
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3webpard UG
 

Ähnlich wie UX-Probleme mit dem neuen Block-Editor (Gutenberg) (7)

Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
Welches Versionskontrollsystem sollte ich nutzen? (SVN, Git, Hg)
 
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
SharePoint Gotcha - 10 Besonderheiten, die man als SharePoint Anwender kennen...
 
Qooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui ToolkitQooxdoo 0.8 - Das Neue Gui Toolkit
Qooxdoo 0.8 - Das Neue Gui Toolkit
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
 

Mehr von Torsten Landsiedel

Das Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisDas Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisTorsten Landsiedel
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!Torsten Landsiedel
 
Die schmutzige Seite von WordPress
Die schmutzige Seite von WordPressDie schmutzige Seite von WordPress
Die schmutzige Seite von WordPressTorsten Landsiedel
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionTorsten Landsiedel
 
Umgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressUmgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressTorsten Landsiedel
 
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binWie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binTorsten Landsiedel
 
Contact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürContact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürTorsten Landsiedel
 
Social Media Menüs in WordPress
Social Media Menüs in WordPressSocial Media Menüs in WordPress
Social Media Menüs in WordPressTorsten Landsiedel
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5Torsten Landsiedel
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressTorsten Landsiedel
 
WordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinWordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinTorsten Landsiedel
 
Podcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsPodcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsTorsten Landsiedel
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenTorsten Landsiedel
 

Mehr von Torsten Landsiedel (19)

Das Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisDas Health Check Plugin in der Praxis
Das Health Check Plugin in der Praxis
 
Oh, no! DSGVO.
Oh, no! DSGVO.Oh, no! DSGVO.
Oh, no! DSGVO.
 
WordPress kaputt machen
WordPress kaputt machenWordPress kaputt machen
WordPress kaputt machen
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!
 
Die schmutzige Seite von WordPress
Die schmutzige Seite von WordPressDie schmutzige Seite von WordPress
Die schmutzige Seite von WordPress
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano Edition
 
Umgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressUmgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPress
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
 
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binWie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
 
Das Child-Theme-Dilemma
Das Child-Theme-DilemmaDas Child-Theme-Dilemma
Das Child-Theme-Dilemma
 
Contact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürContact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und Kür
 
Social Media Menüs in WordPress
Social Media Menüs in WordPressSocial Media Menüs in WordPress
Social Media Menüs in WordPress
 
Mitmachen bei WordPress
Mitmachen bei WordPressMitmachen bei WordPress
Mitmachen bei WordPress
 
MetaMeetup
MetaMeetupMetaMeetup
MetaMeetup
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
 
WordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinWordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in Berlin
 
Podcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsPodcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-Blogs
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 

UX-Probleme mit dem neuen Block-Editor (Gutenberg)

  • 1. UX-Probleme mit dem neuen Block-Editor (Gutenberg) WordCamp Osnabrück 2019 Torsten Landsiedel @zodiac1978
  • 3.
  • 4. Gefixt in Gutenberg 5.2 (kommt dann mit WordPress 5.2)
  • 6. ● Mindestwert 20 ● 10er-Schritte Abstandshalter
  • 8. File-Block einbauen, Datei auswählen, URL kopieren, File-Block löschen - Really? Workflow für einen PDF-Link
  • 10. Kaputter Block - was nun?
  • 11. Kaputter Block Egal was ich mache oder klicke ...
  • 12. Kaputter Block … es endet in jedem Fall in Plain HTML.
  • 13. Wo zur Hölle ist noch mal ...
  • 14. Konsistenz im UI? Warum kann man fast alle Elemente in der Toolbar zentrieren, aber Überschriften in der Sidebar?
  • 15. Ansicht anpassen Custom Fields aktivieren? Überflüssiges ausblenden? Optionen – Voilá!
  • 16. Wo ist der Anfasser? Usability-Aufgabe: Nimm einen Block in einem Mehr-Spalten-Design und ziehe ihn an einen anderen Ort. Jedes Mal wieder scheitere ich daran den “Anfasser” zu finden ...
  • 17. Page Builder? Davor haben mich meine Eltern doch immer gewarnt ...
  • 18. Lock-in Effekt + Performance-Problem Installiert man sich mehrere Block-Plugins (oder Sammlungen) ist es sehr schwierig davon wieder wegzukommen. Benötigt man einen Block, den diese Sammlung nicht hat, installiert man die nächste … Es fehlt ein globales An- und Ausschalten aller Blocks, um diesen Effekt abzufedern. Eine Portabilität zwischen Blöcken wird es wohl nur bei bestimmten Core-Blöcken geben. Richtig praktisch wäre eine Migrationsmöglichkeit zu anderen Block-Sammlungen.
  • 20. Normalisieren zu NFC Insbesondere am Mac ein Problem von “unechten” Sonderzeichen, wo das Zeichen (z.B. “ä”) aus zwei Zeichen kombiniert wird (a + ̈) und so Rechtschreibprüfung, Suche, Transliteration, etc. kaputt macht. Wird in Gutenberg beim Einfügen repariert, aber nur bei modernen Browsern, die das unterstützen und nur im Inhaltsbereich.
  • 22. Gibt es die überhaupt noch? Per Seite/Beitrag Code Editor Am Block Edit as HTML
  • 23. “Disable visual editor when writing”
  • 24. Disable visual editor when writing
  • 25. Disable visual editor when writing
  • 26. Disable visual editor when writing Ich sehe keinen sinnvollen Anwendungsfall mehr für diese Checkbox in der Gutenberg-Zeit. Ist Gutenberg noch nie aktiv gewesen, startet man mit einem Classic-Block ohne Möglichkeit in Blöcke zu konvertieren und ohne jegliche Styling-Möglichkeit (keine Toolbar). Ist Gutenberg schon länger aktiv, dann landet man nicht in der “Edit as HTML”-Ansicht der Blöcke, die das Anbieten, sondern Gutenberg wird komplett in den Quelltext-Modus gesetzt. Inklusive dem Kommentar-Markup zur Steuerung der Blöcke. Mit hohem Risiko bei Änderungen alles kaputt zu machen.
  • 28. Interne Suche von WordPress korrumpiert Gutenberg speichert alle Blöcke mit HTML-Kommentaren im post content ab. Dadurch werden Suchen nach “paragraph” oder “image” ziemlich nutzlos, da sie für fast jede Seite/jeden Beitrag nun ein Ergebnis liefern. Das Problem existiert eigentlich schon immer, aber bei HTML-Befehlen ist das Problem nicht so schlimm (paragraph -> p, image -> img). Und es kommen immer mehr Blöcke dazu, das Problem nimmt also zu.
  • 29. Kommentare im “post content”
  • 30. Vielen Dank für eure Aufmerksamkeit! Frage? Anmerkungen? Kritik? Eigene Erfahrungen?