WordPress 7.1 · core/group
<!-- wp:group {"style":{"spacing":{"padding":
{"top":"100px","bottom":"100px"}
}}} -->Un solo valor. Son 100 píxeles a 1440, y siguen siendo 100 píxeles a 390.
BLOCKS
Edición gratuita disponible
MevvBlocks
Del encabezado al pie de página, dentro del editor de bloques.
El editor de bloques de WordPress es rápido y nativo, pero no puede dar a una misma medida un valor distinto para escritorio, tablet y móvil — comprobado de nuevo en WordPress 7.1, y el motivo técnico más común por el que la gente instala un creador de páginas. MevvBlocks cierra esa brecha y va más allá: ciento un bloques, plantillas de tema de encabezado a pie de página, una cuadrícula de entradas y un creador de bucles, un motor de formularios, ventanas emergentes, transformaciones y máscaras, código personalizado en todo el sitio, una sola pantalla para la paleta del sitio, WebP y AVIF para sus imágenes, caché a nivel de bloque, una auditoría de accesibilidad que le dice la verdad en lugar de ocultarla, y una pantalla de Core Web Vitals alimentada por sus propios visitantes. El lienzo tampoco es ya una aproximación: el editor le pide al servidor el mismo CSS que la página imprimirá, así que lo que organiza es lo que se publica. Veinte de esos bloques son para WooCommerce, y ninguno de ellos redibuja WooCommerce: llaman a sus propias plantillas, así que su tema y sus plugins siguen funcionando.
La brecha
Un bloque nativo solo puede contener un número.
Cuando le da relleno (padding) a una sección en el editor de bloques, ese valor es un solo número. El mismo número se imprime en una pantalla de 1440 píxeles y en un teléfono de 390 píxeles. El espaciado que se ve bien en un escritorio parte la página por la mitad en un teléfono, y las respuestas habituales son CSS escrito a mano o un creador de páginas. Esta es la tercera respuesta: el mismo ajuste, con un valor para tablet y otro para móvil junto a él.
MevvBlocks · mevvsoft/container
<!-- wp:mevvsoft/container {"ayarlar":{
"padding": {"top":"100","unit":"px"},
"padding_tablet": {"top":"64", "unit":"px"},
"padding_mobile": {"top":"40", "unit":"px"}
}} -->El mismo ajuste, tres valores. Nada más del bloque cambia.
Lo que el 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 } }El HTML guardado solo puede llevar el valor de un tamaño de pantalla, así que el CSS se genera en el momento de la solicitud — por eso mismo estos valores siguen imprimiéndose aunque una licencia caduque.
- Escritorio 100 px
- Tablet · ≤1024 64 px
- Móvil · ≤767 40 px
Que los bloques nativos no pueden variar un valor según el tamaño de pantalla se comprobó directamente en WordPress 7.1, no se tomó de la documentación: core/group admite relleno, fondo, altura mínima, bordes y diseño flex o grid — cada uno como un solo valor. Los límites de pantalla anteriores son propios del plugin, y las media queries son las que realmente escribe.
Capacidades
Empieza por el teléfono. No termina ahí.
Un sitio necesita más que espaciado: un formulario de contacto, un encabezado y un pie de página que se puedan seguir editando, una paleta que se pueda seguir cambiando. Puede estar construyendo desde una página en blanco, o llegando desde un creador de páginas — en cualquier caso, cada una de estas funciones existe porque algo se rompía sin ella.
Cada medida, para cada tamaño de pantalla
Un relleno, un tamaño de fuente, un número de columnas pueden llevar un valor distinto para escritorio, tableta y móvil. El núcleo de WordPress no puede — eso se midió en la 7.1, no se supuso. El mismo panel también saca un elemento del flujo con posicionamiento absoluto o fijo, y sus desplazamientos y su z-index también son por dispositivo.
Ciento un bloques
Diseño, texto y medios; menú, búsqueda, cuadrícula de entradas y constructor de bucles; logotipo del sitio, título de página, migas de pan, información de la entrada y caja de autor para plantillas de tema; vídeo, galería, tabla, preguntas frecuentes, línea de tiempo y código; caja giratoria, llamada a la acción, titular animado, antes/después, puntos interactivos, panel lateral y botones de contacto — y veinte para WooCommerce, desde la galería del producto hasta el carrito y el proceso de pago. Setenta y ocho sin WooCommerce.
Lo que ve en el editor es lo que imprime la página
El lienzo ya no muestra una aproximación: relleno, espaciado, dirección, alineación, fondo, radio, sombra, transformación y posición aparecen con los valores que usará la parte pública. Un solo motor de estilos produce ese CSS y el editor lo pide al servidor — escribir un segundo motor en JavaScript nos habría dado dos copias que se separan con el tiempo. Medido: el lienzo antiguo se diferenciaba de la página en 24 propiedades de diseño; ahora son cero de 64.
Core Web Vitals, de sus visitantes reales
LCP, CLS e INP se miden en los navegadores de quienes visitan su sitio, y lo que muestra la pantalla es el percentil 75 sobre una ventana de 28 días — datos de campo, los que mira Search Console, no una prueba de laboratorio. Por debajo de cien muestras no se muestra ningún número, porque un percentil calculado con un puñado de mediciones es ruido. No se recopila ninguna IP, ninguna cookie, ningún identificador, y los datos nunca salen de su propio servidor.
IA con su propia clave
Escriba, reescriba, acorte, traduzca y genere texto alternativo para imágenes. Usted introduce su propia clave de API y la petición va de su sitio directamente al proveedor — su texto nunca llega hasta nosotros y la cuota sigue siendo suya. El resultado llega como sugerencia, no escrito directamente en el bloque.
Notas que sus visitantes nunca ven
Fije una nota a cualquier bloque para su equipo, márquela como resuelta, bórrela. Vive en el editor y no hay un solo hook de la parte pública que pudiera imprimirla.
Más rápido, y medido
La salida de los bloques se almacena en caché y las imágenes se convierten a WebP o AVIF junto a los originales — los originales nunca se tocan. Medido: tiempo de renderizado de bloques reducido un 33–72%, peso de las imágenes reducido un 39–78%. Las imágenes se sirven mediante un elemento <code><picture></code> para que el mismo HTML llegue a todo el mundo; decidir por visitante en el servidor es lo que envenena una caché de página. También puede servir una imagen distinta en los móviles — no una copia más pequeña de la misma, otra toma — y el navegador sigue tomando la decisión.
Un motor de formularios, no una dependencia
Dieciséis tipos de campo, validación en el servidor, un honeypot que se traga en silencio, y una pantalla donde se guardan los envíos. El formulario funciona sin JavaScript, porque es la única parte de la página que realmente hace algo.
Plantillas de tema con condiciones
Encabezado, pie de página, entrada individual, archivo, búsqueda y 404 — construidos en el editor de WordPress que ya usa, no en un segundo editor que tendríamos que mantener al día con el núcleo.
Ventanas emergentes que sobreviven al cambio
Se abren al cargar, según la profundidad de desplazamiento, al intentar salir, con un clic o tras un periodo de inactividad. La frecuencia se cuenta en el propio navegador del visitante, así que nadie tiene que ser identificado en el servidor.
Una sola pantalla para la paleta del sitio
Colores y tipografía en un solo lugar, bajo sus nombres de variable originales — así las páginas creadas antes del cambio adoptan la nueva paleta en lugar de perder sus referencias.
Una auditoría de accesibilidad, no una capa superpuesta
No se añade a la página ningún widget que afirme que el sitio es accesible. Informa de lo que cada bloque dejó fuera — texto alternativo ausente, un orden de encabezados roto, contraste insuficiente — mientras usted sigue editando.
Carrusel, pestañas y acordeón sin biblioteca
El desplazamiento es scroll-snap nativo y el acordeón es un elemento details. Si el script no llega a cargarse, nada queda oculto: contenido oculto es contenido inaccesible.
Renderizado en el servidor, nunca atado a la licencia
El HTML guardado solo puede llevar el valor de un tamaño de pantalla, así que el CSS se genera en el momento de la petición. En ese camino no hay una sola comprobación de licencia — una licencia vencida nunca apaga una página publicada.
Cómo funciona
El editor de siempre, con los controles que tiene un creador de páginas.
Sin un segundo lienzo, sin una aplicación aparte. Selecciona un bloque y el panel de la derecha ofrece lo que le daría un creador de páginas — para escritorio, tablet y móvil por separado.
Seleccione un bloque, el panel está ahí mismo
Tipo de diseño, dirección, altura mínima, ancho del contenido, alineación, espacio entre elementos. Bloques normales en el editor de siempre — nada nuevo que aprender, y su contenido permanece como marcado de bloques estándar en post_content.
Transformaciones, máscaras y notas de equipo en cada bloque
Rotar, escalar, inclinar, voltear y enmascarar — cada uno con valores independientes para escritorio, tablet y móvil. Y una nota fijada al bloque para su equipo: vive en el editor y nunca se imprime en la página.
Y de verdad funciona en la página
Una caja giratoria en una página real: la cara frontal, la cara trasera, y un botón que también funciona con el teclado — la grabación de abajo es una página real, no una maqueta. El bloque se renderiza en el servidor, así que una licencia caducada nunca lo oscurece.
Y luego le dice lo que sus visitantes realmente experimentaron
LCP, CLS e INP medidos en los navegadores de visitantes reales, mostrados como el percentil 75 a lo largo de 28 días — datos de campo, del tipo que consulta Search Console, no una prueba de laboratorio. La pantalla de abajo es una instalación real: fíjese en la única celda que se niega a mostrar un número, porque catorce muestras no son un percentil.
Imágenes: WebP y AVIF, sin tocar los originales
Una sola pantalla. Un archivo que no se reduce no se conserva. Y si otro plugin ya está haciendo genuinamente este trabajo, MevvBlocks se retira por sí solo y explica por qué — la pregunta no es "está instalado" sino "puede realmente ejecutarse".
Lo usamos en nuestra propia tienda
mevvshop.com es una tienda WooCommerce real y sus páginas están construidas con estos bloques — encabezado, pie de página, tarjetas de producto y todo lo demás. Cada número de esta página se midió allí o en nuestra instalación de demostración, no se estimó.
Medido
Números que contamos, no números que redondeamos.
Cada cifra de abajo se puede contar en el código fuente del plugin. Donde un número sonaría como una afirmación de rendimiento, no se hace: el peso de la página depende del tema, el hosting y la caché, y no hemos medido el suyo.
- 101
- bloques — 78 sin WooCommerce instalado
- 3.217
- comprobaciones en la suite de pruebas, todas superadas
- 16
- tipos de campo de formulario, más un campo de archivo en Pro
- 6
- tipos de plantilla: encabezado, pie de página, entrada individual, archivo, búsqueda, 404
- 5
- disparadores de ventana emergente: carga, desplazamiento, salida, clic, inactividad
- 48
- iconos incluidos, dibujados en una caja de 24 píxeles
- 29.828
- bytes de HTML congelado que los bloques de menú, caja de imagen, iconos sociales y copyright volvieron a hacer editables en nuestra propia tienda
- 0
- diferencias de diseño entre el lienzo del editor y la página publicada, de 64 propiedades comparadas
- 0
- comprobaciones de licencia en la ruta de renderizado — verificadas por una prueba
Contado en el código fuente del plugin el 1 de septiembre de 2026. Solo para dar una idea de escala: las ediciones Free y Pro son 1.5 MB y 46 KB de PHP, JS y CSS, mientras que Elementor, Ultimate Addons y Header Footer Elementor juntos ocuparon 178 MB en disco en la instalación que medimos el 31 de agosto. Eso es una diferencia de superficie, no una afirmación sobre velocidad — y buena parte se debe simplemente a las funciones que no tenemos. Lo que llega a un visitante es un número distinto y más pequeño: 20 KB de CSS y 5 KB de JavaScript en una página.
Precios
Todos los precios incluyen IVA.
Una licencia vencida nunca apaga una página. Los valores escritos por el panel de edición Pro siguen siendo mostrados por la edición Free, y el formulario sigue aceptando envíos. Lo que se cierra es el panel de edición, no el aspecto del sitio.
1 USD = 49,5932 ₺ (Tasa de İşbank)
Empezar
Del encabezado al pie de página, dentro del editor de bloques.
Instale la edición Free: los bloques, los formularios, las plantillas de tema, las ventanas emergentes y diecinueve secciones y páginas listas ya están incluidas. Pro añade el panel para editar los valores de escritorio, tablet y móvil. Lo que se pierde es el panel, no el aspecto del sitio: si la licencia caduca, esos valores siguen mostrándose.
Información del producto
- Tipo de producto
- Pack de bloques para WordPress
- Qué es
- Un page builder dentro del editor de bloques
- Bloques
- 101, o 78 sin WooCommerce
- Edición Free
- Bloques, formularios, plantillas de tema, ventanas emergentes, estilos globales, optimización de imágenes, caché de bloques, código personalizado, auditoría de accesibilidad
- Pro
- Panel de escritorio/tableta/móvil, CSS personalizado por bloque, lógica condicional de formularios y campo de archivo
- Lo que descarga el visitante
- 20 KB de CSS + 5 KB de JS en una página — medido en la página de inicio de wp-demo, 1 de septiembre de 2026
- Tamaño del código fuente
- Free 1,5 MB + Pro 46 KB de PHP, JS y CSS, 1 de septiembre de 2026
- Requisitos
- WordPress 6.0+, PHP 8.1+