ارائه داده های API خارجی در بلوک های وردپرس در فرانت اند

در اینجا چند آموزش جدید در مورد CSS-Tricks برای کار با بلوک های وردپرس ارائه شده است. یکی از آنها مقدمه ای برای توسعه بلوک وردپرس است و مکان خوبی برای یادگیری بلوک ها و ثبت آنها در وردپرس برای استفاده در صفحات و پست ها است.

در حالی که اصول بلوک به خوبی در آن پست پوشش داده شده است، من می خواهم آن را یک گام دیگر به جلو بردارم. ببینید، در آن مقاله، تفاوت بین رندر کردن بلوک‌ها در ویرایشگر بلاک وردپرس بک‌اند و رندر کردن آن‌ها در قالب جلویی را یاد گرفتیم. مثال یک Pullquote Block ساده بود که محتوا و سبک های متفاوتی را در هر انتهای آن ارائه می کرد.

بیایید جلوتر برویم و به استفاده از آن نگاه کنیم محتوای پویا در یک بلوک وردپرس به طور خاص، بیایید داده‌ها را از یک API خارجی واکشی کنیم و هنگامی که یک بلوک خاص در ویرایشگر Block انداخته می‌شود، آن‌ها را در قسمت جلویی نمایش دهیم.

ما می‌خواهیم بلوکی بسازیم که داده‌هایی را خروجی می‌دهد که فوتبال را نشان می‌دهد (به‌عنوان مثال، فوتبال) رتبه بندی از Api-Football.

بیش از یک راه برای ادغام یک API با یک بلوک وردپرس وجود دارد! از آنجایی که مقاله مبانی بلوک قبلاً فرآیند ساخت یک بلوک را از ابتدا طی کرده است، ما می خواهیم کارها را با استفاده از @wordpress/create-block بسته ای برای بوت استرپ کار و ساختار پروژه ما.

راه اندازی پلاگین بلوک ما

اول از همه: بیایید یک پروژه جدید را از خط فرمان بچرخانیم:

npx @wordpress/create-block football-rankings

من معمولاً پروژه ای مانند این را با ساختن فایل ها از ابتدا شروع می کنم، اما به تیم هسته وردپرس برای این ابزار مفید قدردانی می کنم!

هنگامی که پوشه پروژه توسط دستور ایجاد شد، از نظر فنی یک بلوک وردپرس کاملاً کاربردی داریم که به عنوان یک افزونه ثبت شده است. بنابراین، بیایید جلو برویم و پوشه پروژه را در آن رها کنیم wp-content/plugins دایرکتوری که وردپرس را در آن نصب کرده اید (احتمالا بهتر است در یک محیط محلی کار کنید)، سپس وارد مدیر وردپرس شوید و آن را از صفحه افزونه ها فعال کنید.

اکنون که بلوک ما مقداردهی اولیه، نصب و فعال شده است، ادامه دهید و پوشه پروژه را از آدرس زیر باز کنید. /wp-content/plugins/football-rankings. شما قصد دارید که بخواهید cd از خط فرمان نیز وجود دارد تا مطمئن شویم که می توانیم توسعه را ادامه دهیم.

اینها تنها فایل هایی هستند که در حال حاضر باید روی آنها تمرکز کنیم:

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

البته سایر فایل‌های پروژه مهم هستند، اما در این مرحله ضروری نیستند.

بررسی منبع API

ما قبلاً می دانیم که از آن استفاده می کنیم Api-Football که با حسن نیت به ما می رسد RapidAPI. خوشبختانه، RapidAPI دارای داشبوردی است که به طور خودکار اسکریپت های مورد نیاز ما برای واکشی داده های API برای جدول رده بندی لیگ برتر 2021 را تولید می کند.

اگر می‌خواهید نگاهی به ساختار JSON بیندازید، می‌توانید نمایش بصری را با آن ایجاد کنید JSONCrack.

واکشی داده ها از edit.js پرونده

من می‌خواهم کد RapidAPI را داخل یک بپیچم واکنش نشان می دهند useEffect() قلاب با یک آرایه وابستگی خالی به طوری که وقتی صفحه بارگذاری می شود فقط یک بار اجرا شود. به این ترتیب، ما از فراخوانی وردپرس با API هر بار که Block Editor دوباره ارائه می‌شود، جلوگیری می‌کنیم. می توانید با استفاده از آن بررسی کنید 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 در وردپرس

اکنون که در حال واکشی داده‌ها هستیم، باید آن‌ها را در جایی در وردپرس ذخیره کنیم. اینجاست که attributes.data شی به کار می آید ما داریم تعریف می کنیم data.type عنوان object از آنجایی که داده ها به صورت JSON واکشی و فرمت می شوند. مطمئن شوید که نوع دیگری ندارید وگرنه وردپرس داده‌ها را ذخیره نمی‌کند و هیچ خطایی برای اشکال‌زدایی شما ایجاد نمی‌کند.

ما همه اینها را در خودمان تعریف می کنیم index.js فایل:

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

خوب، پس وردپرس اکنون می داند که داده RapidAPI که ما واکشی می کنیم یک شی است. اگر یک پیش نویس پست جدید را در ویرایشگر بلاک وردپرس باز کنیم و پست را ذخیره کنیم، داده ها اکنون در پایگاه داده ذخیره می شوند. در واقع، اگر بتوانیم آن را در wp_posts.post_content اگر پایگاه داده سایت را در phpMyAdmin، Sequel Pro، Adminer یا هر ابزار دیگری که استفاده می کنید باز کنیم، این فیلد است.

خروجی داده های JSON در قسمت جلویی

راه های مختلفی برای خروجی داده ها در قسمت جلو وجود دارد. راهی که من به شما نشان خواهم داد، ویژگی های ذخیره شده در پایگاه داده را می گیرد و آنها را به عنوان یک پارامتر از طریق render_callback عملکرد در ما football-rankings.php فایل.

من دوست دارم نگرانی ها را از هم جدا کنم، بنابراین نحوه انجام این کار این است که دو فایل جدید را به پلاگین بلوک اضافه کنم. build پوشه: frontend.js و frontend.css (شما می توانید یک frontend.scss فایل در src دایرکتوری که در CSS کامپایل شده است build فهرست راهنما). به این ترتیب کدهای Back-end و Front-end از هم جدا می شوند و football-rankings.php خواندن فایل کمی ساده تر است.

/explanation با اشاره به مقدمه توسعه بلوک وردپرس، وجود دارد 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() روش برای ویژگی‌ها، من می‌خواهم به صورت دستی صف را درست مانند حالت کنترل کنم Block Editor Handbook پیشنهاد می کند. که در موجود است !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 به طوری که خواندن از طریق جاوا اسکریپت و تنظیم جزئیات از 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;
  }
}

در اینجا نسخه ی نمایشی است!
این را بررسی کنید – ما فقط یک پلاگین بلوکی ساختیم که داده ها را واکشی می کند و آن را در قسمت جلویی یک سایت وردپرس ارائه می کند.
ما یک API پیدا کردیم، fetch()داده‌ها را از آن ویرایش کرد، آن‌ها را در پایگاه داده وردپرس ذخیره کرد، آن‌ها را تجزیه کرد و روی برخی نشانه‌گذاری‌های HTML اعمال کرد تا در قسمت جلویی نمایش داده شود. برای یک آموزش بد نیست، درست است؟
باز هم، می‌توانیم همین کار را انجام دهیم تا رتبه‌بندی‌ها علاوه بر قسمت جلویی موضوع، در ویرایشگر Block نیز ارائه شوند. اما امیدواریم تمرکز بر روی قسمت جلویی به شما نشان دهد که چگونه واکشی داده ها در یک بلوک وردپرس کار می کند و چگونه داده ها را می توان ساختاربندی و برای نمایش ارائه کرد.