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 computador, tablet e telemóvel — medido outra vez no WordPress 7.1, e a razão técnica mais comum pela qual as pessoas instalam um construtor de páginas. O MevvBlocks fecha essa lacuna e depois continua: cento e dez blocos, modelos de tema do cabeçalho ao rodapé, uma grelha de artigos e um construtor de ciclos, um motor de formulários, popups, transformações e máscaras, código personalizado para todo o site, um único ecrã para a paleta do site, WebP e AVIF para as suas imagens, cache ao nível do bloco, uma auditoria de acessibilidade que lhe diz a verdade em vez de a esconder, e um ecrã de Core Web Vitals alimentado pelos seus próprios visitantes. O catálogo vai agora de um alternador e separadores aninhados a um gráfico circular, uma lista de reprodução, uma dica de contexto, um formulário de newsletter e uma animação SVG, com oito estilos de bloco no próprio painel de Estilos do editor — e todos eles param de se mexer quando o visitante pediu movimento reduzido. A tela também já não é uma aproximação: o editor pede ao servidor o mesmo CSS que a página vai imprimir, por isso o que dispõe é o que é publicado. Vinte e três desses blocos são para o WooCommerce, e nenhum deles redesenha o WooCommerce: chamam os modelos do próprio WooCommerce, por isso o seu tema e os seus plugins continuam a funcionar.
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 dez blocos
Disposição, texto e multimédia; menu, pesquisa, grelha de artigos e construtor de ciclos; logótipo do site, título da página, migalhas, informação do artigo e caixa de autor para modelos de tema; vídeo, áudio, lista de reprodução, galeria, tabela, FAQ, cronologia e código; alternador, separadores aninhados, gráfico circular, dica de contexto, newsletter, feed social, caixa rotativa, apelo à ação, título animado, antes/depois, pontos ativos, painel lateral e botões de contacto — e vinte e três para o WooCommerce, da galeria de produto ao carrinho, à finalização de compra e a um mini carrinho. Oitenta e sete sem o WooCommerce.
Oito estilos de bloco, no painel que o WordPress já lhe dá
Uma sobreposição de gradiente, escala de cinzentos ou desfoque até passar o rato, uma máscara circular ou arredondada, elevação, zoom e inclinação — escolhidos no painel de Estilos do núcleo, por isso não há nenhum controlo novo para aprender e a escolha é uma classe na sua marcação em vez de uma definição numa tabela. Todas as transformações ao passar o rato são desligadas quando o sistema do visitante pede movimento reduzido, e o fotograma parado de uma animação SVG é trocado da mesma maneira.
Um formulário de newsletter que não precisa de nenhum serviço
Um endereço, um nome opcional, uma caixa de consentimento e um POST simples — assinado com o mesmo HMAC que o motor de formulários usa, para que uma página em cache nunca morra com um nonce expirado. O honeypot é engolido em silêncio, o limite de taxa é por endereço, e os endereços chegam junto com os seus outros envios de formulário. Não há lista, nem chave de API, nem pedido a ninguém: a ação <code>mevvblocks_newsletter_subscribe</code> entrega cada endereço confirmado ao que já usa.
Texto dinâmico, incluindo os seus campos ACF
Um título, um texto, um botão ou uma imagem podem ler o seu valor do artigo em vez do que escreveu: título, excerto, autor, data, categoria, etiquetas, título de arquivo, termo pesquisado, o preço do WooCommerce, o SKU ou o stock, ou um campo personalizado por chave. Quando o Advanced Custom Fields está ativo o campo é lido através de <code>get_field()</code>, por isso obtém o valor formatado, e as chaves que começam por sublinhado são recusadas em vez de expostas.
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.
A paleta do seu tema, sem a reescrever
As cores e a tipografia podem ser lidas a partir do theme.json do tema ativo e usadas para preencher os espaços vazios na própria paleta do plugin. A ponte é deliberadamente unidirecional: nunca nada é escrito de volta no tema, pelo que uma atualização do tema nunca encontra o seu próprio ficheiro reescrito por baixo. Está desativada até a ligar.
Um mega painel no menu que já tem
Não é um bloco novo — é uma definição no bloco de navegação. Um submenu abre como um painel de largura total com até quatro colunas, e se ativar o painel num item sem submenu, a verificação de acessibilidade avisa-o em vez de imprimir uma caixa vazia.
Um primeiro rascunho de página, a partir de uma frase
Descreva a página e o modelo escolhe secções da própria biblioteca de modelos do plugin. Nunca escreve markup, pelo que o que chega à página são blocos editáveis e não HTML gerado, e uma secção que nomeie e que não exista é descartada e comunicada em vez de adivinhada. A página é sempre guardada como rascunho, e a chave é sua.
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.
O catálogo
Cento e dez blocos, em cinco grupos.
Estes são os mesmos cinco grupos que o plugin coloca nas suas próprias páginas de demonstração, e todos os blocos abaixo são desenhados no servidor: estão na página antes de correr um único script. Nada aqui é exclusivo do Pro exceto os três blocos que o dizem.
Texto e ação
Título, texto formatado, um título animado que pode escrever as suas palavras, botão, apelo à ação, caixa de ícone, lista de ícones e lista de verificação, separador, e um alerta que pode tornar dispensável — dispense-o e o foco segue em frente em vez de desaparecer. O alternador, os separadores aninhados com os seus painéis, o acordeão e as FAQ assentam todos em details/summary e no padrão ARIA de separadores, por isso nada fica escondido de um leitor cujo script nunca chegou.
Dados e preços
Contador, barra de progresso, barra de dados, caixa de números e um gráfico circular ou em anel cujos valores também são impressos como lista, porque um gráfico que ninguém consegue ler é uma decoração. Tabela de preços e lista de preços, testemunho, classificação por estrelas e carrossel de testemunhos, membro da equipa. O Pro acrescenta o comutador de conteúdo: uma barra de separadores mensal/anual com um distintivo, sobre painéis que podem conter os blocos que quiser.
Portefólio e mapa
Cronologia — vertical, ou horizontal num ecrã largo e de volta a vertical num ecrã estreito sem alterar a ordem de leitura — passos, uma tabela de dados acessível com cabeçalhos de coluna a sério, e um bloco de comparação. O mapa é uma incorporação do OpenStreetMap que pergunta antes de carregar. O Pro acrescenta o portefólio: cartões desenhados no servidor, um filtro de taxonomia aplicado no navegador sem qualquer pedido externo, e uma ligação para o arquivo. Não há modal nem paginação.
Multimédia e formulários
Vídeo e áudio, uma lista de reprodução com legendas e pósteres em que cada faixa é uma ligação comum antes de o script lhe tocar, galeria, antes/depois, caixa rotativa, faixa, pontos ativos e uma dica de contexto que abre ao passar o rato, ao receber foco e ao toque. Formulários: o motor de dezasseis campos, início de sessão e registo, e a newsletter — um POST assinado com um honeypot e um limite de taxa que entrega o endereço à sua própria lista. O feed social é uma lista de ligações escolhidas à mão: sem API, sem token, sem pedido a ninguém.
Design e movimento
Animação de entrada, posição fixa e paralaxe; oito estilos de bloco no painel de Estilos do núcleo — sobreposição de gradiente, escala de cinzentos, desfoque, máscaras circular e arredondada, elevação, zoom, inclinação; uma animação SVG mostrada como imagem para que nada dentro do ficheiro chegue à sua página, com um fotograma parado trocado sob movimento reduzido; 94 ícones de traço sem tipo de letra de ícones; e texto dinâmico a partir de um campo personalizado, lido através do Advanced Custom Fields quando este existe. Não há animações ligadas ao deslocamento.
Os cinco grupos são páginas abertas na nossa instalação de demonstração: catálogo de blocos — texto e ação, dados e preços, portefólio e mapa, multimédia e formulários, design. O que está deliberadamente ausente também está escrito: sem modal nem paginação no portefólio, sem adaptador de API por trás do feed social, e sem cronologia ligada ao deslocamento.
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.
Em uso
Onze imagens das páginas do catálogo.
Cada imagem é uma página pública de wp-demo.mevvsoft.com com o plugin gratuito e o Pro ativos, captada a 1440 e 390 pixels e recortada à secção que mostra. Nenhum ecrã de administração, nada desenhado nem retocado.
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.
- 110
- blocos — 87 sem o WooCommerce instalado
- 94
- ícones incluídos, desenhados numa única caixa de 24 pixels — sem tipo de letra de ícones
- 8
- estilos de bloco no painel de Estilos do núcleo, todos eles silenciosos sob movimento reduzido
- 42
- verificações de renderização contra as cinco páginas do catálogo na instalação de demonstração — 42 passaram, nenhuma falhou
- 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
- 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 do plugin a 8 de setembro de 2026. Para dar escala, e apenas para isso: as edições gratuita e Pro têm 1.8 MB e 82 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 a 31 de agosto. Isso é uma diferença de superfície, não uma afirmação sobre velocidade — e boa parte dela são simplesmente as funcionalidades que não temos. As quarenta e duas verificações de renderização são as que <code>tools/katalog-dogrula.php</code> corre contra as cinco páginas de catálogo que pode abrir por si na instalação de demonstração.
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 = 50,8719 ₺ (Taxa do İşbank)
Perguntas que as pessoas fazem antes de o instalar
Tenho de aprender um editor novo?
Não. Estes são blocos comuns do WordPress no editor de blocos comum, e o seu conteúdo continua como marcação de blocos padrão em post_content — não numa tabela nossa. Remova o plugin e o conteúdo continua a ser HTML legível.
O que fica de fora na edição gratuita?
Todos os 110 blocos, o motor de formulários, a newsletter, os modelos de tema, os popups, os estilos de bloco, os ícones, a otimização de imagens, a cache de blocos e a auditoria de acessibilidade são gratuitos. O Pro acrescenta o painel para editar os valores de computador, tablet e telemóvel, CSS personalizado por bloco, o comutador de conteúdo, o portefólio filtrável, a incorporação Lottie, e lógica condicional, resposta automática, webhooks, um campo de ficheiro e exportação CSV nos formulários.
O que acontece quando a licença expira?
As suas páginas continuam a ser desenhadas exatamente como estão, incluindo os valores de tablet e telemóvel que o painel Pro escreveu — o motor de estilos gratuito imprime-os. O que fecha é o painel de edição. Não há uma única verificação de licença no caminho de renderização, e um teste confirma-o em cada lançamento.
Para onde vão os endereços da newsletter?
Para o seu próprio site, junto com os outros envios de formulário. Não há lista nossa, nem chave de API, nem pedido a terceiros: o bloco dispara uma ação mevvblocks_newsletter_subscribe com cada endereço confirmado para que o possa entregar ao que já usa. O formulário é um POST simples assinado com um HMAC em vez de um nonce, porque um nonce morre em silêncio por trás de uma cache de página inteira.
Alguma coisa se anima contra a vontade do visitante?
Não. Todas as transformações ao passar o rato nos estilos de bloco, a caixa rotativa, o letreiro, o título a escrever e as animações de entrada são desligados quando o sistema pede movimento reduzido, e uma animação SVG passa a um fotograma parado. A primeira palavra de um título a escrever é sempre impressa, por isso a frase nunca fica em branco.
Carrega alguma coisa de terceiros?
O plugin não faz nenhum pedido próprio: nenhuma biblioteca de uma CDN, nenhum tipo de letra do servidor de outra pessoa, nenhuma telemetria. Três coisas chegam ao exterior e cada uma é decisão sua — os assistentes de IA, com uma chave que introduz você mesmo; o mapa, uma incorporação do OpenStreetMap que pede consentimento primeiro; e a incorporação Lottie no Pro, que pergunta da mesma forma e mostra uma imagem parada até concordar. O feed social não fala com ninguém: é uma lista de ligações que escolheu.
Um bloco pode ler um dos meus campos ACF?
Sim. Um título, texto, botão ou imagem pode tirar o seu valor de um campo personalizado por chave; com o Advanced Custom Fields ativo o valor é lido através de get_field() para obter o formatado, caso contrário recorre a metadados de artigo em bruto. As chaves que começam por sublinhado são recusadas — esses são os campos internos do WordPress e imprimi-los revelaria o que uma página nunca quis mostrar.
O que está deliberadamente fora?
O portefólio não tem modal nem paginação. O feed social não tem adaptador de API. Não há animações ligadas ao deslocamento. O mapa é um marcador sem estilo e sem direções. Não há camada de acessibilidade, nem CAPTCHA, nem pesquisa em direto. Cada uma dessas é uma decisão escrita no código, não uma omissão que descobrimos depois.
Começar
Do cabeçalho ao rodapé, dentro do editor de blocos.
Instale a edição gratuita: todos os cento e dez blocos, os formulários, a newsletter, os modelos de tema, os popups, os oito estilos de bloco e setenta e seis secções e páginas prontas já lá estão. O Pro acrescenta o painel para editar os valores de computador, tablet e telemóvel, mais o comutador de conteúdo, o portefólio filtrável e a incorporação Lottie. O que perde quando uma licença expira é o painel, não o aspeto do site: esses valores continuam a ser impressos.
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
- 110, ou 87 sem o WooCommerce
- Estilos de bloco
- 8, oferecidos no painel de Estilos do núcleo — todos conscientes do movimento reduzido
- Ícones
- 94 SVG de traço desenhados numa única caixa de 24 pixels — sem tipo de letra de ícones
- Padrões
- 76 prontos: 64 secções e 12 páginas completas
- Edição Free
- Blocos, formulários, newsletter, modelos de tema, popups, estilos de bloco, estilos globais, otimização de imagens, cache de blocos, código personalizado, auditoria de acessibilidade
- Pro
- Painel computador/tablet/telemóvel, CSS personalizado por bloco, comutador de conteúdo, portefólio filtrável, incorporação Lottie, lógica condicional de formulário e campo de ficheiro
- Tamanho do código-fonte
- Gratuito 1.8 MB + Pro 82 KB de PHP, JS e CSS, 8 de setembro de 2026
- Requisitos
- WordPress 6.0+, PHP 8.1+