עיבוד נתוני API חיצוניים בבלוקים של וורדפרס בחזית הקצה

הופיעו כאן כמה הדרכות חדשות בנושא CSS-Tricks לעבודה עם בלוקים של וורדפרס. אחד מהם מהווה מבוא לפיתוח בלוקים של וורדפרס וזה מקום טוב ללמוד מהם בלוקים ולרשום אותם בוורדפרס לשימוש בדפים ופוסטים.

בעוד שעקרונות הבלוק מכוסים יפה בפוסט הזה, אני רוצה לקחת את זה עוד צעד קדימה. אתה מבין, במאמר ההוא, למדנו את ההבדל בין רינדור בלוקים בעורך הבלוק האחורי של WordPress לבין רינדור שלהם בעיצוב החזיתי. הדוגמה הייתה בלוק Pullquote פשוט שהציג תוכן וסגנונות שונים בכל קצה.

בואו נלך רחוק יותר ונבחן את השימוש תוכן דינמי בבלוק וורדפרס. ליתר דיוק, בואו נביא נתונים מ-API חיצוני ונעבד אותם בקצה הקדמי כאשר בלוק מסוים ירד לעורך הבלוקים.

אנחנו הולכים לבנות בלוק שמוציא נתונים שמציגים כדורגל (אה, כדורגל) דירוגים שנשלפו מ אפי-כדורגל.

יש יותר מדרך אחת לשלב API עם בלוק וורדפרס! מכיוון שהמאמר על יסודות הבלוק כבר עבר את תהליך יצירת הבלוק מאפס, אנחנו הולכים לפשט את הדברים באמצעות @wordpress/create-block חבילה כדי לאתחל את העבודה שלנו ולבנות את הפרויקט שלנו.

מאתחל את תוסף החסימה שלנו

דבר ראשון: בואו נסובב פרויקט חדש משורת הפקודה:

npx @wordpress/create-block football-rankings

בדרך כלל הייתי בועט פרויקט כזה על ידי יצירת הקבצים מאפס, אבל כל הכבוד לצוות WordPress Core על כלי השירות השימושי הזה!

לאחר שתיקיית הפרויקט נוצרה על ידי הפקודה, מבחינה טכנית יש לנו בלוק וורדפרס מתפקד במלואו הרשום כתוסף. אז, בואו נמשיך ונשחרר את תיקיית הפרויקט לתוך wp-content/plugins ספרייה שבה מותקנת וורדפרס (כנראה שהכי טוב לעבוד בסביבה מקומית), ואז היכנס למנהל המערכת של וורדפרס והפעל אותו ממסך התוספים.

כעת, כשהחסימה שלנו מאותחלת, מותקנת ומופעלת, קדימה, פתח את תיקיית הפרויקט מהשעה /wp-content/plugins/football-rankings. אתה הולך לרצות cd שם גם משורת הפקודה כדי לוודא שנוכל להמשיך בפיתוח.

אלה הקבצים היחידים שאנחנו צריכים להתרכז בהם כרגע:

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

הקבצים האחרים בפרויקט חשובים, כמובן, אך אינם חיוניים בשלב זה.

סקירת מקור ה-API

אנחנו כבר יודעים שאנחנו משתמשים אפי-כדורגל שמגיע אלינו באדיבות RapidAPI. למרבה המזל, ל-RapidAPI יש לוח מחוונים שמייצר אוטומטית את הסקריפטים הנדרשים שאנו צריכים כדי להביא את נתוני ה-API עבור טבלת הפרמיירליג לשנת 2021.

אם אתה רוצה להסתכל על מבנה 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 בוורדפרס

עכשיו כשאנחנו מביאים נתונים, אנחנו צריכים לאחסן אותם איפשהו בוורדפרס. זה המקום שבו ה 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 מַדרִיך). בדרך זו, הקודים האחוריים והחזיתיים נפרדים וה- 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() condition, והוא מעמיד את שני הקבצים בתור כדי שנמנע מעמידתם בתור בזמן השימוש במסך העורך.
עכשיו, כשיש לנו שני קבצים חדשים שאנחנו מתקשרים אליהם, אנחנו חייבים לוודא שאנחנו מספרים 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;
  }
}

הנה ההדגמה!
בדוק את זה - הרגע יצרנו תוסף חסום שמביא נתונים ומציג אותם בקצה הקדמי של אתר וורדפרס.
מצאנו API, fetch()ערך נתונים ממנו, שמר אותם במסד הנתונים של וורדפרס, ניתח אותם והחיל אותו על סימון HTML כלשהו כדי להציג בחזית הקצה. לא רע להדרכה בודדת, נכון?
שוב, אנחנו יכולים לעשות את אותו הדבר כדי שהדירוגים יוצגו בעורך הבלוקים בנוסף לקצה הקדמי של הנושא. אבל אני מקווה ששמירה על התמקדות זו בחזית הקצה מראה לך כיצד אחזור נתונים עובד בבלוק וורדפרס, וכיצד ניתן לבנות את הנתונים ולעבד אותם לתצוגה.