Crear una página de inicio con bloques de edición del sitio (FSE)

Esta es la segunda llamada de pruebas como parte del Programa de divulgación de la edición completa del sitio (en inglés). Para más información sobre este programa experimental, por favor, consulta esta FAQ para obtener detalles útiles. Para unirte adecuadamente a la diversión, por favor, dirígete a #fse-outreach-experiment en el Slack de Make para futuros anuncios de pruebas, entradas útiles y más, que serán compartidos allí.

Resumen de las características

Antes de entrar en los detalles de las pruebas, vamos a hacer una pausa para hablar del enfoque de esta llamada de pruebas. Con la edición completa del sitio, que desbloquea la capacidad para editar todas las partes de tu sitio, aparece la necesidad de nuevos bloques para ayudar a facilitar la experiencia. ¡Puede que ya hayas visto algunos de estos bloques! Por ejemplo, hay un bloque de «Título del sitio» que puedes incrustar en cualquier parte y actualizarlo automáticamente cada vez que cambies el título de tu sitio.

Para esta prueba específica, vamos a explorar el uso de algunos de estos bloques para crear una página de inicio básica con una barra lateral:

  • Bloque «Título del sitio»
  • Bloque «Logotipo del sitio»
  • Bloque «Lista de entradas»
  • Bloque «Etiquetas de entradas»
  • Bloque «Navegación»
  • Bloque «Partes de plantilla»

Piensa en esto como una oportunidad para explorar cómo se puede crear algo sencillo actualmente y para familiarizarte con estos nuevos bloques. Al final, estos bloques se categorizarán específicamente en el Insertador, tal como se define para la edición del sitio.

Entorno de pruebas 

Aunque a continuación hay más información para asegurarte de que todo está configurado correctamente, estos son los aspectos clave que debes tener en tu entorno de pruebas:

Proceso de las pruebas

Este es un proceso básico que hay que seguir para probar esta característica específica. Si algo no tiene sentido, ¡coméntalo abajo!

Nota importante

Aunque esta llamada de pruebas está centrada en la prueba de una característica específica, ¡es probable que encuentres otros fallos en el proceso de prueba con esta característica beta! Por favor, sabes que todos los fallos que encuentres son bienvenidos en tu informe de las pruebas, incluso si no son directamente aplicables a la característica probada.

Instrucciones de configuración

  1. Tener un sitio de pruebas usando WordPress 5.6.1. Es importante que no sea un sitio en production/en vivo.
  2. Instalar el tema TT1 Blocks yendo a «Apariencia > Temas > Añadir nuevo». Una vez instalado, activar el tema.
  3. Crear tres entradas falsas con algunas etiquetas o usar el contenido de demostración de Gutenberg que se encuentra aquí. Aquí tienes un vídeo corto que explica cómo configurar este contenido.
  4. Ir a la administración de la web.
  5. Instalar y activar el plugin Gutenberg desde «Plugins > Añadir nuevo». Si ya lo tienes instalado, asegúrate de que, al menos, estás usando Gutenberg 10.0.
  6. Ahora, deberías ver un elemento de navegación titulado «Editor del sitio (beta)». Si no lo ves en tu barra lateral, no estás usando correctamente el experimento de la edición del sitio.

Instrucciones de las pruebas

Sugerencia de utilidad: A medida que progreses en esta prueba, puedes encontrar útil la vista de lista al navegar entre los contenidos.

  1. Navega a la vista del «Editor del sitio (beta)». Esto abrirá automáticamente en el editor del sitio la plantilla con la que funciona tu página de inicio.
  2. Usando la vista de lista, mira si está presente el «Bloque de consulta». Si es así, selecciónalo y bórralo. Este es simplemente un paso de mantenimiento para tener las cosas en orden :).

Hacer cambios en tu cabecera

  1. Es probable que veas una cabecera creada para ti que puedes editar directamente. Actualiza el texto en el bloque del «Título del sitio». ¡Diviértete con él! Algunas ideas para que empieces: Elige un nuevo tamaño de encabezado, cambia el contenido o, directamente, modifica los ajustes del bloque.
  2. Cuando hayas terminado de hacer los cambios que quieras, selecciona «Actualizar el diseño» y ve al proceso de guardado para guardar todos los cambios.
  3. Abre el conmutador de la navegación y dirígete a «Partes de plantilla» y selecciona «Cabecera». Esto te mostrará una vista separada solo de la parte de la cabecera de tu sitio. En esta vista, añade un bloque de «Logotipo del sitio» y configúralo a tu gusto.
  4. Cuando hayas acabado de hacer los cambios que desees, selecciona «Actualizar el diseño» y ve al proceso de guardado para guardar todos los cambios.
  5. Abre otra vez el conmutador de la navegación y dirígete a «Plantilla > Índice» para volver a tu página de inicio.
  6. Una vez allí, dirígete al bloque de navegación que hace funcionar el menú en la cabecera (¡aquí es donde puedes encontrar útil la vista de lista!). Explora el bloque de navegación haciendo cambios directamente en los elementos del menú o en los ajustes del bloque para cambiar la fuente, el color, etc.
  7. Usando la vista de lista, selecciona la cabecera en la parte de plantilla y, usando el menú de tres puntos de la barra de herramientas, usa la opción «Insertar después» para añadir un bloque fuera de la cabecera.

Añadir tu contenido

  1. Añade un bloque de columna de 70/30 o de 30/70. En la columna más grande, usa el bloque de encabezado para escribir «Mi contenido». En la columna más pequeña, usa el bloque de encabezado para escribir «Mi barra lateral».
  2. En la columna más grande, añade un bloque de lista de entradas y selecciona la configuración que te gustaría (título y fecha, título y extracto, etc.).
  3. Desde allí, añade un bloque de etiquetas de entradas a una de las entradas mostradas en el bloque de la lista de entradas. Fíjate en que, si lo añades a una entrada, ¡lo añade a todas ellas!
  4. Repite el paso anterior con el bloque del autor de la entrada, antes de decidir si te gustaría mantener o eliminar alguno de los bloques adicionales.

Crear una barra lateral

  1. En la columna más pequeña, ¡crea tu barra lateral como desees! Como inspiración, prueba el bloque de iconos sociales, el bloque de las últimas entradas o un simple bloque de imagen.
  2. Cuando hayas terminado de hacer los cambios que quieras, selecciona «Actualizar el diseño» y ve al proceso de guardado para guardar todos los cambios.
  3. Comparte tu experiencia en los comentarios de abajo o directamente en GitHub. ¡No hay ningún problema en que realices la experiencia varias veces para obtener cualquier comentario adicional!

Vídeo del recorrido de la prueba

Este video muestra el proceso de la prueba después de que esté hecha la configuración inicial de la prueba y se esté usando el contenido de demostración de Gutenberg, que se encuentra aquí. Sin embargo, ¡realiza tu proceso con tus propios cambios y ajustes únicos!

Qué hay que destacar

  • ¿Ha fallado la experiencia en algún punto?
  • ¿Ha funcionado correctamente la experiencia al guardar?
  • ¿Alguna vez has querido hacer algo que no ha sido posible con un bloque específico?
  • ¿Qué has encontrado particularmente confuso o fustrante sobre la experiencia?
  • ¿Qué es lo que más te ha gustado o has apreciado sobre la experiencia?
  • ¿Te ha parecido que lo que has creado en el editor del sitio ha coincidido con lo que has visto al visualizar tu página de inicio?
  • ¿Ha funcionando usando solo el teclado?
  • ¿Ha funcionado usando el lector de pantalla?

Deja tus comentarios antes del 5 de marzo de 2021

Por favor, deja tu opinión en los comentarios de esta entrada. Si lo prefieres, siempre puedes crear issues directamente en este repositorio de GitHub para Gutenberg y en este repositorio de GitHub para el tema TT1 Blocks. Si dejas comentarios en GitHub, por favor, sigue comentando abajo con el enlace. Si ves que alguien ya ha informado de un problema, por favor, sigue mencionando a continuación tu experiencia con él, ya que ayudará a dar una visión más completa de lo que hay que mejorar a los que trabajan en esta experiencia.