SlideShare ist ein Scribd-Unternehmen logo
1 von 62
Downloaden Sie, um offline zu lesen
„Gutenberg“
&
WordPress 5
Sören Wrede: @soean
Slides forked from Morten Rand-Hendriksen & Tammie Lister 
Inhalt
Projekt „Gutenberg“
• Was, Warum, Wie
WordPress 5.x
• Blöcke
• Editor
• Customizer
• Themes
• Wann?
Entwicklung
• Open Source
• Mitarbeiten
Fragen & Ideen
Neulinge, Autoren, Theme- & Plugin Entwickler, Admins, Unternehmen, …
Sören Wrede
# Webentwickler
# Hamburg
# Medieninformatik
# WordPress
Das Projekt
„Gutenberg“
Erfinder des modernen Buchdruckes mit beweglichen Metall-Lettern
Das Verwalten und Bearbeiten
von Web-Inhalten vereinfachenZiel?
Intuitiv
Einheitlich
Schnell
Multimedial
Kontextbezogen
Barrierefrei
Unterstützend
Kollaborativ
Erweiterbar
Was?
Shortcodes
Widgets
Custom Fields
Post Formats
Embeds
TinyMCE
PageBuilder
Metaboxen
Mobile
Medium, Wix, Squarespace
Drupal, Kirby, Typo3
…
Warum?
Blöcke
Individuell und Global
Drag & Drop
WYSIWYG
Copy & Paste
Editor + Customizer
JavaScript (ES6+/React)
Wie?
2003: WordPress 0.7
2005: TinyMCE
2013: Erste „Block“ Mockups
2015: „Learn JavaScript Deeply“
2016: Rest API + Core Fokus
2017: Prototypen + Betas + Tests
2018: Editor + Customizer + Theme
2019: …
Wann?
Entwicklung
> 2300 Github Issues
> 5000 Commits
> 140 Code Contributors
21 Beta (2-3 Wochen)
User-Tests
Reviews + Formular
Blogs + Forum + Tweets
Demo? Beta Status !
Blöcke
PHP
Blöcke
Statisch:
HTML beim Speichern erzeugt
Text-Absatz, Bild, Video, Tabelle, Button…
Dynamisch:
Von Server generiert (Datenbank, API)
Letzte Beiträge, Benutzerliste, ...
Komponente / Modul / Element / Baustein
Quellcode
Block API
Block API
Block API https://wordpress.org/gutenberg/handbook/
Weitere Features
Globale Blöcke
Erweiterbarkeit (Hooks, Slots, ...)
Definierte Block-Templates
Spalten / Verschachteln
WebRTC
Customizer, Widgets, Menü, Theme
Wann?
Ankündigung im Backend
Test auf wordpress.com
Merge Proposal
5.0 Beta / RC
Links
wordpress.org/gutenberg
Handbuch
Plugin
GitHub
https://www.elmastudio.de/blog/
https://gutenberg.report/
http://gutenberg.news/
http://gutenberg.courses/
https://frontenberg.tomjn.com/
https://github.com/ahmadawais/create-guten-block
Weitere
Links
Testen
Feedback geben
Dokumentation lesen
Eigene Blöcke erstellen
Gelerntes weitergeben (Talk, Blog, Twitter)
Pull Requests (GitHub!)
Was du tun kannst
Weiteres
Heath Check
WP Coding Standards
Min PHP Version
…
Preferred Languages
Two-Factor
Multisite Rest API
Twenty Eighteen Theme
Mediathek
Danke, gibt es Fragen?
Sören Wrede: @soean
Slides forked from Morten Rand-Hendriksen & Tammie Lister 

Weitere ähnliche Inhalte

Ähnlich wie Gutenberg & WordPress 5

Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMarisa Wollner
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
Schau, Mutti, keine Programmierzeile
Schau, Mutti, keine ProgrammierzeileSchau, Mutti, keine Programmierzeile
Schau, Mutti, keine Programmierzeilerokr
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz
 
Track Web 2 0 Bei Microsoft Customer
Track Web 2 0 Bei Microsoft CustomerTrack Web 2 0 Bei Microsoft Customer
Track Web 2 0 Bei Microsoft Customeratwork
 
Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...
Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...
Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...Markus Erle
 
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011David Decker
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress Michael Oeser
 
Web 2.0 und Social Media Marketing
Web 2.0 und Social Media MarketingWeb 2.0 und Social Media Marketing
Web 2.0 und Social Media MarketingKarin Oesten
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016André Scharf
 
Enterprise2punkt0
Enterprise2punkt0Enterprise2punkt0
Enterprise2punkt0Haymo Meran
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne WebentwicklungJens Grochtdreis
 
Web Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und InteraktionWeb Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und InteraktionBjörn Wilmsmann
 

Ähnlich wie Gutenberg & WordPress 5 (20)

Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
 
Referat
ReferatReferat
Referat
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Drupal - die ideale Basis für Medien
Drupal - die ideale Basis für MedienDrupal - die ideale Basis für Medien
Drupal - die ideale Basis für Medien
 
Schau, Mutti, keine Programmierzeile
Schau, Mutti, keine ProgrammierzeileSchau, Mutti, keine Programmierzeile
Schau, Mutti, keine Programmierzeile
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 
Track Web 2 0 Bei Microsoft Customer
Track Web 2 0 Bei Microsoft CustomerTrack Web 2 0 Bei Microsoft Customer
Track Web 2 0 Bei Microsoft Customer
 
Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot Digitale Mobilmachung - Wege zum mobilen Internetangebot
Digitale Mobilmachung - Wege zum mobilen Internetangebot
 
Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...
Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...
Responsive Content, Responsive Documents, Responsive PDF - Innovation durch B...
 
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Web 2.0 und Social Media Marketing
Web 2.0 und Social Media MarketingWeb 2.0 und Social Media Marketing
Web 2.0 und Social Media Marketing
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Vorstellung PG PLME
Vorstellung PG PLMEVorstellung PG PLME
Vorstellung PG PLME
 
Enterprise2punkt0
Enterprise2punkt0Enterprise2punkt0
Enterprise2punkt0
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Web Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und InteraktionWeb Design - Inhalte, Interfaces und Interaktion
Web Design - Inhalte, Interfaces und Interaktion
 
Bibliotheken und Social Media
Bibliotheken und Social MediaBibliotheken und Social Media
Bibliotheken und Social Media
 

Kürzlich hochgeladen

Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...DNUG e.V.
 
Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...DNUG e.V.
 
Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...
Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...
Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...Markus Unterauer
 
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data ImputationFEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data ImputationOPEN KNOWLEDGE GmbH
 
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die CloudFrom Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die CloudOPEN KNOWLEDGE GmbH
 
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...OPEN KNOWLEDGE GmbH
 

Kürzlich hochgeladen (6)

Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (1) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...
Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...
Rückwärts denken vorwärts handeln - Requirements Reverse Engineering bei Syst...
 
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data ImputationFEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
 
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die CloudFrom Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
 
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
 

Gutenberg & WordPress 5