Beaver Builder 1.7: ahora con actualización parcial, configuración de código por página y… ¡¿¡Nuestro primer código corto!?!
Publicado: 2015-12-22¡25% de descuento en productos Beaver Builder! ¡Apresúrate, termina la oferta... ¡Aprende más!
¡La última versión de Beaver Builder ya está en versión beta y lista para probar! Si aún no lo has hecho, dirígete al área de tu cuenta y descarga una copia de la versión beta para comprobarla.
Esta actualización se centra en varias cosas, siendo la más importante las mejoras de rendimiento mediante actualización parcial. Puede que no suene tan atractivo como algunas de las otras características de esta actualización (o que hemos lanzado anteriormente), pero tomó bastante tiempo implementarlo y debería hacer que la experiencia de edición sea mucho más fluida.
Además de eso, agregamos nuevas configuraciones de diseño, nuevos módulos, actualizamos un módulo, agregamos un nuevo método de ayuda útil y… ¡el primer código corto de Beaver Builder!
¿Qué es exactamente la actualización parcial?
Antes de 1.7, cada vez que hacía un cambio en algo dentro de un diseño de Beaver Builder, se volvía a representar todo el CSS, JS y HTML de un diseño. Incluso un cambio de texto menor requeriría una actualización completa del diseño. A veces no se notaba, pero con contenido dinámico como videos y controles deslizantes, los veías recargarse una y otra vez, incluso cuando no se estaban editando directamente.
Eso no es muy eficiente ni fácil de usar y es algo que queríamos cambiar. ¡Saluda a la actualización parcial!
Con la actualización parcial, solo se actualiza la fila, columna o módulo que está editando actualmente cuando hace clic en el botón Guardar (o se activa una actualización de vista previa). ¡Es así de simple! Este enfoque acelera la representación de recursos CSS, JS y HTML en el servidor y evita que se recarguen cosas que no es necesario volver a cargar.
Sin embargo, todavía hay ocasiones en las que es necesaria una actualización completa, pero intentamos limitar esas situaciones tanto como sea posible. La situación más notable es cuando estás editando un módulo personalizado que no admite actualización parcial o una fila/columna que contiene una.
De forma predeterminada, la actualización parcial está deshabilitada para los módulos personalizados y debe habilitarse para que funcione. Habilitarlo es fácil, pero asegúrese de consultar los documentos del módulo personalizado sobre cómo implementar la actualización parcial antes de hacerlo para sus módulos. Hay algunas trampas con respecto a JavaScript que deben considerarse antes de hacerlo.
Además de la magia de actualización parcial que ves en el front-end, también implementamos una serie de mejoras en el backend para mejorar la experiencia de edición del creador.
Cuando actualice a 1.7 y haga clic en el botón Herramientas, verá una nueva opción para Configuración de diseño justo encima del botón Configuración global. Estas configuraciones se aplican al diseño que se está editando y actualmente incluyen configuraciones para CSS y JS.
Sí, eso es correcto, ¡ahora puede guardar CSS y JS por página! ¡Guau!
Uno de los mayores beneficios de poder guardar CSS y JS por página es la capacidad de exportar CSS y JS junto con sus plantillas. Esta es una característica extremadamente poderosa que le permitirá crear plantillas altamente personalizadas que pueden reutilizarse y compartirse con facilidad.
Si bien la configuración JS no ofrece una vista previa en vivo (eso sería un poco complicado), la configuración CSS sí lo hace. Realice sus cambios de CSS y observe en tiempo real cómo se reflejan en el diseño que está actualizando. También activamos la finalización de código para todos los editores de código en el generador (no solo los que están en la Configuración de diseño).
Cuando agregamos configuraciones CSS y JS al nuevo panel Configuración de diseño, tenía sentido permitirle realizar ese tipo de ediciones también a nivel global. Si bien esto puede no ser necesario para aquellos que usan nuestro tema, para aquellos que no lo son, ahora es posible agregar CSS y JS con el panel de Configuración global que se aplicará a todos sus diseños de Beaver Builder.
Representar diseños de Beaver Builder dentro de archivos de temas es una técnica más avanzada que ha ido ganando popularidad este año. Hay varias razones para hacerlo, pero la más común es insertar un encabezado/pie de página editable globalmente en todo un sitio.
Hasta ahora, la única manera de hacerlo exitosamente era con el filtro fl_builder_global_posts y una consulta personalizada o usando el complemento Insertar páginas, pero ese ya no es el caso.
El nuevo método FLBuilder::render_query es un método muy poderoso que elimina las complejidades de renderizar diseños de Beaver Builder dentro de archivos de temas. Aquellos que estén familiarizados con la clase WP_Query se sentirán como en casa con ella. Toma un solo argumento (el mismo argumento que pasaría a WP_Query) y representa todas las publicaciones que se encuentran. Asegúrese de consultar los documentos para obtener más información.
¡Construido sobre el nuevo método FLBuilder::render_query está el primer código corto de Beaver Builder! Sabemos que los códigos cortos para el diseño pueden ser algo malo, pero en este caso, creo que los encontrarás muy útiles.
¡El nuevo código corto fl_builder_insert_layout le permite insertar cualquier cantidad de diseños de Beaver Builder en publicaciones, páginas y publicaciones personalizadas de cualquier tipo!
¿Por qué querrías hacer eso?
Supongamos que creó una fila global de excelente apariencia para su boletín que se muestra en las páginas que creó con Beaver Builder. Se ve tan bien y funciona tan bien que querrás usarlo en las publicaciones de tu blog. Simplemente ingrese el código corto fl_builder_insert_layout con el ID de su fila global y ¡bam! ¡Problema resuelto!
Asegúrese de consultar los documentos para obtener más información sobre cómo trabajar con este nuevo código abreviado y todo lo que puede hacer.
Si aún no conoces a Eugene, asegúrate de pasar a la publicación de Robby donde lo presenta (que está aproximadamente a la mitad del camino). El módulo de audio fue el primer proyecto de Eugene en Beaver Builder (desde entonces ha sido parte de lanzamientos menores como las recientes integraciones del módulo de formulario de suscripción y el soporte WebM para el módulo de video), ¡y creo que hizo un gran trabajo!
El módulo Audio es esencialmente un contenedor para los códigos cortos de audio y listas de reproducción principales de WordPress. Le permite insertar un reproductor para un solo archivo de audio o un reproductor para múltiples archivos de audio (una lista de reproducción) con varias configuraciones de personalización.
Esta actualización también incluye un nuevo campo de audio para desarrolladores de módulos personalizados. Consulte los documentos del módulo personalizado para obtener más información sobre cómo funciona.
El módulo Countdown es un módulo nuevo creado por un desarrollador de Beaver Builder con el que todos deberían estar familiarizados en este momento. ¡La estrella de rock de la actualización 1.6.4, Diego de Oliveira de Favolla!
El módulo Cuenta regresiva le permite insertar un temporizador de cuenta regresiva en su diseño que cuenta regresivamente hasta cero desde una fecha y hora que usted especifique. Le permite especificar la fecha y hora exactas, incluida la elección de la zona horaria que se debe utilizar y tiene una serie de configuraciones de estilo para personalizar el aspecto de sus temporizadores de cuenta regresiva.
Además del nuevo campo de audio, esta actualización también trae un nuevo campo de hora para desarrolladores de módulos personalizados que permite a los usuarios seleccionar una hora específica del día (actualmente en un formato de 12 horas). Consulte los documentos del módulo personalizado para obtener más información sobre cómo funciona.
Durante el próximo año, probablemente nos verá lanzar menos módulos nuevos (solo tenemos planeado un módulo de tabla) y, en su lugar, comenzar a trabajar en mejoras a nuestra línea de módulos existente. Ya comenzamos ese proceso con actualizaciones de los módulos Formulario de contacto y Video y actualmente estamos trabajando en algunas actualizaciones realmente interesantes para el módulo Testimonios.
En cuanto a las actualizaciones del módulo, en esta versión nos centramos en el módulo Tabla de precios y creo que te gustará lo que ves.
Las nuevas incorporaciones al módulo Tabla de precios incluyen configuraciones de estilo generales para el resaltado (título, precio o ninguno), estilo de borde y botones individuales para cada cuadro de precios. Estos pueden parecer pequeños cambios, pero al mirar la captura de pantalla anterior, ya puedes ver que ahora sí lo son una serie de aspectos diferentes que antes no eran posibles con la configuración.
¡Asegúrate de comprobarlo tú mismo y cuéntanos qué piensas sobre los cambios!
Si no lo has notado, la sección Módulos avanzados de la interfaz del constructor se está llenando un poco (y acaba de recibir dos módulos nuevos en esta actualización). En algún momento, podríamos ponernos manos a la obra y considerar agrupar todos los módulos en diferentes secciones. Sin embargo, ese es un cambio realmente grande y no creemos que sea necesario que nuestros usuarios lo hagan en este momento (tal vez nunca, quién sabe).
Para nivelar un poco las cosas, hemos decidido recategorizar dos módulos existentes en la sección Módulos básicos. Esos son el módulo Botón y el módulo HTML.
Nos damos cuenta de que incluso si este es un cambio pequeño, es grande en muchos sentidos para aquellos que han estado usando Beaver Builder por un tiempo. Asegúrese de consultarlo y déjenos saber lo que piensa sobre esta decisión.
Como muchos de ustedes probablemente sepan por mi publicación en el grupo de usuarios de Facebook, estamos comenzando a trabajar en algunas actualizaciones para el tema. Ha pasado un tiempo desde que ha habido algo importante, pero estamos planeando cambiar eso en 2016.
Si bien la actualización del tema (versión 1.4) ya salió el 9/12/2015, no publicamos un blog al respecto, así que pensé en cubrir algunos de los aspectos más destacados aquí...
Cuando cambiamos al Personalizador desde nuestra propia página de configuración de temas personalizados, una de las cosas a las que tuvimos que renunciar fue el bonito editor de código que teníamos allí. Si bien no aparece en pantalla completa (todavía), es mucho mejor que la experiencia de edición de código anterior que tuvimos en el Personalizador. ¡El campo CSS también ofrece una vista previa en vivo ahora sin tener que actualizar el diseño!
Agregaremos una serie de configuraciones nuevas en 2016. Para comenzar, agregamos dos configuraciones muy solicitadas en la actualización 1.4. Una configuración para el peso de la fuente del cuerpo y una configuración para la opacidad del fondo del encabezado.
También agregamos una serie de acciones nuevas en la actualización 1.4 para personalizar el tema de Beaver Builder dentro de sus temas secundarios. Aquí hay una lista completa de las nuevas acciones. Para obtener más información sobre cómo funcionan, consulte la base de conocimientos.
La mayor parte del tema de Beaver Builder se puede anular dentro de un tema secundario, pero hasta la versión 1.4, todavía había algunas partes muy importantes que no se podían anular. Las siguientes secciones ahora se pueden anular fácilmente en un tema secundario copiando los archivos PHP correspondientes.
Es posible que hayas notado que el número de versión para esta actualización (y la actualización del tema) solo usa dos números. Esto se debe a que después de usar tres números para actualizaciones importantes y cuatro para actualizaciones menores, hemos decidido adoptar el control de versiones semántico para todas las actualizaciones futuras (porque así es como lo hace WordPress).
¿Qué significa eso?
En pocas palabras, significa que en el futuro, las actualizaciones principales utilizarán dos números de versión (por ejemplo, 1.7), mientras que las actualizaciones menores utilizarán tres números de versión (por ejemplo, 1.7.1).
Además de eso, a partir de este lanzamiento, también implementaremos versiones beta para que sea más fácil saber en qué versión de una beta se encuentra actualmente al realizar la prueba. Cuando vayas a descargar esta versión beta, verás que tiene la versión 1.7-beta.1. Cuando lo actualicemos, el número de versión cambiará a 1.7-beta.2 y continuará incrementándose de esa manera hasta que se lance la versión oficial 1.7.
Al igual que con todas nuestras versiones beta, planeamos tener esto en versión beta durante las próximas dos semanas a menos que surja algo importante. Nuestro objetivo es sacar esto a la luz lo antes posible, ¡pero necesitamos tu ayuda! Más testers beta significan que podemos encontrar y corregir errores más rápido. Si aún no lo has hecho, asegúrate de descargar la nueva versión beta desde el área de tu cuenta y probarla. Si tiene algún problema, asegúrese de informarnos en los foros.
¿Cuál es tu parte favorita de esta actualización? ¡Asegúrate de hacérnoslo saber en los comentarios a continuación! Y como siempre, no dude en informarnos si tiene algún comentario o si tiene algún problema.
Códigos cortos – ¡¡Woohoo!! Acabamos de terminar una publicación de blog sobre el uso de actualizaciones de contenido para blogs, pero no incluimos Beaver Builder porque es un poco complicado y hay que usar el creador de páginas para la publicación. ¡Ahora creo que lo actualizaré para incluir el nuevo módulo de código corto!
¡Muchas gracias!
¡Estas actualizaciones son increíbles! ¡Actualización parcial! ¡Sí!
Realmente espero que la pequeña pero increíble función de "aleatorización" sea una mejora en el módulo de testimonios que mencionaste. Eso sacudiría mi mundo.
Gracias por su feroz compromiso con Beaver Builder. Continúa reinando de forma suprema y su dominio sólo aumenta.
¡¡Grandes novedades de nuevo chicos!!
¿Qué es un complemento de buen formato que funciona con BB?
Sí, la función de actualización parcial solucionó este problema realmente molesto que estaba teniendo. He insertado un código para un formulario pegado en un módulo HTML, y cada vez que cancelaba su editor o un editor alrededor de él, aparecía una copia del formulario debajo y tenía que volver a cargar la página para arreglarlo. No fue un factor decisivo porque solo sucedió en el modo constructor, pero me alegro de que eso ya no suceda. ¡Gracias!
Tengo una pregunta relacionada con la actualización parcial. ¿Es posible que durante la edición de la página en el complemento actual con la actualización completa de la página esto pueda causar muchas conexiones del proceso de entrada al servidor? Lo pregunto porque actualmente estoy investigando un par de sitios que reciben errores de límite de recursos 508 y siempre se debe a que se excede el límite en los procesos de entrada. Por supuesto, esto puede ocurrir por otros medios, pero en este momento estoy luchando por encontrar la causa, ya que el problema es intermitente. Me encantaría escuchar sus puntos de vista y opiniones sobre esto.