WordPress 7.1 · core/group
<!-- wp:group {"style":{"spacing":{"padding":
{"top":"100px","bottom":"100px"}
}}} -->Um único valor. São 100 pixels em 1440, e continuam sendo 100 pixels em 390.
BLOCKS
Edição gratuita disponível
MevvBlocks
Do cabeçalho ao rodapé, dentro do editor de blocos.
O editor de blocos do WordPress é rápido e nativo, mas não consegue dar a uma mesma medida um valor separado para desktop, tablet e celular — verificado novamente na WordPress 7.1, e o motivo técnico mais comum para as pessoas instalarem um construtor de páginas. O MevvBlocks fecha essa lacuna e vai além: cento e um blocos, modelos de tema do cabeçalho ao rodapé, uma grade de posts e um construtor de loop, um mecanismo de formulários, pop-ups, transformações e máscaras, código personalizado em todo o site, uma única tela para a paleta do site, WebP e AVIF para suas imagens, cache no nível de bloco, uma auditoria de acessibilidade que diz a verdade em vez de escondê-la, e uma tela de Core Web Vitals alimentada pelos seus próprios visitantes. O canvas também deixou de ser uma aproximação: o editor pede ao servidor o mesmo CSS que a página vai imprimir, então o que você organiza é o que é publicado. Vinte desses blocos são para o WooCommerce, e nenhum deles redesenha o WooCommerce: eles chamam os próprios modelos dele, então seu tema e seus plugins continuam funcionando.
A lacuna
Um bloco nativo só comporta um número.
Quando você define o espaçamento interno de uma seção no editor de blocos, esse valor é um único número. O mesmo número é impresso em uma tela de 1440 pixels e em um celular de 390 pixels. O espaçamento que fica certo no desktop divide a página ao meio no celular, e as respostas de sempre são CSS escrito à mão ou um construtor de páginas. Esta é a terceira resposta: a mesma configuração, com um valor para tablet e outro para celular ao lado.
MevvBlocks · mevvsoft/container
<!-- wp:mevvsoft/container {"ayarlar":{
"padding": {"top":"100","unit":"px"},
"padding_tablet": {"top":"64", "unit":"px"},
"padding_mobile": {"top":"40", "unit":"px"}
}} -->A mesma configuração, três valores. Mais nada no bloco muda.
O que o servidor imprime
.e-con-1a2b { --padding-top:100px }
@media (max-width:1024px) { .e-con-1a2b { --padding-top:64px } }
@media (max-width:767px) { .e-con-1a2b { --padding-top:40px } }O HTML salvo só consegue carregar o valor de um tamanho de tela, então o CSS é gerado no momento da requisição — e é também por isso que esses valores continuam sendo impressos mesmo quando uma licença expira.
- Desktop 100 px
- Tablet · ≤1024 64 px
- Celular · ≤767 40 px
O fato de que blocos nativos não conseguem variar um valor por tamanho de tela foi verificado no próprio WordPress 7.1, e não tirado da documentação: o core/group aceita padding, plano de fundo, altura mínima, bordas e layout flex ou grid — cada um deles como um único valor. Os limites de tela acima são do próprio plugin, e as media queries são as que ele realmente escreve.
Capacidades
Começa pelo celular. Mas não para por aí.
Um site precisa de mais do que espaçamento: um formulário de contato, um cabeçalho e rodapé que ainda pode editar, uma paleta que ainda pode mudar. Você pode estar construindo a partir de uma página em branco, ou vindo de um construtor de páginas — de qualquer forma, cada um desses recursos existe porque algo quebrou sem ele.
Cada medida, para cada tamanho de tela
Um espaçamento interno, um tamanho de fonte, uma contagem de colunas podem ter um valor separado para desktop, tablet e celular. O núcleo do WordPress não consegue — isso foi medido na 7.1, não presumido. O mesmo painel também tira um elemento do fluxo com posicionamento absoluto ou fixo, e seus deslocamentos e z-index também são por dispositivo.
Cento e um blocos
Layout, texto e mídia; menu, busca, grade de posts e construtor de loop; logotipo do site, título da página, trilha de navegação, informações do post e caixa do autor para modelos de tema; vídeo, galeria, tabela, perguntas frequentes, linha do tempo e código; flip box, chamada para ação, título animado, antes/depois, pontos interativos, painel lateral e botões de contato — e vinte para WooCommerce, da galeria do produto ao carrinho e checkout. Setenta e oito sem WooCommerce.
O que você vê no editor é o que a página imprime
A tela de edição não mostra mais uma aproximação: espaçamento interno, espaçamento, direção, alinhamento, fundo, raio, sombra, transformação e posição aparecem com os valores que o front-end vai usar. Um único motor de estilos produz esse CSS e o editor o busca no servidor — escrever um segundo motor em JavaScript nos daria duas cópias que se afastam com o tempo. Medido: a tela antiga diferia da página em 24 propriedades de layout; agora são zero de 64.
Core Web Vitals, dos seus visitantes reais
LCP, CLS e INP são medidos nos navegadores de quem visita seu site, e o que a tela mostra é o percentil 75 numa janela de 28 dias — dados de campo, o tipo que o Search Console olha, não um teste de laboratório. Abaixo de cem amostras nenhum número é exibido, porque um percentil calculado com um punhado de medições é ruído. Nenhum IP, nenhum cookie, nenhum identificador é coletado, e os dados nunca saem do seu próprio servidor.
IA com a sua própria chave
Escreva, reescreva, encurte, traduza e gere texto alternativo para imagens. Você insere sua própria chave de API e a requisição vai do seu site direto para o provedor — seu texto nunca chega até nós e a cota continua sendo sua. O resultado chega como sugestão, não escrito direto no bloco.
Notas que seus visitantes nunca veem
Fixe uma nota em qualquer bloco para sua equipe, marque como resolvida, apague. Ela vive no editor e não existe um único hook de front-end que pudesse imprimi-la.
Mais rápido, e medido
A saída dos blocos é armazenada em cache e as imagens são convertidas para WebP ou AVIF ao lado das originais — as originais nunca são tocadas. Medido: tempo de renderização dos blocos 33–72% menor, peso das imagens 39–78% menor. As imagens são servidas por um elemento <code><picture></code> para que o mesmo HTML chegue a todo mundo; decidir por visitante no servidor é o que envenena um cache de página. Você também pode servir uma imagem diferente nos celulares — não uma cópia menor da mesma, outra foto — e o navegador continua fazendo a escolha.
Um motor de formulários, não uma dependência
Dezesseis tipos de campo, validação no servidor, um honeypot que é engolido em silêncio, e uma tela onde os envios ficam guardados. O formulário funciona sem JavaScript, porque é a única parte da página que realmente faz alguma coisa.
Modelos de tema com condições
Cabeçalho, rodapé, post individual, arquivo, busca e 404 — construídos no editor do WordPress que você já usa, não em um segundo editor que teríamos de manter em sintonia com o núcleo.
Pop-ups que sobrevivem à mudança
Abrem no carregamento, por profundidade de rolagem, na intenção de saída, em um clique ou após inatividade. A frequência é contada no próprio navegador do visitante, então ninguém precisa ser identificado no servidor.
Uma única tela para a paleta do site
Cores e tipografia em um só lugar, sob seus nomes de variável originais — assim as páginas criadas antes da mudança adotam a nova paleta em vez de perder suas referências.
Uma auditoria de acessibilidade, não uma camada sobreposta
Nenhum widget é acoplado à página alegando que o site é acessível. Ele relata o que cada bloco deixou de fora — texto alternativo ausente, ordem de títulos quebrada, contraste fraco — enquanto você ainda está editando.
Slider, abas e acordeão sem biblioteca
A rolagem é scroll-snap nativo e o acordeão é um elemento details. Se o script nunca carregar, nada fica escondido: conteúdo escondido é conteúdo inacessível.
Renderizado no servidor, nunca preso à licença
O HTML salvo só consegue carregar o valor de um tamanho de tela, então o CSS é gerado no momento da requisição. Não existe uma única verificação de licença nesse caminho — uma licença vencida nunca apaga uma página publicada.
Como funciona
O editor comum, com os controles de um construtor de páginas.
Sem um segundo canvas, sem um aplicativo separado. Você seleciona um bloco e o painel à direita traz o que um construtor de páginas ofereceria — para desktop, tablet e celular separadamente.
Selecione um bloco, o painel já está ali
Tipo de layout, direção, altura mínima, largura do conteúdo, alinhamento, espaçamento entre itens. Blocos comuns no editor comum — nada de novo para aprender, e seu conteúdo continua sendo marcação de bloco padrão em post_content.
Transformações, máscaras e anotações de equipe em cada bloco
Girar, escalar, inclinar, espelhar e mascarar — cada um com valores separados para desktop, tablet e celular. E uma anotação fixada no bloco para sua equipe: ela fica no editor e nunca é impressa na página.
E ele realmente funciona na página
Uma flip box em uma página real: a face frontal, a face traseira, e um botão que também funciona pelo teclado — a gravação abaixo é de uma página real, não um mock-up. O bloco é renderizado no servidor, então uma licença expirada nunca o deixa escurecido.
E então ele mostra o que seus visitantes realmente vivenciaram
LCP, CLS e INP medidos nos navegadores de visitantes reais, exibidos como o percentil 75 ao longo de 28 dias — dados de campo, do tipo que o Search Console analisa, não uma execução de laboratório. A tela abaixo é de uma instalação real: note a única célula que se recusa a mostrar um número, porque catorze amostras não formam um percentil.
Imagens: WebP e AVIF, sem tocar nos originais
Uma única tela. Um arquivo que não fica menor não é mantido. E se outro plugin realmente está fazendo esse trabalho, o MevvBlocks se retira por conta própria e explica o motivo — a pergunta não é "está instalado", mas sim "ele realmente consegue funcionar".
Nós usamos isso em nossa própria loja
mevvshop.com é uma loja WooCommerce real, e suas páginas são construídas com esses blocos — cabeçalho, rodapé, cartões de produto e tudo mais. Cada número nesta página foi medido lá ou em nossa instalação de demonstração, e não estimado.
Medido
Números que contamos, não números que arredondamos.
Cada valor abaixo pode ser contado no código-fonte do plugin. Onde um número soaria como uma alegação de desempenho, ele não é feito: o peso da página depende do tema, da hospedagem e do cache, e nós não medimos o seu.
- 101
- blocos — 78 sem o WooCommerce instalado
- 3.217
- verificações na suíte de testes, todas passando
- 16
- tipos de campo de formulário, mais um campo de arquivo no Pro
- 6
- tipos de modelo: cabeçalho, rodapé, único, arquivo, busca, 404
- 5
- gatilhos de pop-up: carregamento, rolagem, saída, clique, inatividade
- 48
- ícones inclusos, desenhados em uma única grade de 24 pixels
- 29.828
- bytes de HTML congelado que os blocos de menu, caixa de imagem, ícones sociais e direitos autorais tornaram editáveis novamente em nossa própria loja
- 0
- diferenças de layout entre o canvas do editor e a página publicada, em 64 propriedades comparadas
- 0
- verificações de licença no caminho de renderização — garantidas por um teste
Contado no código-fonte do plugin em 1º de setembro de 2026. Para dar uma ideia de escala, e apenas de escala: as edições free e Pro têm 1,5 MB e 46 KB de PHP, JS e CSS, enquanto o Elementor, o Ultimate Addons e o Header Footer Elementor juntos ocupavam 178 MB em disco na instalação que medimos em 31 de agosto. Essa é uma diferença de área de superfície, não uma alegação de velocidade — e boa parte dela é simplesmente os recursos que não temos. O que chega ao visitante é um número diferente, e menor: 20 KB de CSS e 5 KB de JavaScript em uma página.
Preços
Todos os preços incluem IVA.
Uma licença vencida nunca apaga uma página. Os valores gravados pelo painel de edição Pro continuam sendo exibidos pela edição Free, e o formulário continua recebendo envios. O que se fecha é o painel de edição, não a aparência do site.
1 USD = 49,5932 ₺ (Taxa do İşbank)
Começar
Do cabeçalho ao rodapé, dentro do editor de blocos.
Instale a edição Free: os blocos, os formulários, os modelos de tema, os pop-ups e dezenove seções e páginas prontas já estão nela. O Pro adiciona o painel para editar os valores de desktop, tablet e celular. O que você perde é o painel, não a aparência do site: se a licença expirar, esses valores continuam sendo exibidos.
Informações do produto
- Tipo de produto
- Pacote de blocos para WordPress
- O que é
- Um construtor de páginas dentro do editor de blocos
- Blocos
- 101, ou 78 sem WooCommerce
- Edição Free
- Blocos, formulários, modelos de tema, pop-ups, estilos globais, otimização de imagens, cache de blocos, código personalizado, auditoria de acessibilidade
- Pro
- Painel desktop/tablet/celular, CSS personalizado por bloco, lógica condicional de formulários e campo de arquivo
- O que o visitante baixa
- 20 KB de CSS + 5 KB de JS em uma página — medido na página inicial do wp-demo, 1 de setembro de 2026
- Tamanho do código-fonte
- Free 1,5 MB + Pro 46 KB de PHP, JS e CSS, 1 de setembro de 2026
- Requisitos
- WordPress 6.0+, PHP 8.1+