Warsztaty z Gutenberga – lista zadań

Lista zadań (obrazek)Jeśli nie brałeś udziału w warsztatach z Gutenberga podczas WordCamp Poznań, nic straconego (no… może oprócz fajnej atmosfery pracy w stadzie na żywo, która Cię ominęła).

Poniżej prezentuję listę zadań, które przerabialiśmy.

Do ćwiczeń możesz wykorzystać dowolną stronę na WordPressie z zainstalowaną wtyczką Gutenberg.

Możesz też poprosić w komentarzach o  dostęp do strony, z której korzystaliśmy w czasie warsztatów. Wówczas założę Ci osobną kopię tylko dla Ciebie.

Warsztaty z Gutenberga - WordCamp Poznań 2018
Warsztaty z Gutenberga – WordCamp Poznań 2018

Część 1.

Zadania na rozgrzewkę – zabawa z wpisem Demo.

Wpis Demo przygotowany przez ekipę twórców Gutenberga to prawdziwa kopalnia wiedzy. Z pewnością przyda Ci się podczas stawiania pierwszych kroków w nowym edytorze.

Przyjrzyjmy mu się bliżej.

  1. Odwiedź Gutenberg -> Demo w panelu admina i policz z ilu bloków składa się ten wpis demo.

Liczba bloków we wpisie demo: ____

  1. Znajdź blok który zaczyna się od następujących słów: “The goal of this new editor is to make adding rich content to WordPress simple and enjoyable.“ i przesuń go w górę, tak aby znalazł się powyżej obrazka z górami.

Na ile sposobów można przesuwać bloki w nowym edytorze? ____

  1. Policz liczbę słów we wpisie Demo.

Liczba słów we wpisie Demo: ____

Wskazówka: Jeśli nie chce Ci się liczyć na piechotę, to kliknij na ikonkę “i” na górze i odczytaj, ile słów zawiera ten wpis. 😉

  1. Kliknij ponownie na ikonkę “i”, tym razem po to, aby szybko przeskoczyć do sekcji “Visual Editing”. Udało się? Fajna sprawa, co nie?
  1. Wstaw nagłówek h3 poniżej bloku Visual Editing. Zatytułuj go jakoś, np. Moje obrazki. Kliknij ponownie w ikonkę “i” na górze strony.

Czy widzisz swój nagłówek w spiesie treści? ____

Do czego może Ci się przydać przeglądanie spisu treści twojego wpisu?

___________________________________________________________________

  1. Nowe bloki można wstawiać korzystając z przycisku plusika (tzw. inserter), ale jest znacznie wygodniejszy sposób wykorzystujący klawiaturę. To przycisk / (slash).
    1. Ustaw się na końcu wpisu demo.
    2. Za pomocą plusika (+) dodaj nowy blok typu paragraph.
    3. Wpisz jakiś tekst i wciśnij Enter.
    4. Gdy otworzy się nowy blok, naciśnij klawisz / (zanim zaczniesz pisać cokolwiek innego)

Ile rodzajów bloków widzisz w liście? _____

Co się stanie jak zaczniesz pisać na klawiaturze you ?

___________________________________________________________________

Ile bloków zobaczysz, gdy zamiast you napiszesz po slashu co?

_________________________________________________________________

  1. Po wciśnięciu / i wpisaniu co z klawiatury w liście pojawiają się dwa bloki umożliwiające wstawianie treści w kolumnach.

Jak one się nazywają?

______________

______________

Czym się one różnią?

___________________________________________________________

  1. We wpisie demo znajdź blok typu Cytat (ang. Quote) i wykonaj jego kopię. Zastąp treść cytatu jakaś swoja mądrą myślą. W sygnaturce wstaw swoje imię.
  1. Przejdź do bloku, który dodałeś w zadaniu 5 i wstaw obrazek poniżej. Użyj dowolnego obrazka. Możesz skorzystać z darmowych obrazków z https://pixabay.com/ lub https://www.pexels.com/.
    1. Ustaw rozmiar obrazka na Medium
    2. Dodaj podpis do obrazka
    3. Wstaw tekst alternatywny do obrazka
  1. Wykonaj podgląd wpisu, aby sprawdzić, jak Twój wpis prezentuje się na front-endzie. Czy Twój wpis rozciąga się na całą szerokość strony czy widzisz też pasek boczny. Wiesz dlaczego?
  1. Opublikuj swój wpis.
  1. Wróć do edycji wpisu. Wyłącz komentarze dla tego wpisu. Zapisz zmiany i wyświetl swój wpis ponownie na front-endzie, aby upewnić się, że faktycznie zniknęło okienku do dodawania komentarzy.

Obsługa “starych wpisów” w Gutenbergu

  1. Przejdź do Strony -> Przykładowa strona. Otwórz tę stronę do edycji. Treść tej  strony została napisana w starym edytorze (również nazywany Classic Editor)

Ile bloków widzisz? ________________

Czy rozumiesz już, co się stanie z wpisami Twojego bloga/strony po przejściu na nowy edytor?  _____________________

  1. W jaki sposób przełączysz się w tryb tekstowy, aby edytować treść tego blogu w trybie HTML?
  1. Konwertuj treść tego blogu w bloki Gutenberga wykorzystując More Options -> Convert to blocks.

 

Czy jest potrzeba zamiany starych wpisów/stron na bloki? __________________

Odkrywamy motywy przygotowane na Gutenberga

Zanim zobaczymy przykłady motywów przygotowanych pod Gutenberga, upewnij się, że na używasz motywu Twenty Seventeen.

Motyw Twenty Seventeen nie ma specjalnego wsparcie pod nowy edytor, ale o to nam teraz chodzi. Łatwiej ci będzie zrozumieć różnicę między motywem przygotowanym na nowy edytor, a takim, który nie jest.

  1. Dodaj nową stronę. Daj jej jakiś tytuł i wstaw kilka bloków typu akapit. Możesz skorzystać z generatora lorem ipsum. Ustaw tło jednego z akapitów na niebieskie. Zwróć uwagę jakie kolory masz dostępne w palecie kolorów. Opublikuj stronę i sprawdź jak ona wygląda na front-endzie.
  1. Nadal korzystając z motywu Twenty Seventeen wstaw obrazek, który ma szerokość co najmniej 1200px. Możesz sobie taki obrazek wygenerować korzystając z tego linka: https://picsum.photos/1200/300

Kliknij na wstawiony obrazek, tak aby pozostawał zaznaczony. Powinieneś zobaczyć małe niebieskie kółeczka w rogach:

Edycja obrazka w Gutenbergu - zwróć uwagę na rogi
Edycja obrazka w Gutenbergu – zwróć uwagę na rogi

Chwyć jeden z tych rogów i zacznij ciągnąć w kierunku środka obrazka. Puść.

Jakie wymiary ma teraz Twój obrazek? _______  _______

Ile ikonek formatujących widzisz nad obrazkiem? _______

  1. Przejdź do Wygląd -> Motywy i zmień motyw na Writings. Jeśli używasz swojej strony testowej znajdziesz ten motyw w repozytorium WordPressa. To jest jeden z motywów ze wsparciem pod Gutenberga.
  1. Wróć do edycji strony, którą edytowałeś wcześniej. Znajdź blok z tym szerokim obrazkiem, który niedawno dodałeś.

Ile ikonek formatujących widzisz teraz? ____________

Sprawdź, jak działają te nowe ikonki. Sprawdź również, jak Twoja strona prezentuje się na front-endzie.

  1. Wstaw galerię składającą się z co najmniej trzech obrazków.
  • Wyświetl galerię w dwóch kolumnach.
  • Zmień kolejność obrazków w galerii.
  • Usuń kilka obrazów z galerii, tak aby zostały tylko dwa obrazki.
  • Rozciągnij galerię na pełną szerokość.
  • Zapisz zmiany i sprawdź jak Twoja galeria prezentuje się na front-endzie.
  1. Zmień motyw na Music Theme. Jeśli nie korzystasz ze strony szkoleniowej motyw możesz pobrać z githuba (Clone and downlaod -> Download zip). Wróć do edycji swoj strony. Znajdź akapit, którego kolor tła ustawiłeś na niebieski w jednym ze wcześniejszych zadań. Sprawdź jak teraz prezentuje się paleta kolorów tła.

Czy nadal widzisz w niej kolor niebieski?
________

Czy wiesz dlaczego? ______________________

  1. *(dla ambitnych) Stwórz blok typu Custom HTML, który zawiera informację o konkretnej osobie w formie: zdjęcie, imię i nazwisko i krótka notka bio. Zapisz go jako blok typu Shared i wykorzystaj na co najmniej dwóch stronach/wpisach.
Tam na końcu to ja. Tu też Ci mogę pomóc, ale poprzez komentarze.
Tam na końcu to ja. Tu też Ci mogę pomóc, ale poprzez komentarze.

Część 2 – robimy własne strony

W tej części stworzymy własną stronę. Możesz korzystać z dowolnego motywu zainstalowanego na stronie treningowej.

Twoja strona powinna zawierać:

  • Co najmniej jedną sekcję z treściami w dwóch kolumnach.
  • Co najmniej jeden obrazek rozciągający się na pełną szerokość strony z napisem umieszczonym na obrazku.
  • Przycisk typu call-to-action (blok typu Button) z linkiem do osoby, która jest twoim sąsiadem. W ten sposób utworzymy sobie taki łańcuszek połączonych ze sobą stron, który ułatwi nam obejrzenie wszystkich prac na dużym ekranie.
  • Pozostałe treści/bloki według uznania.

*Jeśli chcesz zbudować stronę opartą o WooCommerce upewnij się, czy masz zainstalowaną wtyczkę WooCommerce Gutenberg Products Block i widzisz blok Products. Więcej na ten temat przeczytasz we wpisie WooCommerce i Gutenberg – nowy blok Produkty.

A tu prezentacja z warsztatów. Od slajdu 14 razem sprawdzaliśmy, co zapamiętaliśmy z zadań, wymyślając pytania do slajdów… I na nie odpowiadając.

Więcej o samych warsztatach planuję naskrobać w osobnym wpisie. To była prawdziwa przygoda warta szerszego komentarza.

5 myśli do „Warsztaty z Gutenberga – lista zadań”

  1. W waterfalu to co idzie z webfaces to kończy się na 2,56 sek
    youtuby, slideshare i analityksy kończą się na 5,12 sek
    (warszawa UPC 100 po drucie) więc jest spoko

    Wracając do pytania które chcę zadać :>
    „na jakiej licencji są teksty na blogu”
    bo nie ukrywam że akurat to ćwiczenie to mam dużą chęć sobie wziąć, trochę dopasować do swoich realiów i używać w pewnym projekcie.

    Widziałem to smutne stwierdzenie „Wszelkie prawa zastrzeżone ” pod fotą profilową ale może to przypadek, a może ktoś mi nagadał bzdur że to co jest na WordCampie powinno być publikowane na GPL-u

    1. Teksty na blogu są moje, ale materiały z WordCampa rzeczywiście powinno się udostępniać na GPL-u. Tylko nie wiem, jak ja mam oficjalnie to ująć? Coś dodać do tego doca? Poradzisz Arku? W każdym razie link do listy zadań jest tu można sobie pobrać jako pdf na przykład. Link też jest w prezentacji.

      1. Nie wiem jak to powinno być poprawnie zrobione. Zazwyczaj tekst licencji jest dołączany do softu ale czy do takich warsztatowych materiałów też go dołączać? Przykładowo opencola dołącza bezpośrednio do przepisu http://alfredo.octavio.net/soft_drink_formula.pdf.

        Ja tam bym tylko dopisał gdzieś nad lub pod treścią że ten materiał jest na licencji GPL i dał do niej linka bez wpisywania, albo zrobił typowego zipa do pobierania a w nim readme opisujący że materiał na licencji GPL, właściwy tekst licencji i w końcu materiał szkoleniowy.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl w zgodzie i według zasad określonych w Polityce prywatności.