WordPress 5.0 está a la vuelta de la esquina, y muchos de nosotros estamos emocionados y preocupados al mismo tiempo. Gutenberg trae un gran cambio en la forma en que usamos WordPress, y definitivamente hay un poco de preocupación sobre lo que podría pasar con nuestros sitios web si actualizamos nuestras instalaciones sin hacer pruebas antes. Pero no se preocupe, tenemos un articulo sobre cómo deshabilitar el editor de Gutenberg para WordPress (incluso si es un cambio temporal) para poder prevenir que los temas y plugins que no son soportados terminen quebrando sus sitios web.
Podría sorprenderle saber de que nosotros ya estamos utilizando WordPress 5.0. ¡Pero así es! Como Matt declaró en el blog Make WordPress.
“Si mantenemos la versión de 5.0 estrictamente en 4.9.8+ Gutenberg, tendremos un lanzamiento que es grande y al mismo tiempo no es un gran evento en términos de nuevo código. Todo ha sido probado en batalla. De alguna forma, 5.0 está listo para salir al mundo, con algunos hosts que piensan a futuro, gente que ya está instalando y activando Gutenberg para nuevas instalaciones.”
Esto quiere decir que ya tenemos WordPress 5.0 activado en nuestros servidores: simplemente es WordPress 4.9.8 con Gutenberg como su fuente. En realidad, eso no es todo, porque WordPress 5.0 viene con un complemento adicional, cual es el nuevo tema Twenty Nineteen.
Así que adentrémonos y veamos qué hay de nuevo.
- Sobre Gutenberg y Twenty Nineteen
- Instalando Twenty Nineteen
- La apariencia y la sensación de Twenty Nineteen
- Temas para Gutenberg: El enfoque de un Desarrollador
Sobre Gutenberg y Twenty Nineteen
Algunos de ustedes podrían odiar Gutenberg. Además de esto, el debate sobre el nuevo editor está muy lejos de acabarse, pero considere el alcance declarado de Gutenberg:
“Los bloques personalizados cambian como los usuarios, desarrolladores y hosts interactúan con WordPress para crear contenido web valioso, fácil de usar y más intuitivo, democratizando las publicaciones y el trabajo para todos, sin importar sus habilidades técnicas.”
Este es el plan de Gutenberg, y Twenty Nineteen trae las cosas un paso más allá, siendo creado usando Gutenberg y para Gutenberg. Es un tema minimalista, muy enfocado a la tipografía con un diseño de una sola columna, y puede ser usado para construir una gran variedad de sitios web, yendo desde blogs personales a sitios web de pequeños negocios.
Escribir sobre Twenty Nineteen, prácticamente significa que estamos escribiendo sobre Gutenberg. En Twenty Nineteen Gutenberg permite que los usuarios no sólo puedan crear contenido valioso, sino también crear sitios web enteros en el editor. De acuerdo con Allan Cole en el blog Make WordPress,
“Gutenberg otorga a sus usuarios un nivel inigualable de libertad para personalizar el diseño del sitio. Para poder alcanzar por completo su visión, los usuarios necesitarán una nueva generación de temas flexibles, hechos para tomar ventaja de la libertad creativa que Gutenberg ofrece.
Con eso en mente, WordPress 5.0 lanzará un nuevo tema base: Twenty Nineteen”
En el tema de Twenty Nineteen, Gutenberg funciona más que un creador de contenido, es un creador de sitios, y los usuarios de WordPress podrán construir sitios webs enteros para tomar ventaja de los bloques. Y si aún no le gusta Gutenberg, la mayoría de los plugins constructores de páginas más populares también están ofreciendo soporte para Gutenberg.
(Lectura sugerida: Introducción al Tema Twenty Twenty)
Instalando Twenty Nineteen
Twenty Nineteen debería seguir el plan de lanzamiento de cualquier otro gran lanzamiento de WordPress. Sin embargo, WordPress 5.0 debe ser lanzado el 19 de Noviembre, y es posible que una versión de Twenty Nineteen no esté lista para esa fecha. Vea todas las fechas de lanzamiento posibles para WordPress 5.0. De todas formas, el tema está disponible para ser descargado en Github, y estará ahí hasta que forme parte del código fuente.
Twenty Nineteen está basado en _s y el gutenberg-starter-theme e incluye Sass. Una vez que obtenga el paquete .zip, extraiga el tema y suba/mueva el folder del tema dentro del directorio /wp-content/themes themes de la instalación de su desarrollo. También puede subirlo desde el dashboard de WordPress.
Los clientes de Kinsta pueden instalarlo en sus entornos de staging. Si usted aún no es cliente nuestro, aún así puede instalarlo en su máquina local.
La Apariencia y la Sensación de Twenty Nineteen
El diseño de una sola columna destaca el contenido y se adapta mejor a bloques completos y anchos. El tema ya soporta barras laterales y viene con tres menús de navegación: el menú Primario y el Menú de Enlaces Sociales, ambos colocados en el encabezado de la página y el Menú Footer situado en el pie de la página.
La página del blog luce como cualquier página de blog regular con las imágenes destacadas habilitadas. Las publicaciones y páginas muestran el mejor potencial de la versión actual de Gutenberg como constructor de sitios.
Ya que está totalmente basado en Gutenberg, las características de Twenty Nineteen dependen principalmente del ciclo de desarrollo de Gutenberg y en la disponibilidad de bloques. Podemos agregar bloques de widget, bloques shortcode, galerías, código HTML, y mucho más. Sin embargo, todos estos bloques están muy lejos de cumplir con todas nuestras necesidades. Pero afortunadamente contamos con varios plugins que nos permiten agregar nuevos bloques para Gutenberg, como Atomic Blocks, Advanced Gutenberg y Stackable. Incluso hay proyectos como Gutenberg Cloud que han estado surgiendo.
Si usted piensa que el tema luce muy simple, considere que Twenty Nineteen es un proyecto sin terminar. No estamos seguros si será integrado al core antes de que WordPress 5.0 sea lanzado, y podemos esperar complementos adicionales y resolución de bugs en un futuro. Además de esto, hay muchos problemas que siguen sin ser resueltos, y opciones que necesitan ser implementadas. Un ejemplo, al momento de escribir este articulo, Twenty Nineteen ya tiene soporte para sub menús pero no para Encabezados Personalizados o Videos en Encabezados, pero seguro que más características serán agregadas en un lapso de tiempo razonable.
Si usted está interesado en el estado actual del tema, cheque la lista completa de problemas en Github.
Temas para Gutenberg: Punto de Vista de un Desarrollador
En su versión básica, Gutenberg brinda soporte básico para estilos de bloque en temas, y los desarrolladores de temas tienen toda la libertad de reescribir los estilos básicos de Gutenberg con sus estilos personalizados. Pero los desarrolladores pueden omitir por completo los estilos personalizados y decidir depender exclusivamente de Gutenberg para estilizar bloques en frente del sitio.
Un editor que luce y se siente como si el resultado obtenido mejorara la experiencia de escritura del autor, y que le permite a todos sentirse más cómodos con el UI.
De todas formas, algunos estilos de Gutenberg y opciones de presentación requieren que los temas expresamente añadan soporte para ellos, y esto puede lograrse llamando add_theme_support en el archivo de functions.php donde la acción functions.php file when the after_setup_theme es activada. Aquí hay un ejemplo de una implementación de una característica.
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Abajo está listado una selección de estas características de Gutenberg, Algunas de las cuales también son soportadas por Twenty Nineteen. Usted podrá encontrar la lista completa de características en el Gutenberg Handbook.
Agregando Soporte para los Estilos de Presentación de Bloque de Gutenberg
Una de las metas del equipo detrás de Gutenberg era construir un sistema flexible para estilizar dentro de los temas, y acercarse lo más que se pueda a “una paridad visual entre el front-end y el editor”. El propósito es brindar al usuario una vista previa precisa de cómo terminará luciendo el contenido en el front-end.
Para lograr este objetivo, el equipo tuvo que separar los estilos de presentación y los estilos estructurales. Por defecto, los estilos de presentación no son cargados en el front-end, para poder evitar afectar la apariencia del sitio. De todas formas, los nuevos temas toman ventaja de los estilos de presentación de Gutenberg, con tan sólo habilitarlos con el siguiente registro (vea el Handbook para encontrar más detalles):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );Como podría esperar,Twenty Nineteen soporte los estilos de bloque de Gutenberg. La página de publicación luce en el front end como si fuera la página de edición de la publicación, con la única diferencia de incluir la imagen destacada, la cual aparecerá en el fondo como imagen de cubierta, cubriendo toda la vista. La imagen de abajo muestra a Gutenberg en acción en el back-end.
Y aquí está la misma publicación en la vista frontal del sitio.
Alineaciones Amplias y Completas
Gutenberg también brinda dos opciones de alineación adicionales: alineación amplia y de ancho total, pero usted puede seleccionar alineación Amplia o de Ancho Total sólo si su tema lo soporta. Si es así, Gutenberg mostrará dos iconos de alineación adicionales.
La imagen de abajo muestra imágenes alineadas al centro, de Ancho Amplio y Ancho Completo en Twenty Nineteen.
Los desarrolladores de tema pueden agregar soporte para alineaciones amplias y completas al habilitarlas en el archivo de funciones con una sola declaración:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Una vez que hayamos agregado soporte para alineaciones amplias y completas, deberían proveer las declaraciones CSS para dos clases CSS adicionales: alignfull y alignwide. Twenty Nineteen brinda los siguientes estilos:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Nota: Tenga cuidado al usar esta opción, porque podría causar problemas si es que cambia de tema (lea más sobre esto en Github).
Estilo Editor
El Estilo Editor es una opción introducida con WordPress 3.0, permitiendo que los desarrolladores de temas puedan agregar estilos personalizados al editor TinyMCE. Gutenberg también soporta esta opción, pero funciona de forma distinta de como funcionaba en el Editor Clásico, la cual carga estilos directamente al iframe del editor. Gutenberg agrega selectores CSS específicos, ya que no utiliza un iframe.
Podemos agregar soporte para estilo editor haciendo lo siguiente:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Esta opción también es soportada por Twenty Nineteen. Puede adentrarse más a este tema en Estilo Editor en Gutenberg.
Bloqueando Paletas de Color
Gutenberg brinda un selector genérico de color en el panel de opciones de color del editor. Los desarrolladores de tema pueden mejorar esta herramienta al agregar paletas personalizadas de color, permitiendo a los usuarios el poder elegir rápidamente el color y texto correcto para el fondo del bloque. Esto es un proceso de dos pasos:
Primero, tenemos que proveer una amplia gama de colores:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Luego, tenemos que declarar los estilos correspondientes en la página de estilos del tema:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Los nombres de clase empiezan con has-, seguido por la ficha del color en la casilla kebab, y terminando con el contexto, el cual puede ser color o background-color. Actualmente, Twenty Nineteen no tiene soporte para paletas de colores, pero fácilmente podemos cambiar esto con un tema secundario .
En su lugar, si quiere deshabilitar la paleta personalizada de color, usted tiene que agregar la siguiente línea al archivo de funciones del tema o del tema secundario:
add_theme_support( 'disable-custom-colors' );Tamaños de la Fuente del Bloque
Un tema también puede sobrescribir los tamaños de fuente base de Gutenberg. Aquí hay un ejemplo del código que debe agregar al archivo de funciones:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );Los nuevos tamaños de las fuentes serán agregados en el seleccionador de tamaño de la fuente en las opciones de texto de Gutenberg.
Después, tenemos que declarar los estilos correspondientes en la página de estilos del tema. El nombre de la clase debería empezar con has-, seguido por el nombre del tamaño de la fuente en la casilla kebab, y terminar con -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen no provee tamaños de fuente específicos y depende de los básicos encontrados en Gutenberg.
Nota: Recuerde, para lograr que funcione el código, usted debería engancharlo a través de la acción after_setup_theme.
Resumen
Twenty Nineteen podría funcionar bien para blogs personales, y podría verlo más como un lienzo en blanco que un tema funcional de WordPress en sí. Este enfoque tan minimalista podría ser un poco limitante cuando se trata de construir sitios para negocios y e-commerce, pero no se preocupe: próximamente irán agregando nuevas opciones, y podrían ver pronto una versión más poderosa de Twenty Nineteen.
Mientras tanto, también podría checar algunos de los temas que ya están soportando a Gutenberg. Atomic Blocks, GeneratePress, Gutentype y Divi, sólo para nombrar algunas, pero muchas otras vendrán pronto. Con WordPress 5.0 acercándose tan rápido, soportar a Gutenberg no es una opción, y los desarrolladores de temas deberían aceptar el nuevo editor de WordPress tan pronto como sea posible para mantenerse a la vanguardia.
¿Usted ya instaló Twenty Nineteen o cualquier otro tema que soporte a Gutenberg? Nos encantaría escuchar su opinión sobre el tema en la sección de comentarios.
Deja una respuesta