Representación de datos de API externos en bloques de WordPress en el front-end

Han aparecido algunos tutoriales nuevos sobre CSS-Tricks para trabajar con bloques de WordPress. Uno de ellos es una introducción al desarrollo de bloques de WordPress y es un buen lugar para aprender qué son los bloques y registrarlos en WordPress para usarlos en páginas y publicaciones.

Si bien los conceptos básicos de los bloques están muy bien cubiertos en esa publicación, quiero dar un paso más. Verá, en ese artículo, aprendimos la diferencia entre renderizar bloques en el editor de bloques de WordPress back-end y renderizarlos en el tema front-end. El ejemplo fue un bloque Pullquote simple que mostraba diferentes contenidos y estilos en cada extremo.

Vayamos más allá y veamos cómo usar contenido dinámico en un bloque de WordPress. Más específicamente, obtengamos datos de una API externa y representémoslos en el front-end cuando un bloque en particular se coloque en el Editor de bloques.

Vamos a construir un bloque que genere datos que muestren fútbol (eh, fútbol) clasificaciones extraídas de Api-Fútbol.

¡Hay más de una forma de integrar una API con un bloque de WordPress! Dado que el artículo sobre los conceptos básicos de los bloques ya ha explicado el proceso de creación de un bloque desde cero, vamos a simplificar las cosas usando el @wordpress/create-block paquete para arrancar nuestro trabajo y estructurar nuestro proyecto.

Inicializando nuestro complemento de bloque

Lo primero es lo primero: activemos un nuevo proyecto desde la línea de comandos:

npx @wordpress/create-block football-rankings

Normalmente iniciaría un proyecto como este haciendo los archivos desde cero, ¡pero felicitaciones al equipo de WordPress Core por esta práctica utilidad!

Una vez que el comando ha creado la carpeta del proyecto, técnicamente tenemos un bloque de WordPress totalmente funcional registrado como complemento. Entonces, avancemos y sueltemos la carpeta del proyecto en el wp-content/plugins directorio donde tiene instalado WordPress (probablemente mejor para trabajar en un entorno local), luego inicie sesión en el administrador de WordPress y actívelo desde la pantalla Complementos.

Ahora que nuestro bloque está inicializado, instalado y activado, continúe y abra la carpeta del proyecto desde en /wp-content/plugins/football-rankings. vas a querer cd allí desde la línea de comandos también para asegurarnos de que podamos continuar con el desarrollo.

Estos son los únicos archivos en los que debemos concentrarnos en este momento:

• edit.js
• index.js
• football-rankings.php

Los otros archivos del proyecto son importantes, por supuesto, pero no esenciales en este momento.

Revisando la fuente de la API

Ya sabemos que estamos usando Api-Fútbol que nos llega por cortesía de API rápida. Afortunadamente, RapidAPI tiene un panel que genera automáticamente los scripts necesarios que necesitamos para obtener los datos de la API para la clasificación de la Premier League de 2021.

Si desea echar un vistazo a la estructura JSON, puede generar una representación visual con JSONCrack.

Obtención de datos de la edit.js presentar

Voy a envolver el código RapidAPI dentro de un Reaccionar useEffect() Gancho. con una matriz de dependencia vacía para que se ejecute solo una vez cuando se carga la página. De esta manera, evitamos que WordPress llame a la API cada vez que se vuelve a renderizar el Editor de bloques. Puedes verificar eso usando wp.data.subscribe() si te importa.

Aquí está el código donde estoy importando useEffect(), luego envuélvalo alrededor del fetch() código que proporcionó RapidAPI:

/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/

import { useEffect } from "@wordpress/element";

export default function Edit(props) {
  const { attributes, setAttributes } = props;

  useEffect(() => {
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "Your Rapid API key",
        "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
      },
    };

    fetch("https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39", options)
      .then( ( response ) => response.json() )
      .then( ( response ) => {
        let newData = { ...response };
        setAttributes( { data: newData } );
        console.log( "Attributes", attributes );
      })
      .catch((err) => console.error(err));
}, []);

  return (
    

      { __( "Standings loaded on the front end", "external-api-gutenberg" ) }
    
  );
}

Fíjate que he dejado el return funcionan prácticamente intactos, pero han incluido una nota que confirma que la clasificación de fútbol se representa en la parte delantera. Una vez más, en este artículo solo nos vamos a centrar en la interfaz; también podríamos representar los datos en el Editor de bloques, pero lo dejaremos para otro artículo para mantener las cosas enfocadas.

Almacenamiento de datos API en WordPress

Ahora que estamos obteniendo datos, necesitamos almacenarlos en algún lugar de WordPress. Aquí es donde el attributes.data objeto viene muy bien. estamos definiendo la data.type como una object ya que los datos se obtienen y se formatean como JSON. Asegúrese de que no tiene ningún otro tipo o WordPress no guardará los datos, ni arrojará ningún error para que lo depure.

Definimos todo esto en nuestro index.js archivo:

registerBlockType( metadata.name, {
  edit: Edit,
  attributes: {
    data: {
      type: "object",
    },
  },
  save,
} );

Bien, ahora WordPress sabe que los datos de RapidAPI que estamos obteniendo son un objeto. Si abrimos un nuevo borrador de publicación en el Editor de bloques de WordPress y guardamos la publicación, los datos ahora se almacenan en la base de datos. De hecho, si podemos verlo en el wp_posts.post_content campo si abrimos la base de datos del sitio en phpMyAdmin, Sequel Pro, Adminer, o cualquier herramienta que utilice.

Salida de datos JSON en el front-end

Hay varias formas de generar los datos en el front-end. La forma en que les voy a mostrar toma los atributos que están almacenados en la base de datos y los pasa como un parámetro a través del render_callback funcionar en nuestro football-rankings.php archivo.

Me gusta mantener una separación de preocupaciones, así que la forma en que hago esto es agregar dos archivos nuevos a los complementos de bloque build carpeta: frontend.js y frontend.css (puedes crear un frontend.scss presentar en el src directorio que compiló a CSS en el build directorio). De esta manera, los códigos de back-end y front-end están separados y el football-rankings.php El archivo es un poco más fácil de leer.

/explicación Volviendo a la introducción al desarrollo de bloques de WordPress, hay editor.css y style.css archivos para back-end y estilos compartidos entre el front-end y el back-end, respectivamente. Añadiendo frontend.scss (que compila a frontend.css, puedo aislar estilos que solo están destinados al front-end.

Antes de preocuparnos por esos nuevos archivos, así es como los llamamos football-rankings.php:

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function create_block_football_rankings_block_init() {
  register_block_type( __DIR__ . '/build', array(
    'render_callback' => 'render_frontend'
  ));
}
add_action( 'init', 'create_block_football_rankings_block_init' );

function render_frontend($attributes) {
  if( !is_admin() ) {
    wp_enqueue_script( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.js');
    wp_enqueue_style( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.css' ); // HIGHLIGHT 15,16,17,18
  }
  
  ob_start(); ?>

  

    

      
        
      


Rank
Logo
Team name

GP
GW
GD
GL
GF
GA
Pts
Last 5 games

  <?php return ob_get_clean();

}
Ya que estoy usando el render_callback() método para los atributos, voy a manejar la puesta en cola manualmente al igual que el El manual del editor de bloques sugiere. Eso está contenido en el !is_admin() condición, y está poniendo en cola los dos archivos para que evitemos ponerlos en cola mientras usamos la pantalla del editor.
Ahora que tenemos dos archivos nuevos a los que llamamos, debemos asegurarnos de decirles npm para compilarlos. Entonces, haz eso en package.json, En la scripts sección:
"scripts": {
  "build": "wp-scripts build src/index.js src/frontend.js",
  "format": "wp-scripts format",
  "lint:css": "wp-scripts lint-style",
  "lint:js": "wp-scripts lint-js",
  "packages-update": "wp-scripts packages-update",
  "plugin-zip": "wp-scripts plugin-zip",
  "start": "wp-scripts start src/index.js src/frontend.js"
},
Otra forma de incluir los archivos es definiéndolos en el bloque de metadatos contenidos en nuestro block.json archivo, como se ha señalado en la introducción al desarrollo de bloques:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
La única razón por la que voy con el package.json método es porque ya estoy haciendo uso de la render_callback() método.
Representación de los datos JSON
En la parte de renderizado, me estoy concentrando solo en un solo bloque. En términos generales, le gustaría apuntar a varios bloques en la parte delantera. En ese caso, debe hacer uso de document.querySelectorAll() con el ID específico del bloque.
Básicamente voy a esperar a que la ventana se cargue y tome datos para algunos objetos clave de JSON y los aplicaré a algún marcado que los represente en la interfaz. También voy a convertir el attributes datos a un objeto JSON para que sea más fácil leer a través de JavaScript y configurar los detalles de JSON a HTML para elementos como el logotipo de la liga de fútbol, ​​los logotipos del equipo y las estadísticas.
La columna "Últimos 5 partidos" muestra el resultado de los últimos cinco partidos de un equipo. Tengo que modificar manualmente los datos porque los datos de la API están en formato de cadena. Convertirlo en una matriz puede ayudar a usarlo en HTML como un elemento separado para cada uno de los últimos cinco partidos de un equipo.
import "./frontend.scss";

// Wait for the window to load
window.addEventListener( "load", () => {
  // The code output
  const dataEl = document.querySelector( ".data pre" ).innerHTML;
  // The parent rankings element
  const tableEl = document.querySelector( ".league-table" );
  // The table headers
  const tableHeaderEl = document.querySelector( "#league-standings .header" );
  // Parse JSON for the code output
  const dataJSON = JSON.parse( dataEl );
  // Print a little note in the console
  console.log( "Data from the front end", dataJSON );
  
  // All the teams 
  let teams = dataJSON.data.response[ 0 ].league.standings[ 0 ];
  // The league logo
  let leagueLogoURL = dataJSON.data.response[ 0 ].league.logo;
  // Apply the league logo as a background image inline style
  tableHeaderEl.style.backgroundImage = `url( ${ leagueLogoURL } )`;
  
  // Loop through the teams
  teams.forEach( ( team, index ) => {
    // Make a div for each team
    const teamDiv = document.createElement( "div" );
    // Set up the columns for match results
    const { played, win, draw, lose, goals } = team.all;

    // Add a class to the parent rankings element
    teamDiv.classList.add( "team" );
    // Insert the following markup and data in the parent element
    teamDiv.innerHTML = `
      

        ${ index + 1 }
      
      

        
      
      
${ team.team.name }
      

        
${ played }
        
${ win }
        
${ draw }
        
${ lose }
        
${ goals.for }
        
${ goals.against }
        
${ team.points }
      
      

    `;
    
    // Stringify the last five match results for a team
    const form = team.form.split( "" );
    
    // Loop through the match results
    form.forEach( ( result ) => {
      // Make a div for each result
      const resultEl = document.createElement( "div" );
      // Add a class to the div
      resultEl.classList.add( "result" );
      // Evaluate the results
      resultEl.innerText = result;
      // If the result a win
      if ( result === "W" ) {
        resultEl.classList.add( "win" );
      // If the result is a draw
      } else if ( result === "D" ) {
        resultEl.classList.add( "draw" );
      // If the result is a loss
      } else {
        resultEl.classList.add( "lost" );
      }
      // Append the results to the column
      teamDiv.querySelector( ".form-history" ).append( resultEl );
    });

    tableEl.append( teamDiv );
  });
});
En cuanto al estilo, ¡eres libre de hacer lo que quieras! Si desea trabajar con algo, tengo un conjunto completo de estilos que puede usar como punto de partida.
Diseñé cosas en SCSS desde el @wordpress/create-block el paquete lo admite fuera de la caja. Correr npm run start en la línea de comandos para ver los archivos SCSS y compilarlos en CSS al guardar. Como alternativa, puede utilizar npm run build en cada guardado para compilar el SCSS y construir el resto del paquete de complementos.


          Ver SCSS      
body {
  background: linear-gradient(to right, #8f94fb, #4e54c8);
}

.data pre {
  display: none;
}

.header {
  display: grid;
  gap: 1em;
  padding: 10px;
  grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}

.frontend#league-standings {
  width: 900px;
  margin: 60px 0;
  max-width: unset;
  font-size: 16px;

  .header {
    .stats {
      display: flex;
      gap: 15px;

      & > div {
        width: 30px;
      }
    }
  }
}

.league-table {
  background: white;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 1em;

  .position {
    width: 20px;
  }

  .team {
    display: grid;
    gap: 1em;
    padding: 10px 0;
    grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
    align-items: center;
  }

  .team:not(:last-child) {
    border-bottom: 1px solid lightgray;
  }

  .team-logo img {
    width: 30px;
  }

  .stats {
    display: flex;
    gap: 15px;
  }

  .stats > div {
    width: 30px;
    text-align: center;
  }

  .form-history {
    display: flex;
    gap: 5px;
  }

  .form-history > div {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
    font-size: 15px;
  }

  .form-history .win {
    background: #347d39;
    color: white;
  }

  .form-history .draw {
    background: gray;
    color: white;
  }

  .form-history .lost {
    background: lightcoral;
    color: white;
  }
}

¡Aquí está la demostración!
Compruébalo: acabamos de crear un complemento de bloque que obtiene datos y los muestra en la parte frontal de un sitio de WordPress.
Encontramos una API, fetch()editó datos, los guardó en la base de datos de WordPress, los analizó y los aplicó a algunas marcas HTML para mostrarlas en la interfaz. No está mal para un solo tutorial, ¿verdad?
Una vez más, podemos hacer el mismo tipo de cosas para que las clasificaciones se muestren en el Editor de bloques además de la interfaz del tema. Pero es de esperar que mantener esto enfocado en la interfaz le muestre cómo funciona la obtención de datos en un bloque de WordPress y cómo se pueden estructurar y representar los datos para su visualización.