Met Gutenberg veranderd de WordPress editor in één grote blokkendoos waarbij iedere denkbare combinatie gemaakt kan worden. Maar wat als je een block nodig hebt die niet bestaat? Dan wordt het tijd om er zelf een te schrijven! Geen nood, het is niet super moeilijk; in deze talk lopen we stap voor stap door de onderdelen van een Gutenberg block en laat ik je zien hoe je zelf een simpel block bouwt. We zullen in crash-course stijl de volgende onderwerpen behandelen: - Moderne Javascript in WordPress - NPM & Webpack in de praktijk - Block attributes - Edit - Save

1. BLOCK THE SYSTEM
Richtig geile klasse!
@LucP - Meetup Zwolle - 8 November

2. @LucP

3. @LucP
Een case...

4. @LucP

5. @LucP
BLOCK!
BLOCK!
BLOCK!
BLOCK!
BLOCK! BLOCK!
BLOCK!

6. Drie keer raden...

7. BLOCK!
BLOCK!
BLOCK!
Seriously...?

8. Learn Javascript
well Deeply
@LucP

9. @LucP

10. Wat een programmeur wil...
data vorm functie

11. WordPress 😕
data
vorm
functie

12. Meeste plugins 😅
data
vorm
functie
dependency
api
JS
MySQL
docs
api
dependency
data
socket

13. Jetpack 😒
data
vorm
functie
dependency
api
JS
MySQL
docs
api
dependency
data
socket
data
vorm
functie
dependency
api
JS
MySQL
docs
api
dependen
data
sock
data
vorm
functie
ndency
api
MySQL
docs
api
dependency
data
socket

15. Moderne Javascript?
@LucP

16. "ES6" in vier slides...
Meer? Check de course van Wes Bos!
@LucP

17. "ES6" in vier slides...
function( param1, param2 ){
Return 'Hello World'
}
( param1, param2 ) => { 'Hello World' }
Functions
Toen
Nu
@LucP

18. "ES6" in vier slides...
var test = 'Hello World';
console.log( test )
/-> Hello World
let test = 'Hello World';
console.log( test ); /-> Hello World
test = 'Hello';
console.log( test ); /-> Hello
const myVar = 'Can't touch this';
myVar = 'Let's try anyway' /-> ERROR!
Let / Const
Toen
Nu
@LucP

19. "ES6" in vier slides...
Var HelloWorld = new function(){
Init: function(){
//logic here
}
}
Class HelloWorld extends Component{
constructor(){
super(...arguments);
}
}
Classes
Toen
Nu
@LucP

20. "ES6" in vier slides...
<script type="text/javascript" src=".
Import 'Sort' from 'gutenberg-sortable'
Components
Toen
Nu
@LucP

21. Webpack & Babel
@LucP

22. Webpack = samenvoegen
Babel = zorgen dat 't werkt
@LucP

23. Wat slecht advies..
@LucP

24. 1 ding installeren
3 bestandjes kopiëren
2 terminal commando's
NodeJS. Hier te downloaden
package.json
npm install
webpack.config.js .babelrc
npm run dev
@LucP

25. Block-tastisch
@LucP

26. De anatomie van een block
@LucP

27. - naam
- meta-data (icoon, categorie, etc)
- attributen
- edit
- save
registerBlockType()
@LucP

28. Let's jump to the code!
@LucP
Full example: github.com/lucprincen/my-plugin.git

29. @LucP

30. Custom Blocks KIT
page-break
container
intro
links
hero
subtitle
home-intro
read-more
related
collection
staff-collection
staff-publications
publications
collection-filter
studies-collection
vacancies-collection
expert
service
publication
contact
partners
testimonials
media
checklist
room-layout
room-specs
possibility-block
banner
faq-list
taxonomy-menu
page-menu
sidebar
text-button
@LucP

31. @LucP
😟 🤨

32. Gutenberg, frontend 😕
data
vorm
functie

33. @LucP
Gutenberg HTML Parser:
Kit:Container
InnerBlocks:
WP:heading
WP:linklist
Title
Links
Link
Link
Link
Link

34. Accessibility
Google Lighthouse meting, 6-11-2018@LucP

35. HTML:
<aside>
Sidebar
<section>
Tekst
<article>
Content
<header>
titel + intro
<footer>
related +
further links
<section>
<section>
<section>
<section>
<footer> (page)
<header>

36. Conclusie
@LucP
Ga bouwen,
Ga proberen,
Echt... het is makkelijker dan je denkt.

37. Zijn er nog vragen?
@LucP