WordPress 5.4 – co nowego i przykłady zastosowań

W marcu 2020 zobaczymy nową wersję WordPressa – 5.4, a wraz z nią sporo usprawnień w edytorze.

Zapraszam na prezentację najważniejszych z nich. Będzie dużo ilustracji i przykładów zastosowań.

Gradienty w bloku okładka

Gradient to płynne przejście jednego koloru w drugi. W naturze gradienty widzimy każdego dnia patrząc na niebo.

Od wersji 5.4, gradienty możesz używać w swoim WordPressie dla tła w bloku Okładka:

Interfejs ustawiania gradientów dla kolorów tła w bloku Okładka
Interfejs ustawiania gradientów dla kolorów tła w bloku Okładka

Nowy WordPress oferuje nam typy gradientów:

  • liniowy
  • radialny

Dla gradientu liniowego można ustawić kąt, a także określić punkt początkowy i końcowy gradientu przesuwając kółkami na pasku. Punkt początkowy to pozycja od której kolor zacznie się „rozmazywać”.

Ładnie to odzwierciedla pasek z kółeczkami, który widzimy niżej. Zwróćmy uwagę, że kolor niebieski przed pierwszym kółkiem jest jednolity. Podobnie dzieje się z kolorem za drugim kółkiem.

Punkty początkowy i końcowy gradientu ustawia się przesuwając kółka
Punkty początkowy i końcowy gradientu ustawia się przesuwając kółka

Co na plus:

  • Zgrabny i intuicyjny interfejs. Jestem pod wrażeniem jak na stosunkowo niewielkiej powierzchni udało się autorom zaimplementować tak potężny w możliwościach mechanizm.
  • Przykładowa paleta gradientów. Nie trzeba wymyślać koła na nowo. Na przykładach łatwiej zrozumieć działanie tego interfejsu i jego możliwości. Testując gotowce z dostępnej palety, można również zobaczyć jak tworzyć gradienty wielokolorowe.
  • Kontrola kierunku gradientu na tarczy zegarowej. Ułatwia to zrozumienie na czym polega sterowanie kierunkiem rozchodzenia się gradientu.

Co na minus:

  • Nie można nałożyć na siebie punktów granicznych. Można je co najwyżej ustawić obok siebie, maksymalnie „przytulając” ruchome kółeczka. To ograniczenie powoduje, że nie uda nam się uzyskać efektu dwukolorowego tła z kolorami nierozproszonymi. Tak jak na przykład w tej stronie demo, gdzie kolory żółte widoczne w pierwszej sekcji są oddzielone wyraźną linią (na tamtej stronie użyłam gradientów z wtyczki Kadence blocks).
  • Nie można dodać własnego gradientu do palety gradientów. Za każdym razem trzeba go ustawiać na nowo.

Gradient można ustawić zarówno dla tła opartego o kolory:

Przykład ustawienia dwukolorowego gradientu tła
Przykład ustawienia dwukolorowego gradientu tła

… jak i dla tła, w którym ustawiliśmy obrazek:

Gradient można nałożyć również na obrazek tła.
Gradient można nałożyć również na obrazek tła.

W przypadku obrazków kontrola gradientu pozwoli nam ustawić ciemniejsze tło na tej części obrazka, gdzie chcemy umieścić tekst i płynnie rozjaśnić drugą część obrazka, tak jak zrobiłam do dla zdjęcia Pragi nocą wyżej.

Oto kolejny przykład żywej strony z zastosowaniem gradientu w tle.

Gradient w przyciskach

Od wersji WordPressa 5.4 będzie można używać gradientów również w przyciskach.

Gradienty w przyciskach może nie są takie efekciarskie jak gradienty aplikowane na duże powierzchnie, ale graficy uwielbiają takie niuansiki.

Tu zobaczysz przykładową stronkę, gdzie użyty jest gradient w przycisku.

Gradient można stosować również dla przycisków. W WP 5.4 można też dodać dwa przyciski obok siebie.
Gradient można stosować również dla przycisków. W WP 5.4 można też dodać dwa przyciski obok siebie.

Dwa przyciski obok siebie

WordPress 5.4 daje nam również bardzo wyczekiwaną możliwość dodawania dwóch (lub więcej) przycisków obok siebie.

WP 5.4 - Dwa przyciski obok siebie
Dwa przyciski obok siebie

Dwa przyciski obok siebie są bardzo popularne w projektowaniu tak zwanych „call to action”.

Często umieszczane są na stronach głównych, stronach sprzedaży lub landing page’ach, gdzie jeden z przycisków zachęca do podjęcia konkretnej akcji (np. kupienia produktu), a drugi przeznaczony jest dla jeszcze niezdecydowanych, i umożliwia zapoznanie się ze szczegółami, np. zobaczenie strony demo. Zobacz przykład.

Klikane okruszki (breadcrumbs) dla bloków zagnieżdżonych

Odnalezienie się w strukturze bloków zagnieżdżonych było dotąd nie lada wyzwaniem. Ilekroć pokazywałam nowych użytkownikom edytora tzw. nawigację bloku (dostępną na górnym pasku edytora pod ikonką trzech poziomych kresek), słyszałam „Wow! Nie miałam/miałem o tym pojęcia”. Okazywała się ona tzw. deską ratunku w poruszaniu się po strukturach zagnieżdżonych bloków.

WordPress 5.4 niesienie duże usprawnienie w tej kwestii. Teraz już nie trzeba klikać w nawigację bloku, bo na dole strony widzimy klikalne okruszki (breadcrumbs), które – zawsze widoczne – są znacznie wygodniejsze w obsłudze:

Klikalne okruszki pojawiają się na dole ekranu. Ułatwiają przeskakiwanie po właściwościach bloków zagnieżdżonych.
Klikalne okruszki pojawiają się na dole ekranu. Ułatwiają przeskakiwanie po właściwościach bloków zagnieżdżonych.

Na rysunku wyżej widzimy również kilka drobniejszych zmian wprowadzonych w WP 5.4:

  • Ulepszono interfejs podmiany obrazka (wcześniej była ikonka, teraz jest napis Replace/Zastąp).
  • Ikonki plusików pokazujące, gdzie możemy dodawać kolejne bloki są zawsze widoczne.

Blok Ostatnie wpisy ma obrazki wyróżniające

Ustawianie obrazków wyróżniających w bloki Ostatnie wpisy
Ustawianie obrazków wyróżniających w bloki Ostatnie wpisy

To kolejna długo wyczekiwana zmiana. WordPress 5.4 nareszcie daje możliwość wyświetlenia obrazków wyróżniających (ang. featured images) w bloku Ostatnie wpisy.

Trzeba przyznać, że blok ostatnie wpisy staje się naprawdę użyteczny. Zmieniając kilka opcji możemy wyświetlić ostatnie wpisy w różny sposób. Dla porównania, te same wpisy które widzimy na obrazku wyżej można ułożyć tak:

Inny układ wpisów dla bloku Ostatnie wpisy.
Inny układ wpisów dla bloku Ostatnie wpisy. Strzałki pokazują co zdecydowało o tym, że teraz wpisy prezentują się inaczej niż poprzednio.

Kolory dla bloku Kolumny i Grupy

Ustawiania kolor tła i tekstu dla bloku Kolumny
Ustawiania kolor tła i tekstu dla bloku Kolumny

W bloku Kolumny mamy możliwość ustawienia koloru tła i tekstu. Ta właściwość jest o tyle fajna, że kolor tekstu ustawiony na poziomie bloku Kolumny zostanie odziedziczony przez wszystkie bloki typu akapit w nim zagnieżdżone. Nie trzeba tego robić dla każdego z bloków z osobna!

Podobnie działa blok Grupa. Ten blok już wcześniej miał możliwość ustawienia koloru tła, a teraz dodano do niego również możliwość ustawienia tekstu.

Tryb edycji i tryb selekcji

Począwszy od WordPressa w wersji 5.4 na górnym pasku edytora będziemy widzieć nową ikonkę, które reprezentuje dwa tryby pracy z blokami:

  • Edycji (Edit)
  • Selekcji (Select)

Kiedy przełączymy się w tryb Selekcji, możemy wygodniej przemieszczać się po blokach korzystając z tabulacji.

Kiedy kllikamy po blokach w trybie Selekcji, w lewym górnym rogu każdego bloku pojawia nam się również jego nazwa:

Tryb Selekcji
Tryb Selekcji

Tryb edycji umożliwia wprowadzanie zmian:

Tryb Edycji
Tryb Edycji

Nowy blok: Ikonki społecznościowe

WordPress 5.4 wprowadza nowy blok Ikonki społecznościowe. Na backendzie domyślnie widzimy 6 ikonek, ale na front-endzie pojawią się tylko te dla których wypełniliśmy pole z adresem (linkiem).

Ikonki te służą do umieszczenia linków do kanałów społecznościowych (a nie do udostępniania wpisu).

Nowy blok Ikonki Społecznościowe
Nowy blok Ikonki Społecznościowe dostępny w trzech stylach.

Do listy można dodawać również linki do inne kanałów i aplikacji jak na przykład Skype, Dropbox, Amazon, CodePen, a nawet wstawić najzwyklejszy link prowadzący do czegokolwiek.

Inna konfiguracja bloku ikonki społecznościowe
Inna konfiguracja bloku ikonki społecznościowe

Blok Media i tekst układa się w stos na telefonach

Blok Media i tekst, który pozwala na ustawienie obrazka obok tekstu wreszcie doczekał się sensownego zachowania na telefonach.

Aż się nie chce wierzyć, ale do tej pory treść tego bloku wyświetlała się na wąskich urządzeniach tak jak pokazuję po lewej stronie na obrazku niżej:

Elementy bloku Media i tekst ustawiają się w stos na wąskich urządzeniach mobilnych
Elementy bloku Media i tekst ustawiają się w stos na wąskich urządzeniach mobilnych

Od WP 5.4 obrazek elegancko ustawia się na całej szerokości, a treść z prawej „kolumny” przeskakuje niżej. No wreszcie!

Możliwość kolorowania części tekstu w bloku Akapit

Możliwość pokolorowania części tekstu
Możliwość pokolorowania części tekstu

Jeśli chcesz wyróżnić innym kolorem tylko część tekstu, w WP 5.4 już będzie to możliwe.

Zaznaczasz kawałek akapitu, w pasku narzędzi wybierasz Kolor tekstu i aplikujesz wybrany kolor.

Możliwość dodania podpisu do tabeli

Możliwość dodania podpisu do tabeli
Możliwość dodania podpisu do tabeli

W WP w wersji 5.4, możemy dodać podpis do tabeli. W kodzie HTML zostanie on wyświetlony jako element <figcaption>

Usprawniony proces zaznaczania wielu bloków

Tak wygląda zaznaczanie wielu bloków w WordPressie 5.3, jeszcze przed usprawnieniami.

Przed:

Proces zaznaczania wielu bloków jednocześnie w WP 5.3 pozostawiał wiele do życzenia...
Proces zaznaczania wielu bloków jednocześnie w WP 5.3 pozostawiał wiele do życzenia…

A tak wygląda zaznaczanie bloków w WordPressie 5.4:

Po:

Usprawniony proces zaznaczania wielu bloków jednocześnie w WP 5.4
Usprawniony proces zaznaczania wielu bloków jednocześnie w WP 5.4

Prawda, że jest różnica?

Mamy teraz eleganckie ramki, które zastąpiły wcześniejszy, niezbyt udany jasno niebieski kolor.

Kontrola wielkości obrazków w galerii

W WP 5.4 dodano możliwość kontroli wielkości obrazków w galerii. Dotychczas obrazki dodane do galerii miały tylko jeden rozmiar – odpowiadał maksymalnej wielkości obrazka załadowanego do WordPressa.

Teraz w bloku Galeria możemy ustawić następujące wielkości:

  • Miniaturka
  • Średni
  • Duży
  • Pełny rozmiar

Powyższe nazwy reprezentują rozmiary obrazków ustawionych w twoim WordPressie w Ustawienia -> Media.

I obowiązują one dla obrazków-miniaturek galerii – po kliknięciu w obrazek powiększy się on do dużego rozmiaru nawet jeśli ustawiliśmy rozmiar Miniaturka lub Średni.

Inne usprawnienia

W nowej wersji WordPressa możemy dodać obrazek wyróżniający do wpisu za pomocą przeciągnięcia myszą (drag-and-drop).

Ustawianie obrazka wyróżniającego wpisu za pomocą przeciągnięcia myszą
Ustawianie obrazka wyróżniającego wpisu za pomocą przeciągnięcia myszą

Dostępny jest również krótki przewodnik powitalny, który można w każdej chwili włączyć ponownie w opcjach po prawej stronie edytora.

Przewodnik powitalny
Przewodnik powitalny

Ciężko mi ocenić jaką wartość ma ten krótki przewodnik dla nowych użytkowników, ale trzeba przyznać, że wygląda dość zgrabnie i elegancko. Być może w przyszłości stanie się standardem wykorzystywanym również przez wtyczki operujące na blokach.

Nowy edytor rośnie w siłę

Jak widać, nowy edytor WordPressa z wersji na wersję robi się coraz dojrzalszy.

Oficjalne wydanie WordPressa 5.4 jest planowane na 31. marca 2020. W tej chwili dostępna jest już wersja beta, którą można przetestować za pomocą wtyczki WordPress Beta Tester.

Które usprawnienie podoba Ci się najbardziej?

Mnie bardzo cieszą gradienty i okruszki ułatwiające nawigację po blokach. A Tobie które usprawnienie podoba się najbardziej?

A czy w ogóle korzystasz z edytora blokowego?

Ja już dziś nie wyobrażam sobie dziergania wpisów w starym TinyMCE.., ale chętnie posłucham Twojej opinii, nawet jeśli nie przekonałeś się jeszcze do nowego edytora WordPressa.

56 komentarzy do “WordPress 5.4 – co nowego i przykłady zastosowań”

  1. Dzięki za paczkę niusów 🙂

    Świetnie się rozwija Gutenberg. W życiu nie myślałem że tak wiele możliwości się w nim pojawi kiedy go zobaczyłem po raz pierwszy. Jeśli by wystartował z takiego poziomu to liczba hejtujących zmianę na początku byłaby znikoma.

    Co prawda w bece nadal używam tiny bo tak szybciej… to doceniam zmiany a tam gdzie go używałem to by się przydały chyba najbardziej okruszki ale projekt został opuszczony zanim się rozkręcił i nie wiem czy do niego wrócę 🙁

    1. Arek, a wiesz, że coś podobnego pomyślałam testując tą betę? Że gdyby od tego Gutek wystartował do Core’a to by był inaczej przyjęty. A do piszanie wpisów blogowych też ciągle używasz TinyMCE?

      1. W bece nie ma czasu na cyzelowanie postów.
        Z worda ctrl+c tytuł -> ctrl+v w posta,
        ctrl+c treść -> ctrl+v w posta.
        Przeciągnij fotki, zrób galerię,
        zaznacz kilka czekboksów,
        popraw datę publikacji
        i klikasz publikuj jak głupi automat.

        Niestety tylko dzięki tak absurdalnemu sposobowi publikacji coś się pojawia na stronie i moja właściwa robota też jest zrobiona.

        Z drugiej strony to na bibliotekarzu też mam jeszcze tiny i czasem coś tam naklepię, ale to głównie nudne i same teksty są nawet bez formatowań, więc wyciąganie gutka do twentyten byłoby przerostem formy nad treścią.

        1. Arek, rozumiem. Pewnie też inne osoby Ci te doc’i dostarczają. To co napisałeś skłoniło mnie do myślenia kiedy podejście blokowe ma widoczną przewagę nad klasycznym edytorem. Właśnie zbieram sobie w brudnopisie wady i korzyści i jak wykluje się z tego coś sensownego, to popełnię o tym jakiś wpis (albo może filmik, bo łatwiej niektóre rzeczy pokazać w akcji).

    1. Dzięki Mariusz. Jeśli chodzi o wydajność – chyba team core’a WP jest świadomy powagi sprawy bo co rusz widzę jakieś statystyki jak każde nowe wydanie poprawia wydajność.

    2. Czyli nie tylko ja widzę, że z update na update WP muli i staje się ciężkim klockiem… ale za to można dodać z panelu gradient 😀

  2. Świetne podsumowanie, dzięki Aga! 🙂

    Mnie najbardziej cieszą okruszki dla zagnieżdżonych bloków. Kończę właśnie pierwszy projekt, w którym okodowałam trochę customowych bloków (pierwsze koty za płoty:) ) i zauważyłam, że zagnieżdżone bloki się bardzo przydają. Niestety jednak, przy wielu zagnieżdżeniach, przeklikiwanie się pomiędzy wewnętrznymi blokami jest problematyczne i ciężko to czasem doprowadzić do stanu sensownej użyteczności. Także okruszki tutaj będą bardzo przydatne.

    Gradienty też są ekstra. W fajnym kierunku Gutenberg się rozwija. Szkoda tylko, że ciągle brak motywów, które byłyby porządnie dostosowane do edytora blokowego. Kiepsko dostosowany motyw niestety psuje doświadczenie użytkowników w korzystaniu z bloków.

    1. Magda, a mogę podpytać, jak tworzyłaś te pierwsze własne bloki? Z ACF Pro? Tak, z tymi motywami to jest prawdziwa bolączka. Ja nie mogę tego zrozumieć, że autorom nie zależy…

      1. Z ACF PRO też robiłam, ale to nie to, to jest tylko workaround. Uczę się block API, zaczynałam od create-guten-block, przeczesałam kod źródłowy natywnych bloków, przerobiłam tutorial z Udemy i jakoś to poszło. Teraz planuję się poduczyć Reacta żeby robić bardziej zaawansowane rzeczy. Generalnie kodowanie bloków to jest zupełnie coś innego niż się robiło dotychczas w phpie (m.in. przy pomocy ACFa), ale spodobało mi się to.

          1. Magda, to mnie bardzo pozytywnie zaskoczyłaś. Tym, że dostrzegasz, że ACF Pro to tylko jak piszesz workaround, ale jeszcze bardziej jak profesjonalnie podeszłaś do tematu. Ja próbowałam zrozumieć, jak pisać własne bloki, ale jak zobaczyłam ile rzeczy dodatkowo muszę nauczyć się dodatkowo, to zrezygnowałam. Dzięki ogromne za te wszystkie linki.

          2. A w zasadzie to zaczęłam od podstaw Reacta – https://www.youtube.com/watch?v=pgAvVxowaYU – to wystarczy żeby zacząć z blokami. Do tego, w międzyczasie, okazało się, że warto też się czegoś dowiedzieć o Reduxie, więc przerobiłam ten bezpłatny mini kurs https://egghead.io/courses/getting-started-with-redux, nagrany przez samego Dana Abramova. Nauki jest sporo, ale dzisiaj, po kilku miesiącach, czuję się już z block API całkiem dobrze.

  3. Ogólnie brakuje:
    – Pozycji w menu zapisanych bloków. Trzeba dodać samemu, a się często przydaje.
    – Buildera dla szablonów np do budowania od nowa index.php single. php itp.

    1. Piotr, odnośnie pierwszego, to już widziałam na prototypach plan do dodania tego. Odnośnie drugiego, to też jest już to w budowie. Nawet myślałam, czy o tym nie napisać artykułu (PS Nie wiem, czy znasz wczyczki Toolset (Toolset Types i Toolset Blocks). Tam już to jest, dodatkowo połączone z dynamicznymi custom fields).

      1. Świetne informacje,. Nie korzystałem z Toolset Types i Blocks, korzystam z własnego toolseta. Jak wejdzie to do core’a to będę już bardzo zadowolony.

        Widzę super progress także, jak ktoś nie jest przekonany do gutenberga, to niech wraca do joomli 😉

          1. Mi w ogóle brakuje na polskiej scenie fajnych aktualnych artykułów o średnio zaawansowanych rzeczach na WP. Takich jak ACF, Custom Fields itp.

            Nowe pozycje jakie się pojawiają to albo podstawy podstaw (korzystanie z Gutenberga, ustawianie ikonek itp) lub mega zaawansowane rzeczy jak nowe blocki, systemy szablonów np. Timber itp. A ten środek, to stare materiały przed pluginy ACF czy Gutenberga.

          2. Hej SpeX. Ja sama zabierałam się już kilka razy do napisania czegoś o custom fieldach (w brudnopisie wciąż mam zaczęty artykuł o roboczym tytule: Czy w świecie bloków jest miejsce dla custom fieldów), ale ja nie lubię wrzuć tylko takich zapchaj-dziur bez zrobienia porządnego researchu najpierw, a to wymaga czasu. Dzięki za podpowiedzi, czego brakuje. Nie mówię, że coś wkrótce napiszę, ale przynajmniej widzę, gdzie jest luka i czego brakuje. Dzięki.

  4. Uwielbiam takie podsumowania: oto kolejna lista rzeczy, które trzeba będzie zablokować lub ukryć, żeby klient nie rozwalił witryny w drebiezgi myśląc, że „tak będzie czytelnie”.

    PS – Tutaj wszystko rozgrywa się w oparciu o motyw Twenty Twenty – kiedy coś własnego? Wszyscy piszą o cudowności Gutenberga, tylko że jadą na gotowcach, nad którymi pracuje sztab ludzi.

    Z jednej strony trudno się dziwić, bo dokumentacja G….berga jest niewiarygodnie podłej, nędznej, żałosnej jakości, z drugiej… jak ludzie mogą być tak bezkrytyczni?

    Żeby była jasność – pracuję nad czymś własnym, ale to jest po prostu droga przez mękę oparta na informacjach dostarczanych przez blogerów (z których każdy zaleca co innego) i chirurgicznym kopiowaniu fragmentów z innych motywów (co jest nieetyczne i nieskuteczne, bo niczego się nie nauczę).

    1. @ikspetss, nie zrozumiałam, co miałbyś blokować i dlaczego. Rozjaśnisz?
      I też nie zrozumiałam, co masz na myśli pisząc, że wszystko rozgrywa się o motyw Twenty Twenty. Bloki pracują z każdym motywem… Co masz na myśli, że pracujesz nad czymś własnym. Nad własnym motywem czy nad własną kolekcją bloków?

      1. Jaśnie, że rozjaśnię 🙂 Weźmy chociaż cały mechanizm do gradientów, który tak pieczołowicie opisałaś. WordPress to system zarządzania treścią, a nie designem, zatem ta funkcja nadaje się do natychmiastowego przycięcia (blokada to może za mocne słowo), tj. dopasowania do wyglądu strony – pozwolenia tylko na konkretne gradienty, które będą pasować do projektu.

        Bloki pracują z każdym motywem, to prawda. Chodzi mi o to, że chwalący GB używają motywów zbudowanych przez sztaby ludzi. Jakby mieli tak zaprojektować motyw od podstaw i zakodować go ręcznie (w tym poradzić sobie z podle niekonsekwentnym systemem odwoływania się do bloków w CSS dla edytora), to śpiewaliby zapewne nieco inaczej (cieniej).

        Ja obecnie użeram się z samodzielnym zbudowaniem motywu wspierającego GB, a w ramach tego kombinuję nad takim rozłożeniem CSS, by móc jednocześnie kodować wygląd bloków zarówno na froncie, jak i w edytorze. Eksperyment trwa, ale nie czuję podekscytowania, raczej zrezygnowanie…

  5. Hejka, przez przypadek (a właściwie dzięki wujkowi Google) wpadłem na tą stronę w poszukiwaniu wiedzy na temat nadchodzącej nowej wersji Wordpresa i pozytywnie mnie zaskoczyło jak bardzo szczegółowo Ago opisałaś ten update, więc stwierdzam że będę częściej tutaj wpadał oraz nadrobię zaległości z przeszłości 🙂

    1. LukegaX, dzięki za ten komentarz. Bardzo mnie podbudowałeś, bo ja przez kilka dni po opublikowaniu wpisu nie mogłam go znaleźć w Google’u i byłam podłamana. Zupełnie nie rozumiałam dlaczego algorytm Google’a się tak zachował. Ale teraz, po Twoim komentarzu sprawdziłam znów i widzę, że w końcu jest.

  6. Develop custom blocków w pojedynkę, to porażka, zaorać się idzie…
    bo nad wtyczkami pracuje przynajmniej 3-5 osób, albo i więcej, one chyba tylko tym się zajmują.
    Lepiej wybrać wtyczkę… i z głowy… update…webpacka… api gutenberga…
    Custom blocki: slidery – tiny-carousel, acc, tabsy, fa, popUp (button trigger or choice timeout), ostatnie posty właśnie z tymi IMG – futured image. Takie bloki miałem rok temu, a do pierwszych bloków mija 2 lata, bez kursów z REACTA.
    Jest w cholerę możliwości jak coś można napisać, albo skopiować i przerabiać funkcjonalność.
    Na własny użytek zrobiłem slider metodą, której we wtyczkach nie spotkałem, a działał lepiej i był bardziej funkconalny; nadawał się do tekstu i obrazków; nie wiem jak dzisiaj, ale na tamten czas takiego nie było dla Gutenberga. W tamtych czasach nie było nawet wrapera DIV; group-block – chyba teraz się nazywa.
    Wydajność, aktualizacje, bezpieczeństwo to zmora WP.

    1. Tymek, przede wszystkim dzięki, że dzielisz się swoimi doświadczeniami w budowaniu własnych bloków. Ja sama nie umiem tworzyć bloków, ale obecnie pracuję z ekipą programistów, którzy tworzą bloki pod komercyjną wtyczkę i widzę, ile pary w to idzie. Nie wiem, ile siedzisz w WordPressie (mam wrażenie, że już ładnych parę lat na pewno), ale wydaje mi się, że WordPress, a raczej cały ekosystem wokół WordPressa przez ostatnie lata się ogromnie zmienił, a my wciąż boimy się tą zmianę zaakceptować i sporo osób próbuje robić strony „po staremu” (czytaj customowa developerka), co niestety, w dzisiejszym świecie już nie sprawdza się tak dobrze jak kiedyś. Żeby było jasne, oczywiście są projekty/strony, gdzie customowa developerka jest konieczna i najlepszym rozwiązaniem, ale w miażdżacej większości prostych stron w ogóle niepotrzebna. Nie wiem, czy pisząc „Lepiej wybrać wtyczkę… i z głowy” piszesz to ironicznie, ale moim skromnym zdaniem w większości przypadków naprawdę lepiej wybrać wtyczkę i z głowy.

  7. Słynne słowa „ucz się javascript – w domyśle pod Gutenberga” – tak to zabrzmiało ironicznie…. 🙂
    Bo w 97% stron customowe bloki nie potrzebne, wystarczą bloki z wtyczki.
    W przyszłości podział wtyczek na pojedyncze bloki, które już nie będą wymagały rejestracji w php – … block directory – library umożliwi wybór pojedyńczych bloków z rezpozytorium; po co utrzymywać kilka własnych bloków.
    Tak to prawda, „customowa” już się skończyła.

    Pozostaje wyzwanie i pytanie czy WP się utrzyma z tą wydajnością (mamy szybszy internet, ale dla mobile różnie to bywa…) i bezpieczeństwem, koniecznością aktualizacji i zmieniającym się rynkiem.

    Lepszym rozwiązaniem dla WP była by instalacja, albo możliwość przełoączenia w 2 trybach: 1) dla prostych stron wizytówkowych z blogiem bez contaktForma możliwość generowania statyka, wtedy samo WP nie było by indeksowane, poza public (nie wiem czy się tak da) i tylko istaniałby na zasadzie (netify, wix, …) jako cms do generowania statyka, klient nie musiałby się martwić o …, czyli sama strona była by szybsza i bezpieczniejsza, część z komentarzami nie byłaby nadpisywana, przy statyku byłby komponent Discous, byłaby to wersja defoultowa z (porządnym responsive dla mobile… w gutenbergu, sliderem, popupem, podpięciem newtsellera i SEO, siteMap, robots, podpięciem analityki od Google oraz mapy). Ostatecznie w większości przypadków bez ContaktFormu można się obejść, bo klient i tak loguje się do programu pocztowego poprzez facebooka lub inne socialmedia, czyli hasło na pewno pamięta; 2) wersja już byłaby klasyczna z dostępem do większej ilości funkcjonalności i wtyczek właśnie dla customowych i rozbudowanych serwisów (WooCommerce…).

    Pojawienie się serwisów typu WIX, Netify, Squarespace (pisowania?) czy dopracowanych generatorów statyka z poziomu Windows 10 i eksportowanie poprzez sFTP na serwer jest to kwestia kilklu lat (już taki jest, ale nie daje klientowi możliwości takiej edycji kontentu i hedera jak w Gutenbergu; funkconuje to raczej jako klasyczn edytor w WP).

    Nielepiej wykorzystać potencjał edycji (gutenberga), dodać kilka funkconalności i sprawdzić czy WP dałoby się przerobić na taki rynek; raz instalujesz dla klienta, konfigurujesz, zajmujesz się themem, projektowaniem, wyklikiwaniem strony. Funkcjonowanie WP jako generator statyka (defaultowo, a nie poprzez wtyczkę, którą trzeba poprawiąć) bez konieczności aktualizacji samego CMSa byłoby bardziej przyszłościowym rozwiązaniem; nuxt, next, Gatsby, + Netiffy.
    Jakaś potrzeba na rynku była, skoro pojawiły się takie trendy. Klient tylko aktualizował by sobie blog lub dodawał strony i sam eksportował na serwer do public.
    Na WP też przyjdzie czas…

  8. Na jakimś blogu czytałam ostatnio wpis o tym jaki to WP nie jest zły… mi się wydaje, że ludzie po prostu nie potrafią korzystać i stąd się biorą takie opinie.

  9. Używam wtyczek do modyfikacji treści na stronie, najczęściej jest to Elementor ale widzę że aktualny edytor rośnie w siłę, dzięki za artykuł i pozdrawiam

  10. Edytor klasyczny podpis pod obrazkiem wstawiał wyśrodkowany, natomiast Gutenberg wstawia ten podpis wyrównany do lewej strony, choć w edytorze widać go wyśrodkowanego. Czy da się to jakoś rozwiązać?

  11. Mam pytania, nie na temat:)
    1. Jak zarzadzacie wszystkimi odnosnikami (widzialem artykul) i linkami ktore uzywacie w postach zeby byly:
    A – Zawsze dosepne jak np przeniesiecie/zmienicie nazwe czegos do czego sie odniesliscie?
    B – Zebyscie wiedzieli gdzie ktory uzyliscie:)

    Przy blogu na 50 wpisow pewnie jeszcze da sie to znalesc. Ale jak macie strone z 1000 podston/wpisow to mozna sie pogubic. 🙂

    2. Co do sledzenia kto skad trafil do nas, kiedy ile tego jest, i ewentualnie co zrobil na naszej stronie? 🙂

    3. Ktorys WAF z pluginow jest czegos wart czy lepiej platne cloudflare?

    Dzieki:)

  12. Właśnie wyszła beta 5.5, a mi wciąż przeszkadza domyślna szerokość okna z czasów 2015. Z punktu widzenia motywu, to Gutenberg dyktuje warunki. Nawet jeśli tworzysz niszowy projekt z 90 aktywnymi użytkownikami, dążący do maksymalnego zaoszczędzenia internetu mobilnego.

  13. Proszę o pomoc. Chciałbym dodać okładkę na wpis, w wielu wpisach jako seria. Każda będzie miała swój tytuł. Czy da się zrobić tak, żeby na siebie stronie wpisu nie było tytulu powyzej okladki, tylko okladka z tytułem byłaby jednocześnie nazwa artykułu i linkiem url?
    Czyli nie
    Tytul
    Okladka z nazwa wpisu

    A
    Okladka z tytulem
    Tekst wpisu

    Dodatkowo, jak najlepiej zarządzać seriami wpisow? Chce zrobić stronę i opisac z odnośnikami co będzie w każdym wpisie i tam podać troche w formie spisu tresci odnosniki. Czy jest jakiś bardziej sensowny sposób na takie coś?

    1. Kamil, czy chodzi ci o taki efekt jak tu: https://startertemplatecloud.com/g01/2020/10/18/the-best-investment-on-earth-is-earth/ albo kolejny wpis: https://startertemplatecloud.com/g01/2020/10/18/real-estate-cannot-be-lost-or-stolen-nor-can-it-be-carried-away/ ?

      Jeśli zależy Ci na takim efekcie a niekoniecznie na użyciu bloku okładka, to możesz to osiągnąć na motywie Kadence. Te dwa linki są właśnie z demka tego motywu i nawet możesz sobie takie demko zainstalować za pomocą wtyczki Kadence Starter Templates.

      Jeśli natomiast zależy Ci na takim efekcie z wykorzystaniem bloku okładka i chcesz to osiągnąć bez pisania kodu, to jest to możliwe za pomocą płatnej wtyczki Toolset Blocks (jest to wtyczka z pakietu Toolset), który kosztuje $69, ale tutaj też musiałbyś wykorzystać motyw Astra albo GeneratePress, bo one pozwalają na wyłączenie tytułu na templatce dla tzw. single-post pages. Jak jesteś zainteresowany tą opcją, to daj znać, wytłumaczę więcej.

      Możesz też to zrobić w kodzie korzystając z tak zwanych szablonów (templates). Też daj znać, czy potrzebujesz więcej szczegółów.

      Co do drugiego Twojego pytania.
      To o czym piszesz, to tzw. archiwum wpisu. WordPress tworzy takie archiwum domyślnie dla każdej strony i zobaczysz je jeśli utworzysz pustą stronę a potem w ustawianiach > Czytanie wybierzesz tę stronę w części „Strona z wpisami”. To jak to archiwum wygląda domyślnie zależy od motywu. Najczęściej wyświetlany jest tytuł wpisu, jego zajawka i odnośnik Czytaj dalej. Jeśli chciałbyś zmodyfikować to archiwum według własnego „szablonu”, to znów – bez kodowania możesz to zrobić wspomnianą wyżej wtyczką Toolset Blocks z pakietu Tooset, albo jak masz chęci na bawienie się w kodzie, to możesz zrobić własną templatkę dla archiwum.

        1. Kamil teraz, po przemyśleniu tematu, uważam, że użycie bloku okładka z tytułem w środku nie jest dobrym podejściem dla wpisów blogowych, za chwilę wyjaśnię dlaczego. Póki co, na razie załóżmy, że idziemy w tę opcję.

          Więc to, co nam stoi na przeszkodzie to tytuł wpisu, który jest wyświetlany na stale na początku, a tego nie chcemy.

          A zatem najpierw musimy go ukryć, żeby się nie wyświetlał na froncie. Niewiele wiem, na temat motywu, który używasz, ale dziś już sporo motywów oferuje możliwość wyłączenia tytułu dla wpisów blogowych i wcale nie trzeba tego robić pojedynczo dla każdego wpisu. Najczęściej w Personalizacji motywu należy poszukać sekcji Single Post (lub o podobnej nazwie) i tam powinno się być coś, co pozwoli na wyłączyć i tytuł wpisu. Dla przykładu motywy Astra, Kadence, Blocksy to umożliwiają.

          Często dla wpisów blogowych pod tytułem wyświetlaną są również w tzw. post meta (data wpisu, autor, kategoria). I to też trzeba by wyłączyć i znów, motywy Astra, Kadence, Blocksy na to pozwalają w tej samej części co wyłączenie tytułu wpisu.

          Jeśli motyw na to nie pozwala, to pozostaje nam “grzebać” w kodzie motywu (bo ukrywanie tytułu za pomocą CSS to nie jest dobra praktyka). I wówczas należy zrobić najpierw motyw potomny, a potem w nim własną templatkę dla tzw. single-posts, często będzie to plik o nazwie single.php ale niekoniecznie, szczegóły będą zależeć od motywu. Najłatwiej zrobić kopię istniejącej templatki dla single’a i po prostu usunąć z niej kawałek kodu, który odpowiada za wyświetlanie tytułu. Przez to, że robimy to w motywie potomnym, WordPress weźmie tą z motywu potomnego i zignoruje tą oryginalną.

          No i teoretyczne już możemy zacząć edycję wpisu od bloku okładka, tylko trzeba pamiętać, żeby w środku powielić tytuł wpisu. Wcześniej myślałam jeszcze, że można by wykorzystać tzw. block templates (więcej o nich przeczytasz tu: https://developer.wordpress.org/block-editor/developers/block-api/block-templates/ albo tu: https://www.billerickson.net/gutenberg-block-templates/ bo one pozwalają nam dodać domyślne bloki do wnętrze wpisu, żeby użytkownik nie musiał tego robić sam. No i wówczas można by było taki blok template zacząć od bloku okładka z blokiem h1 w środku.

          A dlaczego teraz myślę, że wykorzystanie bloku okładka dla wpisów to nie jest dobry pomysł?

          Oto wady takiego rozwiązania:
          1. Tytuł musisz powielić dwa razy i pilnować, żeby brzmiał tak samo w obu przypadkach (raz jaki to tytuł wpisu, drugi raz wewnątrz bloku okładka). Oryginalny tytuł wpisu jest wykorzystywany do wielu innych rzeczy (np. tzw. tag title) i nie możemy go zignorować.
          2. Lepiej główny obrazek wpisu przechowywać w miejscu na to przeznaczonym, czyli tzw. featured image (obrazek wyróżniający). A to dlatego, że potem dużo innych rzeczy z tego korzysta. Na przykład archiwa wpisów (spis wszystkich wpisów bloga), jakieś widgety lub bloki które wyświetlają ostanie wpisy, wtyczki, które na podstawie featured image tworzą tzw. metadata (og:image) dla social mediów itp.

          Więc ostatecznie ja dla osiągnięcia takiego efektu, który ty potrzebujesz, wykorzystałabym motyw Kadence albo Blocksy, który które dają taką możliwość w kilku kliknięciach w ustawieniach motywu. Przykład z motywu Bloksy: https://demo.creativethemes.com/blocksy/charity/mauris-cursus-mattis-molestie-aaculis-oterat-pellentesque/ i wykorzystała obrazek wyróżniający.

          Jeśli robisz (lub planujesz robić) więcej stron na WordPressie to motywy Kadence, Bloksy, Astra są świetnymi motywami startowymi, bo pozwalają robić mnóstwo zupełnie różnych stron i to bardzo szybko.

  14. Jesteś wspaniała dzięki, pomyślę, sprawdzę najpierw swój motyw ale nie chce go zmieniać bo ma fajnie zrobione kolorowe kategorie bez dodatkowych wtyczek. A te płatne narzędzia, gdybym robił to za pieniądze może bym tyle zapłacił. Poza tym dla mnie bezpieczeństwo strony jest ważniejsze niż dodatkowe wtyczki itp, wolałbym się chyba nauczyć dobrze html CSS i PHP i samemu napisać całą stronę niż używać motywów i wtyczek które czasami dodają bardzo dużo niepotrzebnego kodu.

    1. Kamil, racja, w płatne narzędzia warto inwestować, jak wiemy, że wykorzystamy je więcej niż raz, albo jak ktoś nam bardzo dużo płaci za stronę, żeby się koszt zwrócił. HTML i CSS warto znać, bo zawsze dzięki temu coś można podszlifować pod własne potrzeby. Motywu od zera nie warto pisać moich zdaniem, chyba, że po to, żeby zrozumieć jak motywy WP działają. Napisanie nawet prostego motywu to jest bardzo dużo pracy, nawet dla zaawansowanego użytkownika. Warto natomiast znać podstawy architektury motywów w WordPressie po to, aby tworzyć motywy potomne. A w ogóle niedługo i tak sporo się w kwestii motywó zmieni, bo wchodzi tzw. Full Site Editing (FSE). Na szczęście jak się zna podstawy działania motywów obecnych (tzw. templatates hierarchy) to przesiadka na FSE będzie łatwiejsza, bo idea jest podobna, tyle że FSE wyeliminuje potrzebę pisania kodu PHP.

      1. To jeszcze ostatnie pytanie, czy da sie jakos bez grzebania w kodzie zaznaczyc jeden wyraz z bloku (nie caly blok) i zmienic jego kolor, ale takze zmienic kolor jego tla?

        1. Wystarczy zaznaczyć wyraz i w narzędziach jest opcja Text Color gdzie można wybrać kolor wyrazu i tło.
          Wyżej w narzędziach jest opcja Ustawienia koloru i tu można wybrać kolor i tło całego akapitu.

          1. Janusz, u mnie moge po zaznaczeniu wyrazu wybrac tylko kolor tekstu, nie ma tla. Tło moge zmienic dla calego bloku.

        2. Kamil, w edytorze blokowym WordPressa możesz zmienić kolor fragmentu tekstu tak jak opisał to Janusz, ale nie możesz bezpośrednio w edytorze zmienić tła fragmentu tekstu. Możesz to zrobić za pomocą CSS’a. Gdy już zmieniłeś kolor fragmentu tekstu, to wówczas WordPress dodaje klasę has-inline-color i w ustawieniach motywu (Wygląd > Dostosuj > Dodatkowy CSS) możesz dodać taką regułę: .has-inline-color {
          background: yellow;
          }

  15. Janusz, u mnie moge po zaznaczeniu wyrazu wybrac tylko kolor tekstu, nie ma tla. Tło moge zmienic dla calego bloku.

    1. Jaki masz motyw.
      U mnie w narzędziach jest m.in:
      – Ustawienie koloru – to dla całego akapitu, tło i akapit
      – Formatting – m.in. ustawienie indeksów górnego i dolnego, mark
      – Text Color gdzie są dwie opcje: – Selected text color i – Selected text background color
      – Zaawansowane – ustawienie kotwicy i css
      Mam motyw Kadence.

      1. Mozesz zapodac fote z opcja narzędzia w którym da sie oddzielnie ustawić tło dla wyrazu i danego bloku? Ja w ogóle na pasku na górze nie mam narzędzi, tylko nad edytowanym blokiem, ale to tylko ustawienie gdzie to ma się pokazać.
        Motyw to mynote.

  16. Jeżeli używasz Gutenberga to musisz to widzieć.
    Przy edycji strony na samej górze po prawe stronie masz:
    Zmień na szkic Zobacz Zaktualizuj
    dalej jest czarna gwiazdka, która wyświetla „Ustawienia” gdzie to wszystko o czym pisałem jest widoczne.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.