फ्रंट एंड पर वर्डप्रेस ब्लॉक में बाहरी एपीआई डेटा प्रस्तुत करना

वर्डप्रेस ब्लॉक के साथ काम करने के लिए सीएसएस-ट्रिक्स पर कुछ नए ट्यूटोरियल यहां आ रहे हैं। उनमें से एक वर्डप्रेस ब्लॉक डेवलपमेंट के लिए एक परिचय है और यह सीखने के लिए एक अच्छी जगह है कि कौन से ब्लॉक हैं और उन्हें पेज और पोस्ट में उपयोग के लिए वर्डप्रेस में पंजीकृत करना है।

जबकि उस पोस्ट में ब्लॉक बेसिक्स को अच्छी तरह से कवर किया गया है, मैं इसे एक और कदम आगे ले जाना चाहता हूं। आप देखिए, उस लेख में, हमने बैक-एंड वर्डप्रेस ब्लॉक एडिटर में ब्लॉक रेंडर करने और उन्हें फ्रंट-एंड थीम पर रेंडर करने के बीच का अंतर सीखा। उदाहरण एक साधारण पुलक्वॉट ब्लॉक था जिसने प्रत्येक छोर पर विभिन्न सामग्री और शैलियों को प्रस्तुत किया।

आइए आगे बढ़ते हैं और उपयोग करते हुए देखें गतिशील सामग्री एक वर्डप्रेस ब्लॉक में। अधिक विशेष रूप से, आइए बाहरी एपीआई से डेटा प्राप्त करें और जब किसी विशेष ब्लॉक को ब्लॉक संपादक में छोड़ दिया जाए तो इसे सामने के छोर पर प्रस्तुत करें।

हम एक ऐसा ब्लॉक बनाने जा रहे हैं जो सॉकर दिखाने वाले डेटा को आउटपुट करता है (एर, फ़ुटबॉल) रैंकिंग से खींची गई एपी-फुटबॉल.

वर्डप्रेस ब्लॉक के साथ एपीआई को एकीकृत करने के एक से अधिक तरीके हैं! चूंकि ब्लॉक बेसिक्स पर लेख पहले ही शुरू से ब्लॉक बनाने की प्रक्रिया से गुजर चुका है, इसलिए हम इसका उपयोग करके चीजों को सरल बनाने जा रहे हैं। @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

परियोजना में अन्य फाइलें निश्चित रूप से महत्वपूर्ण हैं, लेकिन इस समय अनिवार्य नहीं हैं।

एपीआई स्रोत की समीक्षा करना

हम पहले से ही जानते हैं कि हम उपयोग कर रहे हैं एपी-फुटबॉल जो हमारे सौजन्य से आता है रैपिडएपीआई. सौभाग्य से, रैपिडएपीआई के पास एक डैशबोर्ड है जो 2021 प्रीमियर लीग स्टैंडिंग के लिए एपीआई डेटा लाने के लिए आवश्यक आवश्यक स्क्रिप्ट स्वचालित रूप से उत्पन्न करता है।

यदि आप JSON संरचना पर एक नज़र डालना चाहते हैं, तो आप दृश्य प्रतिनिधित्व उत्पन्न कर सकते हैं जेएसओएनक्रैक.

से डेटा प्राप्त किया जा रहा है edit.js पट्टिका

मैं रैपिडएपीआई कोड को एक के अंदर लपेटने जा रहा हूं प्रतिक्रिया useEffect() हुक एक खाली निर्भरता सरणी के साथ ताकि यह पृष्ठ लोड होने पर केवल एक बार चले। इस तरह, हम हर बार ब्लॉक एडिटर द्वारा पुन: प्रस्तुत करने पर वर्डप्रेस को एपीआई को कॉल करने से रोकते हैं। आप इसका उपयोग करके देख सकते हैं wp.data.subscribe() यदि आप परवाह करते हैं।

यहाँ वह कोड है जहाँ मैं आयात कर रहा हूँ useEffect(), फिर इसे चारों ओर लपेटकर fetch() कोड जो रैपिडएपीआई प्रदान करता है:

/**
* 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 कार्य काफी हद तक बरकरार है, लेकिन इसमें एक नोट शामिल है जो पुष्टि करता है कि सामने के छोर पर फुटबॉल स्टैंडिंग प्रदान की गई है। फिर से, हम इस लेख में केवल सामने के छोर पर ध्यान केंद्रित करने जा रहे हैं - हम डेटा को ब्लॉक संपादक में भी प्रस्तुत कर सकते हैं, लेकिन हम चीजों को केंद्रित रखने के लिए इसे किसी अन्य लेख पर छोड़ देंगे।

WordPress में API डेटा स्टोर करना

अब जब हम डेटा ला रहे हैं, तो हमें इसे वर्डप्रेस में कहीं स्टोर करना होगा। यह वह जगह है जहाँ attributes.data वस्तु काम आती है। हम परिभाषित कर रहे हैं data.type एक के रूप में object चूंकि डेटा प्राप्त किया जाता है और JSON के रूप में स्वरूपित किया जाता है। सुनिश्चित करें कि आपके पास कोई अन्य प्रकार नहीं है अन्यथा वर्डप्रेस डेटा को सहेज नहीं पाएगा, और न ही यह आपको डीबग करने में कोई त्रुटि देता है।

यह सब हम अपने में परिभाषित करते हैं index.js फ़ाइल:

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

ठीक है, तो वर्डप्रेस अब जानता है कि हम जो रैपिडएपीआई डेटा ला रहे हैं वह एक वस्तु है। अगर हम वर्डप्रेस ब्लॉक एडिटर में एक नया पोस्ट ड्राफ्ट खोलते हैं और पोस्ट को सेव करते हैं, तो डेटा अब डेटाबेस में स्टोर हो जाता है। वास्तव में, अगर हम इसे में देख सकते हैं wp_posts.post_content यदि हम साइट के डेटाबेस को phpMyAdmin, Sequel Pro, Admin, या आपके द्वारा उपयोग किए जाने वाले किसी भी टूल में खोलते हैं।

JSON डेटा को फ्रंट एंड में आउटपुट करना

फ्रंट एंड पर डेटा को आउटपुट करने के कई तरीके हैं। जिस तरह से मैं आपको दिखाने जा रहा हूं वह डेटाबेस में संग्रहीत विशेषताओं को लेता है और उन्हें पैरामीटर के रूप में पास करता है render_callback हमारे में समारोह football-rankings.php फ़ाइल.

मुझे चिंताओं को अलग रखना पसंद है, तो मैं यह कैसे करता हूं कि ब्लॉक प्लगइन में दो नई फाइलें जोड़ना है build फ़ोल्डर: frontend.js और frontend.css (आप एक बना सकते हैं frontend.scss में दायर src निर्देशिका जो सीएसएस में संकलित है build निर्देशिका)। इस तरह, बैक-एंड और फ्रंट-एंड कोड अलग-अलग होते हैं और football-rankings.php फ़ाइल को पढ़ना थोड़ा आसान है।

/स्पष्टीकरण वर्डप्रेस ब्लॉक विकास के परिचय के संदर्भ में, वहाँ हैं 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() विशेषताओं के लिए विधि, मैं enqueue को मैन्युअल रूप से संभालने जा रहा हूँ जैसे ब्लॉक संपादक हैंडबुक सुझाव देती है. यह में निहित है !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() ब्लॉक की विशिष्ट आईडी के साथ।
मैं मूल रूप से जेएसओएन से कुछ प्रमुख वस्तुओं के लिए डेटा लोड और पकड़ने के लिए खिड़की की प्रतीक्षा करने जा रहा हूं और उन्हें कुछ मार्कअप पर लागू करता हूं जो उन्हें सामने के अंत में प्रस्तुत करता है। मैं भी परिवर्तित करने जा रहा हूँ attributes JSON ऑब्जेक्ट के लिए डेटा ताकि जावास्क्रिप्ट के माध्यम से पढ़ना आसान हो और फ़ुटबॉल लीग लोगो, टीम लोगो और आँकड़ों जैसी चीज़ों के लिए JSON से HTML में विवरण सेट करें।
"पिछले 5 गेम" कॉलम टीम के पिछले पांच मैचों का परिणाम दिखाता है। मुझे इसके लिए डेटा को मैन्युअल रूप से बदलना होगा क्योंकि एपीआई डेटा एक स्ट्रिंग प्रारूप में है। इसे एक सरणी में बदलने से टीम के पिछले पांच मैचों में से प्रत्येक के लिए एक अलग तत्व के रूप में 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 );
  });
});
जहाँ तक स्टाइल की बात है, आप जो चाहें करने के लिए स्वतंत्र हैं! यदि आप कुछ के साथ काम करना चाहते हैं, तो मेरे पास शैलियों का एक पूरा सेट है जिसे आप शुरुआती बिंदु के रूप में उपयोग कर सकते हैं।
मैंने एससीएसएस में चीजों को स्टाइल किया है @wordpress/create-block पैकेज बॉक्स के बाहर इसका समर्थन करता है। दौड़ना npm run start एससीएसएस फाइलों को देखने के लिए कमांड लाइन में और उन्हें सेव पर सीएसएस में संकलित करें। वैकल्पिक रूप से, आप उपयोग कर सकते हैं npm run build 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;
  }
}

यहाँ डेमो है!
इसे देखें - हमने अभी एक ब्लॉक प्लगइन बनाया है जो डेटा प्राप्त करता है और इसे वर्डप्रेस साइट के सामने के छोर पर प्रस्तुत करता है।
हमें एक एपीआई मिला, fetch()-इससे डेटा प्राप्त किया, इसे वर्डप्रेस डेटाबेस में सहेजा, इसे पार्स किया, और इसे सामने के छोर पर प्रदर्शित करने के लिए कुछ HTML मार्कअप पर लागू किया। एक ट्यूटोरियल के लिए बुरा नहीं है, है ना?
फिर से, हम उसी तरह का काम कर सकते हैं ताकि विषय के सामने के छोर के अलावा ब्लॉक संपादक में रैंकिंग प्रस्तुत की जा सके। लेकिन उम्मीद है कि इसे सामने के छोर पर केंद्रित रखने से आपको पता चलता है कि वर्डप्रेस ब्लॉक में डेटा कैसे काम करता है, और डेटा को कैसे संरचित और प्रदर्शन के लिए प्रस्तुत किया जा सकता है।