Rendering External API Data in WordPress Blocks on the Front End

This CSS-Tricks tutorial builds on previous posts about WordPress blocks, focusing on fetching and displaying dynamic content from an external API on the front end. While earlier tutorials covered block basics and back-end rendering, this one delves into using external data within a custom block.

This is part of a series covering various aspects of integrating external API data into custom WordPress blocks:

Working With External APIs in WordPress Blocks

• Rendering Data on the Front End (current)
• Rendering Data on the Back End (future)
• Creating a Custom Settings UI (future)
• Saving Custom Block Settings (future)
• Working With Live API Data (future)

We'll create a block displaying soccer (football) league rankings from Api-Football, leveraging the @wordpress/create-block package for project setup.

Setting Up the Block Plugin

We'll generate a new project using the command line:

npx @wordpress/create-block football-rankings

After placing the generated folder in your WordPress wp-content/plugins directory and activating it, we'll focus on these key files:

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

API Data Integration

We'll use Api-Football (via RapidAPI). RapidAPI provides the necessary scripts for fetching data; JSONCrack can help visualize the JSON structure.

Fetching Data in edit.js

The useEffect hook in edit.js fetches data only once on page load, preventing unnecessary API calls during Block Editor re-renders:

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

export default function Edit(props) {
  // ... (rest of the code remains largely unchanged)
  useEffect(() => {
    // ... (fetch code using RapidAPI key and host)
    .then( ( response ) => response.json() )
    .then( ( response ) => {
      setAttributes( { data: response } ); //Simplified data assignment
    })
    .catch((err) => console.error(err));
  }, []);
  // ... (rest of the code remains largely unchanged)
}

Data Storage in WordPress

The index.js file defines the data attribute to store the fetched JSON:

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

This ensures WordPress saves the API data in the database.

Front-End Output

We'll create frontend.js and frontend.css (or frontend.scss) to handle front-end rendering and styling, separated from back-end logic. football-rankings.php enqueues these assets using wp_enqueue_script and wp_enqueue_style only when not in the admin context (!is_admin()). The render_callback function in football-rankings.php passes the attributes to the front-end JavaScript.

// football-rankings.php (excerpt)
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' );
  }
  // ... (rest of the code)
}

The frontend.js file (simplified):

npx @wordpress/create-block football-rankings

The styling in frontend.scss or frontend.css is responsible for the visual presentation of the data. The package.json file's scripts section should be updated to include the frontend files in the build process.

A complete demo and detailed styling are available in the original article. This revised response provides a concise overview of the key steps and code snippets.

The above is the detailed content of Rendering External API Data in WordPress Blocks on the Front End. For more information, please follow other related articles on the PHP Chinese website!