This document discusses working smart with Gutenberg, the new WordPress editor. It provides an agenda covering the new WordPress front-end stack using Gutenberg, new JavaScript libraries used in Gutenberg, blocks and components, tooling, and real life examples. It discusses the learning path and basic steps for creating Gutenberg blocks using the Create Gutenberg Block tool and integrating blocks with the old front-end script.

1. WORK SMART WITH
GUTENBERG
Fellyph Cintra

2. FELLYPH
CINTRA
Solutions engineer
deloitte irl
@fellyph

7. AGENDA
➤ New WordPress front-end stack?
➤ New JavaScript Libraries
➤ Blocks and Components
➤ Tooling
➤ Real life

8. GUTENBERG IS READY…
AND NOW?

9. STACK FRONT-END ON WORDPRESS
Before Gutenberg After GutenbergBefore ES2015 After ES2015

11. “Learn JavaScript Deeply
-Matt Mullenweg 2015

12. LEARNING PATH

13. NEW JAVASCRIPT LIBRARIES
wp.element
wp.i18n
wp.editor
wp.data
wp.component
wp.a11y
wp.apiFetch
…

14. TYPES OF BLOCKS
➤Static
➤Editable
➤Dynamic

15. REUSABLE
COMPONENTS

16. BASIC STEPS : LEARNING PROCESS
ES5
CREATE-GUTEN-BLOCK
tooling

17. CREATE-GUTEN-BLOCK
CREATE-GUTEN-BLOCK
npm install —save-dev create-guten-block
npm create-guten-block my-new-block
Installation
Creating a new project
npm start
run it!

18. TOOLING

19. SOME TIMES THE REALITY IS…

20. X
create-guten-block Tooling

21. LET’S GET REAL

22. BEFORE GUTENBERG
➤Templates page
➤ACF
➤Tooling
➤SASS Theming
➤Site properties

23. PREVIOUS SCENARIO
Functional
Visual

24. THINKING ABOUT IT
Visual Functional

25. BLOCK IT

26. LET’S
CODE

27. BASIC BLOCK
continue…

28. EDIT AND SAVE METHOD

29. BLOCK WITH PROPERTIES

30. INTEGRATION WITH OLD SCRIPT
front-end.js
register_front_end_script.php

31. SET UP WEBPACK

32. USING REACT ON FRONT-END

33. MAKE A QUERY ON THE EDITOR

34. DYNAMIC BLOCK ON THE FRONT-END
redsapsolutions.com

35. SOMETHING MORE…
➤ https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/
@wordpress/babel-plugin-makepot
@wordpress/eslint-plugin
@wordpress/babel-preset-default
@wordpress/e2e-test

36. OBRIGADO
DĚKUJI

37. ➤ My repo: https://github.com/fellyph/digital-agency-block-kit
➤ References
➤ https://github.com/WordPress/gutenberg-examples
➤ https://github.com/zgordon/gutenberg-course
➤ https://github.com/ahmadawais/create-guten-block
➤ https://wordpress.org/gutenberg/handbook/