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.

WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0

136 views

Published on

At this talk, as a front-end developer, I'll share my experience from WordCamp Europe 2019. What were the key releases at the event? Gutenberg was my favourite subject for sure, then other front-end web technologies such as AMP, PWA and web components.

In this presentation, I will discuss the release of AMP plugin 1.2, and what is new in Gutenberg 6.0, what are the break changes in this version, and more

Published in: Technology
  • Login to see the comments

  • Be the first to like this

WCEU 2019 recap - AMP Plugin 1.2 and Gutenberg 6.0

  1. 1. My highlights from WordCamp Europe 2019 as a Front-end Dev Fellyph Cintra @fellyph
  2. 2. @fellyph Solutions Engineer at @DeloitteDIGI_IE
 Google Developer Expert
  3. 3. https://2019.dublin.wordcamp.org/call-for-speakers/
  4. 4. WordCamp Europe 2019 Gutenberg 6.0 AMP plugin 1.2 Gutenberg 6.0 AMP Plugin 1.2
  5. 5. Gutenberg 6.0 https://make.wordpress.org/core/2019/06/26/whats-new-in-
  6. 6. Gutenberg Phases 1. Blocks for writing and editing 2. Widget, navigation and customization (now) 3. Collaboration, multi-user editing and workflows (future) 4. Multilingual support(future)
  7. 7. Gutenberg core & Gutenberg Plugin
  8. 8. New features & Improvements
  9. 9. Layout Picker
  10. 10. Group blocks
  11. 11. Widget Latest posts
  12. 12. Block Manager
  13. 13. Cover Block
  14. 14. Snackbars
  15. 15. Performance The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases
  16. 16. Coming soon
  17. 17. Grid
  18. 18. Navigation Block
  19. 19. Installing Blocks
  20. 20. Motion
  21. 21. Block Directory
  22. 22. https://amp.dev/
  23. 23. User problems Slow loading Unresponsive pages Content displaced by ads
  24. 24. Why AMP ? ● Enforces best practices for: ● Performance ● Accessibility ● Reliability ● Responsive Design
  25. 25. AMP Core AMP HTML AMP JS AMP Cache
  26. 26. AMP Sidebar
  27. 27. Past
  28. 28. AMP Plugin for WordPress AMP Experiences, the WordPress Way
  29. 29. AMP Experiences
  30. 30. Websites Stories BETA
  31. 31. The AMP Plugin modes
  32. 32. Standard Mode Use AMP as the framework for your site
  33. 33. Non AMP AMP Transitional Mode Transitional Mode Progressively closing the visual & functionality gap between the AMP and non-AMP version of you site
  34. 34. Non AMP AMP Reader Mode Reader Mode Simplified, baseline AMP experiences
  35. 35. AMP plugin’s magic Code the WordPress way, let the plugin do the rest
  36. 36. AMP WordPress All WordPress core components are 
 automatically AMP compatible: Blocks, Widgets, Embeds, Comments, etc.
  37. 37. html{…} head{…} body{…} h1{…} p{…} CSS Tree Shaking Ensures only the CSS needed on any given page is loaded
  38. 38. Rendering Valid AMP Validate page output and ensure AMP compatibility wherever possible
  39. 39. Validation Workflow Power, Control & Trust
  40. 40. Gutenberg blocks AMP support for all core block and a superset of custom AMP blocks
  41. 41. Core Themes Built-in AMP support for all core themes in both Standard and Transitional modes. https://2019-theme.amp-wp.org https://2017-theme.amp-wp.org https://2016-theme.amp-wp.org https://2015-theme.amp-wp.org
  42. 42. Genesis Framework Version 3.0 comes with AMP compatibility, making it easier to have AMP compatible Genesis themes: Essence Pro Author Metro Breakthrough … … ...
  43. 43. AMP Stories Editor (Beta)
  44. 44. Block navigation Page Content Title of your story Settings sidebar
  45. 45. 1. Add image from block media library Block media
  46. 46. 2. Insert a text box
  47. 47. AMP Stories
  48. 48. Web Development with AMP Course https://www.youtube.com/playlist?list=PLXTOW_XMsIDS45GB-eBV5s_M9EGIXMjI_
  49. 49. Obrigado Thank you

×