Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Work smart with Gutenberg - Fellyph Cintra

1,596 views

Published on

Gutenberg, Blocks, React, ECMAScript 6, Babel, Webpack, NPM… What the heck? Gutenberg was shipped last year and arrived with a bunch of new terms and technologies. In this presentation, you're going to see, how to create your own Gutenberg Block, the basic key concepts to a workable project. As an example I’m going to present a Digital Agency kit - a project with some of the most common types of content for a digital agency website: Testimonial area, projects list, services list, social media information, contact information. We will convert from those common elements into a Gutenberg block and make them reusable to improve our development team experience.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Work smart with Gutenberg - Fellyph Cintra

  1. 1. WORK SMART WITH GUTENBERG Fellyph Cintra
  2. 2. FELLYPH CINTRA Solutions engineer deloitte irl @fellyph
  3. 3. AGENDA ➤ New WordPress front-end stack? ➤ New JavaScript Libraries ➤ Blocks and Components ➤ Tooling ➤ Real life
  4. 4. GUTENBERG IS READY… AND NOW?
  5. 5. STACK FRONT-END ON WORDPRESS Before Gutenberg After GutenbergBefore ES2015 After ES2015
  6. 6. “Learn JavaScript Deeply -Matt Mullenweg 2015
  7. 7. LEARNING PATH
  8. 8. NEW JAVASCRIPT LIBRARIES wp.element wp.i18n wp.editor wp.data wp.component wp.a11y wp.apiFetch …
  9. 9. TYPES OF BLOCKS ➤Static ➤Editable ➤Dynamic
  10. 10. REUSABLE COMPONENTS
  11. 11. BASIC STEPS : LEARNING PROCESS ES5 CREATE-GUTEN-BLOCK tooling
  12. 12. 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!
  13. 13. TOOLING
  14. 14. SOME TIMES THE REALITY IS…
  15. 15. X create-guten-block Tooling
  16. 16. LET’S GET REAL
  17. 17. BEFORE GUTENBERG ➤Templates page ➤ACF ➤Tooling ➤SASS Theming ➤Site properties
  18. 18. PREVIOUS SCENARIO Functional Visual
  19. 19. THINKING ABOUT IT Visual Functional
  20. 20. BLOCK IT
  21. 21. LET’S CODE
  22. 22. BASIC BLOCK continue…
  23. 23. EDIT AND SAVE METHOD
  24. 24. BLOCK WITH PROPERTIES
  25. 25. INTEGRATION WITH OLD SCRIPT front-end.js register_front_end_script.php
  26. 26. SET UP WEBPACK
  27. 27. USING REACT ON FRONT-END
  28. 28. MAKE A QUERY ON THE EDITOR
  29. 29. DYNAMIC BLOCK ON THE FRONT-END redsapsolutions.com
  30. 30. 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
  31. 31. OBRIGADO DĚKUJI
  32. 32. ➤ 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/

×