Відтворення зовнішніх даних API у блоках WordPress на передній частині

Перевидано Платоном

читають: 0

Тут з’явилися нові навчальні посібники щодо CSS-Tricks для роботи з блоками WordPress. Один з них це введення в розробку блоків WordPress і гарне місце, щоб дізнатися, що таке блоки, і зареєструвати їх у WordPress для використання на сторінках і публікаціях.

Хоча основи блокування добре висвітлені в цій публікації, я хочу зробити ще один крок вперед. Розумієте, у цій статті ми дізналися різницю між рендерингом блоків у внутрішньому редакторі блоків WordPress і їх рендерингом у інтерфейсній темі. Прикладом був простий блок Pullquote, який рендерив різний вміст і стилі на кожному кінці.

Давайте підемо далі та розглянемо використання динамічний зміст у блоці WordPress. Точніше, давайте отримаємо дані із зовнішнього API та візуалізуємо їх у інтерфейсі, коли певний блок переміщується в редактор блоків.

Ми збираємося створити блок, який виводить дані, що показують футбол (е-е, футбол) рейтинги, отримані з Апі-Футбол.

Це те, заради чого ми разом працюємо.

Існує більше ніж один спосіб інтегрувати API із блоком WordPress! Оскільки в статті про основи блоку вже описано процес створення блоку з нуля, ми збираємося спростити речі, використовуючи @wordpress/create-block пакет для завантаження нашої роботи та структурування нашого проекту.

Ініціалізація нашого плагіна блоку

Перш за все: давайте запустимо новий проект із командного рядка:

npx @wordpress/create-block football-rankings

Зазвичай я б розпочав такий проект, створивши файли з нуля, але слава команді WordPress Core за цю зручну утиліту!

Після того, як папка проекту була створена командою, ми технічно маємо повнофункціональний блок WordPress, зареєстрований як плагін. Отже, давайте перемістимо папку проекту в wp-content/plugins каталог, де встановлено WordPress (імовірно, найкраще працювати в локальному середовищі), а потім увійдіть в адміністратор WordPress і активуйте його на екрані плагінів.

Відтворення зовнішніх даних API у блоках WordPress на передньому плані PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai. — Відтворення зовнішніх даних API у блоках WordPress на передньому плані

Тепер, коли наш блок ініціалізовано, встановлено та активовано, відкрийте папку проекту за адресою /wp-content/plugins/football-rankings. Ви захочете cd також з командного рядка, щоб переконатися, що ми можемо продовжувати розробку.

Це єдині файли, на яких нам зараз потрібно зосередитися:

edit.js
index.js
football-rankings.php

Інші файли в проекті, звичайно, важливі, але на даний момент несуттєві.

Огляд джерела API

Ми вже знаємо, що ми використовуємо Апі-Футбол яка надходить до нас люб'язно RapidAPI. На щастя, RapidAPI має інформаційну панель, яка автоматично генерує необхідні сценарії, необхідні для отримання даних API для турнірної таблиці Прем’єр-ліги 2021.

Інтерфейс інформаційної панелі з трьома стовпцями, що показують код і дані з джерела API. — Інформаційна панель RapidAPI

Якщо ви хочете поглянути на структуру JSON, ви можете створити візуальне представлення за допомогою JSONCrack.

Отримання даних із `edit.js` файл

Я збираюся загорнути код RapidAPI в a Реагувати useEffect() гачок з порожнім масивом залежностей, щоб він запускався лише один раз під час завантаження сторінки. Таким чином ми запобігаємо WordPress виклику API кожного разу, коли редактор блоків повторно відтворює. Ви можете перевірити це за допомогою wp.data.subscribe() якщо ви дбаєте про це.

Ось код, куди я імпортую useEffect(), потім оберніть його навколо fetch() код, наданий 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" ) }
    
  );
}

Зверніть увагу, що я залишив return функція майже не змінена, але включено примітку, яка підтверджує, що футбольні турнірні таблиці відображаються на передній частині. Знову ж таки, у цій статті ми зосереджуватимемося лише на інтерфейсі — ми також можемо відобразити дані в редакторі блоків, але залишимо це для іншої статті, щоб зосередити увагу.

Зберігання даних API в WordPress

Тепер, коли ми отримуємо дані, нам потрібно зберегти їх десь у WordPress. Ось де attributes.data предмет стане в нагоді. Ми визначаємо data.type як object оскільки дані витягуються та форматуються як JSON. Переконайтеся, що у вас немає жодного іншого типу, інакше WordPress не зберігатиме дані та не видаватиме жодної помилки, яку ви можете налагодити.

Все це ми визначаємо в нашому index.js Файл:

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

Отже, тепер WordPress знає, що дані RapidAPI, які ми отримуємо, є об’єктом. Якщо ми відкриємо чернетку нової публікації в редакторі блоків WordPress і збережемо публікацію, дані тепер зберігаються в базі даних. Фактично, якщо ми можемо побачити це в wp_posts.post_content якщо ми відкриваємо базу даних сайту в phpMyAdmin, Sequel Pro, Adminer або будь-якому іншому інструменті, який ви використовуєте.

Показ великого рядка вихідних даних JSON у таблиці бази даних. — Вихід API зберігається в базі даних WordPress

Виведення даних JSON у інтерфейс

Є кілька способів виведення даних на інтерфейс. Спосіб, який я вам покажу, використовує атрибути, які зберігаються в базі даних, і передає їх як параметр через render_callback функції в нашому football-rankings.php файлу.

Мені подобається розділяти проблеми, тому я роблю це, додаючи два нові файли до блоку плагіна build папка: frontend.js та frontend.css (ви можете створити a frontend.scss файл у файлі src каталог, який скомпільовано до CSS у build каталог). Таким чином, внутрішній і зовнішній коди розділені, а football-rankings.php файл трохи легше читати.

/explanation Повертаючись до вступу до розробки блоків WordPress, є editor.css та style.css файли для внутрішньої частини та спільні стилі між передньою та серверною частинами відповідно. Додаючи frontend.scss (який компілюється до frontend.css, я можу виділити стилі, призначені лише для інтерфейсу.

Перш ніж турбуватися про ці нові файли, ось як ми їх викликаємо 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();

}
Оскільки я використовую render_callback() метод для атрибутів, я збираюся обробити чергу вручну так само, як Підручник з редактора блоків пропонує. Це міститься в !is_admin() і ставить два файли в чергу, щоб ми не ставили їх у чергу під час використання екрана редактора.
Тепер, коли у нас є два нових файли, які ми викликаємо, ми повинні переконатися, що ми повідомляємо npm їх скласти. Отже, зробіть це в package.json, В scripts розділ:
"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"
},
Інший спосіб включити файли — це визначити їх у метаданих блоку, які містяться в нашому block.json файл, як зазначалося у вступі до розробки блоків:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
Єдина причина, чому я йду з package.json метод тому, що я вже використовую render_callback() метод.
Візуалізація даних JSON
У частині візуалізації я зосереджуюсь лише на одному блоці. Загалом, ви хотіли б націлити кілька блоків на інтерфейсі. У такому випадку вам потрібно скористатися document.querySelectorAll() з конкретним ідентифікатором блоку.
По суті, я буду чекати, поки вікно завантажить і захопить дані для кількох ключових об’єктів із JSON і застосує їх до певної розмітки, яка відтворює їх у інтерфейсі. Я також збираюся конвертувати attributes дані в об’єкт JSON, щоб було легше читати JavaScript і встановлювати деталі з JSON у HTML для таких речей, як логотип футбольної ліги, логотипи команд і статистика.
Колонка «Останні 5 ігор» показує результати останніх п'яти матчів команди. Мені потрібно вручну змінити дані для нього, оскільки дані API мають рядковий формат. Перетворення його на масив може допомогти використовувати його в HTML як окремий елемент для кожного з останніх п’яти матчів команди.
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 );
  });
});
Що стосується стилю, ви вільні робити все, що забажаєте! Якщо вам потрібно щось для роботи, у мене є повний набір стилів, які ви можете використовувати як відправну точку.
Я стилізував речі в SCSS з того часу @wordpress/create-block пакет підтримує його з коробки. бігти npm run start у командному рядку, щоб переглянути файли SCSS і скомпілювати їх у CSS під час збереження. Крім того, ви можете використовувати npm run build під час кожного збереження, щоб скомпілювати SCSS і створити решту набору плагінів.


          Переглянути 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;
  }
}

Ось демо!
Перевірте це — ми щойно створили плагін блоку, який отримує дані та відображає їх у передній частині сайту WordPress.
Ми знайшли API, fetch()видалив з нього дані, зберіг їх у базі даних WordPress, проаналізував і застосував до деякої розмітки HTML для відображення на інтерфейсі. Непогано для одного підручника, правда?
Знову ж таки, ми можемо зробити те ж саме, щоб рейтинги відтворювалися в редакторі блоків на додаток до інтерфейсу теми. Але, сподіваюся, зосередження уваги на інтерфейсі покаже вам, як працює вибірка даних у блоці WordPress і як дані можна структурувати та відтворювати для відображення.