فرنٹ اینڈ پر ورڈپریس بلاکس میں بیرونی API ڈیٹا پیش کرنا

ورڈپریس بلاکس کے ساتھ کام کرنے کے لیے یہاں CSS-Tricks پر کچھ نئے ٹیوٹوریلز آ رہے ہیں۔ ان میں سے ایک ورڈپریس بلاک ڈویلپمنٹ کا ایک تعارف ہے اور یہ جاننے کے لیے کہ بلاکس کیا ہیں اور انھیں صفحات اور پوسٹس میں استعمال کرنے کے لیے ورڈپریس میں رجسٹر کرنے کے لیے ایک اچھی جگہ ہے۔

اگرچہ اس پوسٹ میں بلاک کی بنیادی باتیں اچھی طرح سے شامل ہیں، میں اسے ایک اور قدم آگے بڑھانا چاہتا ہوں۔ آپ نے دیکھا، اس مضمون میں، ہم نے بیک اینڈ ورڈپریس بلاک ایڈیٹر میں بلاکس کو پیش کرنے اور انہیں فرنٹ اینڈ تھیم پر پیش کرنے کے درمیان فرق سیکھا۔ مثال ایک سادہ پل کوٹ بلاک تھا جس نے ہر سرے پر مختلف مواد اور طرزیں پیش کیں۔

آئیے مزید آگے بڑھیں اور استعمال کرتے ہوئے دیکھیں متحرک مواد ایک ورڈپریس بلاک میں۔ مزید خاص طور پر، آئیے ایک بیرونی API سے ڈیٹا حاصل کرتے ہیں اور اسے سامنے والے سرے پر رینڈر کرتے ہیں جب ایک خاص بلاک بلاک ایڈیٹر میں ڈالا جاتا ہے۔

ہم ایک بلاک بنانے جا رہے ہیں جو ڈیٹا کو آؤٹ پٹ کرتا ہے جو فٹ بال کو دکھاتا ہے (ایر، فٹ بال) درجہ بندی سے نکالا گیا۔ اپی فٹ بال.

ورڈپریس بلاک کے ساتھ API کو ضم کرنے کے ایک سے زیادہ طریقے ہیں! چونکہ بلاک کی بنیادی باتوں پر مضمون پہلے ہی شروع سے بلاک بنانے کے عمل سے گزر چکا ہے، اس لیے ہم اس کا استعمال کرکے چیزوں کو آسان بنانے جا رہے ہیں۔ @wordpress/create-block ہمارے کام کو بوٹسٹریپ کرنے اور ہمارے پروجیکٹ کی ساخت کے لیے پیکج۔

ہمارے بلاک پلگ ان کو شروع کر رہا ہے۔

سب سے پہلے چیزیں: آئیے کمانڈ لائن سے ایک نئے پروجیکٹ کو گھمائیں:

npx @wordpress/create-block football-rankings

میں عام طور پر شروع سے فائلوں کو بنا کر اس طرح کے پروجیکٹ کو شروع کروں گا، لیکن اس آسان افادیت کے لئے ورڈپریس کور ٹیم کو خراج تحسین پیش کرتا ہوں!

کمانڈ کے ذریعہ پروجیکٹ فولڈر بنانے کے بعد، ہمارے پاس تکنیکی طور پر ایک مکمل طور پر کام کرنے والا ورڈپریس بلاک پلگ ان کے طور پر رجسٹر ہوتا ہے۔ تو، آئیے آگے بڑھیں اور پروجیکٹ فولڈر کو میں ڈالیں۔ wp-content/plugins ڈائریکٹری جہاں آپ نے ورڈپریس انسٹال کیا ہے (ممکنہ طور پر مقامی ماحول میں کام کرنا بہتر ہے)، پھر ورڈپریس ایڈمن میں لاگ ان کریں اور اسے پلگ ان اسکرین سے ایکٹیویٹ کریں۔

اب جب کہ ہمارا بلاک شروع، انسٹال اور ایکٹیویٹ ہوچکا ہے، آگے بڑھیں اور پراجیکٹ فولڈر کو at سے کھولیں۔ /wp-content/plugins/football-rankings. آپ چاہیں گے۔ cd وہاں کمانڈ لائن کے ساتھ ساتھ یہ یقینی بنانے کے لیے کہ ہم ترقی جاری رکھ سکتے ہیں۔

یہ صرف فائلیں ہیں جن پر ہمیں اس وقت توجہ مرکوز کرنے کی ضرورت ہے:

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

پروجیکٹ کی دیگر فائلیں یقیناً اہم ہیں، لیکن اس مقام پر غیر ضروری ہیں۔

API ماخذ کا جائزہ لینا

ہم پہلے ہی جانتے ہیں کہ ہم استعمال کر رہے ہیں۔ اپی فٹ بال جو ہمارے پاس بشکریہ آتا ہے۔ RapidAPI. خوش قسمتی سے، RapidAPI کے پاس ایک ڈیش بورڈ ہے جو خود بخود مطلوبہ اسکرپٹس تیار کرتا ہے جس کی ہمیں 2021 پریمیئر لیگ سٹینڈنگز کے لیے API ڈیٹا حاصل کرنے کی ضرورت ہے۔

اگر آپ JSON ڈھانچے پر ایک نظر ڈالنا چاہتے ہیں، تو آپ اس کے ساتھ بصری نمائندگی پیدا کر سکتے ہیں۔ JSONCrack.

سے ڈیٹا لا رہا ہے۔ edit.js سنچکا

میں RapidAPI کوڈ کو a کے اندر لپیٹنے جا رہا ہوں۔ جواب دیں useEffect() ہک ایک خالی انحصاری صف کے ساتھ تاکہ صفحہ لوڈ ہونے پر یہ صرف ایک بار چلتا ہے۔ اس طرح، ہم ورڈپریس کو ہر بار جب بلاک ایڈیٹر دوبارہ پیش کرتا ہے تو 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 ڈیٹا ذخیرہ کرنا

اب جب کہ ہم ڈیٹا حاصل کر رہے ہیں، ہمیں اسے ورڈپریس میں کہیں ذخیرہ کرنے کی ضرورت ہے۔ یہ ہے جہاں 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 (آپ تشکیل دے سکتے ہیں a frontend.scss میں دائر src ڈائریکٹری جو سی ایس ایس میں مرتب کی گئی۔ build ڈائریکٹری)۔ اس طرح، بیک اینڈ اور فرنٹ اینڈ کوڈ الگ الگ اور 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() صفات کے لئے طریقہ، میں ان کیو کو دستی طور پر ہینڈل کرنے جا رہا ہوں بالکل اسی طرح بلاک ایڈیٹر ہینڈ بک تجویز کرتا ہے۔. جو کہ میں موجود ہے۔ !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() بلاک کی مخصوص ID کے ساتھ۔
میں بنیادی طور پر ونڈو کے لوڈ ہونے اور 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 فائلوں کو دیکھنے کے لیے کمانڈ لائن میں اور سیو پر سی ایس ایس میں مرتب کریں۔ متبادل طور پر، آپ استعمال کر سکتے ہیں 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()اس سے -ed ڈیٹا، اسے ورڈپریس ڈیٹا بیس میں محفوظ کیا، اسے پارس کیا، اور سامنے والے سرے پر ڈسپلے کرنے کے لیے اسے کچھ HTML مارک اپ پر لاگو کیا۔ ایک ٹیوٹوریل کے لیے برا نہیں ہے، ٹھیک ہے؟
ایک بار پھر، ہم اسی قسم کا کام کر سکتے ہیں تاکہ رینکنگ تھیم کے سامنے والے سرے کے علاوہ بلاک ایڈیٹر میں پیش کی جائے۔ لیکن امید ہے کہ اس کو فرنٹ اینڈ پر مرکوز رکھنا آپ کو دکھاتا ہے کہ ورڈپریس بلاک میں ڈیٹا کی بازیافت کیسے کام کرتی ہے، اور کس طرح ڈیٹا کو ڈسپلے کے لیے ڈھانچہ اور پیش کیا جا سکتا ہے۔