A mí me funciona

El blog de Ignacio Cruz

WordPress 5.5: Guía para desarrolladores

11 ago. 2020
·
  • What is code
  • WordPress
·
  • 5.5

WordPress 5.5 ha resultado ser una versión prometedora, con muchas mejoras y unas cuantas características suculentas. Un Gutenberg con mejoras en su interfaz (aunque no al gusto de todos), lazy loading nativo en las imágenes, XML Sitemaps, actualizaciones automáticas de plugins y temas y el nuevo directorio de bloques, que posiblemente llene de plugins sin usar las instalaciones pero está por ver.

Pero hablemos de lo puramente dedicado al desarrollo ya que WordPress 5.5 trae unos cuantos cambios interesantes:

Control sobre las actualizaciones automáticas

Por defecto, las actualizaciones automáticas en plugins y temas están desactivadas y se pueden controlar de forma manual. Para desactivar completamente esta característica, podemos utilizar los siguientes filtros:

// Disable plugins auto-update UI elements.
add_filter( 'plugins_auto_update_enabled', '__return_false' );
 
// Disable themes auto-update UI elements.
add_filter( 'themes_auto_update_enabled', '__return_false' );

Además, con la función wp_is_auto_update_enabled_for_type() podemos saber si un plugin o tema se actualiza automáticamente.

Por último, podemos activar o desactivar las actualizaciones para un solo plugin con el filtro auto_update_plugin o auto_update_theme para un tema. Por ejemplo:

function auto_update_my_plugin( $update, $plugin ) {
        return ( $plugin->slug === 'my-plugin' ) ? true : $update;
}
add_filter( 'auto_update_plugin', 'auto_update_my_plugin', 10, 2 );

Como extras, hay algunos filtros más:

  • auto_plugin_theme_update_email: Para modificar el email que se manda a los administradores cuando un plugin o tema se modifica.
  • auto_theme_update_send_email/auto_plugin_update_send_email: Para habilitar o desactivar dichos emails.
  • plugin_auto_update_debug_string/theme_auto_update_debug_string: Para cambiar el texto que aparece en la pantalla de Salud del Sitio.

Y aquí hay una guía con recomendaciones sobre cómo usar esta característica.

Accesibilidad

Algunos widgets de navegación vienen en la nueva versión con ligeras mejoras en su HTML. Para declarar que el tema soporta dicho HTML, podemos utilizar esta línea:

add_theme_support( 'html5', [ 'navigation-widgets' ] );

Gutenberg también incorpora numerosas mejoras de accesibilidad.

Enlace del logo

Cuando usamos the_custom_logo() en un tema, éste aparece como un enlace que lleva a la home de nuestro sitio. WP 5.5 añade una opción extra para evitarlo:

add_theme_support(
    'custom-logo',
    [
        'height'               => $logo_height,
        'width'                => $logo_width,
        'flex-height'          => true,
        'flex-width'           => true,
        'unlink-homepage-logo' => true, // Elimina el enlace del logo
    ]
);

Además se incluye un filtro nuevo, get_custom_logo_image_attributes para modificar los atributos del logo.

Actualizaciones en la API de los bloques

  • Categorías de los bloques: Ya no es necesario indicar una categoría al registrar un bloque aunque éste caerá en la sección Uncategorized.
  • Contexto en bloques (Block Context): Este cambio es parecido a lo que React Context realiza: Proveer de contexto a un componente, en este caso un bloque, para que cualquier componente hijo herede ese contexto y pueda cambiar su comportamiento o estilo dependiendo de dicho contexto. Esto será muy útil para la que se avecina con el Full Site Editing.

    El contexto se define al registrar el bloque y lo hereda cualquier bloque anidado dentro del que provee el contexto tal que así:
registerBlockType( 'my-plugin/record-title', {
	edit( { context } ) {
		return 'The current record ID is: ' + context[ 'my-plugin/recordId' ];
	},
} );

Estilos responsive en bloques

Esta parte me parece algo confusa. Para dar estilos en diferentes dispositivos, tendremos que utilizar una especie de “marcadores” que no son más que reglas CSS. Si hemos usado el hook enqueue_block_editor_assets para añadir los estilos al editor (cosa que deberíamos), el parser de CSS de Gutenberg cogerá todo lo que hay entre esos dos marcadores y lo pondrá en algún sitio especial para utilizar media queries, todavía no he podido probar esta parte y el post que informa de esto no es del todo claro.

start-resizable-editor-section {
    display: none;
}
 
/* Media queries aquí */
 
#end-resizable-editor-section {
    display: none;
}

Patrones de bloques

Una funcionalidad esperadísima en Gutenberg y que añadirá muchísima flexibilidad a la hora de desarrollar sitios. Toda la documentación está aquí y un pequeño ejemplo: 

register_block_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'       => __( 'Two buttons', 'my-plugin' ),
        'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'my-plugin' ),
        'content'     => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'my-plugin' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
    )
);

content puede quedar feo en algunos casos pero no es más que el código que genera Gutenberg cuando insertamos cosas en el editor.

Nuevas herramientas para bloques

  • Alto de línea: Añade un selector para la regla line-height a los bloques de párrafo y cabecera.
add_theme_support( 'custom-line-height' );
  • Unidades personalizadas: Si quieres que los usuarios puedan elegir no sólo unidades en pixels, puedes utilizar la siguiente línea:
add_theme_support( 'custom-units', 'rem', 'em' );

El nuevo directorio de bloques

El nuevo directorio permite instalar bloques desde el propio editor. Sí, nos puede hacer la vida más fácil pero con un administrador poco cuidadoso puede suponer la instalación de cientos de ellos que luego no usará.

La gente de Coreha escrito algo de documentación que sirve como guía para subir nuevos bloques al directorio ya que no seguirá las mismas reglas que los plugins.

Lazy loading

Las imágenes que tengan una anchura y altura definidas traerán ahora el atributo loading=lazy de forma nativa. Si queremos usar la función wp_get_attachment_image sin lazy loading podemos hacerlo del siguiente modo:

echo wp_get_attachment_image(
    42,
    'large',
    false,
    [ 'loading' => false ],
);

También se puede usar el filtro wp_lazy_loading_enabled para eliminar el atributo dependiendo del contexto en el que la imagen aparece.

register_theme_feature

Esta nueva función registra las propiedades de una característica que el tema puede añadir. Suena raro pero al igual que tenemos características para temas que debemos definir, normalmente en el functions.php, por ejemplo add_theme_support( 'html5', 'search-form' ); Los plugins ahora tienen también la posibilidad de activar características personalizadas desde un tema.

Este ejemplo define la característica editor-color-palette y además la estructura que debería tener a la hora de activarlo desde el tema:

function myplugin_setup_theme() {
    register_theme_feature( 'editor-color-palette', array(
        'type'         => 'array',
        'description'  => __( 'Custom color palette if defined by the theme.' ),
        'show_in_rest' => array(
            'schema' => array(
                'items' => array(
                    'type'       => 'object',
                    'properties' => array(
                        'name'  => array(
                            'type' => 'string',
                        ),
                        'slug'  => array(
                            'type' => 'string',
                        ),
                        'color' => array(
                            'type' => 'string',
                        ),
                    ),
                ),
            ),
        ),
    ) );
}
add_action( 'setup_theme', 'myplugin_setup_theme' );

Valores por defecto al registrar metas

¡Por fin!

register_post_meta(
     'product',
     'price',
     array(
         'single'       => true,
         'type'         => 'string',
         'default'      => '0.00',
     )
 );

Hay unas cuantas maneras de hacerlo.

Sitemaps

Es algo largo de explicar para un post resumen pero esta nueva característica tiene nuevos hooks y funciones para registrar o eliminar elementos de los sitemaps.

Pasar argumentos a templates

Esto también era algo muy esperado y es que mediante la función get_template_part() podemos pasar ahora argumentos a dicha plantilla:

get_template_part( 
    'foo', 
    null, 
    array( 
        'class'          => 'user',
        'arbitrary_data' => array(
            'foo' => 'baz',
            'bar' => true,
        ),
        ...
    )
);

Otros cambios

En general, esta versión ha dejado contenta a mucha gente. Hay muchos cambios bienvenidos y Gutenberg se asienta con patrones y el directorio de bloques además de ir funcionando mejor versión a versión. Hay muchos más cambios, algunos mínimos pero muy satisfactorios. Hay una guía completa aquí: https://make.wordpress.org/core/2020/07/30/wordpress-5-5-field-guide/

RSS