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.

Tema Twenty Nineteen para WordPress.

Tema Twenty Nineteen para WordPress.

Así que adentrémonos y veamos qué hay de nuevo.

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.

En el tema Twenty Nineteen Gutenberg es más que un constructor de contenidos, es un constructor de sitios. 🔨 Haga clic para Tweet

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.

Subiendo un nuevo tema desde el dashboard de WordPress

Subiendo un nuevo tema 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.

Twenty Nineteen instalado con éxito

Twenty Nineteen instalado con éxito`

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.

Título del sitio, descripción del sitio, y menús en el encabezado de Twenty Nineteen

Título del sitio, descripción del sitio, y menús en el encabezado de Twenty Nineteen

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.

Editor de Gutenberg en modo de pantalla completa para WordPress

Editor de Gutenberg en modo de pantalla completa para WordPress

Y aquí está la misma publicación en la vista frontal del sitio.

Una página de una publicación en Twenty Nineteen

Una página de una publicación en Twenty Nineteen

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.

Botones de alineación amplia de ancho total en Gutenberg

Botones de alineación amplia de ancho total en Gutenberg

La imagen de abajo muestra imágenes alineadas al centro, de Ancho Amplio y Ancho Completo en Twenty Nineteen.

Alineado al centro, Anchura amplia y Anchura completa comparadas

Alineado al centro, Anchura amplia y Anchura completa comparadas

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).

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características

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 .

Una paleta de color personalizada en Gutenberg

Una paleta de color personalizada en Gutenberg

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.

Tamaños personalizados en Gutenberg

Tamaños personalizados en 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.