Gutenberg cały czas rozwija możliwości edycyjne bloków, ale nie raz zdarza się, że brakuje jakiejś opcji konfiguracji bloku, aby osiągnąć właściwy układ czy wygląd.

Co wtedy zrobić?

Mamy kilka możliwości poradzenia sobie z taką sytuacją, ale w tym odcinku omówię jak działa funkcja: “Block Style”.

Pokażę Wam 2 przykłady – jak można stworzyć własną wersję istniejącego już bloku, czyli jak ulepszyć Gutenberga.

Przykład 1. Dodanie własnego stylu do bloku „Film”

Chciałbym mieć na stronie układ dwóch kolumn, w jeden tekst, a w drugiej wideo. Wideo powinno zajmować zawsze taką samą wysokość jak kolumna tekstu.

W bloku “film” nie mamy możliwości ustawienia wysokości bloku, dlatego skorzystamy z funkcjonalności “Block Style”, aby dodać własny styl dla bloku “film”.

Otwórzmy plik functions.php z katalogu szablonu, aby dodać kod.

Najpierw musimy zarejestrować nasz “Block Style”. Służy do tego funkcja: “register_block_style”.
Pierwszym argumentem jest slug bloku, do którego chcemy dodać nowe style.
W moim przypadku jest to core/video.

Jeśli chcesz dodać style do innego bloku wbudowanego i nie wiesz jaki jest jego slug to w opisie zostawiam link do pełnej listy bloków, gdzie znajdziesz właściwe informacje.

W drugim argumencie funkcji register_block_style za pomocą tablicy możemy zdefiniować parametry naszego stylu. Pierwszy z nich to:

• parametr ‘name’, w którym podajemy unikalny SLUG naszego stylu
• parametr ‘label’ to nazwa, która zostanie wyświetlona w panelu, gdy będziemy chcieli wybrać ten właśnie style dla wybranego bloku
• Parametr ‘inline_style’ pozwala zdefiniować kod CSS, który zostanie dodany do strony

register_block_style(
  'core/video',
  array(
    'name' => 'full-high-cover',
    'label' => 'Pełna wysokość',
    'inline_style' => '
      .wp-block-video.is-style-full-high-cover { height: 100%; }
      .wp-block-video.is-style-full-high-cover video { height: 100%; object-fit: cover; }
    '
  )
);

W naszym przykładzie dodamy kod CSS, który ustawi wysokość kontenera oraz wideo na 100% oraz dodatkowo ustawi parametr CSS “object-fit” na “cover” dla elementu video. Dzięki temu, nasze wideo będzie skalowało się w taki sposób, aby wypełnić całą dostępną przestrzeń przy zachowaniu właściwej proporcji.

Zwróć uwagę, na odpowiednie nazwy klas w przygotowanym kodzie CSS.

Klasa “wp-block-video” jest domyślną klasą dla bloku wideo, natomiast klasa “is-style-full-high-cover” zostanie dodana tylko do bloków, które dla których wybierzemy nasz nowy styl. Nazwa występująca w klasie “is-style” musi być zgodna z nazwą podaną w parametrze “name”.

Zapiszmy plik i przejdźmy do panelu WordPress’a. Utwórzmy nową stronę na której dodamy blok: “Kolumny”.
Wybierzemy układ 50 / 50.
W lewej kolumnie dodamy kilka paragrafów z przykładowym tekstem.
W prawej kolumnie dodamy blok “film”.

Wybierzmy dowolny plik wideo, aby wyświetlony został “odtwarzacz” i w Sidebrze z prawej strony przejdźmy do zakładki: “Style”.

Mamy tutaj do wyboru opcję: “Pełna wysokość”. Jest to właśnie nasz własny “Block Style”, który przed chwilą dodaliśmy w kodzie PHP.

Zaznaczmy go, zapiszmy stronę i zobaczmy jak to wygląda.
Jest to dokładnie to, o co chodziło!

Gdy wrócimy do panelu i dodamy więcej tekstu w lewej kolumnie, wtedy wideo z prawej zostanie jeszcze bardziej wydłużone.

Dlaczego jednak wideo wygląda inaczej na stronie, a inaczej w podglądzie Gutenberga?
Wynika to z różnicy w strukturze kodu HTML między podglądem Gutenberga a finalną stroną. Aby to naprawić, musimy zmodyfikować nasze wcześniejsze style CSS tak, aby ustawić wysokość 100% także dla elementu potomnego DIV.

Gdy odświeżymy teraz panel Gutenberga zobaczymy, że wideo w Gutenbergu również zostaje rozciągnięte w dół z zachowaniem proporcji.

A więc mamy to! Ale wróćmy jeszcze na moment do funkcji “register_block_style” w functions.php, bo chcę Ci pokazać dwa dodatkowe parametry, które można wykorzystać w tej funkcji.

W argumencie z tablicą możemy dodać parametr: “is_default” true. Dzięki temu ten styl stanie się stylem domyślnym dla każdego nowego bloku wideo.

Możemy także zamiast parametru “inline_style” z gotowym kodem CSS podać parametr: “style_handle” w którym należy podać SLUG styli zarejestrowanych wcześniej funkcją wp_register_style().

Możemy przejść do drugiego przykładu!

W tym przykładzie zarejestrujemy własny “Block Style”, który do bloku o nazwie “Grupa” doda styl, który będzie się nazywał: “Rozmyte tło”. Tym razem do zarejestrowania stylu wykorzystamy funkcję w JavaScript zamiast PHP.

W katalogu szablonu dodajmy folder “js” i utwórzmy w nim plik o nazwie: my-gutenberg-script.js

Otwórzmy teraz plik functions.php.

Dodajmy funkcję, która wykona się w haku: enqueue_block_editor_assets.
W tym haku możemy dodać elementy zewnętrzne, który będą używane w edytorze Gutenberg.

function my_gutenberg_block_editor() {
  wp_enqueue_script(
    'my-gutenberg-script',
    get_template_directory_uri() . '/js/my-gutenberg-script.js',
    array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
    filemtime( get_template_directory() . '/js/my-gutenberg-script.js' ),
    true
  );
  
  // wp_enqueue_style('my-gutenberg-styles');
  }
  add_action( 'enqueue_block_editor_assets', 'my_gutenberg_block_editor' );

Wewnątrz funkcji rejestrujemy plik JavaScript, który wcześniej utworzyliśmy w katalogu “js” w szablonie.

Wróćmy do utworzonego pliku “my-gutenberg-script.js” i dodajmy w nim następujący kod.

Wykorzystujemy funkcję “registerBlockStyle” znajdującą się w obiekcie: “wp.blocks”.

W pierwszym argumencie funkcji podajemy SLUG bloku, do którego chcemy dodać styl.
W naszym przypadku będzie to: “core/group”. W drugim argumencie funkcja “registerBlockStyle” przyjmuje obiekt z parametrami analogicznymi jak funkcja PHPowa wykorzystana w pierwszym przykładzie.
Podajemy więc:
“Name” – “blur-bg”
Blur – czyli rozmycie!
“Label” – “Rozmycie tła”

Uwaga, rejestrując nowy styl dla bloku poprzez JavaScript nie możemy bezpośrednio wskazać kodu CSS poprzez parametr inline_style, ani wskazać “style_handle” jak w poprzednim przykładzie.

Gdy wybierzemy w Gutenbergu ten styl dla bloku “Grupa”, zostanie do niego dodana klasa: “is-style-blur-bg” – analogicznie jak w pierwszym przykładzie, ale sami musimy zadbać, aby taka klasa i właściwości CSS znalazły się w odpowiednim miejscu.

Wróćmy zatem do katalogu szablonu i dodajmy plik: js/my-gutenberg-script.css.
Dodajmy w nim kod CSS, który odpowiednio ostyluje blok “Grupy”.

.wp-block-group.is-style-blur-bg {
  backdrop-filter: blur(5px);
}

Chcemy, aby tło tego elementu było rozmyte, dlatego wykorzystamy właściwość: “backdrop-filter” w CSS i ustawimy “blur” na 5 pikseli, aby rozmycie nie było zbyt duże.

Teraz musimy tylko zapewnić, aby dodany plik CSS został załadowany podczas wejścia użytkownika na stronę, ale także w Edytorze Gutenberga.

function my_gutenberg_init() {
  wp_register_style(
    'my-gutenberg-styles',
    get_template_directory_uri() . '/js/my-gutenberg-script.css',
    array(),
    filemtime( get_template_directory() . '/js/my-gutenberg-script.css' )
  );
}
add_action( 'init', 'my_gutenberg_init' );

function my_gutenberg_enqueue() {
  wp_enqueue_style('my-gutenberg-styles');
}
add_action( 'wp_enqueue_scripts', 'my_gutenberg_enqueue' );

Wykorzystamy do tego:

• hak: init – w którym zarejestrujemy plik ze stylami
• Hak: wp enqueue scripts – w którym dodamy plik ze stylami do kolejki ładowania na stronie www
  Oraz
  Zmodyfikujemy wcześniejszą funkcję, aby plik ze stylami także ładował się w Edytorze Gutenberg – dzięki temu rozmyte tło elementu będziemy także widzieć podczas edycji strony.

Link do całego kodu znajdziecie w opisie.

Chcesz sam poćwiczyć tworzenie “Block Style”? Oto Twoje zadanie:
Przygotuj styl dla bloku “Nawigacja”, który doda separatory – czyli pionowe kreski – pomiędzy dodane pozycje.

Powodzenia! Daj znać w komentarzach jak wygląda Twój kod!

To tyle w tym odcinku. Do zobaczenia w kolejnym odcinku, a jeśli ten odcinek Ci się podobał, nie zapomnij kliknąć kciuka w górę!