So, es geht weiter.
Der Lars wird euch jetzt was überGutenberg UI mit JSON-Schema Generierung
erzählen und viel Spaß.
Genau.
Doch nicht vorher, Mensch.
Vorab vielleicht mal ein paar Fragen.
Wer von euch kennt JSON-Schema oder hatschon mal was gemacht damit?
Also nicht keiner, das ist schon mal gut.
Wer von euch hat mal eine Settings-Pagefür WordPress-Admin selber gebaut?
Auch nicht keiner, das war auch sehr gut.
Und jetzt die Spitzenfrage.
Wer von euch kann React?
Schade, ich habe gehofft, es sind weniger.
Okay, wir kommen gleich auf die ebengestellten Fragen zurück.
Herrlich.
Wenn ich fertig bin, ist der Vortrag umübrigens.
Genau.
Also, in WordPress wird JSON-Schema auchheute, oder eigentlich nicht erst seit
heute, schon so eineganze Weile, eigentlich schon
ein paar Jahre, eingesetztan verschiedensten Stellen.
Und JSON-Schema wird dort genutzt,um Daten zu modellieren.
Mal so ein Beispiel, deswegen habe icheben gefragt wegen der Settings-Page,
wenn man eine Settings-Pagemacht, sagt man vorher
Register Settings unddeklariert seine Datenstruktur.
Sagt also, hier kommt jetzt ein Stringrein.
Oder ein Array von Strings oder dies,das, jenes.
Also man gibt die Datenstruktur schon malrein, damit WordPress mit dieser
Datenstruktur schon Validierung machenkann und so weiter und so fort.
Und so wie man das bei derSettings-Page macht, so wird
das an ganz vielen anderenStellen auch schon benutzt.
Also nehmen wir mal, wir nehmen dieREST-API.
Wenn ich eine REST-API Endpoint mache,muss ich auch einen JSON-Schema angeben,
damit validiert werden kann, wenn die APIder Endpoint aufgerufen wird, dass die
Daten vorher schon geprüft und validiertwerden können, ob die denn valide sind.
Und so gibt es noch viele, viele andereStellen, wo das heute schon eingesetzt wird.
Es gibt noch ein paar Stellen,die sind nicht ganz so offensichtlich,
wie zum Beispiel, wenn ich einenGutenberg-Block habe.
Ein Gutenberg-Block hat eine block.json,eine Datei, in der drin steht,
was der Block kann, was er macht undwelche Attribute er hat.
Also eigentlich das, was man auf der rechtenSeite in dieser Sidebar eingeben kann.
Wenn man sich das mal genauer anguckt,was da in der block.json drin steht oder
was da so definiert ist, also in diesenAttributen.
Also mit anderen Worten, den Daten,die man eingeben kann.
Dann stellt man fest, dass das wie so eineArt JSON-Schema ist, ein bisschen weniger.
Man könnte das, was da drin definiertwird, auch mit JSON-Schema beschreiben.
Man hat sich aber damals dafürentschieden, vielleicht hat man es nicht
gekannt oder vielleicht war man sichunsicher, das zu nehmen.
Man hat gesagt, okay, wir machen hierAttribute mit einem eigenen Ding.
Aber eigentlich ist das, was da drin steht,auch nichts anderes wie ein JSON-Schema.
Jetzt ist es so, JSON-Schema definiertalso eine Struktur.
Sagen wir mal, was nehmen wir mal?
Den Klassiker.
Wir haben eine Adresse, also einen Namen,eine E-Mail-Adresse.
Wegen mir noch einGeschlecht, ach nee, das soll
vielleicht optional sein,geht keinem was an.
Alles solche Sachen kann man in so einerStruktur angeben.
Und da liegt es ja eigentlich nahe.
Also man kann jetztklassischerweise hergehen und die
Oberfläche dazu programmieren,mit React zum Beispiel.
Oder wenn es eine Settings-Page ist,eben mit PHP.
Aber eigentlich muss man das überhauptnicht.
Weil in der Strukturso gut wie alles drin
steht, was man braucht,um die Oberfläche...
zu generieren.
Also mit anderen Worten,um ohne React-Code
zu schreiben, dieOberfläche dafür zu kriegen.
Ich bringe jetzt mal den Eyecatcher dafür,also Settings-Page.
Settings-Page heißt, ich registriere,wie meine Daten aussehen.
Also ich übergebe einen JSON-Schema.
Und danach muss ichmich mit PHP hinsetzen und
muss die Oberflächedazu zusammen stricken.
Also noch einen Input, Type-Text machen,dieses, jenes und so weiter und so fort.
Dazu nehmen wir uns mal...
Mensch, ist das klein... äh, also großmeine ich.
Dazu nehmen wir uns mal die Settings-Pagevon WooCommerce zum Beispiel.
Die haben wir hier irgendwo.
Ja, ich habe mal Zeit.
Hier.
So.
So, das ist jetzt so eine klassische,der eine oder andere kennt die...
Seite, die im Augenblicknoch, also wie Settings-Pages
heutzutage aussehen,mit HTML gemacht ist.
Wo ich irgendwelche Tabshabe, wo ich irgendwelche
Eingabefelder habeund so weiter und so fort.
Und die ganzen Settings, die wir hiersehen, sind einmal hinprogrammiert.
Und zum anderen auch über Register Settingsals Struktur schon mal WordPress gegeben.
Das heißt, WordPress weiß vorher auchschon, es gibt hier eine Adressline 1,
Adressline 2, City... und zwardas Wort, das weiß das alles schon.
Jetzt kann man hergehen und kann sagen...
Ich demonstriere das mal kurz.
Wir haben jetzt hier, also ich habe jetzthier nicht alle Tabs nachprogrammiert, ne?
Ich habe jetzt nur zwei Tabsnachprogrammiert.
Können ja nochmal runterscrollen.
Halt, ich habe ja nicht programmiert,ne?
Ich habe nur konfiguriert.
Wir können ja jetzt sagen so, okay,wir haben ja jetzt schon die Daten,
die für das WordPress, für dasWooCommerce-Plugin deklariert sind.
Jetzt gucken wir mal, ob wir die nichtnehmen können.
Und daraus ableiten können, wie dieOberfläche aussieht.
Und das geht auch ganz gut.
Also wenn wir jetzt das anderedaneben legen könnten, dann
würde man sehen, dass dieSeite exakt genauso aussieht.
Dass ja auch der gleiche Quatsch drinsteht.
Dass das alles gleich ist.
Der feine Unterschied ist, dass das,was wir hier sehen, jetzt nicht nur so ein
bisschen anders aussieht, sondern allesdas, was wir hier sehen, ist Gutenberg-UI.
Also das ist, als ob ihr das mit Reactprogrammiert habt.
Nur, dass ihr es nicht mit Reactprogrammieren musstet.
Weil dafür gibt es den guten alten JSON-Schema-Field-Form-Renderer.
Das ist also ein Stück React-Code, denJSON-Schema nimmt und das in React rendert.
Der ist entstanden beim CloudFest-Hackathon, dieses Jahr im Frühjahr.
Und der wurde in den letzten drei Monatenetwas stiefmütterlich, aber davor sehr
intensiv, und es geht auch weiter damit,entwickelt.
Und der wird an ganz vielen Stellen,die wir uns gleich mal angucken,
kann man den benutzen, zum Beispiel,um zu sagen, nee, ich habe jetzt keinen
Bock mehr, irgendwelche Settings-Pages zuprogrammieren.
Ich habe doch hier schon mein Schema,mein Settings-Page-Schema zum Beispiel,
meine WordPress-Settings schon angegeben.
Das rendern, das kann doch bitte jemandanders machen.
Jetzt gucken wir uns mal an, wie sichsowas äußert oder wie das dann so aussieht.
Gott, ist das groß.
Ach ja.
Ich habe es gleich.
Hier haben wir jetzt mal das JSON-Schemavon der WooCommerce-Seite.
Mach das mal hier unten zu.
Hier steht also alles das drin,was wir eben auch gesehen haben.
Hier, welche Länder gibt es, welche, na,was soll da stehen?
General soll das Store-Address stehen.
Wenn wir jetzt mal hier reingucken, stehtda ja auch tatsächlich Store-Address.
Und wenn wir das jetzt hier ändern,machen wir jetzt mal.
Wir speichern das mal.
Mit etwas Glück sehen wir jetzt auchGeschäftsadresse da stehen.
Das heißt also, es ist eigentlich relativeinfach.
Richtig schreiben hätte ich es könnennoch, aber naja.
Das heißt, es ist relativ einfach,sowas in JSON hinzuschreiben.
Und man hat es ja eh schon getan, wennman Settings-Pages für seine Plugins macht.
Das heißt, was man mit diesem Rendererreichen kann, ist zum Beispiel im Falle
von Settings-Pages, dass man nur noch seinSchema schreibt, aber nicht mehr das
Rendering der Settings-Page erledigen muss,weil das nämlich automatisch passiert.
Aufgrund der Daten, die man sowieso schonvorher drin stehen hat.
Und das Ganze wird in Gutenberg-UIgeneriert.
Und jetzt denken wir mal dran,wo WordPress gerade ist.
Also eine Sache, die bei WordPress oderbei WordPress ist Gutenberg total toll.
Site Editor sieht total toll aus.
Und WPAdmin-Dashboard sieht jetzt nicht sotoll aus.
Das hat ja auch Automatticerkannt, das hat auch
wordpress.org erkannt undman macht ja auch was daran.
Das Ganze wird ja gerade komplett neugemacht.
Damit es total schick aussieht und sollauch alles mit Gutenberg gemacht werden,
beziehungsweise mitReact-Controls, damit es
auch stylebar ist undso weiter und so fort.
Das Problem daran ist, man muss das immernoch alles mit React machen.
Ich will euch mal zeigen, was das heißt.
Wenn ihr jetzt irgendwie, sagen wir mal,in 2, 3, 4, 5 Jahren
mal, eine Settings-Page machen wollt,
dann könnt ihr, warum ist das eigentlichso irrsinig,
dann schreibt ihr in 3, 4, 5 Jahren, alsolernt ihr erstmal alle React, das ist klar.
Und dann schreibt ihr hier solche tollenSachen dahin.
Also das ist schon eine tolle API.
Das ist jetzt zum Beispiel Dataviews,die sind jetzt gerade relativ neu drinne.
Das ist eine total tolle API, mit der kannman, wie mit Gutenberg auch, kann man die
tollsten Sachen programmieren und kann dieauch schön programmieren.
Aber man muss extrem viel mehr wissen.
Es reicht halt nicht mehr PHP zu wissenund man muss eine ganze Menge,
also das hier, was wir hier sehen zumBeispiel, man muss eine ganze Menge
programmieren oder wie ich sage,man schreibt sich die Finger wund.
Das muss man aber eigentlich gar nicht.
Und das zeige ich euch jetzt mal an einemkleinen Beispiel.
Wo stehe ich zeitlich?
Es gibt also. Mein Gott ist das groß.
Guter Hinweis.
Ja, aber ich kommegerade nicht ran, ich habe
es ausgeschaltet, weildas scrollbar hier unten.
Naja.
Ach, Moment mal, ich bin Pfiffikus,ich mache es hier.
Und jetzt mache ich. Nicht schlecht.
Genau.
Jetzt gucken wir uns mal ein einfachesBeispiel an, damit ihr euch mal eher so
vorstellen könnt, ja, hm hm hm,wie gehen das jetzt?
Wir haben jetzt hier die eben erwähnte,so eine Art Adresse.
Wir haben gesagt, pass mal auf,hier gibt es jetzt so, keine richtige
Adresse, aber fast, wir haben jetzt hierso eine Registration-Form gemacht mit
einem Text und haben jetzt gesagt,so, was brauchen wir denn jetzt?
Was wollen wir denn jetzt alles da drinhaben?
Naja, wir haben jetzt hier eineEigenschaft.
First Name, das soll ein Text sein.
Was soll da da stehen?
Was soll das Default sein?
Ach ja, und es soll ein String sein,natürlich.
Wir haben Last Name, soll auch so ein Dingsein.
Wir haben Hobbies.
Hier stehen jetzt schon irgendwelcheBeispiele, die man eingeben soll.
Das ist aber ein Freitext-Feld.
Wir haben ein Alter, das ist natürlicheine Zahl, das ist klar.
Kann man noch weiter einschränken.
Es soll noch positiv sein.
Minus zwei Alter geht ja nicht.
Habe ich jetzt mal der Einfachheit halberrausgelassen.
Wir haben ein Text-Feldfür das Bio.
Wir haben ein Passwort-Feld ausirgendwelchen Gründen.
Ach so, weil es eine Registration-Formist, genau.
Und dann haben wir hier nochaus irgendwelchen Gründen,
haben wir jetzt hier nochso einen Boolean-Wert.
Er muss jetzt mal das License-Agreementmit reinmachen.
Und weil wir das alles so hingeschriebenhaben, jetzt mal hier an dem Beispiel hier
unten, weil wir gesagt haben, es gibt hiereine Eigenschaft, agree terms,
und die ist vom Boolean macht er uns.
Wer hätte das gedacht?
Natürlich das entsprechende Control dafürhin.
So.
Jetzt kann man sich fragen, warum müssenwir jetzt keine Checkbox?
Weil der Renderer sagt, der Renderer istdas Ding, dieses Gutenberg-Renderer-Field
-Ding, weil der Renderer eben sagt, ist einBoolean, Boolean rendere ich halt immer so.
Ist auch nur die halbe Wahrheit,weil, ich will auf ein nächstes Ding
nämlich zu sprechen kommen, alles das,was man in einer solchen Struktur
definiert hat, für dasgibt es erstmal immer eine
Antwort von einemRenderer, wie der die rendert.
Und das Default-Verhalten für ein Booleanist natürlich eine Checkbox.
Ich habe aber gesagt, das ist ein weiteressozusagen Feature von diesem Ding,
man will manchmal so Customization haben,also so ein bisschen so, man will zum
Beispiel sagen, agree terms ist eineCheckbox, aber da habe ich eigentlich
keinen Bock drauf, ich will jetzt mal soein, wie heißt das Ding, einen Toggle haben.
Und wenn man das nicht will, das istnämlich in Wahrheit das Default,
dann wird mir hier tatsächlich eineCheckbox hingemacht.
Und wenn man jetzt hier unten drunterguckt, in dem Playground kann man sich das
hier anzeigen lassen, was dann untenrauskommt, kriegt man das ganze Formular,
kriegt die Validierung undkriegt auch die Daten, die
diesem Schema, was man hiereingegeben hat, entsprechen.
So und jetzt kann ich hier genauso gut,ich mache es mal wieder rein, kann man
hier sagen, nee, mach mir mal ein Toggle-Widget raus, oder mach mir, man kann ja
auch ein ganz eigenes Widget machen, odermach mir ein ganz eigenes Widget draus.
Ein gutes Beispiel dafür ist,
verdammt, mit dieser Ansicht komme ich soschlecht klar.
Ein gutes Beispiel dafür ist, was ihr allekennt irgendwie,
wenn ich hier in der Page drinnen bin,haben wir hier drüben, also ein Block hat
ja auch Attribute, Attribute sind nichtsanderes als ein Schema.
Und dann kann ich jetzt hier sagen,
dann haben wir jetzt zumBeispiel hier eine Sites,
und da haben wir jahier nicht, was ist Sites?
Sites ist eigentlich in Schemaausgedrückt ein String, und
der String darf nur die WerteS, M, L, XL, XXL annehmen.
Das heißt eigentlich, wenn das hier mitdem Schema-Renderer gemacht wäre,
würde man das auch anzeigen, es würde abernicht so angezeigt werden, über dieses
Spezialkontroll, sondernes würde eine Dropdown-Box
gerendert werden, mit diesenvier möglichen Werten drinnen.
Und voreingestellt wäre das Default,wenn man denn eins hätte.
Man kann aber, und das ist das,was man sieht in diesem UI-Widget,
wo wir halt dieses Toggle drinnen hatten,darüber kann man sagen, nee, machste
nicht, hab keinen Bock auf dieses Select-Ding, sondern ich möchte so ein Ding
angezeigt werden, dann kann man das sagen,UI-Widget soll sein, das fragt mich jetzt
nicht, wie das Controlheißt, aber dieses Dimension
oder Sites-Control, wie auchimmer, das gibt's ja schon.
Das heißt, man kann also auch exakt dieseOberfläche, wenn man das haben möchte,
auch machen.
Genauso wie ja hier oben so ein BackgroundDing ist, eigentlich ist das nur ein
String-Feld in Wahrheit, tief in sichdrin.
Dieses hier, wo dahinter der Color-Paletteist, aber in Wahrheit ist es nur ein
String -Feld, wo in den Hex- oder CSS-Farbwert drin gespeichert wird.
Das andere ist es gar nicht.
Alles das kann man mit diesem Rendererauch machen.
Und das Schöne ist, jetzt sagen wir mal,jetzt stellen wir uns mal vor,
ach, es sind jetzt schon irgendwie 10Jahre rum, Gutenberg entwickelt sich
weiter, die Stile, die verwendet werdensollen, sollen sich auch weiterverwenden.
Wenn man mit so einer Abstraktionsebene,die noch dazu euch die Arbeit leichter
macht, weil ihr nämlich kein React dafürbraucht, sondern weil ihr seid einfach so
gerendert wird, weil ihr nur JSON-Schemabenutzen müsst.
Dann nimmt man einfach den Renderer in dieHand, der ja auch nur JavaScript ist.
Und dann sagt man halt, okay, wirschreiben jetzt mal zum Beispiel das
Toggle -Widget um, machen das ganz andersund dann sieht das überall, in allen
Blöcken überall, siehtdas dann so aus, wie
es aussehen soll, nämlichin dem neuen Style.
Weil eben nichts mehrmit React programmiert
ist, sondern weil dasdeklarativ beschrieben ist.
Ich will euch gleich malzeigen, wie das ungefähr
aussieht, damit ihreine Vorstellung habt.
Also wie viel Aufwand das ist oder nichtist.
Hier bin ich falsch.
Habe ich noch drei oder zwei Minuten?
Geht noch, okay.
Hier oben drinnen, also ich grabe jetztmal hier in dem Quelltext von diesen
Dingen rum, ohne euch damit überfrachtenzu wollen.
Aber das möchte ich euch schon gerne malzeigen.
Sagen wir mal, wir gucken uns jetzt malan.
Das Toggle-Widget, also damit da so einToggle kommt und nicht eine Checkbox,
was muss ich denn dafür machen?
Es ist nur noch ein Klick away.
Hier ist es.
Also auch wenn ihr natürlich kein Reactschreiben sollt, ob ihr es glaubt oder
nicht, Zeile 10 fängt es an, Zeile 28 hörtes auf.
Das ist das Toggle-Widget.
Mehr muss man da gar nicht machen.
Das hier ist das echte Gutenberg-Control,Toggle-Control und der Rest drumherum,
dieses ganze Gegröße, was hier steht,das ist nur dafür da, um die Anwendung von
dem JSON-Schema-Renderer auf dasToggle-Widget zu machen.
Das heißt, mit anderen Worten,ich hoffe, der eine oder andere stimmt mir
an der Stelle zu, so richtig viel Aufwandist das nicht.
Man kann also relativ einfach Dingeeinbinden, Gutenberg-Controls,
zum Beispiel eben dieses Sides-Control, waswir vorhin hatten, oder, oder, oder, oder.
Genauso wie, das hatten wir vorhin hier indiesem anderen Beispiel, in der
Settings-Page, genauso wie ichgesagt habe, achso, da komme
ich jetzt wieder nichtdrauf in dieser Ansicht,
hier, na, ja doch, hier.
Na, jetzt haben wir hier das Tab-Control,kann man sich auch fragen, Tab-Control,
keine Ahnung, kann ich ja gar nicht inJSON-Schema angeben.
Muss man aber gar nicht.
Aber man kann über diese Customization,die man eingeben kann, sagen, hm,
pass mal auf, hier in der Struktur,ich habe hier zwei Unterobjekte,
das eine sind die General-Eigenschaften,das andere sind die Product-spezifischen
Eigenschaften, stell die Dinger mal in demTab da.
Und da schreibt man auch wieder nurhin, UI-Widget, eben nicht das Default,
das Default hieße alles untereinandermachen oder in Akkordeon oder in was auch
immer, sondern ich sage, nö, hm,stellen wir das mal als Tab da.
So, und dann schreibe ich das halt rein inmein UI-File.
Das zeige ich euch auch nochmal kurz.
So, und da steht halt hier drin, nö, komm,machen wir mal ein Tab-Widget da oben hin.
Und weil das da steht, ist es halt in Tabsorganisiert.
Also es ist relativ einfach.
Oder, ich hoffe, ihr stimmt mir an derStelle auch zu. Das
ist doch wesentlich einfacher,als wenn ihr React programmieren müsst.
Viel viel einfacher.
Und, wenn sich irgendwann mal die Strukturdessen, wie Oberflächen in WordPress oder
Gutenberg aussehen sollen, ändert,und das ist ja einfach gesetzt,
dass sich Dinge ändern über die Zeit,dann muss man, wenn die Oberflächen mit
JSON-Schema geschrieben sind,falsch rum, äh, muss man lediglich den
Renderer, also ein kleines Stückchen Codeanpassen und alles, alles, alles,
sieht aus, wie das neue Gutenberg.
Egal, ob sich dieStrukturen oder irgendwelche
anderen Sachen untendrunter geändert haben.
So, jetzt zeig ich euchnochmal so einen kleinen
Bummer, der so einbisschen ganz cool ist.
Ne, ich erzähl's euch erstmal.
Also.
Der Christopher Kurz, ich weiß nicht,wer den kennt von euch, aber der eine oder
andere vielleicht, mit dem wir nicht zudem Hackathon gefahren, und hab dem so
erzählt, was ich da so vorhab und so,und der so, ja, hm, so, klingt ganz geil
halt so, aber der ist jetzt keinEntwickler, sondern eher so ein Agenturtyp.
Der hat gesagt so, hm, weißt du,was ich schon immer gerne gehabt hätte?
Ich hätte schon immer gerne mal,ich hab jetzt grad so einen Kunden zum
Beispiel, der bräuchte so ein,wie so eine Art Öffnungszeitenblock.
Gibt's vielleicht auch, ne?
Hat vielleicht auch irgendjemand schon malprogrammiert oder so.
Aber irgendwas passt ja erfahrungsgemäßauch immer nicht, deswegen gibt's ja 5000
Forms, Plugins, und es gibt ja für jedesDing immer 5000 Plugins.
Wenn man sowas damit macht, könnte mansowas damit machen?
Dann hab ich so gesagt so, warum bin ichnicht da drauf gekommen?
Na klar kann man sowas damit machen.
Also das Geile ist, man hat damit dieFreiheit, das ist nämlich auch ein
Anwendungszweck dafür, dassich ohne Code schreiben zu müssen,
erstmal in der Lage bin,prinzipiell Formulare zu machen.
Und die Idee an der Stelle war,wir gucken uns das auch gleich an,
also der, na, ich möchte Öffnungszeitenhaben, oder eine Menükarte, völlig egal,
irgend sowas, ne?
Irgendwelche individuellenDatenstrukturen.
Dann geht der Designer, also der,der die Webseite entwickelt für den
Kunden, geht rein in seiner Rolle alsnicht der Kunde, sondern der Entwickler,
also der Admin ander Stelle, schreibt das
Schema rein, wasÖffnungszeiten beschreibt.
Öffnungszeiten sind von Montag bis Sonntageinzugeben.
An jeden Tag können verschiedeneÖffnungszeiten sein, nämlich von 8 bis 10,
von 11 bis 13 Uhr, von mhm, mhm, mhm
vielleicht will man noch eine Beschreibungdazu machen und so weiter und so fort.
Man kann das also schon durchaus in soeine Struktur reingießen.
Und wenn das gemacht wurde von dem Admin,dann würde danach der Kunde reingehen,
und der Kunde würde an der Stelle in derSeite, wo es eingebettet wäre,
oder in den Seiten, wenn es ein reusableBlock ist, wie heißt das neudeutsch?
Anders auf jeden Fall, ihr wisst,was ich meine.
Würde der das Formular gerendert kriegen.
Das heißt, der wäre in der Lage,der würde gar nicht sehen, der würde also
nichts von dem JSONSchema sehen, der würde
das Formular sehenfür seine Opening Hours.
Und könnte seine Öffnungszeiten eingeben,ändern, dies, das, jenes.
Und auf der finalen Seite,ich weiß nicht, wer das
kennt, mal Hand heben,wer Interactivity API kennt.
Naja, ein paar immerhin.
Interactivity API wiederum würde dieeingegebenen Daten nehmen und darstellen.
Nämlich, wer hätte das gedacht, alsÖffnungszeiten auf der gepublishten Seite.
Das ist jetzt nur ein so ein Fall.
Menükarte ist das zweite, und so gibt esnoch tausend andere Fälle, wo man gar
nicht mehr programmieren müsste,sondern man durch reines Beschreiben
von der Datenstruktur, die gefordert ist,man das Formular gerendert kriegt,
was dann wiederum für den Kunden ja einenützliche Sache ist, um seine Daten
einzugeben, weil derwill ja weder JSON,
noch JSON-Schema, nochsonst irgendwas sehen.
Der will einfach ein Formular haben,wo sein Kram eingegeben wird.
Naja, jedenfalls habe ich mich dannhingesetzt und habe mal gesagt so, okay.
..
dann mache ich jetzt mal.
einen JSON-Schema dazu.
So, also stört euch bitte nicht daran,dass das jetzt ein bisschen Englisch,
ein bisschen Deutsch, ein bisschen mhm mhmist.
Das liegt nur daran, weil es.
noch so ein bisschen Hackathon-Stand ist.
So, also wir haben jetzt einen Titel hier,Öffnungszeiten.
Der steht eben da, weil,
hier oben irgendwo gesagt worden ist,dass der Titel eben,
irgendwo steht es hier.
eben Öffnungszeiten ist.
Also hier oben das Weekly Hours ist dashier, ne?
Und das hier, achso, das habe ich auchnoch nicht gesagt.
Der Playground, der ist live.
Ihr habt es ja vorhin schon gesehen,ne?
Das heißt, wenn ich hier irgendwastippe,
dann wird das eben auch gleich drübengerendert.
So, ne?
Jetzt gucken wir uns mal an, so diesesSchema, was das hier ist, ne?
Was kann man da jetzt so machen,so?
Okay, ich kann jetzt hierÖffnungszeiten.
Also das ist das Rechte, ist das,was der Kunde sehen würde.
Und jetzt kann ich hier sagen,so okay, naja, für welchen Wochentag denn?
Ja, Montag.
Und jetzt steht hier aber oben drüber so,das sieht so komisch aus, so Weekdays 1.
Hier steht Opening Hours 1.
Und dann steht das alles auch so komischuntereinander, ne?
Also die Öffnungszeiten von bis...
von denen es ja mehrere pro Tag gebenkann.
Die stehen jetzt da sountereinander und irgendwie
sieht das jetztirgendwie nicht geil aus.
Aber ich habe ja vorhingesagt, wir haben ja
die Möglichkeit, eineCustomization zu machen.
Das heißt, wir können jetzt zum Spielhergehen und sagen, also Opening Hours,
das hier, das will ichso individuell haben, da
schreibe ich mir eine eigeneReact-Komponente.
Wie vorhin dieses Height-Component,die wir vorhin gesehen
haben, wo man S, M, XL, XXLeingeben konnte im Gutenberg.
Könnte ich eine eigene hinterlegen,aber wir wollen ja kein React schreiben.
Brauchen wir auch gar nicht, oftmalsnicht.
Da kann man wieder zu diesem Customization-File gehen und kann jetzt sagen,
ich schreibe jetzt mal so weit wie es gehtmit diesem UI-Customization-Ding.
Mensch, die Zeit rennt.
Schreibe ich jetzt mal so einen.
Also wir sehen, das ist allesuntereinander.
Schreibe ich jetzt mal so einCustomization-File, geht immer noch nicht
mega aus, aber hey, das sieht schon malbesser aus.
Ich habe jetzt die Öffnungszeiten von 8bis 18 Uhr gemacht und ich könnte jetzt
nochmal dazufügen,
nochmal eine weitere.
Eine weitere von 20 bis, weiß ich nichtwas,
bis 22 Uhr oder oder oder.
Und ich kann auch dazu sagen, bitte nurmit Tischreservierung oder oder oder oder.
Völlig egal.
Und dass man das so machen kann.
Also auch hier hat man ganz vieleMöglichkeiten, Einfluss darauf zu nehmen.
Sagt man zum Beispiel.
Ich hab's gleich.
Hier, ne?
Class Names Striped Opening Hours,also diese Öffnungszeiten selber,
die sollen jetzt mal so striped halt sein.
Deswegen ist das hierweiß, das nächste ist ein
bisschen dunkler und dasnächste ist wieder anders.
Aber am Ende, ihr könnt's wahrscheinlicherahnen, ist das nur eine CSS-Klasse.
Und dass die Dinger nebeneinander sind,da steht hier auch irgendwo drin.
Naja, natürlich steht's nicht oben,es steht natürlich unten.
Ja klar.
Hier.
Class Names, Direction Horizontal.
Es könnte auch Direction Schnullibullioder Diagonale oder irgendwas sein.
Es ist nur eine CSS-Klasse, das ist derentscheidende Punkt an der Stelle.
Und als ich das Ding fertig hatte,ne?
Das ist jetzt nur malso ein Prototyp, um zu
zeigen, aha, da kann manja ne ganze Menge machen.
Und runter kommt so ein JSON-Schema wiederraus mit den Öffnungszeiten, die man dann
mit Interactivity API auch wiedergenerisch rendern könnte.
Alles super.
Und genau so könnte man jetzt natürlichauf den Kniff kommen.
Okay, wo haben wir denn jetzt nochJSON-Schema?
Wie viele Minuten hab ich noch?
Eine, zwei?
Null?
Ich will nochmal ausholen.
Wir haben ganz viele JSON-Schemas.
Also Dinge, wo wir Formulare, die imAugenblick auch im Gutenberg selbst drinne
programmiert sind, gar nicht mehrprogrammieren müsste.
Weil wir haben da schonJSON-Schema dazu rumliegen.
Mal so ein Beispiel.
Kennt der eine oder andere vielleicht?
Die theme.json.
theme.json ist eine Datenstruktur,die beschreibt, die alle Eigenschaften
beschreibt, wie ich für ein Theme ändernkann und wie ich die ändern kann.
Das ist ein riesen Editor.
Ihr könnt euch gar nicht vorstellen,wie riesengroß dieser Code dafür ist.
Das braucht man eigentlich gar nicht.
Weil, wenn man diese Komponente hat, kannman sich das automatisch ändern lassen.
Mal ein anderes Beispiel.
Eine package.json.
Kennt vielleicht auch der eine oderandere.
Was ist denn das?
Zu einer package.json gibt es einen Schema-File.
In dem Schema-File steht drinne, was ineiner package.json definiert werden kann.
Ein Name, eine Version, ein dies,ein das, ein jenes und auch nested.
Da können beliebig. Die ist ziemlichkomplex oder kann ziemlich komplex sein.
Dafür braucht man überhaupt kein Editorschreiben.
Weil ich mache hier das Schema rein.
Ich könnte es noch machen.
Die Zeit reicht leider nicht mehr.
Ich habe es aber da.
Dann macht man das hier rein.
Dann hat man ein Editor für einepackage.json im Grafischen.
Und jetzt sage ich euchmal, dass es natürlich nicht die
Erfindung von Herrn Gersmannist, sondern andere
Software-Anwendungen machen das schon.
Wer von euch benutzt Visual Studio Code?
Ihr habt alle schonmal die Einstellungen
aufgemacht bei VisualStudio Code, stimmt's?
Den Einstellungsdialog.
Und eigentlich ist das doch ganz pfiffig.
Da kommt ein neues Plugin rein.
Und ich kann oben über den Filter sagen,was ich sehen will.
Und ich sehe es für alle Plugins auch.
Das Formular ist immer da.
Und das sieht eigentlich auch halbwegsokay aus.
Das ist nicht gerendert.
Wer hätte das gedacht?
Sondern die machen es genauso.
Die machen also aus dem JSON-Schema vonden Einstellungen von Visual Studio Code
plus den JSON-Schema-Tar für dieEinstellung der einzelnen Plugins,
rendern die das Formular.
Mehr machen die auch nicht.
Also die leben genau dieses System,was man auch sehr, sehr gut, und das
sollte auch schon der Schlusssatz von mirsein, damit ich nicht vollständig
übertreibe, was man auch sehr gut beiGutenberg benutzen könnte.
Und natürlich auch für eure eigenenPlugins.
Das war's.
Auf Wiedersehen.
Ach so, eins noch.
Eins noch am Schluss.
Also natürlich, ne?
Gibt es dazu.
Ja, da frag ich nochmal.
Oder wir machen das irgendwie.
Also es gibt hierzu ein Repository aufGitHub.
Und in dem Repository gibt's.
Richtig geil.
Wer es noch nicht benutzt, sollte es malbenutzen.
Kunstpause.
Wartet, ich hab's gleich.
Hier gibt's den Playground-Link.
Ihr müsst hier nichts auschecken oderirgendwas kompilieren oder so.
Ihr klickt hier drauf.
Dann ist das Ding im Browser.
Dann habt ihr den ganzenKram, den ihr gerade
gesehen habt, inklusivedes Playgrounds.
Habt ihr dort, da kann man rumspielen,kann man rumexperimentieren.
Man kann das live ausprobieren.
Und der Plan ist.
Das will ich auch nochmal als wirklichletztes Wort, als letzten Satz hinzugeben.
Und der Plan ist, zumindest mein Plan ist,dass irgendwann mal, also die Hoffnung
stirbt zuletzt, dieser ganze Quatsch inGutenberg landet.
Damit ihr nicht irgendwann Settings-Pagesmit React schreiben müsst.
Vielen Dank.
Ja, gute Frage.
Ich hatte vorhin den Link schon offen.
Warte mal, ich mach das jetzt nochmal.
Ich mach das jetzt nochmal in groß.
Also huch.
Verdammt.
Warum geht das nicht?
Ging doch vorhin.
Nee, das ist zu groß.
So in etwa.
Also ich stehe dazu, ne.
Ich versuche das Ding auch inAnführungsstrichen zu vermarkten.
Ich quatsch damithier mit dem Riyad, mit
Adam Zielinski, habich da drüber gequatscht.
Die finden das alles super, finden dasalles spitze.
Aber es braucht halt Zeit.
Also, nicht zuletzt auch vonmeiner Seite, weil das muss
halt das entsprechendeFormat haben für Guttenberg.
Das muss halt TypeScript sein imAugenblick ist das JavaScript.
Das muss gewissen Konventionen entsprechenund so weiter und so fort.
Und das ist im aktuellen noch nichtgegeben.
Falls aber jemand von euch Bock hat.
Aktuell bin ich Einzelkämpfer an der Stelle.
Ihr seid herzlich willkommen.
Ihr könnt gerne mitmachen.
Genau.
Noch irgendwelche Fragen?
Dann sind wir doch in time.
Ach so, ja.