Novedades de WordPress 6

Slide 1

Slide 1 text

imanolteran.com WORDPRESS 6.0 Novedades WordPress 6.0

Slide 2

Slide 2 text

WordPress 6.0 imanolteran.com HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS hola@imanolteran.com @imanolteran

Slide 3

Slide 3 text

WordPress 6.0 imanolteran.com PODCAST SI DUDAS, HAZLO Spotify Apple Podcasts Google Podcasts imanolteran.com WordPress 6.0

Slide 4

Slide 4 text

WordPress 6.0 imanolteran.com MÁS FORMACIÓN EN IMANOLTERAN.COM/FORMACION

Slide 5

Slide 5 text

imanolteran.com 1. Introducción 2. Novedades 3. Planes de futuro índice WordPress 6.0

Slide 6

Slide 6 text

imanolteran.com 01 Introducción Pongámonos en situación WordPress 6.0

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

imanolteran.com 02Novedades En la 6.0 WordPress 6.0

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

WordPress 6.0 imanolteran.com • Patrones de bloques. • Exportador de temas. • Nuevos hooks. • API de Webfonts. • Mejoras de rendimiento y usabilidad. Novedades 02 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

WordPress 6.0 imanolteran.com Novedades 02 15 SELECCIONADOR DE ESTILOS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

WordPress 6.0 imanolteran.com • Bloque Bucle de comentarios. • Podemos personalizar cada una de estas partes, de forma individual. Novedades 02 25 NUEVOS BLOQUES

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

WordPress 6.0 imanolteran.com Novedades 02 36 NUEVOS HOOKS

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

imanolteran.com 03Planes de futuro Lo que está por venir WordPress 6.0

Slide 50

Slide 50 text

WordPress 6.0 imanolteran.com • Editor de bloques VS Editores visuales. • Interfaz de administrador. • Rendimiento. • Multiidioma. • Accesibilidad. Planes de futuro 03 50

Slide 51

Slide 51 text

WordPress 6.0 imanolteran.com 51 bit.ly/AED_Wordpress6

Slide 52

Slide 52 text

imanolteran.com WordPress 6.0 hola@imanolteran.com Eskerrik asko