Your Techmate

Tworzenie bloków Gutenberg z użyciem ChatGPT.

Zobacz kurs

Podstawy AWS.

Automatyzacja procesów z Make.com

  • Jak stworzyć jedną wtyczkę dla wielu bloków Gutenberga?

    Jak stworzyć jedną wtyczkę dla wielu bloków Gutenberga?

  • Nowości w WordPress 6.6.2: Bug Fixes i zmiany w edytorze Gutenberga.
  • Cwicly: Krótka historia innowacji i przemian
  • Konfiguracja środowiska do tworzenia bloków Gutenberga: Przewodnik krok po kroku
  • Gutenberg vs. Site Editor vs. FSE – co jest czym w WordPressie?
  • Jak bez kodowania dodać Google Font do Gutenberga?

Gutenberg vs. Site Editor vs. FSE – co jest czym w WordPressie?

Przeskocz do treści

Awatar Mike Tomala

Jeśli pracujesz z WordPressem to możesz czuć się przytłoczony ilością zmian i nowości jakie wprowadzane są w nowych wersjach WP, dlatego w tym odcinku wyjaśnię Ci czym są trzy nowe terminy czyli Gutenberg – Site Editor oraz Full Site Editing, które na stałe zagościły w WordPressie.

Zacznijmy od Gutenberga.

W pierwszej fazie rozwoju Gutenberga, głównym celem było zastąpienie klasycznego edytora, czyli tak zwanego TinyMCE, który opierał się na prostym polu tekstowym.

Gutenberg wprowadził koncepcję bloków, które można porównać do klocków LEGO.
Każdy element treści na stronie, taki jak akapit, obrazek, nagłówek, lista, cytat czy przycisk, jest oddzielnym blokiem. 

Bloki te można swobodnie dodawać, usuwać, przesuwać i modyfikować, co daje ogromną elastyczność w tworzeniu treści.

Gutenberg jest znacznie bardziej rozbudowany niż poprzedni edytor, dlatego mamy więcej możliwości układania i zmiany wyglądu treści podstron czy wpisów, w bardzo prosty i intuicyjny sposób.

Po wprowadzeniu Gutenberga jako edytora treści wpisów i podstron przyszedł czas na kolejny krok w rozwoju Gutenberga.

FSE czyli koncepcji Full Site Editing.

Po pierwszej fazie wdrażania Gutenberga, Twórcy WordPressa pomyśleli sobie:

“Skoro możemy budować poszczególne podstrony za pomocą bloków, to dlaczego nie zbudować tak całego serwisu?”.

I tak narodziła się koncepcja Full Site Editing czyli zbudowania całej strony za pomocą bloków Gutenberga.

Aby było to możliwe stworzony został w WordPressie tak zwany: Site Editor – czyli miejsce, które pozwala na edycję różnych elementów z których składa się strona na WordPressie.

Główne funkcje Site Editora

Edycja Szablonów

Jeśli korzystacie z WordPress’a to zapewne znacie mechanizm szablonów, które można było na przykład przypisywać po poszczególnych podstron. Takie szablony zazwyczaj przygotowywał programista, określając “na sztywno” jakie elementy i w którym miejscu ma dany szablon zawierać.

Dzięki funkcji Site Editor możemy edytować szablony, a także tworzyć zupełnie nowe szablony bez używania kodu i angażowania programisty.

Style globalne

Jak wiecie, w Gutenbergu można tworzyć stronę jak z klocków Lego. 

Każdy klocek, czyli blok, ma inne zadanie, ale zazwyczaj chcemy, aby bloki spełniające to samo zadanie wyglądały tak samo. 

Na przykład, możemy ustawić, że tekst w akapicie będzie domyślnie napisany czcionką określoną czcionką o ustalonej wielkości i kolorze.

Oczywiście, jeśli będziemy chcieli dodać jakiś tekst, który ma być wyróżniony to możemy nadpisać te ustawienia dla dzięki stylom globalnym, nie musimy ustawiać wszystkiego za każdym razem. Możemy wziąć jakiś blok, i go po prostu użyć na stronie.

W Site Editor’ze mamy także możliwość ustawienia palety kolorów wykorzystywanej w serwisie. Dzięki temu nie trzeba na przykład pamiętać kodów kolorów, palety mamy łatwo dostępne, gdy chcemy ustawić kolor jakiegoś elementu.

Możliwości różnych ustawień w Site Editorze jest naprawdę sporo. Gdy wprowadzimy własne ustawienia stylów, możemy je także wyeksportować cały szablon, aby wykorzystać go w innym projekcie.

Wzorce

Projektując strony internetowe często wykorzystuje się takie same elementy na różnych podstronach.
Na szczęście I o tym pomyśleli twórcy WordPressa!

Z dowolnych bloków możemy stworzyć wzorzec, który będzie można łatwo osadzić na wielu podstronach.
Co więcej, jeśli wyedytujemy wzorzec, zmiany również zostaną wprowadzone na wszystkich podstronach, które wykorzystują dany wzór.

Oczywiście to nie koniec możliwości, jakie daje Gutenberg i Site Editor.
Omówiłem 3 rzeczy, które są według mnie kluczowe w zrozumieniu koncepcji Full Site Editing (FSE) w WordPressie.