Como criar blocos com Bento no WordPress em 2025?

Criar sites modernos em WordPress nunca foi tão eficiente, especialmente com a opção de construir blocos com o Bento. Esse recurso oferece liberdade criativa sem a necessidade de programação adicional ou plugins complexos.

Com o Bento, você pode criar layouts limpos e responsivos que se integram perfeitamente ao design do seu site, seja qual for o seu objetivo: um visual minimalista, um layout arrojado em formato de grade ou uma estrutura de página equilibrada. Ele foi desenvolvido para economizar tempo, simplificar o design e ajudar até mesmo iniciantes a criar seções com qualidade profissional.

Além do visual, o Bento também garante desempenho e responsividade. Cada bloco que você cria se ajusta perfeitamente a diferentes dispositivos, deixando seu site com uma aparência impecável em desktops, tablets e celulares.

Para blogueiros, proprietários de pequenas empresas ou desenvolvedores, a flexibilidade de criar blocos com o Bento significa mais controle, fluxos de trabalho mais rápidos e designs que se destacam.

Neste guia, vamos orientá-lo passo a passo no processo para aproveitar ao máximo o Bento no WordPress, para que você possa desbloquear todo o seu potencial para os projetos de seus sites.

Entendendo Bento e Gutenberg

Bento é uma coleção de componentes web de alto desempenho projetados para simplificar e aprimorar o desenvolvimento web. Esses componentes são reutilizáveis, acessíveis e compatíveis com diversos navegadores, tornando-os uma escolha confiável para desenvolvedores que criam aplicações web modernas.

O que diferencia o Bento é a sua versatilidade: ele oferece componentes como React, Preact e elementos personalizados, garantindo uma integração perfeita em diversos ambientes, incluindo o WordPress.

Com o Bento, os desenvolvedores podem:

• Elimine a codificação redundante aproveitando componentes reutilizáveis.

• Garantir acessibilidade e uma experiência de usuário fluida em todos os dispositivos.

• Utilize componentes altamente otimizados que contribuam para tempos de carregamento de página mais rápidos.

O Gutenberg é o poderoso editor de blocos do WordPress, construído em React, que permite aos usuários projetar e estruturar conteúdo usando blocos. Cada bloco representa uma funcionalidade específica, desde texto e imagens até recursos personalizados complexos.

A verdadeira magia do Gutenberg reside na sua flexibilidade; os desenvolvedores podem ir além dos blocos nativos do WordPress e criar blocos personalizados, adaptados a necessidades específicas.

No entanto, o método tradicional de construção desses blocos geralmente exige a codificação da funcionalidade duas vezes: uma para o editor React e outra para o frontend. Essa duplicação pode levar a ineficiências e inconsistências.

Por que combinar Bento com Gutenberg?

O Bento preenche essa lacuna, permitindo que os desenvolvedores:

• Escreva os componentes uma única vez e utilize-os de forma consistente em todo o editor de blocos e na interface do usuário.

• Reduza o tempo de desenvolvimento eliminando tarefas redundantes.

• Aproveite componentes consagrados e repletos de recursos, como carrosséis, acordeões e muito mais.

Ao combinar o Bento com o Gutenberg, os desenvolvedores desbloqueiam uma maneira simplificada e eficiente de criar blocos personalizados do WordPress que sejam funcionais e visualmente atraentes. Na próxima seção, exploraremos como o Bento pode simplificar seu fluxo de trabalho de desenvolvimento.

Por que usar o Bento para o desenvolvimento de blocos do Projeto Gutenberg?

Criar blocos personalizados para o Gutenberg pode ser um processo gratificante, mas desafiador. Os desenvolvedores frequentemente se veem divididos entre componentes de editor baseados em React e a implementação no frontend, resultando em código duplicado e dores de cabeça com a manutenção. É aí que o Bento se destaca, oferecendo uma solução elegante que simplifica o processo e garante uma experiência perfeita.

Vamos explorar por que o Bento é o complemento perfeito para o desenvolvimento em blocos do Gutenberg.

Evite a duplicação de código

Tradicionalmente, a construção de blocos do Gutenberg envolve a implementação da funcionalidade duas vezes:

• Componente de edição: Construído com React para o editor de blocos.

• Componente de Frontend: Reimplementado sem React para renderização no frontend.

Esse trabalho redundante aumenta o tempo de desenvolvimento e cria potenciais discrepâncias entre as versões do editor e do frontend. Com o Bento, você escreve a funcionalidade apenas uma vez, utilizando seus componentes reutilizáveis, que funcionam perfeitamente em ambos os ambientes.

Compatibilidade entre plataformas

Os componentes Bento são projetados para serem compatíveis com diversas plataformas, garantindo um comportamento consistente em diferentes navegadores e dispositivos.

Quer você esteja trabalhando em um editor Gutenberg baseado em React ou renderizando o bloco no frontend, os componentes do Bento se adaptam sem esforço, proporcionando uma experiência de usuário uniforme.

Acessibilidade integrada

A acessibilidade deixou de ser opcional e tornou-se essencial para proporcionar uma ótima experiência ao usuário.

Os componentes Bento são desenvolvidos com foco na acessibilidade, seguindo padrões da web como funções ARIA e navegação por teclado. Isso garante que seus blocos do Gutenberg sejam inclusivos e fáceis de usar para todos os públicos.

Alto desempenho para sites mais rápidos

Os componentes Bento são otimizados para velocidade, contribuindo para carregamentos de página mais rápidos e melhor desempenho do site.

Isso é particularmente importante para sites WordPress, onde o desempenho pode impactar diretamente o posicionamento nos mecanismos de busca (SEO) e a satisfação do usuário. Usar os componentes leves e eficientes do Bento garante que seus blocos não sobrecarreguem seu site.

Configurando seu ambiente de desenvolvimento

Antes de começar a criar um bloco Gutenberg com tecnologia Bento, é essencial configurar corretamente seu ambiente de desenvolvimento. Um ambiente bem preparado garante um processo de desenvolvimento tranquilo e reduz possíveis problemas futuros. Siga os passos abaixo para deixar tudo pronto.

Pré-requisitos

Antes de começar a desenvolver blocos Gutenberg com tecnologia Bento, certifique-se de ter o seguinte pronto:

Node.js e npm instalados:

• Instale o Node.js (que inclui o npm) para gerenciar as dependências e compilar seu projeto.

• Verifique a instalação executando os seguintes comandos no seu terminal:

node -v npm -v

WordPress instalado localmente:

• Configure um ambiente WordPress local usando ferramentas como Local by Flywheel, XAMPP ou Docker.

• Certifique-se de ter acesso ao diretório wp-content/plugins para instalar e ativar seu plugin personalizado.

Familiaridade com React e Gutenberg:

• É necessário ter um conhecimento básico de React, pois ele é a base para o desenvolvimento de blocos do Gutenberg.

• Familiarize-se com a estrutura de blocos do Gutenberg, especificamente com o funcionamento das funções de edição e salvamento.

Instalando @wordpress/create-block

A ferramenta @wordpress/create-block simplifica o processo de criação de blocos personalizados do Gutenberg. Veja como configurá-la:

Execute o comando Create-Block:
No seu terminal, navegue até o diretório de plugins do WordPress e execute o seguinte comando para criar um novo plugin de bloco:

npx @wordpress/create-block carrossel incrível

Isso irá gerar uma nova pasta de plugin chamada awesome-carousel, contendo todos os arquivos necessários para iniciar o desenvolvimento.

Navegue até o diretório de plugins:
Entre no diretório recém-criado:

cd carrossel incrível

Inicie o ambiente de desenvolvimento:
Execute o seguinte comando para inicializar o servidor de desenvolvimento:

npm iniciar

Este comando compila seus arquivos de bloco e monitora as alterações durante o desenvolvimento.

Ative o plugin no WordPress:

Acesse o painel de administração do WordPress.

Acesse Plugins ⟶ Plugins Instaladose ative o Awesome Logo Carousel .

Seu plugin personalizado agora está ativo e um bloco básico está disponível no editor Gutenberg.

Como criar um bloco de Bento personalizado: Guia passo a passo

A criação de um bloco personalizado do Gutenberg com tecnologia Bento começa com uma preparação adequada, que inclui configurar a estrutura do plugin, instalar os componentes Bento necessários e renderizar seu primeiro bloco no editor. Siga este guia passo a passo para criar um bloco de carrossel funcional e harmonioso.

Configuração inicial

Começar com a configuração inicial garante que seu projeto tenha a base correta para criar um bloco personalizado do Gutenberg. Seguindo estes passos, você criará uma estrutura de plugin totalmente funcional que pode ser expandida com componentes Bento. Esta configuração fornece todos os arquivos e configurações necessários para um desenvolvimento perfeito.

Crie o plugin de bloco usando @wordpress/create-block

Use a ferramenta @wordpress/create-block para criar a estrutura básica de um novo plugin de bloco. Isso gera todos os arquivos e diretórios necessários, fornecendo uma estrutura pronta para uso.

Execute o seguinte comando:

 npx @wordpress/create-block carrossel incrível

Um novo diretório chamado awesome-carousel será criado na sua pasta de plugins do WordPress.

Navegue até o diretório de plugins

Acesse o diretório de blocos recém-criado:

cd carrossel incrível

Inicie o servidor de desenvolvimento

Inicie o ambiente de desenvolvimento, que compila e monitora as alterações durante o desenvolvimento: `npm start`

Ative o plugin no WordPress

• Faça login no painel de administração do WordPress.

• Acesse Plugins ⟶ Plugins instalados, localize o Awesome Carousel e ative-o.

Com a configuração inicial concluída, você agora tem um plugin de bloco Gutenberg básico pronto para personalização.

Explore: Guia passo a passo sobre como criar um site Web3 com WordPress

Instalando componentes Bento

Integrar componentes Bento ao seu bloco é um passo crucial que desbloqueia todo o potencial de reutilização e desempenho.

O componente Bento Base Carousel serve como a espinha dorsal do seu bloco personalizado, fornecendo uma funcionalidade de carrossel pré-construída, porém flexível. Com apenas alguns comandos, você pode incorporar a acessibilidade e a compatibilidade multiplataforma do Bento ao seu projeto.

Instale o componente Bento Base Carousel

Instale o componente Bento Base Carousel usando o npm: npm install --save @bentoproject/base-carousel

Importar Bento Carrossel no Bloco

Abra o arquivo src/edit.js e adicione as seguintes importações:

import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css';

O componente React BentoBaseCarousel fornece a funcionalidade de carrossel, enquanto o CSS

Garante a estilização adequada tanto para o editor quanto para o frontend.

Com o Bento instalado e importado, você está pronto para renderizar seu primeiro bloco de carrossel no Gutenberg.

Veja também: Como criar um site SaaS com WordPress

Renderizando o Carrossel no Projeto Gutenberg

Ao renderizar o carrossel no Gutenberg, você poderá ver o Bento em ação dentro do editor de blocos do WordPress. Esta etapa concentra-se na integração do componente React BentoBaseCarousel e em garantir que ele funcione conforme o esperado.

Você também aprenderá como estilizar o bloco, garantindo que ele fique ótimo tanto no editor quanto no frontend. Ao final desta etapa, você terá um bloco de carrossel funcional que demonstra o poder do Bento.

Atualize o componente de edição

Abra o arquivo src/edit.js e atualize o componente Edit para incluir o BentoBaseCarousel:

import { useBlockProps } from '@wordpress/block-editor'; import { BentoBaseCarousel } from '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css'; export default function Edit() { return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></BentoBaseCarousel></div></div> ); }

Este código integra o componente Bento Base Carousel com um conjunto de imagens de exemplo.

Aprenda: Como criar seu site WordPress usando o tema Underscores

Adicionar CSS específico para carrossel

Abra o arquivo src/style.scss e adicione o seguinte CSS para garantir que o carrossel tenha dimensões consistentes:

wp-block-create-block-awesome-carousel .awesome-carousel-wrapper, .wp-block-create-block-awesome-carousel .awesome-carousel-wrapper > * { aspect-ratio: 1200 / 800; }

Isso garante que o carrossel mantenha sua proporção em todos os dispositivos e tenha uma aparência profissional.

Visualize o bloco de carrossel no editor

Salve as alterações e reconstrua o bloco usando o servidor de desenvolvimento (execute `npm start` se ainda não estiver em execução).

Acesse o editor de blocos do WordPress, adicione o Awesome Carousel e veja o carrossel em ação.

Nesta etapa, seu bloco Gutenberg com tecnologia Bento está funcional no editor. Nos próximos passos, você poderá aprimorar sua interatividade e otimizá-lo para o desempenho do frontend.

Leia: Como criar um carrossel de imagens no WordPress

Adicionando interatividade aos blocos Bento

A interatividade é fundamental para criar blocos envolventes no WordPress. Com a robusta API do Bento, você pode adicionar recursos dinâmicos, como controles de navegação, que permitem aos usuários interagir com seu bloco de carrossel de forma integrada, tanto no editor quanto no front-end.

Interação do usuário no editor

Para tornar o carrossel interativo no editor Gutenberg, é possível adicionar botões personalizados de navegação (por exemplo, Próximo e Anterior). Usando a API do Bento, você pode controlar a funcionalidade do carrossel diretamente no React.

Primeiro, atualize o arquivo src/edit.js para incluir os controles de navegação. Use a função createRef para acessar a API do carrossel. Por exemplo:

import { createRef } from '@wordpress/element'; import { Button } from '@wordpress/components'; export default function Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); return ( <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel ref={ref} autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Anterior</button> <Button isSecondary onClick={goToNextSlide}>Próximo</button></div> ); }

Confira: Explorando os melhores temas de blocos para WordPress

Esses botões permitem que o usuário navegue pelo carrossel diretamente no editor de blocos, tornando-o interativo e fácil de usar.

Interação do usuário no frontend

A interatividade no frontend espelha a funcionalidade do editor. No entanto, em vez de componentes React, são utilizados elementos personalizados nativos do Bento. Atualize o arquivo src/save.js para incluir o carrossel e os botões de navegação:

export default function save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Anterior</button> <button className="awesome-carousel-next">Próximo</button></div></div> ); }

Para habilitar os botões de navegação no frontend, crie um arquivo src/view.js. Este arquivo interage com a API do Bento para lidar com as ações do usuário:

export default function save() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Anterior</button> <button className="awesome-carousel-next">Próximo</button></div></div> ); }

Este script garante que os botões de navegação interajam perfeitamente com o carrossel na interface do usuário.

Leia: O que são padrões de blocos do WordPress?

Estilização e Otimização de Front-end

A estilização e a otimização adequadas são essenciais para garantir que o bloco tenha uma boa aparência e desempenho tanto no editor quanto no frontend. Use o arquivo src/style.scss para definir estilos específicos para o seu carrossel, garantindo que ele seja visualmente consistente em todos os dispositivos. Evite usar nomes de classe genéricos para prevenir conflitos com outros temas ou plugins.

Para otimizar o desempenho, carregue os estilos dinamicamente usando PHP. Atualize seu arquivo plugin.php para registrar e enfileirar os estilos somente quando o bloco for renderizado:

function create_block_awesome_carousel_register_assets() { wp_register_script('bento-runtime', 'https://cdn.ampproject.org/bento.js', [], false, true); wp_register_script('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js', ['bento-runtime'], false, true); wp_register_style('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css', []); } add_action('init', 'create_block_awesome_carousel_register_assets');

Registro de ativos e gerenciamento de callbacks de renderização

Carregar recursos de forma eficiente garante que seu bloco permaneça leve. Use a função `render_callback` do PHP para carregar scripts e estilos somente quando o bloco estiver presente na página. Modifique o arquivo `plugin.php` da seguinte forma:

function create_block_awesome_carousel_block_init() {
    register_block_type(__DIR__, [
        'render_callback' => 'create_block_awesome_carousel_render_block',
    ]);
}

function create_block_awesome_carousel_render_block($attributes, $content) {
    if (!is_admin()) {
        wp_enqueue_script('awesome-carousel-view');
        wp_enqueue_style('bento-base-carousel');
    }
    return $content;
}
add_action('init', 'create_block_awesome_carousel_block_init');


Isso garante que os scripts e estilos sejam carregados apenas nas páginas onde o bloco é renderizado, melhorando o desempenho geral do site.

Melhores práticas para o desenvolvimento de blocos de Bento

Ao trabalhar com blocos Bento no WordPress, seguir as melhores práticas garante que seus blocos permaneçam eficientes, reutilizáveis ​​e fáceis de usar.

Mantenha os blocos leves e reutilizáveis

Assim como uma lancheira Bento é dividida em compartimentos organizados para refeições, lanches, frutas e até mesmo comida para crianças, seus blocos também devem ser modulares e reutilizáveis.

Priorize a escolha de materiais limpos em seu código, garantindo que cada bloco seja robusto, durável e não sobrecarregado com recursos desnecessários.

Isso as torna mais portáteis, fáceis de guardar e convenientes para o uso diário, muito parecidas com uma lancheira ecológica, à prova de vazamentos e própria para lava-louças, que você pode levar para qualquer lugar, de piqueniques a viagens.

Garantir a acessibilidade (HTML semântico e atributos ARIA)

A acessibilidade é a base para a criação de experiências seguras e agradáveis. Ao usar HTML e funções ARIA corretamente, seus blocos Bento se tornam mais inclusivos.

Pense nisso como garantir que um recipiente seja próprio para micro-ondas, para lava-louças e para lavagem à mão; todos devem poder usá-lo, independentemente da preferência.

A rotulagem adequada também evita problemas como "vazamentos" ou derramamentos de conteúdo ao navegar com tecnologias assistivas, garantindo que os usuários possam desfrutar do seu conteúdo da mesma forma que desfrutariam de alimentos armazenados em um produto bem projetado que evita odores indesejáveis.

Otimize para responsividade em dispositivos móveis

No mundo atual, os usuários interagem com sites em diversos dispositivos, tornando a responsividade para dispositivos móveis essencial.

Os blocos de Bento devem ser compatíveis com diferentes tamanhos de tela, assim como a escolha da capacidade ou quantidade certa de recipientes com base na quantidade de comida que você precisa embalar. Seja para pequenos lanches ou refeições completas, o design deve ser escalável.

Um layout em blocos responsivo é tão prático quanto uma marmita Bento, cabendo em qualquer bolsa: resistente, seguro e projetado para evitar derramamentos durante o uso diário ou em viagens.

Use Bento para obter melhor desempenho em vez de blocos que dependem muito do React

A vantagem do Bento reside em seu desempenho. Em vez de depender de abordagens complexas baseadas em React, o Bento mantém tudo simplificado e eficiente.

É como escolher um recipiente ecológico, próprio para micro-ondas, durável e à prova de vazamentos em vez de um volumoso que adiciona peso extra.

Com o Bento, você se concentra na velocidade, em menos dependências e em uma experiência de desenvolvimento mais limpa, ideal para projetos que precisam ser divertidos, seguros, portáteis e otimizados para desempenho.

Siga os padrões de codificação do WordPress

Por fim, siga sempre os padrões de codificação do WordPress para garantir compatibilidade, facilidade de manutenção e segurança.

Assim como os produtos da Holanda ou de marcas globalmente reconhecidas costumam estabelecer padrões de qualidade em termos de preço, material, capacidade e design limpo, as normas de codificação garantem que seus blocos permaneçam de alta qualidade, confiáveis ​​e fáceis de lavar à mão ou "manter" a longo prazo.

Seguindo as melhores práticas, você cria blocos Bento que os desenvolvedores vão adorar e que permanecerão ideais para uso diário e a longo prazo.

Saiba mais: Guia para criar blocos personalizados no WordPress

Considerações finais

 O uso do Bento com o Gutenberg transforma o desenvolvimento em blocos, simplificando os fluxos de trabalho, reduzindo a duplicação de código e aprimorando a interatividade.

Com componentes reutilizáveis, compatibilidade entre plataformas e acessibilidade integrada, o Bento permite que os desenvolvedores criem blocos do WordPress de alto desempenho e preparados para o futuro sem esforço.

Ao integrar personalizações avançadas e otimizar o desempenho, você pode oferecer uma experiência perfeita tanto para editores quanto para usuários.

Seja para criar projetos pessoais ou para atender às necessidades de clientes, o Bento oferece as ferramentas para levar seus blocos do Gutenberg a um novo patamar com facilidade e eficiência.