WordUp Trójmiasto - Sage 9 w praktyce

1. SAGE 9W praktyce

2. Ben Word February 7, 2018 “Just like Bootstrap 4’s recent ﬁnal release 🎉, Sage 9 is ﬁnally out of beta after years of development!”

3. WYMAGANIA • WordPress >= 4.7 • PHP >= 7.1.3 (z włączonym php-mbstring) • Composer • Node.js >= 6.9.x • Yarn

4. NIE DLA KAŻDEGO

5. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania

6. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania • Używa blade jako template engine

7. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania • Używa blade jako template engine • Używa psr-2 jako standard kodowania

8. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania • Używa blade jako template engine • Używa psr-2 jako standard kodowania • Nie nadaje się do wgrania do repozytorium wordpress.org

9. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania • Używa blade jako template engine • Używa psr-2 jako standard kodowania • Nie nadaje się do wgrania do repozytorium wordpress.org • Sage nie nadaje się na twój pierwszy motyw

10. INSTALACJA composer create-project roots/sage wordup-trojmiasto

11. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto

12. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto Theme URI [https://roots.io/sage/]: > https://www.wptrojmiasto.pl/

13. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto Theme URI [https://roots.io/sage/]: > https://www.wptrojmiasto.pl/ Theme Description [Sage is a WordPress starter theme.]: > Prelekcja WordUp Trójmiasto 2018

14. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto Theme URI [https://roots.io/sage/]: > https://www.wptrojmiasto.pl/ Theme Description [Sage is a WordPress starter theme.]: > Prelekcja WordUp Trójmiasto 2018 Theme Version [9.0.0]: > 0.1.0

15. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto Theme URI [https://roots.io/sage/]: > https://www.wptrojmiasto.pl/ Theme Description [Sage is a WordPress starter theme.]: > Prelekcja WordUp Trójmiasto 2018 Theme Version [9.0.0]: > 0.1.0 Theme Author [Roots]: > Dawid Urbański

16. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto Theme URI [https://roots.io/sage/]: > https://www.wptrojmiasto.pl/ Theme Description [Sage is a WordPress starter theme.]: > Prelekcja WordUp Trójmiasto 2018 Theme Version [9.0.0]: > 0.1.0 Theme Author [Roots]: > Dawid Urbański Theme Author URI [https://roots.io/]: > https://insanelab.com

17. INSTALACJA CZ. 2 Local development URL of WP site [http://example.test]: > http://wordup.localhost

18. INSTALACJA CZ. 2 Local development URL of WP site [http://example.test]: > http://wordup.localhost Path to theme directory (e.g., /wp-content/themes/wordup- trojmiasto) [/app/themes/sage]: > /wp-content/themes/wordup-trojmiasto

19. INSTALACJA CZ. 2 Local development URL of WP site [http://example.test]: > http://wordup.localhost Path to theme directory (e.g., /wp-content/themes/wordup- trojmiasto) [/app/themes/sage]: > /wp-content/themes/wordup-trojmiasto Which framework would you like to load? [Bootstrap]: [0] None [1] Bootstrap [2] Bulma [3] Foundation [4] Tachyons > 0

20. INSTALACJA CZ. 2 Local development URL of WP site [http://example.test]: > http://wordup.localhost Path to theme directory (e.g., /wp-content/themes/wordup- trojmiasto) [/app/themes/sage]: > /wp-content/themes/wordup-trojmiasto Which framework would you like to load? [Bootstrap]: [0] None [1] Bootstrap [2] Bulma [3] Foundation [4] Tachyons > 0 Do you want to install Font Awesome? (yes/no) [no]: > no

21. INSTALACJA CZ. 3 Are you sure you want to overwrite the following files? - styles/common/_variables.scss - styles/components/_comments.scss - styles/components/_forms.scss - styles/components/_wp-classes.scss - styles/layouts/_header.scss (yes/no) [no]: > yes

22. INSTALACJA CZ. 3 Are you sure you want to overwrite the following files? - styles/common/_variables.scss - styles/components/_comments.scss - styles/components/_forms.scss - styles/components/_wp-classes.scss - styles/layouts/_header.scss (yes/no) [no]: > yes Done. Please run `yarn && yarn build` to compile your fresh scaffolding.

23. INSTALACJA CZ. 3 Are you sure you want to overwrite the following files? - styles/common/_variables.scss - styles/components/_comments.scss - styles/components/_forms.scss - styles/components/_wp-classes.scss - styles/layouts/_header.scss (yes/no) [no]: > yes Done. Please run `yarn && yarn build` to compile your fresh scaffolding. cd wordup-trojmiasto yarn && yarn build

24. BLADE

25. BLADE @php(the_post()) <?php the_post(); ?>

26. BLADE @php(the_post()) {{ get_the_title() }} <?php the_post(); ?> <?php echo htmlentities( get_the_title() ); ?> <?php the_title(); ?>

27. BLADE @php(the_post()) {{ get_the_title() }} {!! get_sub_field() !!} {!! the_sub_field() !!} <?php the_post(); ?> <?php echo htmlentities( get_the_title() ); ?> <?php the_title(); ?> <?php echo get_sub_field(); ?> <?php the_sub_field(); ?>

28. BLADE @php(the_post()) {{ get_the_title() }} {!! get_sub_field() !!} {!! the_sub_field() !!} {{-- Template Name: Custom --}} <?php the_post(); ?> <?php echo htmlentities( get_the_title() ); ?> <?php the_title(); ?> <?php echo get_sub_field(); ?> <?php the_sub_field(); ?> /** * Template Name: Custom */

29. BLADE @php(the_post()) {{ get_the_title() }} {!! get_sub_field() !!} {!! the_sub_field() !!} {{-- Template Name: Custom --}} <?php the_post(); ?> <?php echo htmlentities( get_the_title() ); ?> <?php the_title(); ?> <?php echo get_sub_field(); ?> <?php the_sub_field(); ?> /** * Template Name: Custom */ @include(‘partials.content’); @includeIf(‘partials.content.’.get_post_type());

30. BLADE CZ. 2 {{ get_the_title() }} != the_title();

31. BLADE CZ. 2 {{ get_the_title() }} != the_title(); {{ apply_filters(‘the_title’, get_the_title()) }} @php(the_title())

32. BLADE CZ. 2 {{ get_the_title() }} != the_title(); {{ apply_filters(‘the_title’, get_the_title()) }} @php(the_title()) {{ esc_attr(get_sub_field(‘class’)) }} {{ esc_url(get_sub_field(‘link’)) }}

33. BLADE CZ. 2 {{ get_the_title() }} != the_title(); {{ apply_filters(‘the_title’, get_the_title()) }} @php(the_title()) {{ esc_attr(get_sub_field(‘class’)) }} {{ esc_url(get_sub_field(‘link’)) }} {{ esc_html__(‘Hi WordUp!’, ‘sage’) }} {{ esc_html_e(‘Hi WordUp!’, ‘sage’) }}

34. BLADE CZ. 2 {{ get_the_title() }} != the_title(); {{ apply_filters(‘the_title’, get_the_title()) }} @php(the_title()) {{ esc_attr(get_sub_field(‘class’)) }} {{ esc_url(get_sub_field(‘link’)) }} {{ esc_html__(‘Hi WordUp!’, ‘sage’) }} {{ esc_html_e(‘Hi WordUp!’, ‘sage’) }} @if (have_posts()) @endif @while (have_posts()) @endwhile @foreach ($iterable as $value) @endforeach

35. STRUKTURA • Brak pliku style.css w głównym katalogu motywu • Brak pliku functions.php w głównym katalogu motywu • Brak plików poszczególnych szablonów w głównym katalogu motywu (index.php, page.php, 404.php etc) • Wszystkie zasoby zostały przeniesione do folderu resources

36. ├── app/ # → Kod PHP motywu (bez widoków) │ ├── controllers/ # → Kontrolery │ ├── admin.php # → Kod związany z częścią administracyjną │ ├── filters.php # → Najróżniejsze filtry │ ├── helpers.php # → Funkcje pomocnicze │ └── setup.php # → Ustawienia motywu ├── config/ # → Konfiguracja ├── composer.json # → Autoloader dla foldeu `app/` ├── dist/ # → Pliki wynikowe po zbudowaniu motywu ├── node_modules/ # → Paczki Node.js ├── package.json # → Node.js konfiguracja ├── resources/ # → Assety i szablony │ ├── assets/ # → Assety │ │ ├── config.json # → Ustawienia do kompilowania plików │ │ ├── build/ # → Konfiguracja Webpacka I ESLint │ │ ├── fonts/ # → Fonty │ │ ├── images/ # → Obrazy │ │ ├── scripts/ # → JavaScript │ │ └── styles/ # → Style │ ├── functions.php # → Rózne niezbędne funkcje │ ├── index.php # → Nie dotykać │ ├── screenshot.png # → Obraz motywu │ ├── style.css # → Informacje o motywie │ └── views/ # → Szablony strony │ ├── layouts/ # → Szablony bazowe │ └── partials/ # → Partials └── vendor/ # → Paczki composera

37. HIERARCHIA TEMPLATEK Cała hierarchia szablonów jest odzwierciedlona w templatkach blade. Np. wszystkie poniższe szablony działają jak w normalnym motywie:  index.blade.php front-page.blade.php page.blade.php page-pricing.blade.php archive.blade.php archive-testimonial.blade.php category.php itd..

38. DEVELOPMENT •yarn run start

39. DEVELOPMENT •yarn run start [BS] [HTML Injector] Running… [Browsersync] Proxying: http://wordup.localhost [Browsersync] Access URLs: ——————————————————— Local: http://localhost:3000 External: http://192.168.0.110:3000 ——————————————————— UI: http://localhost:3001 UI External: http://192.168.0.110:3001 ——————————————————— [Browsersync] Watching files… •

40. DEVELOPMENT •yarn run start [BS] [HTML Injector] Running… [Browsersync] Proxying: http://wordup.localhost [Browsersync] Access URLs: ——————————————————— Local: http://localhost:3000 External: http://192.168.0.110:3000 ——————————————————— UI: http://localhost:3001 UI External: http://192.168.0.110:3001 ——————————————————— [Browsersync] Watching files… •yarn run build

41. DEVELOPMENT •yarn run start [BS] [HTML Injector] Running… [Browsersync] Proxying: http://wordup.localhost [Browsersync] Access URLs: ——————————————————— Local: http://localhost:3000 External: http://192.168.0.110:3000 ——————————————————— UI: http://localhost:3001 UI External: http://192.168.0.110:3001 ——————————————————— [Browsersync] Watching files… •yarn run build •yarn run build:production

42. DEVELOPMENT •yarn run build:production

43. DEVELOPMENT •yarn run build:production DONE Compiled successfully in 579ms 7:32:04 Asset Size Chunks Chunk Names scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main images/logo-icon_ffccbda7.png 691 bytes [emitted] assets.json 220 bytes [emitted] ✨ Done in 2.74s.

44. DEVELOPMENT •yarn run build:production DONE Compiled successfully in 579ms 7:32:04 Asset Size Chunks Chunk Names scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main images/logo-icon_ffccbda7.png 691 bytes [emitted] assets.json 220 bytes [emitted] ✨ Done in 2.74s. <img src=“@asset(‘images/logo-icon.png’)”>

45. DEVELOPMENT •yarn run build:production DONE Compiled successfully in 579ms 7:32:04 Asset Size Chunks Chunk Names scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main images/logo-icon_ffccbda7.png 691 bytes [emitted] assets.json 220 bytes [emitted] ✨ Done in 2.74s. <img src=“@asset(‘images/logo-icon.png’)”> background-image(../images/logo-icon.png);

46. DEVELOPMENT •yarn run build:production DONE Compiled successfully in 579ms 7:32:04 Asset Size Chunks Chunk Names scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main images/logo-icon_ffccbda7.png 691 bytes [emitted] assets.json 220 bytes [emitted] ✨ Done in 2.74s. <img src=“@asset(‘images/logo-icon.png’)”> background-image(../images/logo-icon.png); asset_path(‘images/logo-icon.png’)

47. DEVELOPMENT •yarn run build:production DONE Compiled successfully in 579ms 7:32:04 Asset Size Chunks Chunk Names scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main images/logo-icon_ffccbda7.png 691 bytes [emitted] assets.json 220 bytes [emitted] ✨ Done in 2.74s. <img src=“@asset(‘images/logo-icon.png’)”> background-image(../images/logo-icon.png); asset_path(‘images/logo-icon.png’) wp_localize_script('sage/main.js', 'info', [ 'assets' => [ ‘logo_icon' => asset_path(‘images/logo-icon.png’), ], ]); (JS) info.assets.logo_icon

48. ACF PRO • Wszystkie strony od headera (lub hero pod headerem jeśli istnieje) do footera są zbudowane z elementów ﬂexible content. (nie dotyczy stron archiwów, bloga itp) • Templatki w loopie ﬂexible content są ładowane na podstawie nazwy layoutu z FC. ( get_row_layout() ) • Można zmieniać kolejność elementów. • Można dodawać najróżniejsze opcje do elementów. • Header I footer są edytowane z customizera

49. NAZEWNICTWO Każdy blok ﬂexible content jest opatrzony klasą z jego nazwą ( get_row_layout() ) Każdy layout posiada swój własny plik .scss w /assets/styles/acf/_{{ get_row_layout() }}.scss Dzięki temu otrzymujemy (np. dla layoutu text-with-image): /views/patials/acf/text-with-image.blade.php  /assets/styles/acf/_text-with-image.scss   .text-with-image {  // tutaj stylujemy ten blok  }

50. BLOKI PREDEFINIOWANE • Możliwość dodania bloków które potem będą użyte jako referencja w wielu miejscach na całej stronie. Edycja bloku powoduje zmiany w każdym odwołaniu do bloku. • Szczególnie przydane przy różnych elementach typu Call to Action, lub elementach gdzie jest dużo wprowadzania, aby uniknąć powtarzającej się pracy przy wprowadzaniu treści. • Można zagnieżdżać bloki predeﬁniowane

51. ZARZĄDZANIE SZABLONAMI

52. ZARZĄDZANIE SZABLONAMI Użycie ﬂexible content jako podstawowego budulca całej treści strony, eliminuje problem z nadmierną ilością templatek.

53. ZARZĄDZANIE SZABLONAMI Użycie ﬂexible content jako podstawowego budulca całej treści strony, eliminuje problem z nadmierną ilością templatek. Dzięki temu szablony mogą spełniać swoją oryginalną funkcję, czyli pozostać reużywalnymi w wielu stronach.

54. PYTANIA?

55. DAWID URBAŃSKI dawid.urbanski@insanelab.com