Hur man kommer åt och analyserar Gutenberg-block med PHP

I det här inlägget kommer vi att titta på hur man analyserar ett inläggs Gutenberg-block och extraherar specifika block för att göra något annat. Vi ska titta på WordPress PHP-funktioner för att analysera, extrahera och rendera valda block.

En fördel med den nya Gutenberg-redigeraren i WordPress är mer strukturerad data för inläggsinnehåll. Förr i tiden lagrades allt som HTML och det fanns inget sätt att extrahera specifika delar av innehåll utan några mycket komplexa reguljära uttryck. Men med Gutenberg lagras varje del av innehållet, vare sig det är ett stycke, rubrik, bild, video, knapp eller en kolumn som har andra block inuti sig, med information som berättar vad detta innehåll är.

Med inbyggda WordPress-funktioner är det väldigt enkelt att hämta alla block i ett inläggs innehåll i en array med all deras information. Detta öppnar upp för massor av användbara funktioner för temautvecklare. För att bara nämna några idéer:

• Generera dynamiskt en innehållsförteckning genom att hämta alla rubriker (handledning nedan).
• Hämta alla videor, bilder eller citat som används i alla inlägg för att samla och lista dem alla på en annan sida.
• Extrahera ett inläggs första stycke och använd det som utdrag i arkiv (handledning nedan).
• Få en överblick över användningen av specifika block och deras position. Säg till exempel att du har ett anpassat annonsblock och att du behöver veta hur ofta det används i dina inlägg och hur långt ner i innehållet de visas.
• Rendera ett inläggs block men exkludera specifika blocktyper.
• Kontrollera om ett inläggsinnehåll börjar med en video och använd den videon istället för den utvalda bilden i arkiv.
• Om du använder ett anpassat block som innehåller tekniska specifikationer på produkter kan du enkelt skapa en sida som visar och jämför de tekniska specifikationerna över produktinlägg.
• Samla dynamiskt alla enstaka bilder som används i ett inlägg och generera ett galleri av dem i slutet eller någon annanstans.

Låt oss bara hoppa direkt in i det!

Analysera ett inläggs block

För att analysera block använder vi WordPress-funktionen [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Som parameter måste du tillhandahålla en sträng av ett inläggs innehåll. Om du är inne i en loop eller har tillgång till ett post-objekt, ange bara $post->post_contentsom parameter till funktionen.

Returen från parse_blocks()är en array där varje arrayelement är ett block. För varje blockelement har du information som typ av block (nyckel ‘ blockName‘), blockattribut (nyckel ‘ attrs‘), inre block för kapslade block som kolumner (nyckel ‘ innerBlocks‘), och två element för själva blockinnehållet (nycklar ‘ innerHTML‘ och ‘ innerContent‘). Elementet innerHTMLär en sträng av HTML-innehåll, medan det innerContentär en uppsättning HTML-strängar.

Och det är allt! Gå igenom den returnerade arrayen från parse_blocks()för att göra din grej. Vi ska titta på fler kodexempel på detta längre ner i det här inlägget.

En anteckning om klassiska (icke-Gutenberg) inlägg

Du kanske arbetar på en äldre WordPress-webbplats som har skapat inlägg innan du uppgraderar till Gutenberg (eller använde en Disable Gutenberg-plugin). I det här fallet kommer dessa inlägg inte att ha strukturerat inläggsinnehåll, utan snarare är hela inläggets innehåll i ett "Klassisk redigerare"-block.

Arrayen som returneras från funktionen parse_blocks()kommer på denna typ av inlägg att returnera ett block array-element med blockNamesatt till null. Inläggets fullständiga HTML-innehåll finns i detta elements innerHTMLsträng.

Vi kan lugnt anta att om ett inläggs avkastning parse_blocks()har ett element och dess blockNameär null, har vi att göra med ett "pre-Gutenberg"-inlägg. Annars blockNamekommer alltid att fyllas i. Detta är en bra kontroll att ha i åtanke när du skriver kod för att analysera inläggs block och du vill hantera äldre WordPress-innehåll.

Gör ett block

WordPress erbjuder också en funktion för att rendera ett specifikt block med [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Som parameter måste du tillhandahålla en array för ett block, precis som en av de som returneras parse_blocks()ovanifrån. Funktionen returnerar en sträng med renderad HTML som du helt enkelt kan eka rakt ut.

Ovanstående kod kommer att återge alla inläggets block, precis som den normalt skulle göra när inläggets innehåll återges. Det roliga kommer när vi börjar lägga till kod för att utesluta eller inkludera specifika block som vi är intresserade av.

Till exempel kommer koden nedan endast att skriva ut postens styckeblock:

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

Och detta kommer att rendera alla block, men exkludera alla kortkodsblock:

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

Blocknamn

När du analyserar ett inläggs block kommer du troligen att behöva kontrollera blockets typ. De är ganska enkla att gissa. Ett styckeblock är till exempel, du gissade rätt, paragraph. Kom dock ihåg att alla Gutenberg-block i WordPress har ett namnområde som prefix. För WordPress-kärnblock (standard) har de alla prefixet " core/". Undantaget är Embed-blocken som har prefixet " core-embed/". Så till exempel ett styckeblock kommer att ha blocknamnet core/paragraph.

För att undvika vilda gissningar här är en översikt över standardblocken som tillhandahålls av WordPress (när detta skrivs):

Vanliga block

• Paragraf:core/paragraph
• Bild:core/image
• Rubrik:core/heading
• Galleri:core/gallery
• Lista:core/list
• Citat:core/quote
• Audio:core/audio
• Omslag:core/cover
• Fil:core/file
• Video:core/video

Formatering

• Förformaterad:core/preformatted
• Koda:core/code
• Klassisk: core/freeform
  (men för icke-Gutenberg-inlägg kommer det att vara null, se anteckning om icke-Gutenberg-inlägg)
• Anpassad HTML:core/html
• Dragcitat:core/pullquote
• Tabell:core/table
• Vers:core/verse

Layout

• Knapp:core/button
• Kolumner:core/columns
• Mer:core/more
• Sidbrytning:core/nextpage
• Separator:core/separator
• Spacer:core/spacer
• Media och text:core/media-text

Widgets

• Kortkod:core/shortcode
• Arkiv:core/archives
• Kategorier:core/categories
• Senaste kommentarer:core/latest-omments
• Senaste inläggen:core/latest-posts

Bädda in

• Bädda in:core/embed

• Twitter: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

• Animoto:core-embed/animoto

• Cloudup:core-embed/cloudup

• Publiksignal:core-embed/crowdsignal

• Dailymotion:core-embed/dailymotion

• Hulu:core-embed/hulu

• Imgur:core-embed/imgur

• Problem:core-embed/issuu

• Kickstarter:core-embed/kickstarter

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

• Mixcloud:core-embed/mixcloud

• Reddit:core-embed/reddit

• ReverbNation:core-embed/reverbnation

• Screencast:core-embed/screencast

• Scribd:core-embed/scribd

• Bilddelning:core-embed/slideshare

• SmugMug:core-embed/smugmug

• Högtalarpanel:core-embed/speaker

• TED:core-embed/ted

• Tumblr:core-embed/tumblr

• Videopress:core-embed/videopress

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

• Amazon Kindle:core-embed/amazon-kindle

Kodexempel: Hämta ett inläggs första stycke som utdrag

Ett välskrivet inlägg bör börja med ett stycke som introducerar vad inlägget handlar om och som lockar folk att fortsätta läsa. Dessa är perfekta att använda som utdrag istället för att förlita sig på den automatiska utdragsfunktionen i WordPress!

Det här är en funktion du kan lägga till i ditt tema i functions.phpsom kommer att returnera ett inläggs första stycke. Om inget inlägg lämnades kommer det att hänvisa till det globala postobjektet. Det rymmer också icke-Gutenberg-inlägg genom att returnera själva WordPress-utdraget för dessa.

Efter funktionens parse_blocks()anrop kontrollerar vi om inlägget har ogiltiga blockdata (inlägget skapades före Gutenberg) och returnerar inläggsutdrag om så är fallet. Annars går vi igenom inläggets block, hittar det första styckeblocket och returnerar dess innerHTML. I slutet returnerar vi en sträng med (detta är valfritt) a <div>runt den.

För att använda den här funktionen behöver du bara ringa:

echo awp_get_excerpt();

Förutsatt att funktionsanropet placeras någonstans där det finns ett globalt $postobjekt, till exempel inuti en loop. Om du vill specificera ett inlägg, ange postobjektet som parameter till funktionsanropet:

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

Exempel: Skapa en innehållsförteckning från ett inläggs rubriker

Du kan automatiskt och dynamiskt generera en innehållsförteckning baserat på ett inläggs rubrikblock. Processen är enkel nog; analysera inläggets block och hitta alla block av typen core/heading. Men vi kan ta det ett steg längre och införliva nivåer; t.ex. sätta h3som underrubrik under h2och så vidare.

Ett rubrikblock innehåller information om dess nivå i attributmatriselementet (nyckel ‘ attrs‘). Inuti attrsarrayen skulle det vara ett arrayelement med nyckeln ‘ level‘ och ett heltal som anger nivån. A h3skulle ha ‘ level‘ värde av 3, a h4skulle ha ‘ level‘ av 4och så vidare.

Observera dock att attrsrubrikblock kan vara tomma! Detta händer när författaren inte har ändrat rubriktypen från standardinställningarna i blockets inställningar. För att kringgå detta måste vi göra några antaganden. Som standard kommer rubriker att vara h2(såvida du inte har ändrat detta i ditt tema). Så vi kan anta att om ett rubrikblock inte har ett nivåattribut så är det en h2. Annars får vi nivåinformationen från attributen.

Om du verkligen orkar med utmaningen uppmanar jag dig att förbättra koden nedan. Problemet med att skapa en ordentlig strukturerad ollista är att vi inte kan kontrollera hur författaren strukturerar sina titlar. De kan mycket väl bli galna och börja med en h4rubrik och hoppa direkt till en h2rubrik direkt efter. Och plötsligt blandar de en h1i mitten. Min lösning innebär därför att generera en platt ollista och tillhandahålla nivåinformationen i listobjektets klasser. Sedan med lite smart CSS kan du dra in listobjekten därefter med lite vänster stoppning.

Koden

Här är innehållsförteckningsfunktionen:

Funktionen börjar med att hantera inlägget och analysera dess block. Vid kö #9tar vi emot tjänster som inte är Gutenberg. Funktionen fortsätter att gå igenom alla block och när den hittar ett rubrikblock läggs den till i vår $headingsarray. Vi använder [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)()för att ta bort HTML-taggarna från titlarna. Vi lägger också till nivåinformationen i vår array, där standarden är inställd på 2om attributen är tomma.

Efter $headingsblockloopen bör arrayen innehålla alla postens rubriker, i ordning. Vi kan sedan helt enkelt generera en HTML-sträng och mata ut dess innehåll. Som nämnt genererar jag ett klassnamn på varje element med information om rubrikens nivå så att vi kan skapa illusionen av en strukturerad lista med CSS.

Precis som med utdragsfunktionen ovan kan vi kalla den här funktionen när vi är inne i slingan så här:

echo awp_table_of_contents();

Eller om vi är utanför loopen eller vill specificera ett inlägg;

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

Detta kommer att generera en lista som ser ut ungefär så här:

Slutsats

Som vi har sett med strukturerat rikt inläggsinnehåll som gjorts möjligt med Gutenberg, kan vi mycket enkelt hitta och extrahera specifika delar av inläggens innehåll. Se tillbaka till listan med exempel jag nämnde i början av inlägget. Det finns inga gränser för vad du som temautvecklare kan göra. Det beror bara på vad ditt tema eller WordPress-webbplats har behov av (eller vad som helt enkelt bara skulle vara coolt).