Cómo un estudio de juegos con sede en Múnich utiliza WordPress y Gutenberg para potenciar su sitio web

Mimimi, un estudio de juegos galardonado con sede en Múnich, ha lanzado un nuevo sitio web de WordPress que ofrece un interesante estudio de caso de Gutenberg en la naturaleza. Aunque es posible que no pueda notarlo desde la interfaz, detrás de escena, el nuevo editor basado en bloques potencia el diseño con bloques personalizados, lo que permite que el equipo de Mimimi actualice fácilmente varias secciones de su sitio web.

Luehrsen Heinrich, una agencia de publicidad local, creó el sitio con un tema personalizado y siete bloques adaptados para admitir los requisitos de edición del equipo de Mimimi.

“La tarea general era crear un sitio web elegante que fuera muy fácil y rápido de mantener y que quizás luego tenga una sección de blog/noticias”, dijo Hendrik Luehrsen, director ejecutivo de Luehrsen Heinrich. “Sabíamos que nuestro cliente tiene algunas personas asombrosamente creativas y conocedoras de la tecnología que confiaron en nosotros. Eso nos dio confianza para entrar en Gutenberg”.

El sitio utiliza un bloque de fondo que permite a los editores crear diferentes patrones de fondo y separadores ondulados. Luehrsen dijo que funciona con 'InnerBlocks', similar a las columnas, por lo que puede albergar cualquier otro bloque.

El sitio también tiene un bloque Discord personalizado que obtiene dinámicamente algunas configuraciones para mostrar un conjunto de usuarios de Discord, que Mimimi usa para la comunicación interna. El bloque muestra una lista de equipos actualizada. Las redes sociales y los bloques de juegos permiten a los editores actualizar fácilmente el texto y las imágenes con el diseño ya establecido.

"Estoy bastante seguro de que podríamos hacer el mismo diseño en un 80 % combinando columnas, párrafos e imágenes, pero no queríamos que nuestro cliente jugara como en MS Word cuando intenta colocar una imagen", dijo Luehrsen. . "Entonces, crear un bloque de diseño simple era algo lógico".

El sitio web de Mimimi también utiliza un bloque de registro de Mailchimp personalizado y un bloque espaciador personalizado que ofrece más flexibilidad y puntos de interrupción receptivos.

“En general, nosotros (y nuestros clientes) estamos muy contentos con el resultado”, dijo Luehrsen. “Podemos ver el futuro de WordPress con este editor basado en bloques. Pero todavía queda un largo camino por recorrer hasta que realmente ya no tengamos nada que suavizar. Hay ciertas cosas que aún requieren mucho trabajo”.

Desde una perspectiva de desarrollo, Luehrsen dijo que su equipo todavía tiene problemas con los estilos de backend para el editor y que los estilos de frontend y backend difieren enormemente debido a eso. Tampoco han encontrado una forma estable y mantenible de aplicar estilos globales al editor de Gutenberg. Aparte de esos problemas pendientes, la agencia ha disfrutado construyendo para el nuevo editor y tiene otro producto de la página de Gutenberg que se lanzará pronto para un conjunto diferente de clientes.

Experiencia Gutenberg de Mimimi Games: los editores aprecian el concepto de bloque, pero aún encuentran problemas de usabilidad

Johannes Roth, CEO de Mimimi Games, dijo que su equipo ha usado WordPress en el pasado y ve a Gutenberg como una gran mejora para editar contenido.

“¡Me encanta, sinceramente!” dijo Roth. “Es mucho más fácil comprender la configuración de la página y personalizarla. Si el editor de Gutenberg obtiene algunas mejoras en la experiencia del usuario, definitivamente lo veo como el nuevo estado del arte para el mantenimiento de páginas. Pero sabiendo que aún no se ha lanzado oficialmente, ha sido súper sólido y fácil de entender desde mi punto de vista”.

Roth dijo que su equipo aprecia la configuración de bloques, la capacidad de reorganizar el contenido, tener pequeños fragmentos de contenido para trabajar y tener opciones personalizadas por bloque.

“Hay menos distracciones con barras de herramientas raras y el foco está en el contenido”, dijo Roth. "También se parece más a cómo deberíamos pensar en separar la parte de formato y decoración del contenido, así como configurar páginas adecuadas para la compatibilidad con SEO".

Roth identificó dos cosas que el equipo de Mimimi extraña del editor anterior:

• Presionar el tabulador para sangrar las listas de viñetas y cambiar el tabulador para invertir
• Usar ctrl+a para seleccionar rápidamente todo el texto dentro de un bloque (a veces selecciona toda la página, lo que no ayuda).

“Hasta ahora, el mayor problema con la usabilidad ha sido la combinación de bloques y columnas, lo que a veces hace que sea realmente difícil presionar el ícono '...' porque las zonas de mouseover se apilan”, dijo Roth.

Habilitación de narradores en la web moderna: por qué Luehrsen Heinrich dio el salto al desarrollo de Gutenberg como agencia

Luehrsen dijo que su agencia decidió abordar el tren de Gutenberg el año pasado en WordCamp Europe, luego de abandonar sus propias ideas para crear un nuevo creador de páginas.

“Uno o dos meses antes de la WCEU en París, teníamos un concepto y una versión alfa de nuestro propio sistema de creación de páginas que era terriblemente similar al enfoque basado en bloques”, dijo Luehrsen. “Esa sesión de preguntas y respuestas de Matt nos hizo darnos cuenta rápidamente de que nuestro proyecto ya estaba obsoleto. Tuvimos suerte de pasar bastante rápido por las cinco etapas del duelo (esta publicación sobre datos estructurados debe haber sido una "negociación"). Reordenamos nuestras prioridades y empezamos a trabajar con Gutenberg a finales de octubre o noviembre de 2017”.

Luehrsen Heinrich es una pequeña agencia de solo cuatro personas que están involucradas con Gutenberg de diferentes maneras. Luehrsen es un colaborador activo en el proyecto y presentó su primer PR durante las vacaciones de Navidad. El equipo también tiene un desarrollador que conoce la creación de bloques por dentro y por fuera, un diseñador que diseña la UX y el estilo de sus bloques, y un director de proyecto que trabaja con los clientes en sus requisitos de edición de Gutenberg.

Luehrsen dijo que ser colaborador de Gutenberg lo ayudó enormemente con la creación de bloques de aprendizaje, a pesar de no tener experiencia previa con React y ES6.

“Trabajar con Gutenberg, contribuir al proyecto y recibir comentarios inmediatos del increíble equipo de Gutenberg nos ayudó mucho a poner en marcha nuestro proceso”, dijo Luehrsen. “Nuestro proceso de creación de bloques actual se basa en gran medida en el trabajo que han realizado Gary, Adam, Matias y todos los demás, tal vez con la excepción de que estamos usando LESS internamente, y no SCSS. Pero desde la estructura de carpetas hasta el proceso de creación y la estructuración del archivo, tratamos de seguir el estilo de repositorio de Gutenberg lo más cerca posible, ya que eso hace que la depuración y la búsqueda de problemas sean muy fáciles”.

Después de dar el salto con éxito para construir el nuevo sitio web con tecnología de Gutenberg de Mimimi Games, el equipo de Luehrsen está listo para construir más sitios de clientes con el nuevo editor. Él lo ve como una forma de ofrecer una mejor experiencia de usuario a un mejor valor para el cliente.

“Nuestros clientes comparten nuestra creencia de que contar historias en la web moderna es mucho más que escribir texto”, dijo Luehrsen. “TinyMCE como editor de 'texto enriquecido' hizo un trabajo increíble, pero aún así, combinar diferentes tipos de medios en una historia coherente era un desastre con metaboxes, códigos abreviados y, a veces, para los adelantos, incluso tenías que salir de la pantalla de edición. Gutenberg combina todo esto de una manera agradable y discreta. Y, como siempre: si puede obtener un buen resultado de una manera más rápida, ese tiempo ahorrado es lo que el cliente está comprando esencialmente”.