Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Novedades de WordPress 6

Novedades de WordPress 6

Imanol Terán

November 23, 2023
Tweet

More Decks by Imanol Terán

Other Decks in Technology

Transcript

  1. WordPress 6.0 imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE

    ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS [email protected] @imanolteran
  2. WordPress 6.0 imanolteran.com Introducción 01 7 DE WEBS A NIVEL

    GLOBAL ESTÁN HECHAS EN WORDPRESS 43% https://w3techs.com/technologies/history_overview/content_management/all
  3. WordPress 6.0 imanolteran.com • La última gran versión, la 5.0,

    vino en Diciembre de 2018. • La gran novedad de aquella versión, fue el nuevo editor de bloques, conocido como Gutenberg. • Supuso un cambio de paradigma en el entorno WordPress. • Sentó las bases del futuro de la plataforma. Introducción 01 8
  4. WordPress 6.0 imanolteran.com • La anterior versión, 5.9, vino en

    Enero de 2022. • En esta nueva versión de WordPress, vienen más de 1.000 actualizaciones y soluciones de errores. • * 6.0.1 - Versión de mantenimiento 13/7/22 Novedades 02 10
  5. WordPress 6.0 imanolteran.com • Seleccionador de estilos. • Editor de

    código. • Más opciones de plantillas. • Nuevas herramientas de diseño. • Nuevos bloques. • Mejoras de bloques. Novedades 02 11
  6. WordPress 6.0 imanolteran.com • Patrones de bloques. • Exportador de

    temas. • Nuevos hooks. • API de Webfonts. • Mejoras de rendimiento y usabilidad. Novedades 02 12
  7. WordPress 6.0 imanolteran.com • Sin duda, una de las funcionalidades

    más esperadas. • Permite a creadores de themes usar diferentes variaciones de estilo sobre un mismo theme. • Se cambia muy fácilmente entre uno y otro, con un clic. Novedades 02 13 SELECCIONADOR DE ESTILOS
  8. WordPress 6.0 imanolteran.com • Hay que ir al panel de

    estilos globales y a “Examinar estilos”. • Opción solo disponible cuando el tema cuente con estas variaciones de estilo. • Para añadir una nueva variación, hay que añadir un fichero JSON en el directorio “styles” del theme. Novedades 02 14 SELECCIONADOR DE ESTILOS
  9. WordPress 6.0 imanolteran.com • Twenty Twenty-Two viene con 4 variaciones

    de estilo. • https://themes.trac.wordpress.org/browser/ twentytwentytwo/1.2/styles?rev=168451 Novedades 02 16 SELECCIONADOR DE ESTILOS
  10. WordPress 6.0 imanolteran.com • Práctica: • Añadir un nueva variación

    al theme Twenty- Two • https://gist.github.com/kjellr/ 1307387f8d97e84662c4b07af873a896 Novedades 02 17 SELECCIONADOR DE ESTILOS
  11. WordPress 6.0 imanolteran.com • Ahora, el editor de bloques tiene

    un editor de código. • De esta forma, los usuarios podemos editar el HTML de un tema. • Hay que acceder desde el icono de 3 puntos en la parte superior derecha —> Editor de código. Novedades 02 18 EDITOR DE CÓDIGO
  12. WordPress 6.0 imanolteran.com • Ahora, tenemos cinco nuevos tipos de

    plantillas: • Autor. • Categoría. • Fecha. • Etiqueta. • Taxonomía. Novedades 02 19 OPCIONES DE PLANTILLAS
  13. WordPress 6.0 imanolteran.com • Accedemos a ellos al agregar una

    nueva plantilla en el editor de bloques. • Estos nuevos tipos de plantilla facilitan el proceso de edición del sitio. • Ya no tenemos que crear plantillas de página personalizadas para estas acciones. Novedades 02 20 OPCIONES DE PLANTILLAS
  14. WordPress 6.0 imanolteran.com • El panel de Plantillas lo encontramos

    en la barra lateral izquierda del editor —> Agregar nuevo. Novedades 02 21 OPCIONES DE PLANTILLAS
  15. WordPress 6.0 imanolteran.com • Nuevo panel de color. • Opción

    de transparencia. • Tipografía específica para un grupo de bloques. Novedades 02 22 NUEVAS HERRAMIENTAS DE DISEÑO
  16. WordPress 6.0 imanolteran.com • Contamos con 5 nuevos bloques. •

    Comentarios. • Sin resultados. • Leer más. • Biografía de autor. • Avatar. Novedades 02 23 NUEVOS BLOQUES
  17. WordPress 6.0 imanolteran.com • Bloque Bucle de comentarios. • Reemplaza

    al bloque de comentarios de publicación. • Comprende bloques secundarios. • Título del comentario. • Autor. • Contenido. Novedades 02 24 NUEVOS BLOQUES
  18. WordPress 6.0 imanolteran.com • Bloque Bucle de comentarios. • Podemos

    personalizar cada una de estas partes, de forma individual. Novedades 02 25 NUEVOS BLOQUES
  19. WordPress 6.0 imanolteran.com • Bloque Sin resultados. • Con este

    nuevo bloque podemos mostrar un texto o un conjunto de bloques cuando no hay un resultado que mostrar en una búsqueda. • Este bloque solo puede ir dentro del bloque de bucle de consulta. Novedades 02 26 NUEVOS BLOQUES
  20. WordPress 6.0 imanolteran.com • Bloque Leer más. • Ahora, este

    bloque es independiente del de Extracto de la publicación. • Aumenta sus niveles de personalización. • Podemos cambiar color, estilo de borde o tipografía a este enlace. Novedades 02 27 NUEVOS BLOQUES
  21. WordPress 6.0 imanolteran.com • Bloque Biografía del autor. • En

    WordPress 6.0, la información sobre autor de una entrada queda dividida. • Este bloque muestra la descripción del perfil del autor. Novedades 02 28 NUEVOS BLOQUES
  22. WordPress 6.0 imanolteran.com • Bloque Avatar. • Por su parte,

    este otro muestra la imagen del autor. • Así, obtenemos más opciones al mostrar esta información. Novedades 02 29 NUEVOS BLOQUES
  23. WordPress 6.0 imanolteran.com • No solo se han añadido nuevos

    bloques, sino que también se han introducido mejoras en algunos de los ya existentes. • Imagen destacada para el bloque de fondo. • Espaciado de bloques de galería. • Mejoras en bloque de navegación. • Transformación de bloques. Novedades 02 30 MEJORAS DE BLOQUES
  24. WordPress 6.0 imanolteran.com • Transformación de bloques: • Grupo, fila

    o pila. • Logotipo a título. • Extracto a contenido. • Nube de etiquetas a categorías. • Calendario a archivos. • Párrafo a código. • Grupo a fila. Novedades 02 31 MEJORAS DE BLOQUES
  25. WordPress 6.0 imanolteran.com • Ahora, el insertado rápido de bloques,

    no solo nos recomienda bloques individuales. • También nos permite insertar patrones. • Así, nos es más sencillo crear una sección concreta. • Para ello, debemos acceder a él fuera de cualquier bloque, en el nivel raíz. Novedades 02 32 PATRONES DE BLOQUES
  26. WordPress 6.0 imanolteran.com • Cualquier puede crear nuevos patrones: •

    Puedes construir, editar y enviar tus patrones de bloques al Directorio de Patrones • https://wordpress.org/patterns/new-pattern/ • https://wordpress.org/patterns/about/ Novedades 02 33 PATRONES DE BLOQUES
  27. WordPress 6.0 imanolteran.com • Los desarrolladores de themes pueden añadir

    patrones recomendados en sus themes. • Los usuarios encontrarán los patrones recomendados en el insertador de bloques. • https://github.com/WordPress/gutenberg/blob/ trunk/docs/how-to-guides/themes/theme- json.md#patterns Novedades 02 34 PATRONES DE BLOQUES
  28. WordPress 6.0 imanolteran.com • A partir de WordPress 6.0 podemos

    exportar nuestros temas. • Así, podemos llevarnos nuestras variaciones en un .zip y reaprovecharlo en otros proyectos. • Hay que acceder desde el icono de 3 puntos en la parte superior derecha —> Exportar. Novedades 02 35 EXPORTADOR DE TEMAS
  29. WordPress 6.0 imanolteran.com • Ahora podemos agregar nuevas fuentes a

    través del fichero theme.json • A partir de ahí, aparecerán en el panel de tipografías de estilos globales. • Con este nuevo método, se agiliza el proceso de registro de fuentes web locales. Novedades 02 37 API DE WEBFONTS
  30. WordPress 6.0 imanolteran.com • Práctica: • Agregar fuente Montserrat a

    theme Twenty Two. • Descargar fuente: https://fonts.google.com/ • Subir fuente a /assets/fonts/montserrat • Editar theme.json Novedades 02 38 API DE WEBFONTS
  31. WordPress 6.0 imanolteran.com • Práctica: { "fontFamily": "\"Montserrat\", sans-serif", "name":

    "Montserrat", "slug": "Montserrat", "fontFace": [ { "fontFamily": "Monserrat", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/montserrat/Montserrat.ttf" ] } ]} Novedades 02 39 API DE WEBFONTS
  32. WordPress 6.0 imanolteran.com • WordPress 6.0 mejora la experiencia del

    usuario para brindar una mejor usabilidad. • También obtenemos un flujo de trabajo más fluido. Novedades 02 40 MEJORAS DE RENDIMIENTO Y USABILIDAD
  33. WordPress 6.0 imanolteran.com • Mejora de la vista de lista.

    • Selección de texto en bloques. • Bloqueo de bloques. • Retención de estilos de bloque. • Vista previa de estilo de bloque. • Recordatorio de categoría de publicación. Novedades 02 41 MEJORAS DE RENDIMIENTO Y USABILIDAD
  34. WordPress 6.0 imanolteran.com • Mejora de la vista de lista.

    • Ahora mostrará una vista contraída para todos los bloques de forma predeterminada. • De esta manera, puedes encontrar bloques relevantes más fácilmente. • Especialmente útil cuando se trabaja con una estructura compleja que tiene muchos bloques anidados. Novedades 02 42 MEJORAS DE RENDIMIENTO Y USABILIDAD
  35. WordPress 6.0 imanolteran.com • Mejora de la vista de lista.

    • También te permite seleccionar varios bloques usando Shift + clic. • Puedes realizar acciones masivas como mover, eliminar o duplicar numerosos bloques. Novedades 02 43 MEJORAS DE RENDIMIENTO Y USABILIDAD
  36. WordPress 6.0 imanolteran.com • Selección de texto en bloques. •

    Ahora te permite seleccionar texto en múltiples bloques. • A continuación, puedes eliminar, reemplazar o copiar el texto seleccionado. • Esto facilita enormemente la edición de texto. Novedades 02 44 MEJORAS DE RENDIMIENTO Y USABILIDAD
  37. WordPress 6.0 imanolteran.com • Bloqueo de bloques. • Podemos evitar

    que un bloque se mueva o elimine. • Hay dos formas de bloquear un bloque. • Desde la barra de herramientas del bloque. • Desde el panel de vista de lista. Novedades 02 45 MEJORAS DE RENDIMIENTO Y USABILIDAD
  38. WordPress 6.0 imanolteran.com • Retención de estilos de bloque. •

    Esta opción mantiene los estilos de un bloque, aunque lo transformemos en otro. • También aplica cuando queremos crear botones nuevos. • Esto nos permite ahorrar tiempo. Novedades 02 46 MEJORAS DE RENDIMIENTO Y USABILIDAD
  39. WordPress 6.0 imanolteran.com • Vista previa de estilo de bloque.

    • Cambia a una ventana emergente al pasar el mouse sobre una opción de estilo. • Esto brinda una mejor visualización porque la vista previa parece más grande. Novedades 02 47 MEJORAS DE RENDIMIENTO Y USABILIDAD
  40. WordPress 6.0 imanolteran.com • Recordatorio de categoría de publicación. •

    Al publicar una post sin seleccionar una categoría, el editor de publicaciones ahora sugerirá agregar una. • Evitamos publicar accidentalmente un post sin categoría. Novedades 02 48 MEJORAS DE RENDIMIENTO Y USABILIDAD
  41. WordPress 6.0 imanolteran.com • Editor de bloques VS Editores visuales.

    • Interfaz de administrador. • Rendimiento. • Multiidioma. • Accesibilidad. Planes de futuro 03 50