Veerle Verbert and Werner Huysmans: Maak een Gutenberg-compatibel thema (basics and the quest)
Hallo, dus ik heb veel ervaring met de Kuttenberg Compatible Themasbouwer, en ook een eerste redelijk stevige experiment achter de rug, dan wel. Dus het is vooral vandaag een paar kweek winst dat we willen delen en een beetje de instinkers en de dingen die dan we zijn tegengekomen. Misschien even hoe over ons wijs gaan al even mee in het WordPress-wereldje hier, maar het was de eerste woordkant dat we erbij gewoond was WordPress in Nederland in 2010, als ik het goed heb. We werken al vrij lang bij WordPress, dus vooral Word Custom WordPress Development. Ik ben een beetje een allround diff, dus niet per se een deep diff, maar we hebben heel breed verschuld. Ik vind het javascript in de soort dingen het leukste. En in Antwerpen, een beetje mijn uitbreiding in België, ben ik ook nog wel actief in de lokale WordPress-community. Samen met Dave, we hebben ook al de twee wordcamps in Antwerpen organiseerd. En binnenkort onze vijftigste meet-up en april, dus wie dat zin heeft, kom af, 25 april, feestje. Een beetje quick overview van onze talk. Eerst een beetje quick winst. Kleine dingen die dat je kan doen waarmee je meteen kan profiteren in dat thema van nieuwe meisjes die daar binnen Geutembert beschikbaar zijn. Nadien focussen we specifiek op het project waar we gewerkt hebben, wat we nodig hadden. En nadien onze kwesten voor hoe we dan allemaal effectief in en uit de nieuwe editors te gaan krijgen. En met een paar take-aways hongen dat iedereen ook per is van Amerika. Quick winst. Ja, het werkt gewoon. Je hebt team support, bijvoorbeeld een berg meisjes die je kan toevoegen. Je kan zelfjaar je CSS-jaar beschrift toevoegen en blog templates. Dat kan er redelijk voor, denk ik, worden overlopen. It just works, bedoel, eigenlijk gewoon mee, want de content werkt nog altijd. Dus alles wat je in een editor de laterbees invliegt, komt er nog altijd in één erwelke thema gewoon mooi met de content uit. Dus eigenlijk zou je zelfs niks moeten doen of niks moeten veranderen aan je thema om toch Geutembert compatible te zijn. Dus dat is toch wel m'n redelijksteelige quick winst, denk ik zo. Twee kleine instinkertjes van It just works, ja. Maar om in een admin Geutembert als editor te krijgen, moet de rest API enabled zijn voor je custom post-type.  Dus op het moment dat je post-type registreert, kan je helemaal parameters meegeven. Showing rest, dat default of false. Dus dat dat je al post-type zet, of die dat door een plugin geregistreerd worden of die dat je vloer lang geleden in je tiff maakt geregistreerd, whereas API is nog niet zo lang in je wordpress score. Dus als je het editor niet ziet, checkt even of dat je parameter effectief wel troost staat. Kan je ook nog toevoegen na te registreren van je post-type. Een van de andere parameters is welk, wat je ook custom post-type support. Misschien een evidente instinker, maar editor moet daar effectief wel toestaan. Als je custom post-type geen editor support, heb je ook geen beoezend werk. Dan de team supports. Die zijn redelijk uitgebreid, uitgelegd in het handboek. Dus dan sowieso de slides delen, ook op alle stappen. We hebben geprobeerd zoveel mogelijk rechtstreekse links erin te zetten. Soms is het een beetje zoeken naar de juiste bronnen of juist informatie. Dus misschien de slides een beetje als uitgangspunt werken. De team supports, daarmee kan je in je eigen thema een paar van de Gutenberg-nices gaan activeren. Je moet die letterlijk gaan activeren, want Gutenberg heeft van zichzelf eigenlijk niet een eigen ontvelling je thema uit te gaan ingrijpen. Dat is niet moeilijk, wat dat ook is. Maar als je bevoorbeeld die Align White, Align White wil, die daar je waarschijnlijk al wel in verschillende Gutenberg-demo's bent tegenkomen, wil je dat ook in je eigen thema hebben, dan moet je letterlijk aan team support Align White gaan toevoegen en waarschijnlijk via functions PSP. Ook weer, ja, die hersen zijn die rechtstreekse links. Maar de moment dat je team support toevoert, kan je in de editor, krijg je die nieuwe opties voor verschillende bloggen, elke blog die dat support kan je dan nu ook op whitewit.com gaan zetten. Vergeet niet dat je dan ook wel in je eigen thema de juiste CSS moet gaan toepassen. Standaard gaat WordPress uit. Je kent de classes Align Left, Align Right wel. Je krijgt er nu twee nieuwe bij. Align White en Align Full. Dus zolang je niks in je CSS, dat komt niet vergeten, krijg je de knoppen wel, zie je geen effect. Hoe dat je die Align White, Align Full in je CSS juist implementeert, hangt een beetje van je thema af en van je structuur.  Er zijn wel verschillende opties. Ik heb nog een paar links aan toevoegen. Team Support voor de kleurpaletten. De standaard gaat Gutenberg eigenlijk een brede uitgebreid kleurpalette gaan suggereren. Ook mijn color picker, dat iedereen weet ik veel wat de kleur kan gaan toevoegen. Dat standaard kleurpalket palet van Gutenberg, dat kan je overrulen door je eigen colorpalet. Ik kan ook die color picker aanschakelen. Met redelijk basic code, dus via Team Support er is er colorpalet. Daaraan hang je je eigen kleurpalette door de slugs die je hier meegeeft aan je kleuren. Die gaan Gutenberg sowieso in classes meegangen aan de elementen waarop die kleur is gekozen. Dus ook weer terug om de links krijg je mooi de kleurenpickers en jouw kleurenpalet in de editor. Voeg je css2 voor alle kleuren die dat je toevoegt. En zowel als haas, slug background color maar ook voor de voorgrondkleur. Dat is de tekstkleur zelf voorbeeld. Is het een haas color css. Vergelijkbaar heb je voor de editor font sizes weer terug Gutenberg. Fond sizes suggereren die gaan je zelf gaan overrulen door font sizes die dat voor je eigen timmen een beetje strakker en een beter plan zijn. Ook de font size picker dus als iemand vrij een aantal pixels kan invullen kan je er ook uit flickeren. Vergelijkbaar de hd op weer terug naar het eilig met jouw font sizes. De editor gebruikt pixels die ik weet. Maar in je css kan je uiteindelijk je eigen font sizes toevoegen en dus kan je gerust met rums of ems werken of wat je tofst vindt. Team support dat is een beetje een veel warmte heb ik al gemerkt. Front and styles. A team support WP block styles. Die moet je letterlijk toevoegen. Maar eigenlijk gaat Gutenberg een hele op css in de front van je site aanspuren. Alle css die nodig is voor alles wat je uit te maken hebt. Daar heb je eigenlijk zo geen thema. Dus als je de column gaat toevoegen in Gutenberg, dan gaat in de css van je front als sowieso de css al zitten op dat je de diffs effectief mooi als columnen te zien zijn. Die WP block styles heeft niet echt iets met die basically uit te maken. Die heb je sowieso. Maar dat zijn een paar core blocks die dan wat extra styling krijgen.  Zoals de pull quote van de wp block styles toevoegd of actieveerd in het thema dan krijg je nog een neintje bovenin omhoog. Maar dat is al een beetje hoe zeg je dat? Ja. Dan gaat het eigenlijk al een beetje gaan moeien met de styling van je site. Daarmee moet je dan ook echt expliciet gaan toevoegen. Ben je niet akkoord met hoe de columns gebouwd zijn in de core Gutenberg css? Je kan ook al die reacties eruit gooien maar dan moet je echt gaan dequeen. En dan moet je ook wel weten wat jij moet doen want dan kan je alles ook media deft, text strike, ook al die blocken. Al je gaat er wel van mooi onder elkaar uitgespuit worden dus dan ben je ook verantwoordelijk voor al die css. Wat kan? Ja. Komt van het core maar hij gaat zich niet moeien dus hij gaat het niet sowieso uit spelen. Daarmee die acting support moet je echt expliciet in je thema aanroepen om die styling effectief te hebben. Alles wat je nodig hebt voor de langs zoals die columns enzo daar heb je sowieso de extra wat moet je nog gaan toevoegen? De editors. Je komt sowieso altijd al ook aan tiny mce een status sheet gaan meegeven om bijvoorbeeld de typografie in de backend een beetje uniform te laten lijken met wat dat er aan de voorkant uitkomt. Nu is het iets complexer opgebouwd als je met editors styles gaat werken check sowieso elven de documentatie want je kan bijvoorbeeld niet de body gaan aanspreken dus de css wordt een klein beetje herschreven zodat je alleen maar binnen de editor zelf kan gaan beginnen stylen. 