365 | ¿Es el final de los page builders con el nuevo Editor del sitio?
12 Apr 2023 · 15 min
Podcast episode 365 (host: Gonzalo Navarro) focused on the state of Full Site Editing (the site editor) in WordPress 6.2. Gonzalo explains differences between classic themes and new Block Themes, and walks through concrete features now available in the site editor: global styles (style book), header/footer editing, block-level custom CSS, patterns, copy/paste styles, improved media/pattern insertion (including free image sources), tipography fluid/responsive sizing, and other design conveniences that make the editor approach closer to traditional page builders. The episode also includes weekly updates: a new Code video (number 315) showing how to disable the new-user admin email, a plugin recommendation (Manage Notification Emails — active on 90,000+ sites), and a members-only masterclass on the site editor available for individual purchase for 7 days.
Questions this episode answers
365
WordPress 6.2 — Full Site Editing (site editor)
Video 315
Manage Notification Emails — active on more than 90,000 sites
7 days
Chapters
En el episodio 365 de WordPress semanal te hablo de un momento clave en la historia de la creación de webs con WordPress, porque la edición global o el Full Site editing ya es una realidad. Vamos allá. Hola hola. Soy Gonzalo Navarro y Bienvenidos al episodio 365 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy nos vamos a centrar en el estado del Full Site Editing en la edición global del sitio a partir de la versión 6.2 de WordPress. Te hablaré de cuándo puedes aprovecharla y de todas las novedades que se han incorporado para que ahora sí nos podamos plantear la pregunta de si puedes dejar de utilizar un Page Builder en el caso de que lo estuvieses haciendo bien. En un momentito vamos con el repaso completo, pero antes, Como siempre, novedades. ¿Qué está pasando en Gonzalonovarro es esta semana? Pues como siempre, como cada semana, tenemos nuevo vídeo de la zona Código, en este caso es el vídeo ya 315 y en él te enseño a desactivar el email que te llega a ti como administrador cuando se registra un usuario nuevo. Esto muchas veces es un rollo, si tienes una web sobre todo en la que mucha gente se suscribe a algo gratuito o bueno, si se suscribe algo de pago, pues entonces también es una maravilla cuando recibes ese email. ¿Pero en el caso de que te llegue muchas veces y quieras dejar de recibirlo, porque? Pues te enseño un poquito de código que puedes copiar y pegar y obtienes el resultado deseado, que es dejar de recibir ese email de nuevo usuario registrado. La zona Código recuerda que está incluida en la membresía en GonzaloNabarro es junto a todos los cursos, que ya hay más de 70 y pico cursos publicados, soporte conmigo y acceso a la comunidad en Telegram. Respecto a los cursos, el curso más reciente es el curso de mantenimiento en WordPress con modular, que es una empresa española que te permite llevar el mantenimiento de todas tus webs con WordPress o las de tus clientes desde un mismo panel y entonces en este curso te explico cómo usarlo, como siempre, paso a paso, sin relleno y a explicarte directamente lo que funciona. Por último, como novedad, tienes disponible si eres miembro, una masterclass en vídeo para conocer a fondo el uso del editor global en WordPress es decir, todo esto que voy a comentar en el episodio va a estar explicado paso a paso en un vídeo. Si eres miembro puedes acceder a él. Y como la anterior vez que hice una cosa similar a esta, algunos me preguntasteis si lo vendía de forma individual, he querido probar a ver y lo voy a dejar para que podáis comprarlo solo durante 7 días de forma individual. Después sólo estará disponible para los usuarios suscritos. Así que si te interesa, si no eres suscriptor pero te interesa solo este vídeo, pues lo tendrás disponible para comprar de forma única. Recuerda, solo durante 7 días. Para verlo o comprarlo si no eres miembro, puedes ir a Gonzalo es 365, que es el número de este episodio y ahí podrás acceder a él. Fantástico. Una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama Manage Notifications Emails y recuerda que en el vídeo de la zona código reciente te explicaba cómo desactivar el envío del email este que te llega cuando se registra un nuevo usuario. Pues bueno, con este plugin puedes hacer esto, pero básicamente con todos los emails que se envían y sin código, pues con un plugin lo vas controlando y vas diciendo pues esto quiero que se envíen, estos quiero que no. Y los puedes hacer a nivel de usuarios y a nivel de administradores. Si, es un plugin que está activo en más de 90.000 webs con WordPress, que es bastante popular, tiene buen rendimiento y de nuevo se llama Manage Notification Emails. Lo podéis encontrar de forma gratuita en la página de plugins de WordPress o si no os dejo el enlace directo en las notas del episodio. Recuerda, Gonzalo Navarro es 365. Perfecto, pues ahora sí, vámonos con el tema central del episodio, el estado actual del full site editing a partir de WordPress 6.2. Y comenzamos con una pega para poder utilizar esto de la edición global, que básicamente nos permite editar, modificar el aspecto de nuestra web. Como lo podrías hacer con un Page Builder tipo Elementor, tipo Divi, pero tiene una pega. Y la pega es que necesitas utilizar un theme, un tema de WordPress preparado para esto. Se llaman Block Themes, es decir, tema de bloques, porque si no puedes utilizar algunas características, pero no esta experiencia global de estar diseñando la web completa, la cabecera, el footer, todo desde un mismo panel. Ya digo, al estilo de cómo lo podrías hacer con un constructor visual de estos que añadimos aparte con plugins esto lo tendríamos de forma nativa pero con la pega o la salvedad de que necesitas un thing preparado para ello, un tema preparado para ello y se llaman temas de bloques. Entonces me parece buena idea antes de comenzar con todo esto hacer una distinción entre qué ofrece un tema clásico o cuáles son las diferencias entre un tema clásico, los que hemos instalado toda la vida y estos relativamente nuevos temas de bloques o blockthings en inglés. Bien, a grandes rasgos los temas clásicos, esto es un poco a nivel interno, utilizan más PHP, mientras que los temas de bloque se están basando en HTML, esto es un poco a nivel digamos técnico, entonces tampoco me adentro demasiado un poco en cómo están hechos, que esto tiene una repercusión que comentaré en otra de las características. Por otro lado los temas de bloque pueden editar partes de la página como encabezados y pies de página o incluso páginas de archivo, páginas de error 404 directamente con bloques, sin código ni nada. Los temas clásicos necesitas código o un plugin aparte para poder editar estas zonas digamos más estructurales. Otra cosa también un poco a nivel interna es que los temas clásicos y los temas de bloque almacenan archivos de plantillas en diferentes ubicaciones, esto ya digo es algo técnico, pero lo que nos permite al almacenarlos en distintas ubicaciones es que con los de bloque tenemos acceso a ellos para editarlos, es la diferencia técnica para explicar que se pueda hacer esto que te comentaba. Y luego como consecuencia de muchos de estos cambios, los temas de bloque por norma general pueden cargar más rápido que los temas clásicos, por ejemplo favorecer el uso de HTML en lugar de PHP o esta forma diferente de cargar archivos, incluso estilos, pues pueden hacer ya digo, que los temas de bloque sean más rápido de punto de partida sin que tengas que optimizarlos que los temas clásicos. Pero bueno, con lo que te tienes que quedar es que el tema de bloques te permite dar ese acceso o tener ese acceso a esta edición global controlando prácticamente todo en cuanto a diseño y disposición de lo que verán finalmente tus visitantes. En la parte frontal vamos a hablar de características específicas que empezamos a tener a partir de ahora, WordPress 6.2, porque el editor del sitio, este full site editing, diseño completo del sitio o edición completa del sitio web ya estaba antes, esto viene dando muchos pasos de hecho en el curso del editor de Guttenberg ya lo empezamos a ver, en el curso de WordPress básico ya lo empezamos a ver, pero ahora está dando grandes pasos y realmente se empieza a parecer a un Page Builder, a un editor de estos a los que estamos acostumbrados que nos permiten tener una experiencia de edición mucho más completa. Bien, novedades o cosas interesantes a partir de ahora. Los estilos del tema y el libro de estilos. ¿Esto qué es? Bueno, podemos elegir estilos globales para nuestra web, es decir, nos vamos a una pantalla de edición donde vemos todo de forma global y ahí nos vamos a una parte que son estilos y elegimos los estilos globales. Lo típico de pues yo quiero que mis encabezados tengan este tamaño, yo quiero que mis textos tengan este color, esas típicas cosas que queremos controlar a nivel global, lo puedes hacer desde ahí. Pero es que además ahora hay una característica que es que puedes modificar el libro de estilos y el libro de estilos, no sé si te acuerdas, pero cada vez que se instala uno de los temas que trae WordPress por defecto siempre hay como una página donde tú puedes ver cómo se verían los distintos encabezados, cómo se verían los botones, cómo se verían cuando pones una cita, cómo se vería una imagen con la leyenda, cómo se vería todo esto y te muestran como los estilos de ese tema para que tú puedas decidir si te gustan o no. Pues con esta característica los puedes modificar de forma que desde un lugar único lo modificas, por ejemplo, todos los textos, ya digo, los encabezados, el texto normal, el texto en cursiva, el texto en negrita, cuando pones una cita, todo esto lo modificas en un lugar y se modifica automáticamente en toda la web. Los elementos multimedia lo mismo, cómo se van a mostrar los audios, las imágenes normales, las galerías y lo modificas, ya digo, en ese libro de estilos en un lugar global para que después se vea reflejado en toda la web. A nivel de diseño, por ejemplo, en diseño de otras características como botones y este tipo de cosas, también lo puedes modificar ahí y luego afectará a toda la web. Los widgets también lo podrás hacer, podrás hacer lo propio. Y luego a nivel de theme si hay cosas un poco diferentes, como por ejemplo cómo se va a mostrar la parte del logo y este tipo de cosas, también tienes ese libro de estilos, digamos todo juntito además está dividido por pestañas, mucho más bonito que antes y lo preparas ya a nivel global. Bien, esta es una de las grandes características que digamos ahonda mucho en permitirnos esta edición global de la que te hablaba más. Tenemos un header y footer o un encabezado y pie de página que vamos a poder cambiar de forma súper sencilla. Vamos a poder modificar o elegir diseños ya preparados diferentes para la cabecera o el footer y esto lo podemos hacer a nivel de cada página que estemos editando en ese momento. Además vamos a poder añadir elementos de navegación directamente desde el editor, no nos tenemos que ir a otro menú aparte y esto agiliza mucho el proceso. Ya estamos, como digo, en esta experiencia de edición global desde un único editor, desde un único lugar, sin irnos a secciones distintas de la administración de WordPress. Incluso una característica chula que han añadido es que podemos añadir otros elementos a la navegación de forma muy sencilla directamente haciendo clic en la propia navegación, como por ejemplo un buscador o los típicos botoncitos de enlaces a redes sociales. Lo mismo, ya digo, en la cabecera que en el pie de página. Más características, tenemos un CSS personalizado mejorado. Podemos añadir CSS adicional directamente desde esta pantalla, ya digo, de edición, donde vemos todas nuestras páginas, todas nuestras plantillas de página, todo muy bien ordenadito. Pues ya digo que podemos desde ahí directamente añadir CSS específico. Pero además podemos añadir CSS personalizado a nivel de cada bloque, es decir, nos vamos a un bloque concreto, le damos a edición de CSS y ese CSS que peguemos ahí va a ser únicamente para ese elemento. Esto facilita mucho la vida porque no tenemos que a nivel de CSS ser más avanzados y en la parte global especificar que sólo va a ser para esa zona y demás. Esto es una característica que traen, ya digo, por ejemplo, constructores visuales de estos que añadimos con plugins, pues todo esto se va incluyendo aquí de forma nativa. Y luego tenemos un montón de facilidades más para el diseño. Por ejemplo, podemos forzar los estilos a nivel global. Imagínate que estamos modificando un botón y que nos encanta cómo nos ha quedado ese botón y queremos que todos los botones sean así. Pues decimos, esto me lo empujas a nivel global, que quiero que todos los botones lo tengan. Esto ahorra muchísimo tiempo, nos da facilidades, como digo, para el diseño, tenemos tipografía fluida, ¿Esto qué quiere decir? Que ahora de forma nativa nos van a ayudar con las versiones en todos los dispositivos, en todos los tamaños de pantalla, porque se va a redirigir, dimensionar automáticamente el tamaño de fuente en función del tamaño de la pantalla. Más características interesantes, Podemos copiar, pegar estilos, para mí es básico, antes se podía añadir con plugins extra, ahora ya viene de forma nativa, tú le das a copiar estilos de un bloque y los puedes pegar en otro bloque. De nuevo todo facilidades para ahorrarnos tiempo más, hay una nueva opción de insertar elementos multimedia. Ahora le damos a insertar y nos aparecen distintas opciones. Una, elegir lo que tengamos subido a nuestra biblioteca multimedia, como siempre, y otro en otra pestañita, digamos añadir imágenes de archivo, que no recuerdo exactamente el nombre, no sé si es openverse o algo. Es una página donde podemos ver imágenes 100% gratuitas y sin derechos de autor que podemos utilizar sin ningún problema, o al menos sin pagar por derecho de autor, tú puedes dar crédito a esa persona siempre en la leyenda, pero las puedes utilizar de forma gratuita. En este sentido también la inserción de patrones. Patrones recuerda que son diseños ya preparados a nivel de elementos específicos que tú puedes insertar y que el propio thing, el propio tema te ofrece y que son del mismo diseño, del mismo estilo que el aspecto general de tu tema. De modo que puedes tener patrones para la cabecera, patrones para llamadas a la acción, patrones para la parte del footer y puedes seleccionarlos e insertarlos en cualquier lugar de forma, para mí mucho mejor que antes. Antes era un poquito esta zona rara, no se veían bien, cuando le dabas a insertar no llegabas a el diseño real hasta que lo insertabas en la página. Ahora la previsualización de los mismos está mucho mejor y los puedes poner y luego tú puedes crear tus propios patrones, tenerlos ahí disponibles y añadirlos. Luego también tienes un modo nuevo antidistracciones, lo típico de que te puedes poner a escribir contenido o a editar una página y quitar todos los elementos de fuera. Bueno, esto es interesante, sobre todo si escribes directamente en el editor, no tanto ya para el diseño. Y luego WordPress siempre lo que hace es que te ofrece lo básico, o así lo intenta, o eso dice, pero después te ofrece la posibilidad de extender cosas. Entonces gracias a que ahora tenemos un editor muy mejorado. Algunos temas preparados para este nuevo editor pueden añadir características como por ejemplo que desde la propia página de edición marques la cabecera como fija o la marques como transparente para que se junte con el resto de elementos que tengas tú en la zona de la cabecera. Tienes una opción de cargar fuentes que mejora el rendimiento de las páginas. Esto ya digo, es opcional, digamos que está preparado para que si un Thing quiere ponerlo, que lo ponga a nivel un desarrollador del propio Thing. Esto lo digo por si estás buscando entre distintos themes de bloques que mires si tienen estas características, si es que te interesan. Otra también puedes lo típico que traen algunos constructores visuales de esconder el título de una página específica, de esconder el header de una página concreta, de esconder el footer, ya digo, a nivel de cada página. Esto son características que podrían incluir, si así lo quieren, si así lo deciden los desarrolladores, los teams de bloques. Ya digo que esto es un momento para mí clave en el diseño global porque empezamos a verlo de forma real, ya no estamos en versión beta, ya estamos en una versión en la que desde WordPress ya se considera que esto ya es un constructor visual. Entonces es un buen momento para ir adentrándonos en este tipo de temas. Yo particularmente de momento, pues en algún proyecto voy a seguir utilizando un Thing clásico, en otros proyectos voy a seguir utilizando o voy a utilizar Thing de bloques. Pero sin duda es algo en lo que se puede empezar ya a poner el foco porque nos aporta muchísimas posibilidades. Así que como te comentaba al principio, si quieres un vídeo paso a paso viendo cómo funciona todo esto por dentro, pues ya lo tienes disponible. Si eres miembro de Gonzalo Navarro es y solo durante siete días tienes la posibilidad de comprar esta clase suelta sin tener que suscribirte si es que no quieres hacerlo. Así que tienes el vídeo disponible y las opciones para comprarlo. Recuerda, en GonzaloNobarro es 365. Por último, darte las gracias como siempre por estar ahí escuchando. Si quieres aportar tu granito de arena, ya sabes que puedes compartir este episodio con alguna persona a la que pienses que le puede interesar. Si te animas, también puedes dejar una valoración en Apple Podcast o en la plataforma de podcasting en la que estés, que ya sabes que te lo agradezco muchísimo. Nada más por este episodio. Nos seguimos escuchando. Adiós.
More from Gonzalo
518 | Redes sociales, precios personalizados, audios desde Drive y temas de bloques (Q&A)
513 | Por qué sigo usando estos plugins después de tantos años (y cuáles he abandonado)