Gutenberg a przyszłość WordPressa

WordUp Wrocław #15: Gutenberg

W 2018 roku szykuje się wiele zmian, które wpłyną na przyszłość WordPressa. Przede wszystkim ujrzymy zupełnie nowy sposób tworzenia treści, który przedefiniuje to, jak użytkownicy korzystają z WordPressa. Programiści i projektanci powinni być świadomi wyzwań, ale również nowych możliwości, które się przed nimi pojawią.

Transcript

1. Grzegorz Ziółkowski @gziolo gziolo.pl
   Gutenberg
   a przyszłość
   WordPressa
   

   View Slide

2. ROZDZIAŁ I
   Historia
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. “
    ”
    The editor will endeavour to create a new page and
    post building experience that makes writing rich posts
    effortless, and has “blocks” to make it easy what today
    might take shortcodes, custom HTML, or “mystery
    meat” embed discovery.
    make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/
    MATT MULLENWEG
    

    View Slide

11. Wprowadzając koncepcje "bloku",
    mamy możliwośći ujednolicenia wielu
    różnych interfesjów.
    

    View Slide

12. "Mystery meat" odnosi się do ukrytych
    funkcjonalności w oprogramowaniu,
    które każdy musi odkryć samemu.
    

    View Slide

13. ROZDZIAŁ II
    Gutenberg
    

    View Slide

14. View Slide

15. Wizja
    • Wszystko jest blokiem
    • Wszystkie bloki są sobie równe
    • Placeholdery są kluczowe
    • Bezpośrednia modyfikacja
    • Dostosowanie do potrzeb użytkownika
    • Przeciągnij i upuść jako dodatek
    

    View Slide

16. “
    ”
    Ultimately, the vision for Gutenberg is to make it much easier
    to author rich content. Through ensuring good defaults,
    wrapping and bundling advanced layout options blocks, and
    making the most important actions immediately available,
    authoring content with WordPress should be accessible to
    anyone.
    WORDPRESS.ORG/GUTENBERG/HANDBOOK/REFERENCE/DESIGN-PRINCIPLES/
    

    View Slide

17. ROZDZIAŁ III
    Demo
    

    View Slide

18. ROZDZIAŁ IV
    Sprawy techniczne
    

    View Slide

19. Wybory techniczne:
    make.wordpress.org/core/2017/01/17/editor-
    technical-overview/
    

    View Slide

20. “
    ”
    MATT MULLENWEG
    I believe quite strongly that JavaScript
    and API-driven interfaces are the future of
    not just WordPress but the web.
    The State of the Word 2015
    

    View Slide

21. SPRAWY TECHNICZNE
    Technologie
    

    View Slide

22. Biblioteki
    • React
    • Redux
    • Lodash
    • Pakiety WordPressa
    • Inne moduły npm
    

    View Slide

23. Narzędzia
    • Webpack
    • Babel
    • Eslint
    • Jest
    • Cypress
    

    View Slide

24. Gutenberg jest zbudowana z
    niezależnych modułów.
    

    View Slide

25. Zewnętrzne biblioteki przykryte
    warstwą abstrakcji.
    

    View Slide

26. Komponenty wielokrotnego użycia
    ponad czysty HTML i CSS.
    

    View Slide

27. SPRAWY TECHNICZNE
    Bloki
    

    View Slide

28. Enqueue
    Javascript
    CSS
    HTML
    

    View Slide

29. API bloku:
    wordpress.org/gutenberg/handbook/block-api
    

    View Slide

30. View Slide

31. Bloki jako kompozycja komponentów.
    

    View Slide

32. View Slide

33. SPRAWY TECHNICZNE
    Szablony
    

    View Slide

34. Eksperymenty z szablonem:
    github.com/WordPress/gutenberg-theme
    

    View Slide

35. Rozszerzalność
    SPRAWY TECHNICZNE
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. ROZDZIAŁ V
    Przyszłość…
    

    View Slide

42. Propozycja włączenia do dystrybucji
    WordPressa dopiero nastąpi.
    

    View Slide

43. Gutenberg to nie jest page builder,
    Customizer będzie następny.
    

    View Slide

44. Eksperymenty: sposób na tworzenie bloków
    w każdym frameworku.
    

    View Slide

45. Interaktywne bloki także na frontendzie?
    

    View Slide

46. Zestaw na początek i skrypty wielokrotnego
    użycia.
    

    View Slide

47. View Slide

48. “
    ”
    DAN ABRAMOV
    If WordPress were to adopt React, it would
    make sense for it to also provide a zero-
    configuration build environment. We are
    happy to offer some of the packages we
    developed as part of Create React App for
    reuse.
    wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/
    

    View Slide

49. Generowanie bloków z WP-CLI:
    wordpress.org/gutenberg/handbook/blocks/
    generate/blocks-with-wp-cli/
    

    View Slide

50. Skrypty wielokrotnego użycia:
    github.com/WordPress/packages/tree/master/
    packages/scripts
    

    View Slide

51. Pakiety WordPressa (npm):
    github.com/WordPress/packages
    

    View Slide

52. ROZDZIAŁ VI
    Weź też udział
    

    View Slide

53. Dowiedz się więcej:
    wordpress.org/gutenberg
    

    View Slide

54. Dokumentacja:
    wordpress.org/gutenberg/handbook/
    

    View Slide

55. Pobierz wtyczkę:
    wordpress.org/plugins/gutenberg/
    

    View Slide

56. Pomóż ze zgłoszeniami:
    github.com/WordPress/gutenberg/issues
    

    View Slide

57. Dołącz do rozmów:
    #core-editor, środa 15:00
    

    View Slide

58. Dziękuję, pytania?
    Grzegorz Ziółkowski @gziolo gziolo.pl
    

    View Slide