Gutenberg | How a WordPress studio adapted

Transcript

1. Gutenberg How a WordPress studio adapted By David Darke Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 1
2. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 2
3. How we started Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 3
4. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 4
5. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 5
6. When we began, we used... Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 6
7. ... a custom CMS !"#$%& Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 7
8. How about... WordPress? Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 8
9. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 9
10. WordPress delivered: — Simple and reliable content delivery — Clear page hierarchy / URL structure — Simple menu system — Basic media library Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 10
11. There were limitations Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 11
12. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 12
13. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 13
14. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 14
15. ACF allowed us — Easily create robust fieldsets — Build post to post relationships — Fashion basic event system / queries — Build a block / page building system Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 15
16. Next challenge: Build a more flexible content editor Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 16
17. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 17
18. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 18
19. This was great, but keeping fields in sync between development and production was PAINFUL! Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 19
20. Then ACF Pro added JSON support Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 20
21. Why is that feature so important? Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 21
22. This was the foundation of our internal development framework Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 22
23. Then... Gutenberg was announced Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 23
24. — Initial commit 3rd Feb 2017. — Months rolled past. — Beta versions and release candidates appeared. — Sounded great, but we were worried about the impact on our day-to-day. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 24
25. The pitch Gutenberg looks at the editor as more than a content field, revisiting a layout that has been largely unchanged for almost a decade. This allows us to holistically design a modern editing experience and build a foundation for things to come. !!!!!!!!!!!! Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 25
26. The reception... !!!!!!!!!!!! Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 26
27. But why? Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 27
28. Initial problems and some loss of confidence — Releases were buggy — A sense of this change being forced on a community — No real clarity around the classic editor plugin and even how reliable it would be — The negative voices outweighed positive Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 28
29. Deeper reasons Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 29
30. Technical changes Widely used frameworks would be affected Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 30
31. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 31
32. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 32
33. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 33
34. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 34
35. Another reason, Client relationships — How to discuss this big change to their precious website? — Some clients will like the update, some won't. — Will there be problems? — How long will it take to sort? Clients want a solid plan. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 35
36. First steps for Atomic Smash — Composer helped us... A LOT — It allowed us to fix the core version and pre-load the classic editor — Pre Xmas 2018 we updated a couple of sites to 5.0 (with classic editor installed) — Released December 6th, 2018 (Atomic Smash holiday started on the 19th) Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 36
37. Studio is closed for two weeks at Xmas... ! atomicsmash.co.uk/jobs Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 37
38. What we did at Atomic Smash — Composer helped us... ALOT — Pre Xmas 2018 we updated a couple of sites — Post Xmas 2018 we updated the rest Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 38
39. Next, future planning - Review on a case by case basis whether the client needs/wants the update - All new project will use Gutenberg Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 39
40. Next, future planning - Review on a case by case basis whether the client needs/wants the update - All new project will use Gutenberg Our next new project... our own site! ! Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 40
41. Know what Gutenberg blocks can and can't do in its current state Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 41
42. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 42
43. Coping with data structure changes Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 43
44. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 44
45. Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 45
46. <!-- wp:image {"id":8}--> <figure /> <!-- /wp:image --> Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 46
47. Content in one place Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 47
48. Prepping for a new testing process Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 48
49. Block Unit Test for Gutenberg https://wordpress.org/plugins/block-unit-test/ Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 49
50. ACF is helping again, in the form of ACF blocks Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 50
51. In Summary — We entirely believe Gutenberg is the future of WordPress — But for right now, that doesn't mean it's for everyone — The ecosystem around it is growing — Stay flexible Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 51
52. THANKS! Follow me: @david_darke Follow the studio: @atomicsmash Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 52
53. Any questions? Gutenberg | How a WordPress studio adapted - David Darke | atomicsmash.co.uk 53