Bloco de Posts com Filtro por Múltiplas Categorias

Hoje vamos aprimorar ainda mais o bloco de exibição de posts do WP24Horas. Se no dia anterior adicionamos a seleção de uma única categoria, agora avançamos para suporte a múltiplas categorias. Isso transforma o bloco em uma ferramenta muito mais flexível para páginas que agrupam conteúdos por interesses diversos — e te coloca no top 1% dos devs WP.

Se você chegou agora, confira os dias anteriores da Trilha WordPress Extremo em: wp24horas.com.br/series/wordpress-extremo

---

📦 O que faremos hoje:

• Permitir seleção de múltiplas categorias no painel lateral do bloco.
• Usar o hook useState para armazenar categorias e useEffect para buscar da REST API.
• Ajustar a chamada à API de posts incluindo múltiplas categorias.
• Preparar o bloco para filtragem múltipla no editor e renderização no frontend.

---

🛠️ Arquivo edit.js atualizado

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl, FormTokenField } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import PostList from './components/PostList';

export default function Edit({ attributes, setAttributes }) {
  const { quantidade, categorias } = attributes;
  const [posts, setPosts] = useState([]);
  const [todasCategorias, setTodasCategorias] = useState([]);

  useEffect(() => {
    apiFetch({ path: '/wp/v2/categories?per_page=100' }).then((data) => {
      setTodasCategorias(data);
    });
  }, []);

  useEffect(() => {
    const categoriasQuery = categorias && categorias.length > 0
      ? `&categories=${categorias.join(',')}`
      : '';

    apiFetch({ path: `/wp/v2/posts?per_page=${quantidade}${categoriasQuery}` })
      .then((data) => setPosts(data));
  }, [quantidade, categorias]);

  const sugestoes = todasCategorias.map(cat => ({
    value: cat.id.toString(),
    label: cat.name
  }));

  return (
    <>
      <InspectorControls>
        <PanelBody title="Configurações">
          <RangeControl
            label="Quantidade de posts"
            min={1}
            max={10}
            value={quantidade}
            onChange={(val) => setAttributes({ quantidade: val })}
          />
          <FormTokenField
            label="Categorias"
            value={(categorias || []).map(String)}
            suggestions={sugestoes.map(s => s.label)}
            onChange={(values) => {
              const selecionadas = values.map(val =>
                sugestoes.find(s => s.label === val)?.value || null
              ).filter(Boolean);
              setAttributes({ categorias: selecionadas.map(Number) });
            }}
          />
        </PanelBody>
      </InspectorControls>

      <div {...useBlockProps()}>
        <PostList posts={posts} />
      </div>
    </>
  );
}

---

🧠 Ajustes no block.json

Atualize o bloco com um novo atributo:

"attributes": {
  "quantidade": {
    "type": "number",
    "default": 3
  },
  "categorias": {
    "type": "array",
    "items": {
      "type": "number"
    },
    "default": []
  }
}

---

🔄 No save.js, mantenha:

import { useBlockProps } from '@wordpress/block-editor';

export default function save() {
  return <div {...useBlockProps()} />;
}

---

🧩 PostList.js

Sem mudanças desde o dia anterior:

export default function PostList({ posts }) {
  if (!posts.length) return <p>Carregando posts...</p>;

  return (
    <ul className="wp24h-post-list">
      {posts.map(post => (
        <li key={post.id}>
          <strong>{post.title.rendered}</strong>
        </li>
      ))}
    </ul>
  );
}

---

🚀 Pronto para produção

• Atualize o build com npm run build.
• Atualize seu render_callback no PHP se quiser exibir no frontend com filtragem.
• Teste no editor com múltiplas categorias selecionadas.

---

✅ Conclusão

Com isso, você adiciona uma funcionalidade super desejada em sites profissionais. Filtrar por várias categorias torna seu bloco mais versátil e personalizado.