Bootstrap w edytorze Gutenberg – jak to zrobić?

W tym wpisie pokażę jak skutecznie korzystać z Bootstrapa przy tworzeniu strony WordPress i jak posługiwać się nim w ramach edytora Gutenberg.

Nawyk korzystania z biblioteki Bootstrap mam wyrobiony od dłuższego czasu. Dzięki Bootstrap Studio mogę szybko prototypować strony internetowe, które prezentuję klientom przed tworzeniem właściwego motywu. Tak stworzony prototyp zamieniam następnie na pełnowartościowy i responsywny szablon HTML5, który po kolejnej akceptacji jest zamieniany na motyw WordPress.

Taki proces produkcji i całkowita niezależność tworzenia motywu pozwala osiągnąć dowolny efekt wizualny oraz wysoki wynik w różnego rodzaju testach jakości w tym PageSpeed Insights. W zależności od sytuacji, klient może edytować zawartość strony internetowej na dwa sposoby: za pomocą ACF i Edytora Gutenberg.

Edycja za pomocą Gutenberga jest wygodna, intuicyjna i daje wiele możliwości. Aby klient mógł wygodnie edytować stronę z zachowaniem filozofii Bootstrapa instaluję wtyczkę: Bootstrap Blocks autorstwa Liip AG.

System siatek Bootstrap w Gutenbergu

Tajemnicą poliszynela jest fakt, że natywny blok „Kolumny” w Gutenbergu jest mało funkcjonalny. Nie pozwala na ustalenie punktów granicznych a chęć wykonania wielu kolumn w jednym rzędzie zmusza do tworzenia mało wygodnych i nieintuicyjnych zagnieżdżeń.

Aby wykorzystać profesjonalny system siatek charakterystyczny dla Bootstrapa wykorzystamy kilka prostych bloków Container, Row i Column:

Kontener pozwala ustawić opcję fluid oraz wybrać punkt graniczny zgodnie z nowością wprowadzoną po wersji 4.4:

W kontenerze możemy umieścić wiersz czyli Row. Od razu w tym miejscu możemy dodać kolumny:

Przy opcji Custom możemy dowolnie dobrać ilość i szerokość kolumn dla każdego punktu granicznego:

Opcje dodatkowe bloków Bootstrapa

Dodatkowe klasy związane z marginesem zewnętrznym (margin), marginesem wewnętrznym (padding), tłem i odstępami możemy wygodnie wybrać za pomocą menu. Do każdego elementu (i to nie tylko z kolekcji Bootstrap Blocks ale do dosłownie wszystkich) możemy dodać niestandardową klasę CSS związaną z dowolną właściwością dotyczącą pozycjonowania i stylowania według dokumentacji Bootstrap.

Bootstrap Blocks są kompatybilne z wersją 4 .x i najnowszą wersją Bootstrapa 5.x. Wersję Bootstrapa można wybrać w ustawieniach tej wtyczki.

Szablon WordPress do współpracy Gutenberg-Bootstrap

Aby było możliwe swobodne dostosowanie treści i wygodne korzystanie z z takich klas jak przykładowo content-fluid zawartość podstrony powinna być drukowana do nieograniczonego na szerokość węzła np. <main> lub <section>.

<main>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?> 
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?> 
</main>

Oczywiste jest, że szablon powinien mieć dołączoną bibliotekę Bootstrap w preferowanej wersji. Można go hardkodować wraz z optymalizacjami w postaci kodu krytycznego, opóźnionego ładowania bądź dodać go za pomocą funkcji WordPressa np:

function my_scripts() {
wp_enqueue_style('bootstrap5', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css');
wp_enqueue_script( 'bootstrap-popper','https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js', '','',true);
wp_enqueue_script( 'bootstrap5','https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js', '','',true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Szerokość edytora Gutenberg można dostosować za pomocą takiego kawałka kodu we własnej wtyczce lub pliku functions.php:

 add_action('admin_head', 'admin_styles');
function admin_styles() {
echo '<style>
.wp-block {max-width: 922px;}
.wp-block[data-align="wide"] {max-width: 1280px;}
</style>';
}

Najprawdopodobniej, będziemy chcieli wykorzystać także natywne bloki Gutenberga i opcję align-wide. Wystarczy dodać takie linie:

add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );

Dzięki temu, w WordPressie będziemy mieć do dyspozycji edytor wizualny z prawdziwego zdarzenia, bo kompatybilny z Bootstrapem. Nic nie stoi na przeszkodzie aby do stworzonego układu za pomocą bloków Bootstrapa dodawać standardowe bloki, np. Galerię:

Podsumowanie

Jeżeli biegle posługujemy się klasami Bootstrapa, wtyczka Bootstrap Blocks pozwoli wykorzystać synergię powstałą z wykorzystywania zarówno biblioteki Bootstrap jak i edytora Gutenberg.

Jeżeli budujesz motywy z wykorzystaniem biblioteki Bootstrap, i chcesz zintegrować główne menu strony internetowej (czyli Navbar) ze standardowym menu w WordPressie sprawdź gotowe rozwiązanie w artykule: Programowanie menu w WordPress – Implementacja Menu Bootstrap