Cómo transformar bloques personalizados de WordPress en bloques nativos con WP All Import y parse_blocks()

La migración de contenido en WordPress puede ser un verdadero dolor de cabeza, sobre todo cuando hay una mezcla de bloques personalizados y plugins de terceros. Sin embargo, utilizando WP All Import y la función parse_blocks() de WordPress, es posible transformar de manera eficiente los bloques personalizados en bloques estándar, creando una experiencia de contenido mucho más fluida y manejable.

Si no se importan correctamente, estos bloques pueden alterar el estilo de un tema, llevando a una estética inconsistente y a una estructura de contenido desordenada. Por eso, es súper importante hacer bien la importación.

Vamos a explorar cómo hacerlo.

El Desafío de los Bloques Personalizados

Una de las principales razones para transformar bloques personalizados en bloques estándar es el desafío que representan para el mantenimiento a largo plazo. Además, los bloques personalizados introducidos por plugins de terceros a menudo rompen la consistencia estilística y estética del sitio.

En un proyecto reciente, el cliente tenía varios bloques personalizados que no se alineaban con las plantillas y patrones que creamos. Nuestras plantillas ofrecían un aspecto estructurado y cohesivo para el sitio, pero los bloques personalizados no eran compatibles con eso.

Mantener estos bloques de terceros habría socavado nuestro esfuerzo por lograr un diseño web bien organizado y visualmente consistente.

Al convertir estos bloques en bloques estándar, obtuvimos un mejor control sobre la apariencia y funcionalidad del contenido. Esto aseguró que se ajustara a la guía de estilo y mejoró la consistencia general del sitio.

¿Por Qué WP All Import?

Hemos utilizado WP All Import con gran éxito en múltiples proyectos hasta ahora.

Sus características robustas y su capacidad para manejar importaciones complejas lo han convertido en nuestra primera opción al importar grandes volúmenes de contenido. Una de sus principales fortalezas es su flexibilidad, que nos permite escribir scripts personalizados para manipular datos durante el proceso de importación.

Esta personalización resulta muy útil al transformar bloques personalizados en bloques estándar. Para esta migración en particular, las capacidades de script de WP All Import nos permitieron ajustar cómo se manejaba cada bloque durante la importación.

Aprovechando parse_blocks() para la Transformación de Bloques

Al principio, la estrategia para identificar y reemplazar bloques se basó en expresiones regulares (regex).

Este enfoque funcionó para bloques más simples, como convertir un bloque de espaciador de Genesis en un bloque de espaciador básico de WordPress.

Sin embargo, a medida que los bloques se volvieron más complejos, el regex se quedó corto. Cuando me enfrenté a bloques más robustos, empecé a buscar alternativas y descubrí la función parse_blocks() en la documentación de WordPress.

parse_blocks() analiza el contenido de la publicación y lo convierte en un array de objetos de bloque, proporcionando acceso a información crucial como nombres de bloques, atributos, HTML interno y bloques anidados (innerBlocks).

Esto me permitió desarrollar condiciones y lógica basadas en la estructura del bloque, lo que facilitó mucho la transformación de bloques personalizados complejos en bloques básicos.

Convertir Bloques de Genesis a Bloques Básicos Usando PHP: 2 Ejemplos

Ejemplo #1: El Resultado Final

El proceso de transformación, aunque efectivo, resultó ser muy laborioso debido a la estructura única de cada bloque.

No hay un par de bloques personalizados que sean exactamente iguales, lo que significa que cada uno requiere una depuración exhaustiva para entender su estructura y determinar la mejor manera de reemplazarlo. El proceso de descubrir todo esto llevó más de 16 horas de trabajo.

Acá tenés un ejemplo de cómo lucen los bloques después de ser transformados de Genesis a bloques básicos.

Antes (Bloque Personalizado)

<!-- wp:columns {"columns":2} -->
<div class="wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-equal alignwide"><div class="gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column"><!-- wp:column -->
  <div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:heading {"level":5} -->
  <h5>Lorem Ipsum</h5>
  <!-- /wp:heading -->
  <!-- /wp:genesis-blocks/gb-column -->

  <!-- wp:column -->
  <div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:heading {"level":5} -->
  <h5>Lorem Ipsum</h5>
  <!-- /wp:heading -->
  <!-- /wp:genesis-blocks/gb-column --></div></div>
<!-- /wp:columns -->

Después (Bloque Básico)

<!-- wp:columns -->
  <div class="wp-block-columns"><!-- wp:column -->
  <div class="wp-block-column"><!-- wp:heading {"level":5} -->
  <h5 class="wp-block-heading">Lorem Ipsum</h5></div>
  <!-- /wp:heading -->

  <!-- wp:column -->
  <div class="wp-block-column"><!-- wp:heading {"level":5} -->
    <h5 class="wp-block-heading">Lorem Ipsum</h5>
    <!-- /wp:heading --></div>
  <!-- /wp:column --></div>
<!-- /wp:columns -->

Este ejemplo mostró el resultado final de transformar un layout de bloques de columnas de Genesis en un bloque de columnas nativo de WordPress, asegurando que todo el HTML, los atributos y los bloques internos se preservaran y migraran correctamente.

Ejemplo #2: El Proceso Paso a Paso

Vamos a explorar un segundo ejemplo, más detallado, que mostró el proceso paso a paso de cómo lograr esta transformación usando WP All Import y parse_blocks(). Aquí está el código para convertir las columnas de Genesis a columnas principales:

/**
 * Convertir bloques de Genesis a bloques del núcleo de WordPress.
 *
 * Esta función analiza el contenido, identifica los bloques de Genesis (Columnas y Columna)
 * y los convierte en bloques del núcleo de WordPress.
 *
 * @param string $content El contenido original que contiene bloques de Genesis.
 * @return string El contenido con bloques de Genesis convertidos a bloques del núcleo.
 */
function convert_genesis_blocks_to_core( $content ) {
    // Analizar el contenido en bloques
    $blocks = parse_blocks( $content );

    // Convertir los bloques recursivamente
    $converted_blocks = convert_blocks_recursively( $blocks );

    // Serializar los bloques de nuevo en contenido y devolver
    return serialize_blocks( $converted_blocks );
}

/**
 * Convertir recursivamente bloques personalizados en bloques del núcleo.
 *
 * Esta función recorre los bloques analizados y aplica transformaciones a los bloques de Genesis.
 *
 * @param array $blocks Un array de objetos bloque analizados.
 * @return array El array transformado de objetos bloque.
 */
function convert_blocks_recursively( $blocks ) {
    $converted_blocks = array();

    foreach ( $blocks as $block ) {
        // Convertir bloques de columnas de Genesis a columnas del núcleo
        if ( 'genesis-blocks/gb-columns' === $block['blockName'] ) {
            $converted_blocks[] = convert_genesis_columns_block( $block );
        } elseif ( 'genesis-blocks/gb-column' === $block['blockName'] ) {
            $converted_blocks[] = convert_genesis_column_block( $block );
        } else {
            // Convertir recursivamente bloques internos
            if ( ! empty( $block['innerBlocks'] ) ) {
                $block['innerBlocks'] = convert_blocks_recursively( $block['innerBlocks'] );
            }
            $converted_blocks[] = $block;
        }
    }

    return $converted_blocks;
}

/**
 * Convertir un bloque de columnas de Genesis a un bloque de columnas del núcleo.
 *
 * Esta función mapea los atributos y la estructura del bloque de columnas de Genesis a los atributos de columnas del núcleo.
 *
 * @param array $block Los datos del bloque de columnas de Genesis.
 * @return array El bloque de columnas del núcleo transformado.
 */
function convert_genesis_columns_block( $block ) {
    $attrs = array( 'columns' => $block['attrs']['columns'] ?? 2 );

    // Convertir recursivamente bloques internos (Columnas de Genesis)
    $inner_blocks = convert_blocks_recursively( $block['innerBlocks'] );

    return array(
        'blockName'    => 'core/columns',
        'attrs'        => $attrs,
        'innerBlocks'  => $inner_blocks,
        'innerHTML'    => '',  // Se regenerará automáticamente
        'innerContent' => array(),
    );
}

/**
 * Convertir un bloque de columna de Genesis a un bloque de columna del núcleo.
 *
 * Esta función convierte columnas individuales de Genesis en columnas del núcleo de WordPress.
 *
 * @param array $block Los datos del bloque de columna de Genesis.
 * @return array El bloque de columna del núcleo transformado.
 */
function convert_genesis_column_block( $block ) {
    // Convertir recursivamente bloques internos dentro de la Columna
    $inner_blocks = convert_blocks_recursively( $block['innerBlocks'] );

    return array(
        'blockName'    => 'core/column',
        'attrs'        => array(),  // Sin atributos especiales para el bloque de columna del núcleo
        'innerBlocks'  => $inner_blocks,
        'innerHTML'    => '',  // Se regenerará automáticamente
        'innerContent' => array(),
    );
}

Integrando el Código con WP All Import

Una vez que elaboraste tu código de transformación de bloques, es hora de ponerlo a funcionar dentro de WP All Import. El proceso es simple y se puede hacer durante la configuración de la importación.

En el tercer paso de crear una nueva importación (la interfaz de “Arrastrar y Soltar”), normalmente mapearías tus campos de contenido. En lugar de usar el campo estándar {content[1]} para el contenido de tu publicación, podés llamar directamente a la función personalizada para manejar la transformación de bloques.

Por ejemplo, usá:

[convert_genesis_blocks_to_core({content[1]})]

Esto aplicará tu lógica de transformación al contenido antes de que se importe, asegurando que tus bloques personalizados se conviertan en bloques del núcleo durante el proceso de importación.

¿Dónde Definir la Función para Convertir Bloques Personalizados a Bloques del Núcleo?

WP All Import te permite definir funciones personalizadas directamente desde la interfaz.

Desplazate hacia abajo en el mismo paso de “Arrastrar y Soltar” hasta que encuentres la sección “Editor de Funciones”. Ahí, podés pegar el código PHP de la función convert_genesis_blocks_to_core(). Una vez que la agregues, WP All Import la va a reconocer y la aplicará al contenido como lo configuraste.

Para obtener una guía más detallada, podés consultar la documentación oficial de WP All Import sobre el uso de PHP en línea.

Proceso de Transformación Paso a Paso

El proceso de transformación, aunque efectivo, fue bastante lento debido a la estructura única de cada bloque.

No hay un par de bloques personalizados que sean exactamente iguales, lo que significa que cada uno requirió una depuración exhaustiva para entender su estructura y determinar la mejor forma de reemplazarlo. Todo este proceso llevó más de 16 horas de trabajo.

Acá hay un ejemplo de una transformación de bloque.

Antes (Bloque Personalizado)

<!-- wp:columns {"columns":2} -->
<div class="wp-block-genesis-blocks-gb-columns gb-layout-columns-2 gb-2-col-equal alignwide"><div class="gb-layout-column-wrap gb-block-layout-column-gap-2 gb-is-responsive-column"><!-- wp:column -->
  <div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:heading {"level":5} -->
  <h5>Lorem Ipsum</h5>
  <!-- /wp:heading -->
  <!-- /wp:genesis-blocks/gb-column -->

  <!-- wp:column -->
  <div class="wp-block-genesis-blocks-gb-column gb-block-layout-column"><div class="gb-block-layout-column-inner"><!-- wp:heading {"level":5} -->
  <h5>Lorem Ipsum</h5>
  <!-- /wp:heading -->
  <!-- /wp:genesis-blocks/gb-column --></div></div>
<!-- /wp:columns -->

Después (Bloque Principal)

<!-- wp:columns -->
  <div class="wp-block-columns"><!-- wp:column -->
  <div class="wp-block-column"><!-- wp:heading {"level":5} -->
  <h5 class="wp-block-heading">Lorem Ipsum</h5></div>
  <!-- /wp:heading -->

  <!-- wp:column -->
  <div class="wp-block-column"><!-- wp:heading {"level":5} -->
    <h5 class="wp-block-heading">Lorem Ipsum</h5>
    <!-- /wp:heading --></div>
  <!-- /wp:column --></div>
<!-- /wp:columns -->

Este ejemplo muestra cómo transformar un diseño de bloque de columnas de Genesis en un bloque de columnas nativo de WordPress, asegurando que todo el HTML, los atributos y los bloques internos se preserven y migren correctamente.

Beneficios de Usar Bloques Nativos

Los beneficios de esta transformación van más allá de la estética.

Al usar bloques nativos de WordPress junto con nuestros bloques personalizados, minimizamos nuestra dependencia de plugins de terceros. Esto mejora el rendimiento ya que se cargan menos scripts externos en la parte frontal y también nos da control total sobre el estilo y el comportamiento de los bloques.

Personalizar un bloque nativo es mucho más fácil que lidiar con un bloque personalizado de otra persona.

Además, la experiencia del cliente sigue siendo fluida, ya que los bloques nativos son intuitivos y bien conocidos en el ecosistema de WordPress.

Pruebas y Asegurando la Integridad de los Datos

Como en cualquier migración grande, asegurar la integridad del contenido es clave. Realizamos múltiples migraciones locales, procesando más de 1,700 publicaciones en total. Para asegurarnos de la precisión, revisamos aproximadamente una publicación de cada treinta, comprobando manualmente que los datos y el formato se preservaron correctamente después de la transformación.

Estas pruebas nos ayudaron a mantener la confianza de que no se perdió ni se dañó contenido durante el proceso.

Transformar Bloques Personalizados en Bloques Nativos Agiliza la Gestión de Contenido

Al transformar bloques personalizados en bloques nativos, hicimos que el sitio del cliente sea más eficiente, consistente y más fácil de mantener.

WP All Import y parse_blocks() resultaron ser herramientas invaluables en este proceso, permitiendo una solución flexible y escalable para manejar migraciones de contenido complejas.

Para los desarrolladores que enfrentan desafíos similares, este método no solo prepara el contenido para el futuro, sino que también reduce significativamente la carga de gestionar plugins de terceros.

Si encontraste útil este post, lee nuestro blog y recursos para desarrolladores para más ideas y guías!