Lo que aprendí al construir un tema asequible para Gutenberg

El equipo aquí en WPMU Dev también es el mismo equipo detrás de CampusPress, que ofrece servicios de alojamiento y WordPress para escuelas y universidades. Ayer, lanzamos nuestro último producto, un tema de WordPress flexible y accesible para escuelas y educación. Este es el primer tema creado por nuestro equipo que realmente incorpora todo lo que el editor de bloques de Gutenberg tiene para ofrecer, como bloques reutilizables, estilos de editor, grupos de contenido y personalización de bloques predeterminados. No fue útil cubrirlo con azúcar, no era un proyecto tan rápido o tan fácil como esperaba. Pero el resultado final valió la pena. Pensamos en compartir algunas de las razones y cómo creamos aquí. Debería ser útil para cualquier persona que elija, proyecte o desarrolle nuevos temas de WordPress en el futuro.
Un poco de historia de fondo

Trabajamos con decenas de miles de escuelas y colegas de todo el mundo. Todo, desde blogs de estudiantes y ePortfolio, sitios de noticias hasta el sitio principal de las grandes universidades. Ver Bulletin.hds.harvard.edu y Charlestonsouthern.edu como solo dos ejemplos. No todos los sitios necesitan (o pueden pagar) diseño y desarrollo personalizado. Pero nuestros clientes tienen tres requisitos principales, a menudo competitivos:
fácil de publicar, editado y creado contenido por cualquiera
excede todas las reglas de accesibilidad
Respeta las reglas de marca, como logotipos, colores, fuentes, etc.
Es bastante fácil crear o encontrar temas que cumplan con uno o dos de estos requisitos, pero al proporcionar los tres, este es un desafío de siguiente nivel. Aunque tenemos algo que hacer (más sobre esto a continuación), ciertamente estamos satisfechos con los resultados. Elegir nuestra pila de desarrollo antes de comenzar el desarrollo, pasamos un buen período de tiempo decidiendo las características específicas que queríamos incluir y luego buscando el diferentes marcos y herramientas disponibles para construir. No hay razón para comenzar completamente desde cero. Nuestro énfasis era encontrar las mejores herramientas y marcos existentes para ayudarnos con nuestros objetivos de accesibilidad, rendimiento y fácil de usar. Como base, nos decidimos por subterrupción, que se basa en el tema “Subsensores” de Automatic y en el marco Bootstrap. Este es un marco bastante popular y es fácil entender por qué. Comenzando con la subterrupción, el tiempo de desarrollo se ha reducido y ha ayudado significativamente a lograr nuestros objetivos de accesibilidad.
También sabíamos que nos gustaría confiar mucho en la personalización de WordPress para todas las opciones y configuraciones de diferentes temas. Nos enamoramos del marco de Kirki y usamos muchos de los controles que ofrece. Nuestro tema utiliza variables CSS, que también ha facilitado el desarrollo más fácil y rápido (mucho menos JavaScript para mejorar el rendimiento). Vale la pena señalar que esto requiere un script especial para operar en IE11 (que muchos de nuestros clientes usan) y no todas las características se pueden usar en IE11.
Para las opciones de impresión, comenzamos a poner a disposición muchas de las fuentes de Google gratuitas en personalización. Pero tuvimos que cargar todas las variantes y estilos (en negrita, cursiva, etc.) que pueden ser difíciles de cargar, por lo que optamos por no incluir las fuentes de Google y solo tenemos fuentes variables gratuitas. Hay suficientes variaciones allí con fuentes modernas para dar a los usuarios finales excelentes opciones para elegir. Finalmente, a nuestros clientes de la escuela les encantan los íconos. Iconmoon nos facilitó la selección de los iconos gratuitos (pero tratamos de no incluir demasiado para no ralentizar el sitio o abrumar al usuario). Como resultado, es fácil de agregar y personalizar iconos para menús y bloques de contenido. En esta nota, estamos particularmente encantados con los nuevos ganchos de WordPress 5.4, que nos permitirán agregar iconos personalizados a los menús de personalizadores. De ahora en adelante, obligamos a los usuarios a mirar> menús si quieren administrar íconos, incluso si pueden hacer algo más con menús incluso en personalización. Esta nueva característica básica de WordPress será una gran victoria para su uso. Las características menos conocidas de Gutenberg que trabajan con este tema fue la primera experiencia significativa que muchos de nuestro equipo tuvieron con el editor de Block Gutenberg. Dependí de algunas de las características menos conocidas que hemos mejorado con el tema.
Bloques reutilizables
Los bloques reutilizables son increíblemente útiles para cualquier bloque o contenido que se repita varias veces en un sitio. Puede actualizarlo una vez, y esos cambios se aplicarán donde sea que aparezca el bloque en un sitio. Con nuestro tema, una vez que haya creado un bloque reutilizable, utilizamos el filtro de WordPress para mostrar un nuevo elemento de menú bloques reutilizables y en el tablero de WordPress. Nuestros clientes usan bloques reutilizables por una variedad de razones, incluido el contenido del sótano, la creación de “mega menús” y notificaciones importantes en múltiples páginas.

El uso de “grupos de contenido” en el editor de bloques es lo que hace que las funciones de toda la página sean realmente posibles. Puede hacer fácilmente “filas” o combinar bloques y elegir un color de fondo separado para el grupo, para darles separación y un aspecto más personalizado. Editor Styles Una de nuestras características favoritas de “Gutenberg” es que los autores del tema pueden hacer que el editor de back-end muestre el contenido con los mismos estilos que el front-end. Una experiencia real “Wysiwyg”, con colores de fondo, fuentes y botones que se ven igual para editar que al ver el sitio en vivo.

Sin embargo, para cualquiera que desarrolle temas, descubrimos que teníamos que aplicar estilos dos veces, porque el HTML en el editor es diferente del front-end. Esto también significaba que continuamos cambiando y haciendo cambios dos veces a medida que mejoramos el tema durante el desarrollo. Resultó en una batalla continua. Esperamos que la documentación y la implementación de los estilos del editor continúen mejorando a medida que varios autores de temas aprovechan ello. Diseño de accesibilidad Una de las características que gasté mucho fue dar a los usuarios flexibilidad para elegir colores, pero aún imponiendo informes de contraste entre el texto y los colores de fondo. Los colores de fondo cambian, cambiamos el color del texto. También usamos los colores elegidos para proporcionar colores de acento adicionales que se pueden usar en configuraciones de bloques para fondos, botones, citas, etc. Si bien la mayoría de las herramientas de accesibilidad se refieren más para encontrar problemas de accesibilidad, nuestro objetivo se trata más de prevenir problemas. Sabemos que la accesibilidad es un continuo, lo que significa que siempre se puede mejorar. Como tal, continuaremos construyendo sobre opciones de diseño accesibles en nuestros temas.
¿Qué sigue para nuestro tema?Creamos este tema para ser el padre de todos nuestros proyectos futuros con temas personalizados.Continuaremos agregando nuevos bloques e integraciones personalizadas con complementos populares que usan nuestros clientes.También estamos trabajando para hacer bloques reutilizables que se pueden compartir entre sitios en una red multisit.Todavía hacemos algunas pruebas en el mundo real, con la esperanza de que si hay una solicitud, finalmente lo enviaremos a wordpress.org.Mientras tanto, si conoce una escuela que necesita un sitio web y desea usar este tema, ¡envíelos!;) ¿Tienes una característica favorita de Gutenberg?¿O una herramienta básica o un marco para su tarea que nos perdimos?¡Háganos saber a continuación!

Etiquetas:
Listo para la accesibilidad
presa de campus
educación
Gutenberg