Nieco mniej znaną funkcją Gutenberga jest możliwość ustawienia różnych stylów dla bloków. Możesz zarejestrować dowolną liczbę różnych stylów w dowolnym typie bloku, aby nadać temu samemu blokowi różne wzory. Możliwe style bloków są wyświetlane jako sekcja po prawej stronie edytora. Każdy styl ma swój własny podgląd. Jeśli prawidłowo obsługujesz style, przełączanie między stylami powinno natychmiast zaktualizować projekt w edytorze, a także w interfejsie użytkownika.
Dokumentacja WordPress dotycząca tej funkcji nie jest obecnie tak kompletna i pouczająca, jak mogłaby być. W tym poście przyjrzymy się szczegółowo, jak dodać niestandardowe style bloków i jak należy obsługiwać ich stylizację.
Sposób działania tej funkcji polega na tym, że za każdym razem, gdy Gutenberg wykryje, że typ bloku zarejestrował co najmniej jeden styl, pole „Style" automatycznie pojawi się po prawej stronie edytora. Wewnątrz edytor może wybrać styl domyślny lub dowolny styl bloku, który został dodany.
We wcześniejszych wersjach (przynajmniej przed WordPress 5.3) rejestracja stylu niestandardowego wymagała również zarejestrowania stylu domyślnego („brak stylu”). Na szczęście zostało to naprawione w najnowszych wersjach WordPressa, więc teraz wystarczy zarejestrować niestandardowe style, a WordPress automatycznie doda styl domyślny.
Możesz zarejestrować niestandardowe style bloków na dwa sposoby; z PHP lub JavaScript. Przyjrzymy się obu. Ale najpierw kilka „a-ha” dotyczących radzenia sobie z twoimi stylami.
Uwaga na temat kolejkowania stylów dla Gutenberga
Mogą wystąpić pewne nieporozumienia dotyczące tego, jak i gdzie dodać swoje style (pliki CSS); tylko do edytora, do frontendu lub jednego arkusza stylów dla obu. Jednym z głównych celów edytora Gutenberga jest upewnienie się, że możesz prawidłowo wyświetlić podgląd treści posta w edytorze. Dlatego zaleca się, aby upewnić się, że Twoje niestandardowe style zostały zastosowane zarówno w edytorze, jak i w interfejsie użytkownika.
Sposób, w jaki sobie z tym poradzisz, naprawdę zależy od twojego projektu i istniejącej konfiguracji arkusza stylów. Jeśli tworzysz kompletny motyw, prawdopodobnie już zawierasz styl blokowy w arkuszu stylów frontendu. Możesz rozważyć dodanie osobnego arkusza stylów, który będziesz umieszczać w kolejce tylko dla edytora. Ale może to być trudne do utrzymania, jeśli dodasz wiele różnych stylów. Musisz zaktualizować swoje style w dwóch miejscach i upewnić się, że ich wyniki są takie same. Rozwiązaniem byłoby zachowanie jednego arkusza stylów, który umieszczasz w kolejce zarówno dla edytora, jak i interfejsu. Ale wtedy twój frontend musiałby załadować co najmniej dwa oddzielne arkusze stylów, a to może nie być idealne.
Innym rozwiązaniem jest użycie np. SCSS lub LESS i ustawienie @importsw taki sposób, że wystarczy napisać styl blokowy tylko raz i jest to zastosowane zarówno do edytora, jak i frontendu. Jak zobaczysz poniżej, używając PHP do rejestrowania niestandardowych stylów bloków, masz jeszcze jedną opcję; aby dodać style wbudowane. Te style zostaną zastosowane zarówno w edytorze, jak i interfejsie. W interfejsie zostaną dodane przez WordPress jako niestandardowe wbudowane <style type="text/css">...</style>w nagłówku.
Jakkolwiek zdecydujesz się go rozwiązać, wiedz, że istnieje kilka nowych punktów zaczepienia dla stylów rejestrów (i skryptów) dla Gutenberga. Jeśli chcesz umieścić w kolejce arkusz stylów zarówno dla interfejsu, jak i edytora, użyj hooka enqueue_block_assets. Jeśli chcesz dodać arkusz stylów tylko dla edytora, umieść go w kolejce wewnątrz hooka enqueue_block_editor_assets.
Jak zastosować stylizację do niestandardowych stylów bloków?
Niestandardowe style bloków zostaną dodane jako klasa określonego wzorca na zewnętrznym znaczniku HTML bloku.
Klasy CSS dla stylów blokowych są dodawane w postaci „ is-style-<stylename>„. Jeśli na przykład nazwiesz swój styl „ outline„, blok otrzyma klasę „ is-style-outline„.
Jednak możesz doświadczyć, że edytor Gutenberga w niektórych przypadkach zastąpi Twoją stylizację. Zalecam poprzedzenie stylu edytora selektorem, editor-styles-wrapperaby upewnić się, że Twoje style „wygrywają”. Pamiętaj, że ta klasa nie istnieje w interfejsie użytkownika, więc dla bezpieczeństwa może być konieczne dodanie dwóch selektorów, tak jak w ten sposób (jeśli używasz tego samego arkusza stylów dla edytora i interfejsu):
.is-style-colored-bottom-border,
.editor-styles-wrapper .is-style-colored-bottom-border {
border-bottom: 2px solid purple;
}Dodawanie niestandardowych stylów bloków za pomocą PHP
Do dodawania własnego typu bloku za pomocą PHP używamy funkcji [register_block_style](https://developer.wordpress.org/reference/functions/register_block_style/)(). W dokumentacji brakuje niestety informacji, w którym haczyku powinniśmy użyć, ale z hakiem miałem szczęście init.
Musisz znać nazwę Gutenberg swojego typu bloku w przestrzeni nazw, aby dodać do niego niestandardowy styl. Wszystkie standardowe bloki WordPressa mają przestrzeń nazw „ core„, po której następuje /wersja i wersja slug. Na przykład nazwa Gutenberga dla standardowego bloku akapitowego to core/paragraph.
Rejestracja niestandardowego stylu bloku odbywa się w najprostszej formie:
add_action('init', function() {
register_block_style('core/heading', [
'name' => 'colored-bottom-border',
'label' => __('Colored bottom border', 'txtdomain'),
]);
});Powyższy kod dodaje niestandardowy styl bloku do typu bloku nagłówka, co spowoduje, że klasa zostanie umieszczona is-style-colored-bottom-borderna dowolnym nagłówku, który wybrał ten styl.
Ta funkcja udostępnia dwie metody dodawania kodu CSS (jeśli nie dodałeś go w inny sposób); albo dostarczając wbudowany CSS jako ciąg znaków, albo dostarczając zarejestrowany uchwyt arkusza stylów, który WordPress w razie potrzeby umieści w kolejce.
Jeśli chcesz dodać styl inline (pamiętaj, że wpłynie to zarówno na edytor, jak i na interfejs), dodaj element „ inline_style” do wywołania funkcji i wypisz pełny CSS jako ciąg znaków jako jego wartość:
add_action('init', function() {
$inline_css = '.is-style-colored-bottom-border, .editor-styles-wrapper .is-style-colored-bottom-border { border-bottom: 2px solid purple; }';
register_block_style('core/heading', [
'name' => 'colored-bottom-border',
'label' => __('Colored bottom border', 'txtdomain'),
'inline_style' => $inline_css
]);
});Jeśli wolisz, aby funkcja umieszczała w kolejce arkusz stylów, podaj jej uchwyt do elementu „ style_handle„.
add_action('init', function() {
wp_register_style('awp-block-styles', get_template_directory_uri(). '/assets/css/custom-block-style.css', false);
register_block_style('core/heading', [
'name' => 'colored-bottom-border',
'label' => __('Colored bottom border', 'txtdomain'),
'style_handle' => 'awp-block-styles'
]);
});Dostosuj położenie arkusza stylów, aby pasował do Twojego projektu. Arkusz stylów zostanie zastosowany zarówno do edytora, jak i frontendu, ale tym razem frontend wyśle osobne żądanie dołączenia tego arkusza stylów. Ta metoda nie jest zalecana w przypadku dodawania wielu stylów bloków. Frontend zostanie znacznie spowolniony przez zażądanie całej masy oddzielnych arkuszy stylów.
Dodawanie niestandardowych stylów bloków za pomocą JavaScript
Jeśli wolisz dodawać style blokowe za pomocą JavaScript, jest to tak samo proste, jak w przypadku PHP.
Będziesz musiał umieścić plik JavaScript w kolejce tylko do haka edytora: enqueue_block_editor_assets. Twój skrypt prawdopodobnie nie będzie wymagał żadnych zależności, ale wolę dodać przynajmniej „ wp-blocks” jako zależność.
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script(
'myguten-script',
get_template_directory_uri(). '/assets/js/myguten.js',
['wp-blocks']
);
});Dostosuj nazwę pliku i lokalizację do swojego projektu.
W pliku JavaScript używasz funkcji registerBlockStyle()w wp.blocksobiekcie, aby zarejestrować niestandardowe style bloków. Dodanie tego samego stylu bloku, co w PHP powyżej, wyglądałoby tak:
wp.blocks.registerBlockStyle('core/heading', {
name: 'colored-bottom-border',
label: 'Colored bottom border'
});I to wszystko! Bułka z masłem.
Wyrejestrowywanie stylów bloków
Tak jak można zarejestrować styl blokowy, styl blokowy może również zostać wyrejestrowany. Być może chcesz usunąć niektóre z domyślnych stylów bloków WordPressa? Podobnie jak w przypadku rejestrowania stylów blokowych, możesz również wyrejestrować style blokowe za pomocą PHP lub JavaScript. Ale wybór między tymi dwoma metodami nie jest już wyborem preferencji.
Nie możesz wyrejestrować bloku za pomocą PHP, jeśli został zarejestrowany za pomocą Javascript i na odwrót. Musisz więc dowiedzieć się, w jaki sposób styl, który chcesz usunąć, został zarejestrowany i dopasować go do PHP lub JavaScript. Uważam, że wszystkie style blokowe WordPressa są dodawane za pomocą JavaScript (nie cytuj mnie na ten temat!). Więc jeśli chcesz usunąć niektóre z nich, musisz przejść do ścieżki JavaScript.
Wyrejestrowanie stylu blokowego za pomocą PHP odbywa się poprzez wywołanie funkcji unregister_block_style(), podając typ bloku i nazwę stylu, który chcesz usunąć. Na przykład wyrejestrowanie stylu dodanego powyżej w tym poście (zakładając, że został on zarejestrowany w PHP) wyglądałoby tak:
add_action('init', function() {
unregister_block_style('core/heading', 'colored-bottom-border');
});Wyrejestrowanie stylu blokowego za pomocą JavaScript odbywa się podobnie z funkcją unregisterBlockStyle()w wp.blocksobiekcie. Jednak w przypadku JavaScript istnieje kwestia tego, który skrypt zostanie uruchomiony jako pierwszy i mogą wystąpić problemy, gdy skrypt zostanie uruchomiony przed rejestracją. Aby rozwiązać ten problem, używamy odpowiednika Gutenberga do „dokumentu gotowego” (jQuery(document).ready(function() { ... });) w jQuery, a także dodajemy kolejną zależność do twojego skryptu.
Zacznijmy od dodania nowej zależności skryptu do pliku JavaScript w kolejce do „ wp-edit-post„:
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script(
'myguten-script',
get_template_directory_uri(). '/assets/js/myguten.js',
['wp-blocks', 'wp-edit-post']
);
});A wewnątrz pliku JavaScript zapakuj wywołanie funkcji wyrejestrowania wewnątrz wp.domReady(function() { ... }), na przykład:
wp.domReady(function() {
wp.blocks.unregisterBlockStyle('core/quote', 'large');
});Jak pokazuje powyższy kod, dzięki JavaScript jesteśmy teraz w stanie usunąć styl „Duży” WordPressa z bloku cytatu. Jeśli spróbujesz zrobić to samo z PHP, to nie zadziała.
Uwaga na temat wyrejestrowywania stylów blokowych
Możesz zauważyć, że nawet jeśli pomyślnie usunąłeś niestandardowe style bloków z bloku, pole „Style” w edytorze nie zniknie. Pozostaje tylko z opcją „Domyślne” w środku. Jeśli chcesz całkowicie usunąć pole „Style”, aby nie mylić edytorów, możesz po prostu wyrejestrować również styl domyślny (np wp.blocks.unregisterBlockStyle('core/quote', 'large'). ). Spowoduje to całkowite usunięcie pola „Style” z edytora Gutenberga.