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 En als we nog tijd hebben: dynamische blokken!

1. BLOCK THE SYSTEM
Richtig geile klasse!
@LucP - Meetup Twente -11 September

2. @LucP

3. Learn Javascript
well Deeply
@LucP

4. @LucP

5. Moderne Javascript?
@LucP

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

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

8. "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

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

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

11. Webpack & Babel
@LucP

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

13. Wat slecht advies..
@LucP

14. 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

15. Block-tastisch
@LucP

16. De anatomie van een block
@LucP

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

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

19. Zijn er nog vragen?
@LucP