Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gutenberg a przyszłość WordPressa

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ą.

More Decks by Grzegorz (Greg) Ziółkowski

Other Decks in Technology

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