La nueva interfaz de edición de Gutenberg es un cambio importante que llegará a WordPress 5 este año y afectará a los desarrolladores de complementos de WordPress, diseñadores de temas y creadores de sitios web..
En este video, le mostraré cómo configurar Gutenberg como un complemento en su sitio existente y cómo comenzar a usar el editor de Gutenberg para crear contenido..
Síguelo y experimentará algunas de las nuevas características de Gutenberg de primera mano..
Un buen punto de partida para aprender sobre Gutenberg se encuentra en la página de Gutenberg en el Códice de WordPress. Le brinda una visión general de lo que Gutenberg se trata y también le dice cómo puede ayudar a mejorarlo y construir el futuro. Puede hacerlo enviando sus comentarios a través del cuestionario de comentarios, que también puede utilizar para solicitar asistencia..
También puede ver los requisitos de prueba para probar Gutenberg. La razón por la que es importante cumplir con estos requisitos es para que todos realicen las pruebas de manera coherente, ayudando al equipo que está desarrollando Gutenberg para que sea lo mejor posible..
Gutenberg aún no es parte del núcleo de WordPress, pero estará en una versión futura. Tenga en cuenta que bien puede cambiar mientras tanto, en parte debido a esa retroalimentación y en parte por el trabajo que aún está en curso para que sea lo mejor posible. Pero mientras tanto, echemos un vistazo a cómo puedes tener a Gutenberg en tu sitio ahora mismo y te daremos una visión general de cómo se ve..
La forma en que puede obtener Gutenberg en este momento es a través de un complemento. Así que instálalo en la forma habitual-vaya a Plugins> Añadir Nuevo, busque "Gutenberg", y cuando la encuentre, haga clic en Instalar ahora y entonces Activar.
Ahora que ha instalado el complemento, el editor de Gutenberg estará activo en su sitio.
Abriré una publicación existente en mi sitio para mostrarle cómo se ve la pantalla de edición de publicaciones en Gutenberg.
Puedes ver que esto se ve muy diferente de como solía hacerlo. Cuando me coloco sobre las cosas, aparecen iconos con tres puntos en el lado derecho, que me muestran que cada elemento de mi contenido se ha convertido en un bloque..
Si hago clic en un bloque, tengo algo que me parece un poco más familiar: se parece al antiguo fregadero de la cocina en el editor clásico. Pero puede ver que no tiene las pestañas para la vista de código y la vista normal en la parte superior.
En el lado derecho, tengo un conjunto de aspecto ligeramente diferente de lo que solían ser metaboxes, que solían verse bastante separados en el antiguo editor. Esto se parece mucho más al personalizador. Entonces, si has estado trabajando con el Personalizador en WordPress, este diseño te será familiar. Puede hacer clic en cada título para ampliar la sección correspondiente. En general, hace las cosas un poco más ordenadas y reduce la necesidad de desplazarse.
Puede agregar más bloques haciendo clic en el icono más en la parte inferior izquierda y aparecerá un menú que le mostrará las diferentes opciones..
Si usted es un usuario experimentado de WordPress, y particularmente si es un desarrollador de WordPress, puede que esté lanzando sus manos con horror ante esto. Pero puedo ver cómo para los usuarios menos experimentados y las personas que tienen una visión más visual, esto hará que las cosas parezcan mucho más fáciles..
Gutenberg también hace que sea más fácil mover las cosas. Así que voy a crear un bloque de párrafos de parte del contenido existente en mi publicación. Cuando haya hecho eso, puedo seleccionar mis bloques y moverlos hacia arriba y hacia abajo haciendo clic en las flechas de la izquierda.
Esto le brinda mucha flexibilidad a la hora de mover las cosas en su sitio y tratar las cosas de una manera visual.
También hay otros tipos de bloques. Una lista, por ejemplo, se convierte en un bloque por sí solo..
Comenzaré dividiendo mi contenido existente en bloques haciendo clic en el icono de control y seleccionando Convertir a bloques Del menú que aparece..
Gutenberg luego separa mis encabezados y párrafos individuales, y también crea bloques separados para cada lista. Así que es realmente rápido y fácil convertir tus publicaciones existentes en contenido compatible con Gutenberg.
Recordará que al principio, dije que no había pestañas en la parte superior para la vista de texto y la vista de código. En lugar de eso, puedes trabajar en el código de un bloque individual. Así que si hago clic en el ícono de control a la derecha, puedo seleccionar Editar como HTML. Luego muestra el bloque en la vista de código, y puedo editar el código en ese bloque en particular.
Si eres como yo y has tenido que profundizar en el código detrás de un post largo, puede ser muy confuso tratar de encontrar el fragmento de texto con el que has estado trabajando, por lo que esto hace que sea mucho, mucho Más fácil de trabajar con un código específico.
Así que los bloques realmente hacen que Gutenberg sea lo que es, y espero que esto te haya dado una idea de cómo funcionan los bloques. Un bloque es básicamente equivalente a un elemento en su HTML. Si tuviera que ver el marcado de salida de su archivo, vería que cada uno de estos estaba en el mismo nivel. Así que tienes encabezados, párrafos y listas, y todos están al mismo nivel dentro de tu HTML.
También puede dividir y fusionar bloques utilizando el mismo menú de control que aparece en el icono con los tres puntos, y también hay un Deshacer botón arriba en la parte superior, lo que es realmente útil. Y con las listas, puede cambiar fácilmente entre diferentes niveles de sangría, o entre listas con viñetas y numeradas, simplemente utilizando el menú que se encuentra sobre el bloque correspondiente.
Ahora que he convertido mi contenido en bloques individuales, también puedo hacer clic en Bloquear en la barra lateral a la derecha y cambia la configuración de cada bloque.
También puede mostrar y ocultar la barra de herramientas de configuración haciendo clic en el menú de control junto a un bloque y seleccionando Mostrar configuración avanzada o Ocultar configuración avanzada. Si lo ocultas, obtendrás una experiencia de edición agradable y limpia..
Así que eso le da una visión general de las principales cosas que puede hacer con los bloques en Gutenberg. Puede agregar bloques, cambiar el tipo de bloque que es y editar el código subyacente. Puede duplicar bloques, puede combinarlos, puede dividirlos y moverlos dentro de su documento.
Todavía no he usado Gutenberg en un set en vivo, pero su ejecución en este curso me ha entusiasmado mucho sobre cómo funciona Gutenberg y cómo puede ayudarme a editar mi propio contenido en mi sitio de WordPress.
Espero que Gutenberg te sea de utilidad y espero que hayas disfrutado de este rápido recorrido por sus características principales.
Aprenda cómo usar WordPress o atascarse y aprenda el desarrollo de WordPress con nuestras guías completas. Todos los cursos en estas guías se pueden ver gratis con una suscripción a Envato Elements. Por una única tarifa mensual baja, obtiene acceso ilimitado a nuestra creciente biblioteca de más de 1,000 cursos de video y libros electrónicos líderes en la industria en Envato Tuts+.
Además, ahora obtiene descargas ilimitadas de la enorme biblioteca de Elementos Envato con más de 500,000 activos creativos. Cree con fuentes, fotos, gráficos y plantillas únicas, y entregue mejores proyectos más rápido.