Este artículo surgió a raíz de insertar la url de uno de los plugin que he desarrollado en WordPress para la comunidad.
Para la inserción de la url utilicé el bloque embed-block y queda una card bastante chula, pero necesitaba mejorar un par de elementos del bloque.
A continuación vamos a ver como añadir atributos a los diferentes elementos HTML del bloque Embed.
Modificar los enlaces del bloque
El enlace que tiene el bloque no tiene los atributos «target=_blank» y «rel=noreferer noopener nofollow» que son necesarios para que el usuario, y los bots de rastreo, no se vayan de la página. También añadiremos un poco más de privacidad y seguridad.
Aquí podéis ver la estructura HTML del bloque que se genera.
Añadir atributos Target y Rel al enlace del bloque
Para modificar el bloque usaremos el Hook render_block. Este filtro de WordPress permite modificar el contenido de un bloque antes de que se renderice en el frontend.
La modificación solo la queremos aplicar en el bloque «wp-block-emded» y no en todas las url que se inserten. Solo las queremos en las que sean para los plugin del repositorio. Si nos fijamos en la captura anterior, vemos que en el elemento «figure» tiene dos estilos, con lo que podemos identificarlos «is-provider-plugin-directory» y «wp-block-embed-plugin-directory».
El código para añadir los atributos sería el siguiente:
function bk_embed_block($block_content, $block) {
if ( $block['blockName'] !== 'core/embed' || strpos($block_content, 'wp-block-embed-plugin-directory') === false ) {
return $block_content;
}
$block_content = str_replace( '<a', '<a target="_blank" rel="noreferer noopener nofollow"', $block_content );
return $block_content;
}
add_filter('render_block', 'bk_embed_block', 10, 2);Con este código, lo único que modificamos son los bloques del tipo «core/embed», y que contengan la cadena «wp-block-embed-plugin-directory».
Si cumple la condición, añadimos los atributos a los enlaces dentro de ese bloque para abrirlos en una nueva ventana, y establecer ciertos atributos de privacidad y seguridad.
Si has eliminado el script wp-embed, o tienes algún problema de JavaScript, en lugar de mostrar la card se verá un simple enlace.
Modificar el iframe del bloque
Si tengo la necesitas de usar un iframe en la página que no se va a mostrar, inmediatamente tengo que añadirle un lazyload. La carga innecesaria de elementos hacen que la página cargue más lenta, y consuma recursos que no necesitamos si el usuario no lo va a ver.
Añadir lazyload al iframe de bloque Embed
Ahora toca añadir el atributo lazyload al iframe, pero viendo el código anterior resulta sencillo. Sería añadiendo esta simple línea.
$block_content = str_replace('<iframe', '<iframe loading="lazy"', $block_content);Inicialmente, pensé utilizar la API de HTML que incluye WordPress a partir de la versión 6.2, pero no merecía el esfuerzo.
El problema de ese código, es que al añadirle el lazyload deja de aplicarse el script wp-embed, y te muestra un simple link en la página en lugar de la card.
Solucionar el problema del Lazyload en el iframe del bloque
Mirando otra vez en el código, vemos que el script «wp-embed» lo que hace es añadir un estilo «display:none» al enlace, y al iframe el atributo style con su contenido.
Lo insertaremos manualmente, y así podremos también eliminar la petición al script «wp-embed» si no lo usamos, mejorando así la velocidad de carga de la página.
El código a añadir sería:
$block_content = str_replace('<iframe', '<iframe loading="lazy"', $block_content);
$block_content = preg_replace('/style=".*?"/', '', $block_content);
$block_content = str_replace('<a', '<a target="_blank" rel="noreferer noopener nofollow" style="display:none;"', $block_content);En la primera línea añadimos en el iframe el lazyload. En la segunda eliminamos en el iframe el atributo style y su contenido. Y finalmente, en la tercera añadimos los atributos de antes y el CSS con el «display:none».
Ahora vamos a mejorar el código usando expresiones regulares para simplificarlo, y por si en un futuro queremos añadir nuevos atributos.
$patterns = array(
'/<iframe/',
'/style=".*?"/',
'/<a/'
);
$replacements = array(
'<iframe loading="lazy"',
'',
'<a target="_blank" rel="noreferer noopener nofollow" style="display:none;"'
);
$block_content = preg_replace($patterns, $replacements, $block_content);Código final para modificar el bloque Embed
Aquí dejo el código final, y recordad que si no utilizáis el script «wp-embed» podéis eliminar la petición con la función wp_deregister_script. Si os interesa la optimización, os dejo un artículo de como mejorar la carga de vuestro WordPress.
function bk_embed_block($block_content, $block) {
if ($block['blockName'] !== 'core/embed' || strpos($block_content, 'wp-block-embed-plugin-directory') === false) {
return $block_content;
}
$patterns = array(
'/<iframe/',
'/style=".*?"/',
'/<a/'
);
$replacements = array(
'<iframe loading="lazy"',
'',
'<a target="_blank" rel="noreferer noopener nofollow" style="display:none;"'
);
$block_content = preg_replace($patterns, $replacements, $block_content);
return $block_content;
}
add_filter('render_block', 'bk_embed_block', 10, 2);Espero que este artículo os sirva de ayuda, o por lo menos satisfaga vuestra curiosidad para «jugar» con los bloques de WordPress.
