Neste post, veremos como analisar os blocos Gutenberg de um post e extrair blocos espec\u00edficos para fazer outra coisa. Veremos as fun\u00e7\u00f5es PHP do WordPress para analisar, extrair e renderizar os blocos escolhidos.<\/p>\n
Um benef\u00edcio do novo editor Gutenberg no WordPress s\u00e3o dados mais estruturados para o conte\u00fado do post. Antigamente, tudo era armazenado como HTML e n\u00e3o havia como extrair partes espec\u00edficas de conte\u00fado sem algumas express\u00f5es regulares muito complexas. Mas com Gutenberg cada parte do conte\u00fado, seja um par\u00e1grafo, t\u00edtulo, imagem, v\u00eddeo, bot\u00e3o ou uma coluna que tenha outros blocos dentro dela, \u00e9 armazenada com informa\u00e7\u00f5es que nos dizem qual \u00e9 essa parte do conte\u00fado.<\/p>\n
Com as fun\u00e7\u00f5es integradas do WordPress, \u00e9 muito f\u00e1cil buscar todos os blocos no conte\u00fado de uma postagem em uma matriz com todas as suas informa\u00e7\u00f5es. Isso abre muitos recursos \u00fateis para desenvolvedores de temas. S\u00f3 para citar algumas ideias:<\/p>\n
Vamos pular direto para isso!<\/p>\n
Para analisar blocos usamos a fun\u00e7\u00e3o WordPress O retorno de E isso \u00e9 tudo! Percorra o array retornado de Voc\u00ea pode estar trabalhando em um site WordPress mais antigo que criou postagens antes de atualizar para o Gutenberg (ou usou um plug-in Desativar Gutenberg). Nesse caso, essas postagens n\u00e3o ter\u00e3o conte\u00fado de postagem estruturado, mas todo o conte\u00fado da postagem estar\u00e1 dentro de um bloco "Editor cl\u00e1ssico".<\/p>\n O array retornado da fun\u00e7\u00e3o Podemos assumir com seguran\u00e7a que se o retorno de um post O WordPress tamb\u00e9m oferece uma fun\u00e7\u00e3o para renderizar um bloco espec\u00edfico com O c\u00f3digo acima ir\u00e1 renderizar todos os blocos do post, exatamente como faria normalmente ao renderizar o conte\u00fado do post. A parte divertida vem quando come\u00e7amos a adicionar c\u00f3digo para excluir ou incluir blocos espec\u00edficos nos quais estamos interessados.<\/p>\n Por exemplo, o c\u00f3digo abaixo imprimir\u00e1 apenas os blocos de par\u00e1grafos do post:<\/p>\n E isso renderizar\u00e1 todos os blocos, mas excluir\u00e1 todos os blocos de shortcode:<\/p>\n Ao analisar os blocos de uma postagem, voc\u00ea provavelmente precisar\u00e1 verificar o tipo do bloco. Eles s\u00e3o bem simples de adivinhar. Por exemplo, um bloco de par\u00e1grafo \u00e9, bem, voc\u00ea adivinhou, Para evitar adivinha\u00e7\u00f5es, aqui est\u00e1 uma vis\u00e3o geral dos blocos padr\u00e3o fornecidos pelo WordPress (no momento em que escrevo isso):<\/p>\n Embutir: Twitter: Youtube: Facebook: Instagram: WordPress: SoundCloud: Spotify: Flickr: Vimeo: Animado: Nuvem: Crowdsignal: Movimento di\u00e1rio: Hulu: Imgur: Quest\u00e3o: Iniciador: Meetup. com: Mixcloud: Reddit: ReverbNation: Screencast: Scribd: Compartilhamento de slides: SmugMug: Plataforma de alto-falante: TED: Tumblr: VideoPress: wordpress.tv: Amazon Kindle: Um post bem escrito deve come\u00e7ar com um par\u00e1grafo que apresente o assunto do post e tente as pessoas a continuar lendo. Eles s\u00e3o perfeitos para usar como trechos em vez de depender da fun\u00e7\u00e3o de trecho autom\u00e1tico no WordPress!<\/p>\n Esta \u00e9 uma fun\u00e7\u00e3o que voc\u00ea pode adicionar ao seu tema Ap\u00f3s a Para usar esta fun\u00e7\u00e3o tudo que voc\u00ea precisa fazer \u00e9 chamar:<\/p>\n Supondo que a chamada da fun\u00e7\u00e3o seja colocada em algum lugar, h\u00e1 um Voc\u00ea pode gerar autom\u00e1tica e dinamicamente um \u00edndice com base nos blocos de cabe\u00e7alho de uma postagem. O processo \u00e9 bastante simples; analise os blocos do post e encontre todos os blocos do tipo Um bloco de cabe\u00e7alho cont\u00e9m informa\u00e7\u00f5es sobre seu n\u00edvel no elemento da matriz de atributos (chave ‘ No entanto, observe que os Se voc\u00ea realmente est\u00e1 \u00e0 altura do desafio, convido voc\u00ea a melhorar o c\u00f3digo abaixo. A quest\u00e3o de gerar uma Aqui est\u00e1 a fun\u00e7\u00e3o de \u00edndice:<\/p>\n A fun\u00e7\u00e3o come\u00e7a com a manipula\u00e7\u00e3o da postagem e a an\u00e1lise de seus blocos. Na linha Ap\u00f3s o loop de blocos, o [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Como par\u00e2metro, voc\u00ea precisa fornecer uma string do conte\u00fado de uma postagem. Se voc\u00ea estiver dentro de um loop ou tiver acesso a um objeto post simplesmente forne\u00e7a $post->post_content<\/code>como par\u00e2metro para a fun\u00e7\u00e3o.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>\u00e9 um array onde cada elemento do array \u00e9 um bloco. Para cada elemento de bloco voc\u00ea tem informa\u00e7\u00f5es como tipo de bloco (chave ‘ blockName<\/code>‘), atributos do bloco (chave ‘ attrs<\/code>‘), blocos internos para blocos aninhados como Colunas (chave ‘ innerBlocks<\/code>‘) e dois elementos para o conte\u00fado real do bloco (chaves ‘ innerHTML<\/code>‘ e ‘ innerContent<\/code>‘). O elemento innerHTML<\/code>\u00e9 uma string de conte\u00fado HTML, enquanto innerContent<\/code>\u00e9 uma matriz de strings HTML.<\/p>\nparse_blocks()<\/code>para fazer o que voc\u00ea quer. Veremos mais exemplos de c\u00f3digo disso mais adiante neste post.<\/p>\nUma nota sobre posts cl\u00e1ssicos (n\u00e3o-Gutenberg)<\/h2>\n
parse_blocks()<\/code>neste tipo de post retornar\u00e1 um elemento de array de bloco com blockName<\/code>definido como null<\/code>. O conte\u00fado HTML completo do post est\u00e1 dentro da innerHTML<\/code>string deste elemento.<\/p>\nparse_blocks()<\/code>tem um elemento e blockName<\/code>\u00e9 null<\/code>, estamos lidando com um post “pr\u00e9-Gutenberg". Caso contr\u00e1rio blockName<\/code>, ser\u00e1 sempre preenchido. Esta \u00e9 uma boa verifica\u00e7\u00e3o para se ter em mente ao escrever c\u00f3digo para analisar os blocos de postagens e voc\u00ea deseja lidar com conte\u00fado mais antigo do WordPress.<\/p>\nRenderizar um bloco<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Como par\u00e2metro voc\u00ea precisa fornecer um array para um bloco, assim como um daqueles retornados de parse_blocks()<\/code>cima. A fun\u00e7\u00e3o retorna uma string de HTML renderizado que voc\u00ea pode simplesmente ecoar diretamente.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);\nforeach ($blocks as $block) {\n echo render_block($block);\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] != 'core\/shortcode') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nNomes de bloco<\/h2>\n
paragraph<\/code>. No entanto, lembre-se de que todos os blocos do Gutenberg no WordPress s\u00e3o prefixados com um namespace. Para os blocos principais do WordPress (padr\u00e3o), todos eles s\u00e3o prefixados com ” core\/<\/code>“. A exce\u00e7\u00e3o s\u00e3o os blocos Embed que s\u00e3o prefixados com ” core-embed\/<\/code>“. Assim, por exemplo, um bloco de par\u00e1grafo ter\u00e1 o nome do bloco core\/paragraph<\/code>.<\/p>\nBlocos comuns<\/h3>\n
\n
core\/paragraph<\/code><\/li>\ncore\/image<\/code><\/li>\ncore\/heading<\/code><\/li>\ncore\/gallery<\/code><\/li>\ncore\/list<\/code><\/li>\ncore\/quote<\/code><\/li>\ncore\/audio<\/code><\/li>\ncore\/cover<\/code><\/li>\ncore\/file<\/code><\/li>\ncore\/video<\/code><\/li>\n<\/ul>\nFormata\u00e7\u00e3o<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(mas para postagens n\u00e3o-Gutenberg ser\u00e1 null<\/code>, veja a nota sobre postagens n\u00e3o-Gutenberg)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nEsquema<\/h3>\n
\n
core\/button<\/code><\/li>\ncore\/columns<\/code><\/li>\ncore\/more<\/code><\/li>\ncore\/nextpage<\/code><\/li>\ncore\/separator<\/code><\/li>\ncore\/spacer<\/code><\/li>\ncore\/media-text<\/code><\/li>\n<\/ul>\nWidgets<\/h3>\n
\n
core\/shortcode<\/code><\/li>\ncore\/archives<\/code><\/li>\ncore\/categories<\/code><\/li>\ncore\/latest-omments<\/code><\/li>\ncore\/latest-posts<\/code><\/li>\n<\/ul>\nIncorpora\u00e7\u00f5es<\/h3>\n
\n
core\/embed<\/code><\/p>\n<\/li>\ncore-embed\/twitter<\/code><\/p>\n<\/li>\ncore-embed\/youtube<\/code><\/p>\n<\/li>\ncore-embed\/facebook<\/code><\/p>\n<\/li>\ncore-embed\/instagram<\/code><\/p>\n<\/li>\ncore-embed\/wordpress<\/code><\/p>\n<\/li>\ncore-embed\/soundcloud<\/code><\/p>\n<\/li>\ncore-embed\/spotify<\/code><\/p>\n<\/li>\ncore-embed\/flickr<\/code><\/p>\n<\/li>\ncore-embed\/vimeo<\/code><\/p>\n<\/li>\ncore-embed\/animoto<\/code><\/p>\n<\/li>\ncore-embed\/cloudup<\/code><\/p>\n<\/li>\ncore-embed\/crowdsignal<\/code><\/p>\n<\/li>\ncore-embed\/dailymotion<\/code><\/p>\n<\/li>\ncore-embed\/hulu<\/code><\/p>\n<\/li>\ncore-embed\/imgur<\/code><\/p>\n<\/li>\ncore-embed\/issuu<\/code><\/p>\n<\/li>\ncore-embed\/kickstarter<\/code><\/p>\n<\/li>\ncore-embed\/meetup-com<\/code><\/p>\n<\/li>\ncore-embed\/mixcloud<\/code><\/p>\n<\/li>\ncore-embed\/reddit<\/code><\/p>\n<\/li>\ncore-embed\/reverbnation<\/code><\/p>\n<\/li>\ncore-embed\/screencast<\/code><\/p>\n<\/li>\ncore-embed\/scribd<\/code><\/p>\n<\/li>\ncore-embed\/slideshare<\/code><\/p>\n<\/li>\ncore-embed\/smugmug<\/code><\/p>\n<\/li>\ncore-embed\/speaker<\/code><\/p>\n<\/li>\ncore-embed\/ted<\/code><\/p>\n<\/li>\ncore-embed\/tumblr<\/code><\/p>\n<\/li>\ncore-embed\/videopress<\/code><\/p>\n<\/li>\ncore-embed\/wordpress-tv<\/code><\/p>\n<\/li>\ncore-embed\/amazon-kindle<\/code><\/p>\n<\/li>\n<\/ul>\nExemplo de c\u00f3digo: buscar o primeiro par\u00e1grafo de uma postagem como trecho<\/h2>\n
functions.php<\/code>que retornar\u00e1 o primeiro par\u00e1grafo de um post. Se nenhum post foi fornecido, ele se referir\u00e1 ao objeto global post. Ele tamb\u00e9m acomoda postagens que n\u00e3o s\u00e3o de Gutenberg, retornando o trecho real do WordPress para elas.<\/p>\nfunction awp_get_excerpt($post=false) {\n if (!$post) { \n global $post;\n }\n if (!$post) { return ''; }\n $excerpt = '';\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n $excerpt = get_the_excerpt($post->ID);\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n $excerpt = strip_tags($block['innerHTML']);\n break;\n }\n }\n }\n return \"<div class='excerpt'>$excerpt<\/div>\";\n}<\/code><\/pre>\nparse_blocks()<\/code>chamada da fun\u00e7\u00e3o, verificamos se o post tem ou n\u00e3o dados de bloco inv\u00e1lidos (o post foi criado antes do Gutenberg) e retornamos o trecho do post se for o caso. Caso contr\u00e1rio, percorremos os blocos da postagem, encontramos o primeiro bloco de par\u00e1grafo e retornamos seu innerHTML<\/code>. No final, retornamos uma string com (isso \u00e9 opcional) a <div><\/code>em torno dela.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>objeto global, por exemplo, dentro de um loop. Se voc\u00ea quiser especificar um post, forne\u00e7a o objeto post como par\u00e2metro para a chamada de fun\u00e7\u00e3o:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nExemplo: criar um \u00edndice a partir dos t\u00edtulos de uma postagem<\/h2>\n
core\/heading<\/code>. Mas podemos dar um passo adiante e incorporar n\u00edveis; por exemplo, colocando h3<\/code>como subt\u00edtulo sob h2<\/code>e assim por diante.<\/p>\nattrs<\/code>‘). Dentro do attrs<\/code>array seria um elemento do array com a chave ‘ level<\/code>‘ e um inteiro significando o n\u00edvel. A h3<\/code>teria ‘ level<\/code>‘ valor de 3<\/code>, a h4<\/code>teria ‘ level<\/code>‘ de 4<\/code>, e assim por diante.<\/p>\nattrs<\/code>blocos de cabe\u00e7alho podem estar vazios! Isso acontece quando o autor n\u00e3o alterou o tipo de t\u00edtulo para fora dos padr\u00f5es nas configura\u00e7\u00f5es do bloco. Para contornar isso, precisamos fazer algumas suposi\u00e7\u00f5es. Como os t\u00edtulos padr\u00e3o ser\u00e3o h2<\/code>(a menos que voc\u00ea tenha alterado isso em seu tema). Portanto, podemos supor que, se um bloco de cabe\u00e7alho n\u00e3o tiver um atributo de n\u00edvel, \u00e9 um h2<\/code>. Caso contr\u00e1rio, obtemos as informa\u00e7\u00f5es de n\u00edvel dos atributos.<\/p>\nol<\/code>lista bem estruturada \u00e9 que n\u00e3o podemos controlar como o autor estrutura seus t\u00edtulos. Eles podem muito bem enlouquecer e come\u00e7ar com um h4<\/code>t\u00edtulo e pular direto para um h2<\/code>t\u00edtulo logo depois. E de repente eles misturam um h1<\/code>no meio. Minha solu\u00e7\u00e3o, portanto, envolve gerar uma ol<\/code>lista simples e fornecer as informa\u00e7\u00f5es de n\u00edvel nas classes do item da lista. Ent\u00e3o, com algum CSS inteligente, voc\u00ea pode recuar os itens da lista de acordo com algum preenchimento esquerdo.<\/p>\nO c\u00f3digo<\/h3>\n
function awp_table_of_contents($post=false) {\n if (!$post) {\n global $post;\n }\n if (!$post) { return ''; }\n $headings = [];\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n return '';\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/heading') {\n $level = (isset($block['attrs']['level']))? $block['attrs']['level']: 2; \/\/ h2 as default\n $headings[] = ['title' => wp_strip_all_tags($block['innerHTML']), 'level' => $level];\n }\n }\n }\n\u00a0\n if (empty($headings)) { \/\/ No headings found in post\n return '';\n }\n\u00a0\n $toc = '<ol class=\"table-of-contents\">';\n foreach ($headings as $heading) {\n $toc .= '<li class=\"heading-level-'. $heading['level']. '\">'. $heading['title']. '<\/li>';\n }\n $toc .= '<\/ol>';\n return $toc;\n}<\/code><\/pre>\n#9<\/code>, acomodamos posts que n\u00e3o sejam Gutenberg. A fun\u00e7\u00e3o continua a percorrer todos os blocos e sempre que encontra um bloco de cabe\u00e7alho, ele \u00e9 adicionado ao nosso $headings<\/code>array. Usamos [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>para retirar as tags HTML dos t\u00edtulos. Tamb\u00e9m adicionamos as informa\u00e7\u00f5es de n\u00edvel ao nosso array, onde o padr\u00e3o \u00e9 definido como 2<\/code>se os atributos estiverem vazios.<\/p>\n$headings<\/code>array deve conter todos os t\u00edtulos do post, em ordem. Podemos ent\u00e3o simplesmente gerar uma string HTML e produzir seu conte\u00fado. Como mencionado, gerei um nome de classe em cada elemento com informa\u00e7\u00f5es sobre o n\u00edvel do cabe\u00e7alho para que possamos criar a ilus\u00e3o de uma lista estruturada com CSS.<\/p>\n