MevvBlocks — Documentação Mevvsoft

Instalação

O MevvBlocks precisa do WordPress 6.0 ou mais recente e do PHP 8.1 ou mais recente. Não há outra dependência: nenhuma biblioteca externa, nenhuma fonte no servidor de outra pessoa, nenhuma etapa de build.

Envie e ative o plugin.
Abra uma página no editor de blocos e adicione o bloco Contêiner.
Coloque dentro dele os blocos que quiser. Você os encontra na categoria Design.
Gerencie o resto pelo menu MevvBlocks na barra lateral do admin.

O WooCommerce é opcional. Instalá-lo acrescenta dois blocos.
O MevvBridge é opcional. Se você veio do Elementor, o MevvBlocks é o que torna aquelas páginas editáveis de novo.
O MevvLegal é opcional. Se ele estiver presente, o bloco de mapa entrega o embed ao MevvLegal para que o mapa não seja carregado antes de o visitante consentir.

O Pro é um plugin separado instalado ao lado do gratuito, e declara o plugin gratuito como requisito obrigatório. Sua chave de licença é inserida na tela Lisans (Licença). Sem o Pro, o MevvBlocks não faz nenhuma requisição aos nossos servidores.

Estilo por tamanho de tela — a lacuna que isso fecha

Os blocos do núcleo aceitam um valor de espaçamento interno, uma altura mínima, uma contagem de colunas. Esse valor vale em todas as telas. Se uma seção precisa de 100 pixels de espaçamento no desktop e 40 no celular, o núcleo não consegue expressar isso — e essa única lacuna é o motivo técnico mais comum para instalar um construtor de páginas.

O MevvBlocks guarda três valores em vez de um — desktop, tablet, celular. Os limites são fixos:

Desktop: Sem media query — o valor base.
Tablet: Vale de 1024 pixels para baixo.
Celular: Vale de 767 pixels para baixo.

Os mesmos dois números são usados em todo o resto do plugin — o limite do menu hambúrguer, as contagens de colunas da grade. Um campo livre de pixels foi deliberadamente não oferecido: quem escolhesse 900 teria o hambúrguer em 900 enquanto o espaçamento continuaria mudando em 1024, e dois sistemas de breakpoints significam layouts que discordam de si mesmos.

Os valores vivem nos próprios atributos do bloco, dentro de post_content — não em uma tabela personalizada nem em post meta. O CSS é produzido no servidor, no momento da requisição, e impresso como um pequeno bloco de estilo junto ao elemento a que pertence.

Por que não salvar o CSS junto com a página? Porque o HTML salvo só consegue carregar um breakpoint. Renderizar na requisição é o que torna os três valores possíveis — e é por isso que uma licença vencida nunca pode apagar uma página publicada: não existe uma única verificação de licença nesse caminho.

A pré-visualização do editor — o que ela mostra e o que ainda não consegue

Esta página costumava dizer que a pré-visualização era uma aproximação. Não é mais, no que toca ao layout. A tela de edição agora pede ao servidor o mesmo CSS que a página vai imprimir e o aplica às mesmas classes de invólucro que o front-end usa.

O que é exato na tela de edição hoje: layout do container (direção, colunas, espaçamento, alinhamento), espaçamento interno, margem, fundo, borda, raio, sombra, altura mínima, tipografia, transformações, máscaras e posicionamento — com os valores de tablet e celular valendo conforme você redimensiona, porque a tela é um iframe e as media queries funcionam dentro dele.

Por que o CSS vem do servidor em vez de ser reconstruído em JavaScript: existe um único motor de estilos, e uma segunda cópia sairia do compasso da primeira. No dia em que alguém acrescentasse uma configuração a um e esquecesse o outro, o editor estaria errado enquanto afirma ser exato — pior do que a antiga aproximação honesta.

O que ainda não é exato: as regras que visam a marcação dentro de um bloco. Na tela, um bloco desenha os seus próprios controlos de edição, por isso um seletor escrito contra a estrutura do front-end não tem nada com que corresponder. Fechar isso significa tornar a marcação de edição idêntica à marcação publicada para cada um dos cento e dez blocos; é trabalho a sério e não está feito.

Medido, não afirmado: a mesma seção foi renderizada duas vezes sob a mesma folha de estilos — uma como o front-end a imprime, outra como a tela de edição a constrói — e dezesseis propriedades de layout foram comparadas em cada elemento. A tela antiga diferia em vinte e quatro delas. Agora são zero de sessenta e quatro. A ferramenta que mede isso está no código-fonte do plugin (tools/onizleme-esitlik.js), e ela foi primeiro apontada para a marcação antiga para provar que não estava cega.

Os blocos

Cento e dez blocos, ou oitenta e sete sem o WooCommerce. Todos estão na edição gratuita exceto os três marcados como Pro abaixo; nenhum outro bloco é exclusivo do Pro. Vivem na categoria Design do inseridor, e as chaves de definição que cada um guarda estão listadas em docs/BLOK-AYARLARI.md dentro do plugin — um ficheiro gerado, por isso não se pode afastar do código.

Os grupos abaixo são os mesmos cinco que o plugin usa nas suas próprias páginas de demonstração.

Texto e ação: Contentor, Título, Texto, Botão, Divisor, Espaçador, Âncora, Imagem, Shortcode, Citação, Lista de verificação, Código, Apelo à ação, Ícone, Caixa de ícone, Lista de ícones, Título animado, Alerta, Alternador, Separadores aninhados com Painéis de separador, Separadores, Acordeão, FAQ, Passos
Dados e preços: Contador, Barra de progresso, Barra de dados, Gráfico circular, Caixa de números, Tabela de preços, Lista de preços, Testemunho, Classificação por estrelas, Carrossel de testemunhos, Membro da equipa, Contagem decrescente, Distintivo, Faixa de logótipos, Comutador de conteúdo e Painel do comutador (Pro)
Portefólio e mapa: Cronologia, Tabela, Comparação, Índice, Mapa, Grelha de conteúdo, Mapa do site, Portefólio (Pro)
Multimédia e formulários: Vídeo, Áudio, Lista de reprodução, Galeria, Antes / Depois, Caixa rotativa, Faixa, Ponto ativo, Dica de contexto, Feed social, Ícones sociais, Partilha social, Carrossel, Diapositivos, Texto num traçado, Painel lateral, Botões de contacto, Barra de anúncios, Progresso de leitura, Tempo de leitura, Voltar ao topo, Formulário, Formulário de início de sessão, Formulário de registo, Newsletter, Formulário de pesquisa, Menu de navegação, Lottie (Pro)
Design e movimento: Animação SVG, Caixa de imagem, Direitos de autor, e os oito estilos de bloco descritos abaixo. O movimento não é um bloco: um painel de animação de entrada, posição fixa e paralaxe é acrescentado a todos os blocos do MevvBlocks.
Modelos de site e de tema: Logótipo do site, Título do site, Slogan do site, Título da página, Migalhas, Informação do artigo, Caixa de autor, Comentários, Anterior / Seguinte, Título do arquivo, Descrição do arquivo
WooCommerce (23): Produtos, Categorias de produto, Imagens de produto, Título do produto, Preço do produto, Avaliação do produto, Descrição curta, Descrição do produto, Metadados do produto, Informação adicional, Separadores do produto, Adicionar ao carrinho, Estado do stock, Produtos relacionados, Upsells, Vendas cruzadas, Mini carrinho, Carrinho, Finalização da compra, A minha conta, Seguimento de encomenda, Ordenação de produtos, Contagem de resultados — acrescentados apenas quando o WooCommerce está ativo

Uma nota sobre os mais recentes, porque cada um traz uma decisão que pode ver na página:

Alternador: Um <details> nativo que aceita quaisquer blocos lá dentro e pode ser aninhado dentro de outro alternador. Definições: baslik (o texto do resumo) e acik (aberto ao carregar). Não é preciso nenhum id, por isso dois alternadores na mesma página não podem colidir.
Separadores aninhados e Painel de separador: Um grupo de separadores cujos painéis são blocos internos comuns, por isso um painel pode conter qualquer coisa — incluindo outro grupo de separadores. Definições do grupo: yon (horizontal ou vertical) e acik (o separador aberto ao carregar); cada painel tem um baslik. A barra de separadores segue o padrão ARIA de separadores com teclas de seta, Home e End, e os ids são tornados únicos por grupo para que o aninhamento seja seguro. Só os painéis filhos diretos pertencem a um grupo. Uma barra vertical torna-se horizontal num ecrã estreito.
Gráfico circular: Circular ou em anel (tur), linhas escritas como “etiqueta | valor | cor opcional” em satirlar, mais um baslik. O círculo é desenhado com stroke-dasharray e leva role="img"; os mesmos valores são impressos por baixo como lista de texto com as suas percentagens, porque um gráfico que ninguém consegue ler é uma decoração. Não se anima.
Lista de reprodução: Áudio ou vídeo (tur), com um baslik e um repetidor de faixas: dosya, baslik, sure, poster e altyazi (uma faixa WebVTT). Cada faixa é impressa como uma ligação comum, por isso a lista é utilizável antes de correr qualquer script; com o script, escolher uma faixa troca a fonte no lugar.
Feed social: Publicações escolhidas à mão, dispostas em sutun colunas. Cada item tem adres, metin, tarih e gorsel. Não há adaptador de API, nem token, nem pedido a qualquer rede — isto é uma lista de ligações, e o plugin di-lo em vez de insinuar um feed em direto.
Dica de contexto: metin é a palavra na sua frase, ipucu a explicação, konum o lado por onde abre. É um botão a sério com role="tooltip" na bolha: o rato e o foco são tratados em CSS, o toque em script, e Escape fecha-a. A bolha é escondida com visibility em vez de removida, para que a relação described-by permaneça na árvore de acessibilidade.
Animação SVG: dosya é o SVG, durgun um fotograma parado, alt o texto alternativo e genislik a largura. O ficheiro é desenhado dentro de um <img>, deliberadamente: o script dentro de um SVG não consegue chegar à sua página dessa forma. Um <picture> troca para o fotograma parado quando o visitante pediu movimento reduzido.
Alerta, Título animado, Cronologia, Tabela, Caixa rotativa: Ao alerta pode dar-se um botão de dispensar (kapatilabilir) e ele move o foco para o elemento seguinte quando é dispensado; o seu tipo e título são editáveis. O título animado escolhe a sua etiqueta (baslik_etiketi, h1–h6, p, div ou span) e pode escrever as suas palavras (etki) — a primeira palavra é sempre impressa, e ambos os efeitos param sob movimento reduzido. A cronologia aceita uma disposição horizontal (yon) que volta a vertical num ecrã estreito sem alterar a ordem de leitura. As células de cabeçalho da tabela levam scope="col" e uma célula vazia imprime um travessão com uma etiqueta para leitores de ecrã. A caixa rotativa vira ao toque, com Enter e Espaço, e Escape volta a virá-la.
Comutador de conteúdo (Pro): Uma barra de separadores — normalmente mensal e anual — sobre Painéis do comutador que contêm quaisquer blocos. Definições: etiket (o nome acessível da barra), rozet (um distintivo, como uma poupança) e acik; cada painel tem um baslik.
Portefólio (Pro): gonderi_turu, taksonomi, terimler, adet, sutun, suzgec (mostrar o filtro) e arsiv_bag (ligação para o arquivo). Os cartões são desenhados no servidor e o filtro apenas os esconde e mostra no navegador, por isso nenhum pedido sai da página. Não há modal nem paginação.
Lottie (Pro): adres, alt, baslik, durgun (um fotograma parado), onay e onay_metni. O LottieFiles é um serviço externo, por isso o bloco segue o mesmo caminho de consentimento que o mapa e o vídeo: mostra a imagem parada até o visitante concordar, e sob movimento reduzido nunca reproduz. A biblioteca do leitor continua a não vir incluída.

Nada aqui fica escondido quando o JavaScript não carrega. Os separadores mostram todos os painéis, o alternador e o acordeão são elementos details nativos, o carrossel desliza, a lista de reprodução é uma lista de ligações, e as setas são impressas escondidas até o script as poder conduzir — mostrar um botão que não faz nada é mostrar uma interface avariada. Conteúdo escondido é conteúdo inacessível. Os botões e as ligações de ação têm um alvo mínimo de 44 pixels.

Estilos de bloco

Oito estilos são registados através do próprio register_block_style do WordPress, por isso aparecem no painel Estilos que o editor já mostra para um bloco selecionado. Não há nenhum controlo novo para aprender, e a escolha é guardada como uma classe is-style-… na sua marcação em vez de uma definição numa tabela nossa.

Sobreposição de gradiente: Contentor, Imagem, Caixa de imagem, Faixa, Carrossel
Escala de cinzentos, cor ao passar o rato: Imagem, Caixa de imagem, Membro da equipa, Faixa de logótipos, Galeria
Desfoque até passar o rato: Imagem, Caixa de imagem, Faixa
Máscara circular / Máscara arredondada: Imagem, Caixa de imagem, Membro da equipa — e, para a arredondada, Faixa e Galeria
Elevação ao passar o rato: Contentor, Caixa de ícone, Caixa de imagem, Tabela de preços, Membro da equipa, Testemunho, Apelo à ação, Faixa
Zoom na imagem ao passar o rato: Imagem, Caixa de imagem, Faixa, Galeria
Inclinação ao passar o rato: Caixa de ícone, Caixa de imagem, Faixa, Caixa de números

Todas as transformações ao passar o rato são desligadas quando o sistema do visitante pede movimento reduzido. Aplicar um estilo exige que o invólucro do bloco leve a classe, e é por isso que a camada de renderização limpa agora o atributo className do núcleo da marcação interior e o imprime no invólucro; as páginas convertidas com o MevvBridge nunca levaram esse atributo, por isso não são afetadas.

O bloco de newsletter

Um campo de endereço, um campo de nome opcional (ad_alani), uma caixa de consentimento e um botão de envio. Os textos são seus: baslik, metin, dugme_metni, onay_metni e basari_metni.

É um POST simples assinado com um HMAC, não com um nonce. Um nonce está ligado à sessão e a doze horas; por trás de uma cache de página inteira, um nonce expirado mata o formulário em silêncio. A assinatura é a mesma que o motor de formulários usa.
Um campo honeypot é engolido em silêncio. Mostrar um erro ensinaria o próximo bot a evitar a armadilha.
Aplica-se um limite de taxa por endereço.
A regra de consentimento é lida do próprio conteúdo do bloco, nunca do formulário enviado — lê-la de um campo escondido poria a definição nas mãos do visitante.
Os endereços são guardados com os seus outros envios de formulário, sob uma chave bulten:. Não há lista nossa nem pedido a terceiros.

Para entregar um endereço confirmado ao que já usa, ligue-se à ação:

add_action( 'mevvblocks_newsletter_subscribe', function ( $eposta, $ad, $blok_kimligi ) {
    // $eposta       : o endereço confirmado
    // $ad           : o nome, ou uma cadeia vazia quando o campo está desligado
    // $blok_kimligi : de que bloco de newsletter veio
}, 10, 3 );

A ação dispara depois de o endereço ter sido validado e guardado, por isso uma falha no seu handler não pode perder a subscrição.

Texto dinâmico e campos personalizados

Os blocos Título, Texto, Botão e Imagem podem tirar o seu valor do artigo em vez do que escreveu. O painel chama-se Dinâmico, e as fontes são uma lista fixa: título do artigo, excerto, autor, data, primeira categoria, etiquetas, número de comentários, título do arquivo, termo pesquisado, nome e slogan do site, o ano atual, o preço do WooCommerce, o SKU e o stock — e um campo personalizado por chave.

Com o Advanced Custom Fields ativo o campo é lido através de get_field(), por isso obtém o valor formatado em vez do bruto. Sem o ACF recorre a metadados de artigo simples, e nada se parte de qualquer forma.
As chaves que começam por sublinhado são recusadas. Esses são os campos internos do WordPress; imprimi-los revelaria o que a página nunca quis mostrar.
Não há nenhum campo “executar esta expressão”. Isso entregaria a execução de código a qualquer pessoa que possa editar uma página.

Enquanto edita o modelo de um cartão de ciclo não há contexto de artigo, por isso uma ligação dinâmica mostra o seu valor de recurso estático em vez de um valor. Isso é o modelo, não a página.

Grade de conteúdo e construtor de loop

O bloco Grade de conteúdo consulta posts, páginas ou produtos e os organiza. A paginação são links simples, então funciona com o JavaScript desligado.

A ordenação é uma lista fixa — data, modificação, título, ordem de menu, aleatório — porque o valor chega ao banco de dados.
Os títulos dos cartões vão de h2 a h6. O h1 não é oferecido: uma grade de cartões em uma página que já tem um h1 quebraria a ordem dos títulos.
Um link por cartão. Fazer da imagem, do título e do “leia mais” três links significa que um leitor de tela anuncia o mesmo destino três vezes.
A grade guarda em cache os ids dos posts que encontrou, nunca o HTML renderizado, e o cache é invalidado quando qualquer post é salvo — então “publiquei um post e ele não aparece” não pode acontecer.

O construtor de loop deixa você desenhar o cartão em vez de usar o embutido. Você cria um modelo do tipo Cartão de loop, monta-o com blocos comuns e vínculos dinâmicos, e o escolhe nas configurações da grade.

Enquanto você edita um modelo de cartão não há contexto de post, então os vínculos dinâmicos mostram seus valores estáticos de reserva. E se o modelo estiver vazio, apagado, em rascunho ou apontar para si mesmo, a grade recorre ao cartão embutido em vez de não imprimir nada. O aninhamento de loops é limitado a dois níveis.

O motor de formulários

Dezesseis tipos de campo, com validação no servidor. O formulário é a única parte de uma página que realmente faz alguma coisa, então ele funciona sem JavaScript: um envio POST simples recebe a mesma validação e as mesmas mensagens de um envio com script.

Tipos de campo: Texto, E-mail, Telefone, Endereço (URL), Número, Data, Hora, Oculto, Texto longo, Lista suspensa, Lista de múltipla escolha, Escolha única, Múltiplas caixas de seleção, Caixa de seleção, Texto do consentimento (KVKK) e Subtítulo. O Pro acrescenta um campo de envio de arquivo.
Para onde vão os envios: Para uma tabela própria e também para o e-mail. O registro é gravado primeiro e o e-mail enviado depois, porque a entrega de e-mail falha muito mais do que uma gravação no banco de dados.
Lendo os envios: MevvBlocks → Envios de formulário. O Pro acrescenta ali uma exportação em CSV.
E-mail de notificação: O remetente é o seu site, nunca o visitante. Usar o endereço do visitante como remetente é o motivo mais comum de o e-mail de formulário nunca chegar — SPF e DMARC o rejeitam. O endereço dele vira o Reply-To.

O spam é tratado por três camadas e nenhum CAPTCHA: uma assinatura que não depende de sessão, um tempo mínimo de preenchimento e um campo honeypot. Um envio que preenche o honeypot é aceito em silêncio e descartado — mostrar um erro diria ao bot que ele foi pego, e a próxima tentativa pularia aquele campo.

Por que uma assinatura em vez de um nonce do WordPress? Um nonce está preso a uma sessão e a uma janela de doze horas. Em um site com cache, o mesmo HTML é servido por horas ou dias, o nonce dentro dele já expirou faz tempo, e o formulário para de funcionar em silêncio. Essa é a falha de campo mais comum dos plugins de formulário. A assinatura usada aqui vale sete dias e não depende de quem está navegando.

O endereço IP de um envio nunca é armazenado em forma legível — apenas um resumo criptográfico, salgado com a chave do seu próprio site, de modo que registros de dois sites diferentes não podem ser cruzados.

O armazenamento dos envios não está preso à licença. Se estivesse, o dia em que um pagamento vencesse seria o dia em que o cliente começaria a perder dados.

Modelos de tema

Sete tipos de modelo, construídos no editor do WordPress que você já usa — Cabeçalho, Rodapé, Conteúdo individual, Arquivo, Resultados da busca, Não encontrado (404) e Cartão de loop. Um segundo editor seria mais uma coisa a manter em passo com o núcleo do WordPress.

O tipo e as condições ficam em uma caixa lateral simples, não em um painel React — uma caixa clássica também salva com o JavaScript desligado, e não quebra quando a API do editor muda.

Condições: Site inteiro, página inicial, tipo de post, categoria ou um conteúdo específico. Deixe-as vazias para o site inteiro.
Quando várias correspondem: Vence a condição mais estreita.
Condições malformadas: Descartadas ao salvar e armazenadas vazias, em vez de mantidas como texto inválido que faria o modelo nunca aparecer em silêncio.

Os modelos de cabeçalho e rodapé só são aplicados no Astra e no GeneratePress. Se o seu tema não tem receita, eles não são impressos e a tela avisa — acoplar um cabeçalho a um tema que não conseguimos levantar significa dois cabeçalhos, garantido. Os modelos de conteúdo individual, arquivo, busca e 404 continuam funcionando em qualquer tema, porque substituem o loop e deixam o cabeçalho e o rodapé do próprio tema no lugar.

Um modelo de Cartão de loop nunca se coloca em lugar nenhum sozinho. Quem o escolhe é um bloco de grade.

Biblioteca de padrões e predefinições de bloco

Setenta e seis padrões prontos: sessenta e quatro secções e doze páginas completas. São registados como padrões normais do WordPress, pelo que os insere como já sabe — o botão +, o separador Padrões e depois a categoria MevvBlocks sections ou MevvBlocks pages. As secções percorrem as famílias de destaque, funcionalidade, testemunho, perguntas frequentes, preços, apelo à ação, contacto, sobre nós, faixa antes do rodapé e estatísticas; as páginas acrescentam três variantes de página inicial, uma página de perguntas frequentes, uma de campanha, uma de história e uma de agradecimento.

Nenhum modal personalizado foi escrito para isso. O inseridor do núcleo já dá pré-visualização, busca, navegação por teclado e tradução de graça, e o que ele insere é marcação de blocos comum — nada a que ficar preso.

Nove deles precisam do WooCommerce: oito secções de produto e categoria e uma página de entrada da loja. Vivem num ficheiro próprio e só são registados enquanto o WooCommerce estiver ativo, pelo que a um site sem loja nunca é oferecido um padrão que inseriria um bloco que não consegue desenhar. Os produtos neles vêm de uma consulta — novos, em destaque, em promoção, mais vendidos — e não de um id de categoria escrito no padrão, porque esse mesmo id cai numa categoria vazia ou simplesmente errada noutra loja.

Os padrões vêm sem imagens. Puxar imagens de outro lugar é uma questão de direitos autorais, uma questão de privacidade, e amarra a aparência da sua página ao servidor de outra pessoa continuar no ar. Os blocos de imagem estão no lugar com o texto alternativo preenchido; escolha as suas.

As predefinições de bloco salvam sob um nome as configurações de aparência de um bloco e as aplicam a outro bloco do mesmo tipo. O conteúdo deliberadamente não é salvo — texto, links, imagens e itens de lista são removidos, então aplicar uma predefinição nunca sobrescreve o que você escreveu.

Os padrões não são registrados no front-end. Gerar a marcação deles a cada visualização de página foi medido em 109 KB e 3,59 ms — pagos por nada, já que ninguém insere um padrão enquanto lê.

Pop-ups

Construídos no editor de blocos como qualquer outra coisa; os gatilhos, as condições e a frequência ficam na barra lateral da mesma tela. Gerenciados em MevvBlocks → Pop-ups.

Gatilhos: No carregamento da página com atraso, a uma porcentagem de rolagem, na intenção de saída, em um clique que casa com um seletor CSS, ou após um período de tempo ativo. O cronômetro de atividade para enquanto a aba está em segundo plano.
Condições: Site inteiro, página inicial, páginas específicas, tipo de post ou categoria; logado, deslogado ou todo mundo; e por dispositivo.
Frequência: Toda vez, uma vez por sessão, ou uma vez a cada N dias.
Aparência: Posição, largura, se o título aparece, se clicar fora fecha, e a animação de abertura.

O contador de “não mostrar de novo” fica no próprio navegador do visitante, não no servidor. Contá-lo no servidor significaria cunhar uma identidade duradoura para cada visitante só para não lhe mostrar uma caixa duas vezes.

A segmentação por dispositivo é decidida pelo navegador, não por farejar o user agent. Um user agent não distingue com confiança um tablet de um celular, e atrás de um cache de página inteira serviria o dispositivo do primeiro visitante a todo mundo. Se nenhum gatilho for selecionado, o pop-up recai no carregamento da página; se nenhum dispositivo for selecionado, recai nos três — um pop-up que silenciosamente nunca aparece é pior do que um que aparece demais.

A paleta do site

Uma única tela para cores e tipografia, acessível tanto pelo menu do MevvBlocks quanto por Aparência, porque é ali que as pessoas procuram. Cada entrada mostra o próprio nome de variável, e os blocos se referem a esses nomes em vez de a valores literais.

É isso que permite a uma página construída antes da mudança adotar uma nova paleta em vez de perder suas referências — os nomes de variável continuam sendo os mesmos que as suas páginas já usam.

Não existe excluir. Uma cor ou um conjunto tipográfico pode ser deixado vazio, mas removê-lo deixaria todos os blocos que se referiam a ele apontando para nada. Esvaziar é reversível; apagar uma referência não é.

A auditoria de acessibilidade

MevvBlocks → Acessibilidade examina as suas páginas, posts e modelos publicados e relata o que cada bloco deixou de fora: uma imagem sem texto alternativo, um título vazio, um botão sem nome ou sem destino, uma ordem de títulos quebrada, um contraste baixo demais.

A mesma auditoria está disponível como painel lateral enquanto você ainda edita, que é onde um achado é mais barato de corrigir.

Isto deliberadamente não é uma camada sobreposta. Camadas que acoplam um “menu de acessibilidade” a uma página não consertam nada: uma imagem sem texto alternativo continua sem ele, e um texto de baixo contraste continua ilegível. Sustentar a afirmação “este site é acessível” sem que seja verdade é uma posição pior do que não afirmar nada — sites que usam overlays já foram processados exatamente por isso. Esta ferramenta mede e conta a você; a correção é sua.

O contraste só é relatado quando as duas cores são de fato conhecidas. Chutar uma cor herdada geraria avisos sobre os quais você não pode agir.

Velocidade — cache de elementos e imagens

Duas coisas distintas, ambas na edição gratuita.

Cache de elementos. A saída dos blocos é armazenada em vez de reconstruída a cada requisição. Medido: tempo de renderização dos blocos 33–72% menor. Usa um cache de objetos persistente (Redis, Memcached) quando existe, e transients quando não.

Um bloco cuja saída varia por visitante, por consulta ou por momento nunca é armazenado: formulários, login, cadastro, minicarrinho, grade de produtos, busca, carrinho, checkout, minha conta, shortcode. O shortcode está nessa lista porque não sabemos o que há dentro dele — uma vez congelamos um token do WPForms em um site real, e desde então a regra é aplicada a partir do código.

Otimização de imagens. Uma cópia WebP (opcionalmente AVIF) de cada imagem enviada é gravada ao lado da original; a original nunca é tocada. Medido: 39–78% menores. Um arquivo que não encolhe não é mantido — PNGs pequenos e chapados normalmente crescem em WebP.

As imagens são servidas dentro de um elemento <picture>: o endereço de cada formato está no HTML e o navegador escolhe. Decidir no servidor a partir do cabeçalho Accept foi deliberadamente descartado — quando o mesmo endereço varia por visitante, qualquer cache no caminho pode entregar o arquivo errado à pessoa errada.

Se outro plugin realmente está fazendo esse trabalho (LiteSpeed, ShortPixel, Imagify, Smush, EWWW, Optimole, Converter for Media), o MevvBlocks se afasta sozinho e explica por quê. A pergunta não é “está instalado?”, mas “ele consegue de fato rodar?”: o LiteSpeed com a otimização de imagens ligada mas sem chave de nuvem não faz nada.

Core Web Vitals — medidos nos seus visitantes

Core Web Vitals são dados de campo por definição: medidos nos navegadores de visitantes reais e reportados como o percentil 75 numa janela de 28 dias. Uma execução do Lighthouse é outra coisa — uma máquina, uma rede, um momento. Saber qual é qual é o que resolve a confusão do “o PageSpeed diz 98, o Search Console diz vermelho”.

A tela Web Vitals mostra três números por classe de dispositivo:

LCP: Quanto tempo o conteúdo principal leva para aparecer. Bom é 2,5 segundos ou menos.
CLS: Quanto a página se move enquanto se assenta. Bom é 0,1 ou menos.
INP: Quanto tempo a página leva para responder a um toque ou clique. Bom é 200 ms ou menos.

O script de medição ocupa cerca de um kilobyte e não carrega biblioteca alguma — o trabalho é feito pelo próprio PerformanceObserver do navegador. A amostragem é de 10% das visitas por padrão e quem decide é o navegador, não o servidor: se o servidor decidisse, a mesma URL produziria dois documentos HTML diferentes e um cache de página inteira serviria a todos aquele que visse primeiro.

Nada pessoal é coletado: nenhum IP, nenhum cookie, nenhum identificador. Três valores, uma classe de dispositivo e o caminho da página, armazenados no seu próprio servidor como contagens agrupadas. Nada é enviado a lugar nenhum.

Abaixo de cem amostras a tela não mostra número nenhum — ela diz quantas tem. Um percentil tirado de uma dúzia de medições é ruído, e um número errado é pior do que nenhum número, porque alguém vai agir com base nele. O percentil é lido de um histograma, então é aproximado à largura do intervalo, e a tela diz isso.

Transformações e máscaras

Qualquer bloco pode ser deslocado, escalado, rotacionado (em Z e 3D X/Y), inclinado e invertido — cada um com valores separados para desktop, tablet e celular. É possível definir uma transformação de hover separada e uma duração de transição.

As máscaras podem ser um círculo, triângulo, hexágono, mancha, flor, forma livre ou a sua própria imagem, com controles de tamanho, posição e repetição.

As formas são embutidas no CSS, não distribuídas como arquivos SVG separados. Um caminho de arquivo errado faz uma máscara sumir em silêncio e ninguém vê o 404; atrás de um CDN, o endereço da pasta do plugin também pode mudar.

Código personalizado para o site inteiro

HTML, CSS e JavaScript podem ser colocados no head, no início do body ou no final: tags de verificação, trechos de medição, pequenos ajustes de estilo. Posição, prioridade e uma condição de sessão são configuráveis.

Ele não roda PHP. Colocar um executor de PHP dentro de um construtor de páginas transformaria a permissão de um designer em permissão para rodar código no servidor.

A capacidade exigida é unfiltered_html: quem não pode colocar um script bruto em um post também não pode colocá-lo no site inteiro. Com o MevvLegal instalado, os scripts de rastreamento colocados aqui também ficam retidos até o consentimento de cookies ser dado.

Blocos do WooCommerce

Vinte e três blocos: título do produto, imagens, preço, adicionar ao carrinho, avaliação, stock, meta, descrição curta, descrição, separadores de dados, informação adicional, produtos relacionados, vendas superiores, vendas cruzadas, carrinho, finalização, a minha conta, seguimento da encomenda, ordenação e contagem de resultados — mais produtos, categorias de produto e um mini carrinho.

Nenhum deles redesenha o WooCommerce. Todos chamam as próprias funções de modelo e shortcodes dele. Seu tema altera esses modelos e seus plugins se engancham neles — frete, parcelamento, avisos de estoque, tabelas de tamanho. Desenhar nossa própria marcação derrubaria tudo isso em silêncio.

Carrinho, checkout, minha conta e rastreamento do pedido são específicos de cada visitante: o cache de página inteira é desligado e eles nunca vão para o cache de elementos. Se o WooCommerce não estiver ativo, esses blocos não são registrados nem no servidor nem no editor.

Notas do editor

Você pode fixar uma nota em qualquer bloco: quem escreveu, quando, e se está resolvida.

As notas NUNCA são impressas na página. Naquele arquivo não existe um único hook de front-end e um teste garante isso. Notas são conversa interna; um visitante vê-las seria pior do que um layout quebrado.

Uma nota está ligada à identidade do bloco. Duplicar um bloco dá à cópia uma identidade NOVA, então ela não herda a nota — e, como benefício adicional, ganha o próprio escopo de CSS.

As notas vivem nos próprios dados do post: apague o post e as notas vão junto, sem deixar linhas órfãs.

IA no editor — com a sua própria chave

Escrever, reescrever, encurtar, gerar texto alternativo de imagens e traduzir. Anthropic e OpenAI são suportados.

Você insere a SUA PRÓPRIA chave de API e a requisição vai do seu site DIRETAMENTE ao provedor. Seu texto nunca chega até nós; a cota e a conta continuam sendo suas. Não construímos um serviço de nuvem próprio: nesse caso o seu texto passaria pelos nossos servidores e a responsabilidade sobre os dados passaria a ser nossa.

A chave nunca chega ao navegador — a requisição é feita a partir do servidor. Ela também não é devolvida por nenhum endpoint; nem o formulário de configurações imprime o valor de volta.

NÃO criptografamos a chave, e dizemos isso com clareza: no WordPress a chave de criptografia precisa ficar no mesmo servidor, então um atacante com acesso ao banco de dados obtém as duas. Chamá-la de “criptografada” prometeria uma proteção que não existe.

O resultado não é escrito direto no bloco; ele chega como sugestão e você o aplica. Essa é a nossa defesa real contra uma frase enterrada no seu conteúdo ser lida como instrução — um humano aprova.

Ler o theme.json do tema

Um tema de blocos já declara a sua paleta e tipografia em theme.json. O MevvBlocks pode ler esse ficheiro e usá-lo para preencher os espaços vazios na sua própria paleta do site, pelo que as cores que escolhe num bloco são as cores que o tema já usa, em vez de um segundo conjunto concorrente.

A ponte é unidirecional e mantém-se assim. Nunca nada é escrito de volta no theme.json. Um plugin que edita o próprio ficheiro do tema deixa-lhe um ficheiro que a atualização do tema irá sobrescrever — e nenhuma forma de saber qual dos dois estava certo. Também só preenche espaços que tenha deixado vazios: uma cor que definiu à mão nunca é substituída.

Está desativado até o ligar, porque um site que já tem uma paleta não a quer ver silenciosamente redirecionada para a do tema.

O mega painel

Um submenu pode abrir como um painel de largura total com até quatro colunas em vez de uma lista pendente estreita. Não é um bloco novo — é uma definição no bloco de navegação que já está a usar, pelo que o menu mantém o seu markup, o seu comportamento por teclado e o seu layout móvel.

Ative o painel num item de menu sem submenu e a verificação de acessibilidade avisa-o. Um painel vazio não é um pequeno problema estético: é um controlo que se anuncia a um leitor de ecrã e depois não contém nada.

Um primeiro rascunho de página, a partir de uma frase

Descreva a página que quer e o modelo escolhe secções da própria biblioteca de padrões do plugin. Nunca escreve markup: devolve uma lista de chaves de secção, e o próprio MevvBlocks renderiza essas secções. O que chega à página é, portanto, blocos comuns que pode editar, não HTML gerado que tem de limpar.

Uma chave de secção que o modelo inventa não existe na biblioteca, pelo que é descartada — e o ecrã diz-lhe que foi descartada em vez de produzir silenciosamente uma página mais curta.
A página é sempre criada como rascunho. Não existe nenhum caminho de código que a publique.
Usa a mesma chave que introduziu para as ferramentas de IA do editor: a sua própria chave Anthropic ou OpenAI, guardada no seu site, com o pedido a ir diretamente do seu servidor para o fornecedor.

Free e Pro

A edição gratuita é o produto inteiro: cento e sete dos cento e dez blocos, os oito estilos de bloco, os modelos de tema, o construtor de grelha e de ciclos, o motor de formulários com o seu arquivo de envios, o formulário de newsletter, o texto dinâmico incluindo campos ACF, o menu, a pesquisa, os popups, a biblioteca de padrões, as predefinições de bloco, a paleta global, a otimização de imagens, a cache de blocos, o código personalizado para todo o site, as notas do editor, o ecrã de Core Web Vitals e a auditoria de acessibilidade.

O Pro acrescenta capacidades de edição, não de saída:

Pontos de interrupção — as abas desktop / tablet / celular, com altura mínima, largura do conteúdo, largura e os quatro valores de espaçamento interno por ponto de interrupção.
CSS personalizado por bloco, onde o token selector representa o próprio bloco.
Extras de formulário — campos condicionais, uma resposta automática ao remetente, um webhook e um campo de envio de arquivo.
Exportação em CSV dos envios de formulário.
Três blocos — o comutador de conteúdo com os seus painéis, o portefólio com um filtro de taxonomia, e a incorporação Lottie. A renderização deles também nunca verifica a licença: uma página que já os tenha continua a imprimi-los.

Os painéis de pontos de interrupção e de CSS personalizado aparecem hoje nos blocos principais — Contêiner, Título, Texto, Botão, Separador, Imagem, Depoimento, Ícone, Caixa de ícone, Lista de ícones, Shortcode, Formulário, Produtos e Categorias de produtos. Vários controles por ponto de interrupção são gratuitos onde quer que existam: o número de colunas da grade em tablet e celular, o limite do menu hambúrguer, a posição da caixa de imagem no celular e a escolha de dispositivo da posição fixa.

Quando uma licença expira ou está ausente:

Seu site fica exatamente igual. Cada valor salvo para tablet e celular continua sendo impresso, e cada regra de CSS personalizado por bloco também. Isso não é uma promessa, é uma regra arquitetural: nenhum arquivo do caminho de renderização pergunta pela licença, e um teste verifica isso a cada versão.
Os formulários continuam sendo enviados, continuam salvando e continuam mandando e-mail.
Os pop-ups existentes continuam aparecendo.
O que você perde são os painéis Pro no editor — e só isso.

Se os nossos servidores estiverem inacessíveis, uma licença ativa continua funcionando por sete dias. Uma instalação que nunca se verificou com sucesso não ganha carência nenhuma: bloquear o nosso endereço não é um jeito de conseguir o Pro.

Quando algo não funciona

“A sessão do formulário expirou.”: A cópia em cache daquela página tem mais de sete dias, ou as chaves de segurança do seu site foram rotacionadas. Limpe o cache de páginas.
O formulário não manda e-mail: Olhe primeiro a lista de envios — o registro é gravado antes do e-mail, então se ele está lá, o formulário funcionou e a entrega é que não. Depois confira o endereço do destinatário e a configuração de e-mail do seu site.
A página parece certa no editor e errada no front-end: A pré-visualização do editor é aproximada por design; veja acima. O front-end é a verdade. Se um bloco carrega valores de tablet ou celular, o editor imprime um aviso dizendo isso.
Um bloco diz que é inválido quando tento editá-lo: Historicamente isso acontecia com blocos registrados no servidor mas ausentes do script do editor — eles eram impressos perfeitamente e só falhavam quando abertos para edição. Agora um teste protege contra isso; se você ainda vir, informe o nome do bloco.
A contagem regressiva mostra a hora errada: A marcação carrega um instante-alvo absoluto, nunca “faltam X segundos”, então uma página em cache não consegue congelá-la. O bloco se corrige pelo relógio do servidor; se essa requisição estiver bloqueada, ele recai no próprio relógio do visitante em vez de falhar.
O modelo de cabeçalho ou de rodapé não aparece: Seu tema não tem receita. Só o Astra e o GeneratePress podem ser levantados; a tela avisa. Os outros tipos de modelo funcionam em qualquer tema.
Apareceram dois cabeçalhos: O MevvBlocks e o MevvBridge estão produzindo um cada. O MevvBlocks assume o espaço primeiro, de propósito — deixe o cabeçalho a cargo de apenas um dos dois.
Os containers estão mais largos ou mais estreitos do que o definido: Uma regra do tema está vencendo na especificidade. O Astra em particular estiliza os descendentes com muita força. Isso foi corrigido nos casos medidos aumentando a especificidade em vez de usar !important; se você encontrar um caso novo, diga qual é o tema.
Um post publicado não aparece em uma grade: Deveria aparecer. A grade guarda em cache apenas os ids dos posts, e salvar qualquer post invalida o cache. Se persistir, verifique se o tipo de post e a ordenação são os que você espera.

Atualizações

As atualizações chegam através do próprio WordPress. O plugin pergunta à nossa loja se existe uma versão mais recente e entrega a resposta ao próprio fluxo de atualização do WordPress, pelo que uma nova versão aparece no ecrã de plugins com um botão Atualizar vulgar, em vez de esperar que alguém descarregue um zip à mão. Na edição gratuita, esse pedido leva apenas o nome do pacote e a versão instalada — sem endereço do site, sem endereço de e-mail, sem chave de licença e sem inventário de plugins. Como nada nele o identifica, a confiança assenta na assinatura: a resposta é assinada com a nossa chave Ed25519, e uma resposta sem assinatura, mal assinada, repetida a partir de um carimbo temporal antigo ou que aponte a transferência para outro anfitrião que não o nosso é descartada sem tocar no site.

Limites

A pré-visualização do editor é exata para o layout, não para tudo. A tela imprime o mesmo CSS que o front end, por isso o espaçamento, o fundo, as margens, a tipografia, as transformações e a posição coincidem. O que continua diferente é qualquer regra escrita para o markup dentro de um bloco, porque aí o bloco desenha os seus próprios controlos de edição.
Os modelos de cabeçalho e rodapé só funcionam no Astra e no GeneratePress. Qualquer outro tema não recebe nada, mais um aviso — o silêncio seriam dois cabeçalhos.
O mapa é um embed do OpenStreetMap. Um marcador, sem imagem de marcador personalizada, sem estilização do mapa, sem rotas. Sem chave de API, sem conta de faturamento e sem nenhuma chave no código-fonte da sua página.
O portefólio não tem modal nem paginação. Cartões, um filtro e uma ligação para o arquivo — é esse o bloco inteiro.
O feed social não tem adaptador de API. É uma lista de ligações que escolhe à mão; nada é obtido de qualquer rede, e nenhum token é guardado.
Não há animações ligadas ao deslocamento nem qualquer regra que impeça dois efeitos de colidirem. Existem efeitos de entrada, paralaxe e ao passar o rato, e todos eles são silenciosos sob movimento reduzido.
O gráfico circular não se anima, e não é interativo: os valores são impressos como lista ao lado dele em vez de mostrados ao passar o rato.
Sem camada de acessibilidade sobreposta. Apenas medir e relatar.
Sem CAPTCHA.
Sem busca ao vivo. Uma requisição por tecla digitada é uma dependência e uma superfície de limite de taxa.
A contagem regressiva usa o fuso horário do site, não o do visitante. Uma campanha termina em um único instante no mundo todo.
O menu oferece dois breakpoints, não um valor livre em pixels, e não tem modo fly-out nem off-canvas — um painel deslizante com gerenciamento de foco é justamente para o que serve o bloco de pop-up.
Os cartões da grade não podem ser h1, e o aninhamento de loops para em dois níveis.
O conjunto de ícones tem 94 ícones de traço, todos desenhados numa única caixa de 24 pixels. Não há tipo de letra de ícones nem forma de acrescentar os seus ao seletor; um SVG seu entra pelo bloco Imagem ou Animação SVG.
O conteúdo dinâmico vem de uma lista fixa de fontes. Não existe um campo do tipo “execute esta expressão”: isso entregaria execução de código a qualquer um que possa editar uma página.
Os conjuntos globais de cor e tipografia não podem ser apagados, apenas esvaziados.
Os cartões de produto são desenhados pelo WooCommerce, não por nós, então o seu tema e quaisquer hooks de terceiros continuam funcionando.
A interface é distribuída em onze idiomas. Turco, inglês, espanhol, alemão, francês, português, italiano, neerlandês, japonês, russo e polonês, além de variantes de país como es_MX e pt_PT. Qualquer outro idioma recai no inglês.
A janela dos Web Vitals reinicia a cada 28 dias; ela não desliza. Uma janela deslizante exigiria intervalos diários e vinte e oito vezes mais armazenamento. A tela mostra quando a janela atual começou.
Desinstalar não remove a tabela de envios nem as configurações. O conteúdo dos seus blocos continua legível de qualquer forma — é marcação padrão em post_content.

Nenhuma biblioteca de JavaScript ou CSS de terceiros é carregada, em lugar nenhum. Nem para o slider, nem para o acordeão, nem para o movimento, nem para o mapa. Cada uma delas teria custado entre quarenta e cem kilobytes em toda página que a usasse.

Cem pixels no desktop, quarenta no celular — no editor de blocos.