Jeśli dopiero zaczynasz swoją przygodę z tworzeniem bloków, warto najpierw zapoznać się z poradnikiem dotyczącym konfiguracji środowiska deweloperskiego do tworzenia bloków Gutenberga, aby mieć solidną bazę do sprawdzenia tego tutorialu w praktyce. A jeśli szukasz bardziej zaawansowanej wiedzy, zajrzyj na stronę mojego kursu dotyczącego tworzenia bloków. W najnowszym kursie tworzenia bloków w Gutenbergu, omawiam wszystkie aspekty i przedstawiam pełen zakres wiedzy potrzebnej do sprawnej obsługi bloków w WordPressie.

W tym artykule przyjrzymy się Block Support API w Gutenbergu, które pozwala na wprowadzenie dodatkowych funkcji w blokach. Omówimy kilka przykładów, takich jak wyrównanie, kolory czy wymiary. W kolejnych artykułach na pewno powrócę do tego tematu, aby omówić kolejne funkcje, więc obserwuj nas na bieżąco lub zapisz się do newslettera.

Co to jest Block Support API?

Block Support API to zestaw wbudowanych funkcji, które pozwalają rozszerzać możliwości bloku w edytorze Gutenberga bez potrzeby pisania dodatkowego kodu. Dzięki nim można np. dodać do bloku możliwość zmiany kolorów, tła, czy ustalania jego szerokości, które omówimy w tym artykule.

Jeśli korzystasz z domyślnych bloków WordPressa, takich jak akapit, nagłówek, obrazek czy innych to możesz zauważyć, że w panelu bocznym edytora dostępne są opcje na przykład do zmiany koloru tekstu, tła, marginesów czy typografii. Te opcje są wynikiem działania Block Support API.

Jak to wygląda w praktyce?

Załóżmy, że masz już utworzony blok Gutenberga w swojej wtyczce. Aby dodać funkcjonalności wspierane przez Block Support API, wystarczy edytować plik block.json i zdefiniować tam odpowiednie ustawienia w polu „supports”.

Przykłady zastosowania Block Support API

Wyrównanie bloku

Jedną z podstawowych funkcji, które możesz dodać do swojego bloku, jest wyrównanie. Wystarczy w pliku block.json dodać:

{
  ...
  "supports": {
      "align": true
  },
  ...
}

Dzięki temu w edytorze pojawi się opcja zmiany szerokości bloku oraz jego wyrównania (np. do lewej, prawej, środka). Opcja „wyrównania” jest szczególnie potrzebna, aby móc dowolnie organizować elementy na stronie internetowej, dlatego tworząc własny blok warto wspierać wbudowane możliwości wyrównania bloków Gutenberga.

W ramach opcji „align” możesz także zawęzić wybór dostępnych elementów, np.:

{
  ...
  "supports": {
      "align": ["full", "wide"]
  },
  ...
}

Teraz użytkownik będzie mógł wybrać tylko „pełną szerokość” lub „zwiększoną szerokość” bloku.

Pełną dokumentację opcji „align” znajdziesz tutaj.

Ustawianie kolorów

Kolejną przydatną funkcją jest możliwość zmiany kolorów w bloku. Block Support API pozwala na ustawienie różnych opcji kolorów – tekstu, tła, a nawet nagłówków. Aby dodać obsługę kolorów do bloku, wystarczy skonfigurować w block.json:

{
  ...
  "supports": {
    "color": {
        "text": true,
        "background": true,
        "gradient": true
    }
  },
  ...
}

Dzięki temu użytkownik będzie mógł zmieniać kolor tekstu, tła oraz ustawiać gradienty w bloku. Jeśli chcesz dodać możliwość zmiany koloru nagłówków w bloku, musisz dodać dodatkowe pole:

{
  ...
  "supports": {
    "color": {
        "text": true,
        "background": true,
        "gradient": true,
        "heading": true
    }
  },
  ...
}

Pełny obiekt, który możemy przekazać do opcji „color” wygląda następująco:

{
  ...
  "supports": {
    "color": {
        "text": true, // ustawianie koloru tekstu
        "background": true, // ustawianie koloru tła
        "gradient": true, // zezwala na użycie gradientów
        "heading": true, // ustawianie koloru nagłówków
        "button": true, // ustawianie koloru przycisków
        "link": true, // ustawianie koloru linków, hiperłączy
        "enableContrastChecker": true // wyświetla komunikaty o nieprawidłowym kontraście
    }
  },
  ...
}

Ustalanie wymiarów

Block Support API umożliwia również manipulowanie wymiarami bloku, takimi jak minimalna wysokość lub proporcje szerokości do wysokości (tzw. aspect ratio). Aby to dodać do swojego bloku, wystarczy wprowadzić:

{
  ...
  "supports": {
    "dimensions": {
        "minHeight": true,
        "aspectRatio": true
    }
  },
  ...
}

Dzięki tym ustawieniom użytkownik będzie mógł ustawić minimalną wysokość bloku lub wybrać proporcje, np. 16:9, co jest szczególnie przydatne w przypadku mediów takich jak obrazy czy filmy.

Dlaczego warto korzystać z Block Support API?

Dzięki Block Support API możemy łatwo zwiększyć elastyczność naszych bloków, bez potrzeby pisania skomplikowanego kodu. Dodając te funkcje, sprawiamy, że nasze bloki są bardziej wszechstronne i lepiej dostosowane do potrzeb użytkowników. Zwiększa to także zgodność naszych bloków z innymi elementami w Gutenbergu, co przekłada się na lepszą integrację z motywami i innymi wtyczkami.

Podsumowanie

Block Support API w Gutenbergu to potężne narzędzie, które pozwala deweloperom na szybkie dodanie zaawansowanych funkcji do swoich bloków. Od opcji wyrównania, przez zmiany kolorów, aż po manipulację wymiarami – wszystko to można osiągnąć za pomocą kilku prostych ustawień w pliku block.json.

Jeśli chcesz dowiedzieć się więcej o tworzeniu bloków w Gutenbergu, polecam sprawdzenie mojego kursu tworzenia bloków Gutenberga, w którym krok po kroku przeprowadzam przez cały proces.