Rendering Data API Eksternal di Blok WordPress di Front End

Ada beberapa tutorial baru yang muncul di sini tentang Trik-CSS untuk bekerja dengan blok WordPress. Salah satu diantara mereka adalah pengantar pengembangan blok WordPress dan ini adalah tempat yang baik untuk mempelajari apa itu blok dan mendaftarkannya di WordPress untuk digunakan di halaman dan posting.

Sementara dasar-dasar blok tercakup dengan baik dalam posting itu, saya ingin mengambil langkah maju. Anda lihat, dalam artikel itu, kami mempelajari perbedaan antara merender blok di Editor Blok WordPress back-end dan merendernya di tema front-end. Contohnya adalah Blok Pullquote sederhana yang menampilkan konten dan gaya berbeda di setiap ujungnya.

Mari kita melangkah lebih jauh dan melihat menggunakan konten dinamis di blok WordPress. Lebih khusus lagi, mari kita ambil data dari API eksternal dan merendernya di ujung depan saat blok tertentu dijatuhkan ke Editor Blok.

Kami akan membuat blok yang mengeluarkan data yang menunjukkan sepak bola (er, sepak bola) peringkat ditarik dari Api-Sepakbola.

Ada lebih dari satu cara untuk mengintegrasikan API dengan blok WordPress! Karena artikel tentang dasar-dasar blok telah membahas proses pembuatan blok dari awal, kami akan menyederhanakannya dengan menggunakan @wordpress/create-block package untuk mem-bootstrap pekerjaan kami dan menyusun proyek kami.

Inisialisasi plugin blok kami

Hal pertama yang pertama: mari kita buat proyek baru dari baris perintah:

npx @wordpress/create-block football-rankings

Saya biasanya akan memulai proyek seperti ini dengan membuat file dari awal, tetapi pujian untuk tim WordPress Core untuk utilitas praktis ini!

Setelah folder proyek dibuat oleh perintah, secara teknis kami memiliki blok WordPress yang berfungsi penuh yang terdaftar sebagai plugin. Jadi, mari kita lanjutkan dan letakkan folder proyek ke dalam wp-content/plugins direktori tempat Anda menginstal WordPress (mungkin yang terbaik untuk bekerja di lingkungan lokal), lalu masuk ke admin WordPress dan aktifkan dari layar Plugin.

Sekarang blok kami diinisialisasi, diinstal, dan diaktifkan, lanjutkan dan buka folder proyek dari di /wp-content/plugins/football-rankings. Anda akan ingin cd sana dari baris perintah juga untuk memastikan kami dapat melanjutkan pengembangan.

Ini adalah satu-satunya file yang perlu kami fokuskan saat ini:

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

File-file lain dalam proyek itu penting, tentu saja, tetapi tidak penting pada saat ini.

Meninjau sumber API

Kami sudah tahu bahwa kami menggunakan Api-Sepakbola yang datang kepada kami dengan hormat API Cepat. Untungnya, RapidAPI memiliki dasbor yang secara otomatis menghasilkan skrip yang diperlukan yang kami perlukan untuk mengambil data API untuk Klasemen Liga Premier 2021.

Jika Anda ingin melihat struktur JSON, Anda dapat membuat representasi visual dengan JSONRetak.

Mengambil data dari edit.js fillet

Saya akan membungkus kode RapidAPI di dalam a Bereaksi useEffect() kait dengan larik dependensi kosong sehingga hanya berjalan sekali saat halaman dimuat. Dengan cara ini, kami mencegah WordPress memanggil API setiap kali Editor Blok merender ulang. Anda dapat memeriksanya menggunakan wp.data.subscribe() jika Anda peduli untuk.

Inilah kode tempat saya mengimpor useEffect(), lalu membungkusnya di sekitar fetch() kode yang disediakan 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" ) }
    
  );
}

Perhatikan bahwa saya telah meninggalkan return fungsi cukup banyak utuh, tetapi telah menyertakan catatan yang menegaskan klasemen sepak bola diberikan di ujung depan. Sekali lagi, kami hanya akan fokus pada bagian depan dalam artikel ini — kami juga dapat merender data di Editor Blok, tetapi kami akan membiarkannya untuk artikel lain agar semuanya tetap fokus.

Menyimpan data API di WordPress

Sekarang setelah kita mengambil data, kita perlu menyimpannya di suatu tempat di WordPress. Di sinilah attributes.data objek berguna. Kami mendefinisikan data.type sebagai object karena data diambil dan diformat sebagai JSON. Pastikan Anda tidak memiliki tipe lain atau WordPress tidak akan menyimpan data, juga tidak menimbulkan kesalahan untuk Anda debug.

Kami mendefinisikan semua ini di kami index.js File:

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

Oke, jadi WordPress sekarang tahu bahwa data RapidAPI yang kita ambil adalah sebuah objek. Jika kita membuka draf posting baru di Editor Blok WordPress dan menyimpan posting, data sekarang disimpan dalam database. Bahkan, jika kita bisa melihatnya di wp_posts.post_content kolom jika kita membuka database situs di phpMyAdmin, Sequel Pro, Adminer, atau alat apa pun yang Anda gunakan.

Mengeluarkan data JSON di ujung depan

Ada beberapa cara untuk menampilkan data di ujung depan. Cara yang akan saya tunjukkan kepada Anda adalah mengambil atribut yang disimpan dalam database dan meneruskannya sebagai parameter melalui render_callback fungsi di kami football-rankings.php file.

Saya suka memisahkan masalah, jadi cara saya melakukannya adalah dengan menambahkan dua file baru ke plugin blok build folder: frontend.js dan frontend.css (Anda dapat membuat frontend.scss file di src direktori yang dikompilasi ke CSS di build direktori). Dengan cara ini, kode back-end dan front-end terpisah dan football-rankings.php file sedikit lebih mudah dibaca.

/explanation Merujuk kembali pada pengenalan pengembangan blok WordPress, ada editor.css dan style.css file untuk back-end dan gaya bersama antara front dan back end, masing-masing. Dengan menambahkan frontend.scss (yang mengkompilasi ke frontend.css, saya dapat mengisolasi gaya yang hanya ditujukan untuk ujung depan.

Sebelum kita khawatir tentang file baru itu, begini cara kita memanggilnya 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();

}
Karena saya menggunakan render_callback() metode untuk atribut, saya akan menangani enqueue secara manual seperti Buku Pegangan Blok Editor menyarankan. Itu terkandung dalam !is_admin() kondisi, dan mengantrekan dua file sehingga kami menghindari mengantrekannya saat menggunakan layar editor.
Sekarang kami memiliki dua file baru yang kami panggil, kami harus memastikan bahwa kami memberi tahu npm untuk mengkompilasi mereka. Jadi, lakukan itu di package.json, Dalam scripts bagian:
"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"
},
Cara lain untuk memasukkan file adalah dengan mendefinisikannya dalam metadata blok yang terdapat dalam block.json file, seperti yang disebutkan dalam pengantar untuk memblokir pengembangan:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Satu-satunya alasan aku pergi dengan package.json metode ini karena saya sudah menggunakan render_callback() Metode.
Merender data JSON
Di bagian rendering, saya hanya berkonsentrasi pada satu blok. Secara umum, Anda ingin menargetkan beberapa blok di ujung depan. Dalam hal ini, Anda perlu memanfaatkan document.querySelectorAll() dengan ID spesifik blok.
Saya pada dasarnya akan menunggu jendela memuat dan mengambil data untuk beberapa objek utama dari JSON dan menerapkannya ke beberapa markup yang membuatnya di ujung depan. Saya juga akan mengonversi attributes data ke objek JSON sehingga lebih mudah untuk membaca JavaScript dan mengatur detail dari JSON ke HTML untuk hal-hal seperti logo liga sepak bola, logo tim, dan statistik.
Kolom “5 pertandingan terakhir” menunjukkan hasil dari lima pertandingan terakhir tim. Saya harus mengubah data secara manual karena data API dalam format string. Mengonversinya menjadi larik dapat membantu memanfaatkannya dalam HTML sebagai elemen terpisah untuk masing-masing dari lima pertandingan terakhir tim.
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 );
  });
});
Sejauh gaya berjalan, Anda bebas melakukan apa pun yang Anda inginkan! Jika Anda ingin sesuatu untuk dikerjakan, saya memiliki set lengkap gaya yang dapat Anda gunakan sebagai titik awal.
Saya menata sesuatu di SCSS sejak @wordpress/create-block paket mendukungnya di luar kotak. Lari npm run start di baris perintah untuk melihat file SCSS dan mengompilasinya ke CSS saat disimpan. Sebagai alternatif, Anda dapat menggunakan npm run build pada setiap penyimpanan untuk mengkompilasi SCSS dan membangun sisa bundel plugin.


          Lihat 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;
  }
}

Berikut demonya!
Lihat itu — kami baru saja membuat plugin blok yang mengambil data dan merendernya di ujung depan situs WordPress.
Kami menemukan API, fetch()-ed data darinya, menyimpannya ke database WordPress, menguraikannya, dan menerapkannya ke beberapa markup HTML untuk ditampilkan di ujung depan. Tidak buruk untuk satu tutorial, bukan?
Sekali lagi, kita dapat melakukan hal yang sama sehingga peringkat ditampilkan di Editor Blok selain ujung depan tema. Tapi semoga dengan tetap fokus di front end menunjukkan cara kerja pengambilan data di blok WordPress, dan bagaimana data dapat disusun dan dirender untuk ditampilkan.