Jak uzyskać dostęp i analizować bloki Gutenberga za pomocą PHP

W tym poście przyjrzymy się, jak przeanalizować bloki Gutenberga i wyodrębnić określone bloki, aby stworzyć coś innego. Przyjrzymy się funkcjom WordPress PHP do parsowania, wyodrębniania i renderowania wybranych bloków.

Jedną z zalet nowego edytora Gutenberga w WordPressie jest bardziej uporządkowane dane dotyczące treści postów. W dawnych czasach wszystko było przechowywane w formacie HTML i nie było możliwości wyodrębnienia określonych fragmentów treści bez bardzo skomplikowanych wyrażeń regularnych. Ale w przypadku Gutenberga każdy element treści, czy to akapit, nagłówek, obraz, wideo, przycisk, czy kolumna, która zawiera inne bloki wewnątrz, jest przechowywany z informacjami, które mówią nam, czym jest ten fragment treści.

Dzięki wbudowanym funkcjom WordPress bardzo łatwo jest pobrać wszystkie bloki w treści posta w tablicy ze wszystkimi ich informacjami. To otwiera mnóstwo przydatnych funkcji dla twórców motywów. Wystarczy wymienić kilka pomysłów:

• Dynamicznie generuj spis treści, pobierając wszystkie nagłówki (samouczek poniżej).
• Pobierz wszystkie filmy, obrazy lub cytaty użyte we wszystkich postach, aby zebrać je i umieścić na innej stronie.
• Wyodrębnij pierwszy akapit posta i użyj go jako fragmentu w archiwach (poradnik poniżej).
• Uzyskaj przegląd wykorzystania określonych bloków i ich położenia. Załóżmy na przykład, że masz niestandardowy blok reklam i musisz wiedzieć, jak często jest on używany w Twoich postach i jak daleko w treści się pojawiają.
• Renderuj bloki posta, ale wyklucz określone typy bloków.
• Sprawdź, czy treść posta zaczyna się od filmu i użyj tego filmu zamiast polecanego obrazu w archiwach.
• Jeśli używasz niestandardowego bloku, który zawiera specyfikacje techniczne produktów, możesz łatwo utworzyć stronę wyświetlającą i porównującą specyfikacje techniczne w postach produktów.
• Dynamicznie zbieraj wszystkie pojedyncze obrazy użyte w poście i generuj ich galerię na końcu lub w innym miejscu.

Po prostu wskoczmy w to!

Przeanalizuj bloki postu

Do analizy bloków używamy funkcji WordPress [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Jako parametr musisz podać ciąg treści posta. Jeśli jesteś w pętli lub masz dostęp do obiektu post, po prostu podaj $post->post_contentjako parametr funkcji.

Zwrot z parse_blocks()jest tablicą, w której każdy element tablicy jest blokiem. Dla każdego elementu bloku masz informacje takie jak typ bloku (klucz ‘ blockName‘), atrybuty bloku (klucz ‘ attrs‘), wewnętrzne bloki dla bloków zagnieżdżonych, takich jak Kolumny (klucz ‘ innerBlocks‘) oraz dwa elementy dla rzeczywistej zawartości bloku (klucze ‘ innerHTML‘ i ‘ innerContent‘). Element innerHTMLjest ciągiem treści HTML, podczas gdy innerContentjest tablicą ciągów HTML.

I to wszystko! Przechodź przez zwróconą tablicę z parse_blocks(), aby zrobić swoje. Przyjrzymy się więcej przykładom kodu w dalszej części tego postu.

Uwaga o postach klasycznych (nie Gutenberga)

Być może pracujesz nad starszą witryną WordPress, która utworzyła posty przed uaktualnieniem do Gutenberga (lub użyła wtyczki Disable Gutenberg). W takim przypadku posty te nie będą zawierały ustrukturyzowanej treści posta, ale raczej cała treść posta znajduje się w bloku „Edytor klasyczny".

Tablica zwrócona z funkcji parse_blocks()w tego rodzaju wpisach zwróci jeden element tablicy blokowej z blockNameustawionym na null. Pełna treść HTML posta znajduje się wewnątrz innerHTMLciągu tego elementu.

Można śmiało założyć, że jeśli zwrot posta parse_blocks()ma jeden element i blockNamejest nullnim, to mamy do czynienia z postem „przed Gutenbergiem”. W przeciwnym razie blockNamezawsze będzie zapełniony. Warto o tym pamiętać podczas pisania kodu do analizowania bloków postów i gdy chcesz obsługiwać starszą zawartość WordPressa.

Renderuj blok

WordPress oferuje również funkcję renderowania określonego bloku za pomocą [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Jako parametr musisz podać tablicę dla bloku, tak jak jedną z tych zwróconych z parse_blocks()góry. Funkcja zwraca ciąg wyrenderowanego kodu HTML, który można po prostu wyświetlić.

Powyższy kod wyrenderuje wszystkie bloki posta, tak jak normalnie podczas renderowania treści posta. Zabawna część pojawia się, gdy zaczynamy dodawać kod, aby wykluczyć lub uwzględnić określone bloki, które nas interesują.

Na przykład poniższy kod wydrukuje tylko bloki akapitu posta:

foreach ($blocks as $block) {
    if ($block['blockName'] == 'core/paragraph') {
        echo render_block($block);
    }
}

A to wyrenderuje wszystkie bloki, ale wykluczy wszystkie bloki shortcode:

foreach ($blocks as $block) {
    if ($block['blockName'] != 'core/shortcode') {
        echo render_block($block);
    }
}

Blokuj nazwy

Podczas analizowania bloków postu najprawdopodobniej będziesz musiał sprawdzić typ bloku. Są dość łatwe do odgadnięcia. Na przykład blok akapitu to, dobrze zgadłeś, paragraph. Należy jednak pamiętać, że wszystkie bloki Gutenberga w WordPressie są poprzedzone przestrzenią nazw. W przypadku podstawowych (domyślnych) bloków WordPress, wszystkie są poprzedzone przedrostkiem „ core/“. Wyjątkiem są bloki Osadź, które są poprzedzone przedrostkiem „ core-embed/“. Na przykład blok akapitu będzie miał nazwę bloku core/paragraph.

Aby uniknąć dzikiego zgadywania, oto przegląd domyślnych bloków dostarczonych przez WordPress (w momencie pisania tego):

Wspólne bloki

• Ustęp:core/paragraph
• Obraz:core/image
• Nagłówek:core/heading
• Galeria:core/gallery
• Lista:core/list
• Cytat:core/quote
• Audio:core/audio
• Pokrywa:core/cover
• Plik:core/file
• Wideo:core/video

Formatowanie

• Wstępnie sformatowany:core/preformatted
• Kod:core/code
• Klasyczny: core/freeform
  (ale w przypadku postów innych niż Gutenberg będzie to null, patrz uwaga na temat postów innych niż Gutenberg)
• Niestandardowy kod HTML:core/html
• Cytat:core/pullquote
• Stół:core/table
• Werset:core/verse

Układ

• Przycisk:core/button
• Kolumny:core/columns
• Więcej:core/more
• Podział strony:core/nextpage
• Separator:core/separator
• Odstępnik:core/spacer
• Media i tekst:core/media-text

Widżety

• Krótki kod:core/shortcode
• Archiwa:core/archives
• Kategorie:core/categories
• Ostatnie komentarze:core/latest-omments
• Najnowsze posty:core/latest-posts

Osadzenia

• Osadzać:core/embed

• Świergot:core-embed/twitter

• Youtube:core-embed/youtube

• Facebook:core-embed/facebook

• Instagram:core-embed/instagram

• WordPress:core-embed/wordpress

• SoundCloud:core-embed/soundcloud

• Spotify:core-embed/spotify

• Flickr:core-embed/flickr

• Vimeo:core-embed/vimeo

• Animo:core-embed/animoto

• Chmura:core-embed/cloudup

• Sygnał tłumu:core-embed/crowdsignal

• Ruch dzienny:core-embed/dailymotion

• Hulu:core-embed/hulu

• Obrazek:core-embed/imgur

• Kwestia:core-embed/issuu

• Kickstarter:core-embed/kickstarter

• Meetup.com:core-embed/meetup-com

• Mixcloud:core-embed/mixcloud

• Reddit:core-embed/reddit

• Naród pogłosu:core-embed/reverbnation

• Prezentacja ekranu:core-embed/screencast

• Scribd:core-embed/scribd

• Udostępnianie slajdów:core-embed/slideshare

• Kubek:core-embed/smugmug

• Pokład głośnika:core-embed/speaker

• PRZETRZĄSAĆ:core-embed/ted

• Tumblr:core-embed/tumblr

• WideoPrasa:core-embed/videopress

• wordpress.tv:core-embed/wordpress-tv

• Amazon Kindle:core-embed/amazon-kindle

Przykład kodu: pobierz pierwszy akapit posta jako fragment

Dobrze napisany post powinien zaczynać się od akapitu, który przedstawia, o czym jest post i zachęca ludzi do dalszego czytania. Są one idealne do wykorzystania jako fragmenty zamiast polegać na funkcji automatycznego fragmentu w WordPress!

Jest to funkcja, którą możesz dodać do swojego motywu functions.php, która zwróci pierwszy akapit posta. Jeśli nie podano wiadomości, będzie to odnosić się do globalnego obiektu wiadomości. Obsługuje również posty spoza Gutenberga, zwracając dla nich rzeczywisty fragment WordPressa.

Po parse_blocks()wywołaniu funkcji sprawdzamy, czy post zawiera nieprawidłowe dane bloku (post został utworzony przed Gutenbergiem) i zwracamy fragment posta, jeśli tak jest. W przeciwnym razie przechodzimy przez bloki posta, znajdujemy pierwszy blok akapitu i zwracamy jego innerHTML. Na samym końcu zwracamy napis z (jest to opcjonalne) <div>wokół niego.

Aby skorzystać z tej funkcji wystarczy zadzwonić:

echo awp_get_excerpt();

Zakładając, że wywołanie funkcji jest umieszczone gdzieś, gdzie znajduje się $postobiekt globalny, na przykład wewnątrz pętli. Jeśli chcesz określić post, podaj obiekt post jako parametr wywołania funkcji:

$post_id = 1;
$post = get_post($post_id);
echo awp_get_excerpt($post);

Przykład: Utwórz spis treści z nagłówków posta

Możesz automatycznie i dynamicznie generować spis treści na podstawie bloków nagłówków posta. Proces jest dość prosty; przeanalizuj bloki posta i znajdź wszystkie bloki typu core/heading. Ale możemy pójść o krok dalej i włączyć poziomy; np. umieszczając h3jako podtytuł pod h2i tak dalej.

Blok nagłówka zawiera informacje o jego poziomie w elemencie tablicy atrybutów (klucz „ attrs“). Wewnątrz attrstablicy byłby to element tablicy z kluczem „ level” i liczbą całkowitą oznaczającą poziom. A h3miałby „ level” wartość 3, a h4miałby „ level” 4i tak dalej.

Pamiętaj jednak, że attrsdla nagłówka bloki mogą być puste! Dzieje się tak, gdy autor nie zmienił typu nagłówka w stosunku do domyślnego w ustawieniach bloku. Aby to obejść, musimy przyjąć pewne założenia. Jako domyślne będą nagłówki h2(chyba że zmieniłeś to w swoim motywie). Możemy więc założyć, że jeśli blok nagłówka nie ma atrybutu poziomu, jest to h2. W przeciwnym razie uzyskamy informacje o poziomie z atrybutów.

Jeśli naprawdę sprostasz wyzwaniu, zapraszam do ulepszenia poniższego kodu. Problem z wygenerowaniem odpowiedniej ustrukturyzowanej ollisty polega na tym, że nie możemy kontrolować, w jaki sposób autor ustrukturyzuje swoje tytuły. Mogą bardzo dobrze zwariować i zacząć od h4nagłówka, a zaraz potem przejść od razu do h2nagłówka. I nagle mieszają się h1w środku. Moje rozwiązanie polega więc na wygenerowaniu płaskiej ollisty i podaniu informacji o poziomie w klasach elementów listy. Następnie za pomocą sprytnego CSS możesz odpowiednio wciąć elementy listy za pomocą lewego dopełnienia.

Kod

Oto funkcja spisu treści:

Funkcja zaczyna się od obsługi posta i parsowania jego bloków. Na linii #9przyjmujemy stanowiska nie-Gutenberga. Funkcja kontynuuje pętlę przez wszystkie bloki i za każdym razem, gdy znajdzie blok nagłówka, zostanie dodana do naszej $headingstablicy. Używamy [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)()do usuwania tagów HTML z tytułów. Dodajemy również informacje o poziomie do naszej tablicy, gdzie domyślnie jest ustawione, 2jeśli atrybuty są puste.

Po pętli blokowej $headingstablica powinna zawierać kolejno wszystkie nagłówki posta. Możemy wtedy po prostu wygenerować ciąg HTML i wypisać jego zawartość. Jak wspomniałem, generuję nazwę klasy na każdym elemencie z informacją o poziomie nagłówka, dzięki czemu możemy stworzyć iluzję ustrukturyzowanej listy za pomocą CSS.

Podobnie jak w przypadku funkcji fragmentu powyżej, możemy wywołać tę funkcję, gdy znajdujemy się w pętli, w ten sposób:

echo awp_table_of_contents();

Lub jeśli jesteśmy poza pętlą lub chcemy określić post;

$post_id = 1;
$post = get_post($post_id);
echo awp_table_of_contents($post);

Spowoduje to wygenerowanie listy wyglądającej mniej więcej tak:

Wniosek

Jak widzieliśmy w przypadku ustrukturyzowanej, bogatej treści postów, którą umożliwia Gutenberg, możemy bardzo łatwo znaleźć i wyodrębnić określone części treści postów. Wróć do listy przykładów, o których wspomniałem na początku postu. Nie ma ograniczeń co do tego, co możesz zrobić jako programista motywów. Zależy to tylko od tego, czego potrzebuje Twój motyw lub witryna WordPress (lub co byłoby po prostu fajne).