{"id":373952,"date":"2022-10-11T09:15:48","date_gmt":"2022-10-11T16:15:48","guid":{"rendered":"https:\/\/css-tricks.com\/?p=373952"},"modified":"2022-12-12T09:07:48","modified_gmt":"2022-12-12T17:07:48","slug":"rendering-external-api-data-in-wordpress-blocks-on-the-front-end","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-front-end\/","title":{"rendered":"Rendering External API Data in WordPress Blocks on the Front End"},"content":{"rendered":"\n<p>There\u2019ve been some new tutorials popping here on CSS-Tricks for working with WordPress blocks. <a href=\"https:\/\/css-tricks.com\/getting-started-with-wordpress-block-development\">One of them<\/a> is an introduction to WordPress block development and it\u2019s a good place to learn what blocks are and to register them in WordPress for use in pages and posts.<\/p>\n\n\n\n<p>While the block basics are nicely covered in that post, I want to take it another step forward. You see, in that article, we learned the difference between rendering blocks in the back-end WordPress Block Editor and rendering them on the front-end theme. The example was a simple Pullquote Block that rendered different content and styles on each end.<\/p>\n\n\n\n<p>Let\u2019s go further and look at using <strong>dynamic content<\/strong> in a WordPress block. More specifically, let\u2019s fetch data from an external API and render it on the front end when a particular block is dropped into the Block Editor.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>This is part of a larger series where I want to cover all the points for working with external API data in a custom WordPress block.<\/p>\n\n\n\n<div class=\"wp-block-group ticss-ad1a3c1b\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><h4 class=\"wp-block-heading\" id=\"working-with-external-apis-in-wordpress-blocks\">Working With External APIs in WordPress Blocks<\/h4>\n\n\n<ul>\n<li>Rendering Data on the Front End <em>(you are here!)<\/em><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-back-end\/\">Rendering Data on the Back End<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/creating-a-settings-ui-for-a-custom-wordpress-block\/\">Creating a Custom Settings UI<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/saving-settings-for-a-custom-wordpress-block-in-the-block-editor\/\">Saving Custom Block Settings<\/a><\/li>\n\n\n\n<li>Working With Live API Data <em>(coming soon)<\/em><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p>We\u2019re going to build a block that outputs data that shows soccer (er, <em>football<\/em>) rankings pulled from <a href=\"https:\/\/www.api-football.com\/documentation-v3\" rel=\"noopener\">Api-Football<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"937\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_39D06F2809C7E62B9AB84F0429E36A6C428C0E24131D3DD5FB8CFDD45AD4087D_1664436044397_Output-table-last-5-games.png?resize=1920%2C937&#038;ssl=1\" alt=\"An ordered set of football team rankings showing team logos, names, and game results.\" class=\"wp-image-373954\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_39D06F2809C7E62B9AB84F0429E36A6C428C0E24131D3DD5FB8CFDD45AD4087D_1664436044397_Output-table-last-5-games.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_39D06F2809C7E62B9AB84F0429E36A6C428C0E24131D3DD5FB8CFDD45AD4087D_1664436044397_Output-table-last-5-games.png?resize=300%2C146&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_39D06F2809C7E62B9AB84F0429E36A6C428C0E24131D3DD5FB8CFDD45AD4087D_1664436044397_Output-table-last-5-games.png?resize=1024%2C500&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_39D06F2809C7E62B9AB84F0429E36A6C428C0E24131D3DD5FB8CFDD45AD4087D_1664436044397_Output-table-last-5-games.png?resize=768%2C375&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_39D06F2809C7E62B9AB84F0429E36A6C428C0E24131D3DD5FB8CFDD45AD4087D_1664436044397_Output-table-last-5-games.png?resize=1536%2C750&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">This is what we\u2019re working for together.<\/figcaption><\/figure>\n\n\n\n<p>There\u2019s more than one way to integrate an API with a WordPress block! Since the article on block basics has already walked through the process of making a block from scratch, we\u2019re going to simplify things by using the <code>@wordpress\/create-block<\/code> package to bootstrap our work and structure our project.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"initializing-our-block-plugin\">Initializing our block plugin<\/h3>\n\n\n<p>First things first: let\u2019s spin up a new project from the command line:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">npx @wordpress\/create-block football-rankings<\/code><\/pre>\n\n\n\n<p>I normally would kick a project like this off by making the files from scratch, but kudos to the WordPress Core team for this handy utility!<\/p>\n\n\n\n<p>Once the project folder has been created by the command, we technically have a fully-functional WordPress block registered as a plugin. So, let\u2019s go ahead and drop the project folder into the <code>wp-content\/plugins<\/code> directory where you have WordPress installed (probably best to be working in a local environment), then log into the WordPress admin and activate it from the Plugins screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2204\" height=\"1618\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?resize=2204%2C1618&#038;ssl=1\" alt=\"\" class=\"wp-image-373956\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?w=2204&amp;ssl=1 2204w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?resize=300%2C220&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?resize=1024%2C752&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?resize=768%2C564&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?resize=1536%2C1128&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/s_CEDCE961A53CF6FD824C4F43FA2E548153A153877994988D63C27F37E50E2D0D_1664304285418_ScreenShot2022-09-27at12.44.20PM.png?resize=2048%2C1503&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Now that our block is initialized, installed, and activated, go ahead and open up the project folder from at <code>\/wp-content\/plugins\/football-rankings<\/code>. You\u2019re going to want to <code>cd<\/code> there from the command line as well to make sure we can continue development.<\/p>\n\n\n\n<p>These are the only files we need to concentrate on at the moment:<\/p>\n\n\n\n<ul>\n<li><code>edit.js<\/code><\/li>\n\n\n\n<li><code>index.js<\/code><\/li>\n\n\n\n<li><code>football-rankings.php<\/code><\/li>\n<\/ul>\n\n\n\n<p>The other files in the project are important, of course, but are inessential at this point.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"reviewing-the-api-source\">Reviewing the API source<\/h3>\n\n\n<p>We already know that we\u2019re using <a href=\"https:\/\/www.api-football.com\/documentation-v3\" rel=\"noopener\">Api-Football<\/a> which comes to us courtesy of <a href=\"https:\/\/rapidapi.com\/\" rel=\"noopener\">RapidAPI<\/a>. Fortunately, RapidAPI has a dashboard that automatically generates the required scripts we need to fetch the API data for the 2021 Premier League Standings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"969\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/NeTqPfg.jpg?resize=1920%2C969&#038;ssl=1\" alt=\"A dashboard interface with three columns showing code and data from an API source.\" class=\"wp-image-373957\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/NeTqPfg.jpg?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/NeTqPfg.jpg?resize=300%2C151&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/NeTqPfg.jpg?resize=1024%2C517&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/NeTqPfg.jpg?resize=768%2C388&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/NeTqPfg.jpg?resize=1536%2C775&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">The RapidAPI dashboard<\/figcaption><\/figure>\n\n\n\n<p>If you want to have a look on the JSON structure, you can generate visual representation with <a href=\"https:\/\/jsoncrack.com\/\" rel=\"noopener\">JSONCrack<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"fetching-data-from-the-editjs-file\">Fetching data from the <code>edit.js<\/code> file<\/h3>\n\n\n<p>I am going to wrap the RapidAPI code inside a <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#useeffect\" rel=\"noopener\">React <code>useEffect()<\/code> hook<\/a> with an empty dependency array so that it runs only once when the page is loaded. This way, we prevent WordPress from calling the API each time the Block Editor re-renders. You can check that using <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#subscribe\" rel=\"noopener\"><code>wp.data.subscribe()<\/code><\/a> if you care to.<\/p>\n\n\n\n<p>Here\u2019s the code where I am importing <code>useEffect()<\/code>, then wrapping it around the <code>fetch()<\/code> code that RapidAPI provided:<\/p>\n\n\n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">\/**\n* The edit function describes the structure of your block in the context of the\n* editor. This represents what the editor will render when the block is used.\n*\n* @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#edit\n*\n* @return {WPElement} Element to render.\n*\/\n\nimport { useEffect } from \"@wordpress\/element\";\n\nexport default function Edit(props) {\n  const { attributes, setAttributes } = props;\n\n  useEffect(() => {\n    const options = {\n      method: \"GET\",\n      headers: {\n        \"X-RapidAPI-Key\": \"Your Rapid API key\",\n        \"X-RapidAPI-Host\": \"api-football-v1.p.rapidapi.com\",\n      },\n    };\n\n    fetch(\"https:\/\/api-football-v1.p.rapidapi.com\/v3\/standings?season=2021&amp;league=39\", options)\n      .then( ( response ) => response.json() )\n      .then( ( response ) => {\n        let newData = { ...response };\n        setAttributes( { data: newData } );\n        console.log( \"Attributes\", attributes );\n      })\n      .catch((err) => console.error(err));\n}, []);\n\n  return (\n    &lt;p { ...useBlockProps() }>\n      { __( \"Standings loaded on the front end\", \"external-api-gutenberg\" ) }\n    &lt;\/p>\n  );\n}<\/code><\/pre>\n\n\n\n<p>Notice that I have left the <code>return<\/code> function pretty much intact, but have included a note that confirms the football standings are rendered on the front end. Again, we\u2019re only going to focus on the front end in this article \u2014 we could render the data in the Block Editor as well, but we\u2019ll leave that for another article to keep things focused.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"storing-api-data-in-wordpress\">Storing API data in WordPress<\/h3>\n\n\n<p>Now that we are <a href=\"https:\/\/www.cloudways.com\/blog\/wordpress-rest-api-to-fetch-posts\/?id=1223312&amp;data1=ArticleLink\" target=\"_blank\" rel=\"noreferrer noopener\">fetching data<\/a>, we need to store it somewhere in WordPress. This is where the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-attributes\/\" rel=\"noopener\"><code>attributes.data<\/code><\/a> object comes in handy. We are defining the <code>data.type<\/code> as an <code>object<\/code> since the data is fetched and formatted as JSON. Make sure you don&#8217;t have any other type or else WordPress won\u2019t save the data, nor does it throw any error for you to debug.<\/p>\n\n\n\n<p>We define all this in our <code>index.js<\/code> file:<\/p>\n\n\n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">registerBlockType( metadata.name, {\n  edit: Edit,\n  attributes: {\n    data: {\n      type: \"object\",\n    },\n  },\n  save,\n} );<\/code><\/pre>\n\n\n\n<p>OK, so WordPress now knows that the RapidAPI data we\u2019re fetching is an object. If we open a new post draft in the WordPress Block Editor and save the post, the data is now stored in the database. In fact, if we can see it in the <code>wp_posts.post_content<\/code> field if we open the site\u2019s database in phpMyAdmin, Sequel Pro, Adminer, or whatever tool you use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"330\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/WJrBoyfl.png.jpeg?resize=640%2C330&#038;ssl=1\" alt=\"Showing a large string of JSON output in a database table.\" class=\"wp-image-373959\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/WJrBoyfl.png.jpeg?w=640&amp;ssl=1 640w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/WJrBoyfl.png.jpeg?resize=300%2C155&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">API output stored in the WordPress database<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"outputting-json-data-in-the-front-end\">Outputting JSON data in the front end<\/h3>\n\n\n<p>There are multiple ways to output the data on the front end. The way I\u2019m going to show you takes the attributes that are stored in the database and passes them as a parameter through the <code>render_callback<\/code> function in our <code>football-rankings.php<\/code> file.<\/p>\n\n\n\n<p>I like keeping a separation of concerns, so how I do this is to add two new files to the block plugin\u2019s <code>build<\/code> folder: <code>frontend.js<\/code> and <code>frontend.css<\/code> (you can create a <code>frontend.scss<\/code> file in the <code>src<\/code> directory which compiled to CSS in the <code>build<\/code> directory). This way, the back-end and front-end codes are separate and the <code>football-rankings.php<\/code> file is a little easier to read.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Referring back to the introduction to WordPress block development, there are <code>editor.css<\/code> and <code>style.css<\/code> files for back-end and shared styles between the front and back end, respectively. By adding <code>frontend.scss<\/code> (which compiles to <code>frontend.css<\/code>, I can isolate styles that are only intended for the front end.<\/p>\n\n\n\n<p>Before we worry about those new files, here\u2019s how we call them in <code>football-rankings.php<\/code>:<\/p>\n\n\n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">\/**\n* Registers the block using the metadata loaded from the `block.json` file.\n* Behind the scenes, it registers also all assets so they can be enqueued\n* through the block editor in the corresponding context.\n*\n* @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n*\/\nfunction create_block_football_rankings_block_init() {\n  register_block_type( __DIR__ . '\/build', array(\n    'render_callback' => 'render_frontend'\n  ));\n}\nadd_action( 'init', 'create_block_football_rankings_block_init' );\n\nfunction render_frontend($attributes) {\n  if( !is_admin() ) {\n    wp_enqueue_script( 'football_rankings', plugin_dir_url( __FILE__ ) . '\/build\/frontend.js');\n    wp_enqueue_style( 'football_rankings', plugin_dir_url( __FILE__ ) . '\/build\/frontend.css' ); \/\/ HIGHLIGHT 15,16,17,18\n  }\n  \n  ob_start(); ?>\n\n  &lt;div class=\"football-rankings-frontend\" id=\"league-standings\">\n    &lt;div class=\"data\">\n      &lt;pre>\n        &lt;?php echo wp_json_encode( $attributes ) ?>\n      &lt;\/pre>\n    &lt;\/div>\n    &lt;div class=\"header\">\n      &lt;div class=\"position\">Rank&lt;\/div>\n      &lt;div class=\"team-logo\">Logo&lt;\/div>\n      &lt;div class=\"team-name\">Team name&lt;\/div>\n      &lt;div class=\"stats\">\n        &lt;div class=\"games-played\">GP&lt;\/div>\n        &lt;div class=\"games-won\">GW&lt;\/div>\n        &lt;div class=\"games-drawn\">GD&lt;\/div>\n        &lt;div class=\"games-lost\">GL&lt;\/div>\n        &lt;div class=\"goals-for\">GF&lt;\/div>\n        &lt;div class=\"goals-against\">GA&lt;\/div>\n        &lt;div class=\"points\">Pts&lt;\/div>\n      &lt;\/div>\n      &lt;div class=\"form-history\">Last 5 games&lt;\/div>\n    &lt;\/div>\n    &lt;div class=\"league-table\">&lt;\/div>\n  &lt;\/div>\n\n  &lt;?php return ob_get_clean();\n}<\/code><\/pre>\n\n\n\n<p>Since I am using the <code>render_callback()<\/code> method for the attributes, I am going to handle the enqueue manually just like the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/#frontend-enqueueing\" rel=\"noopener\">Block Editor Handbook suggests<\/a>. That\u2019s contained in the <code>!is_admin()<\/code> condition, and is enqueueing the two files so that we avoid enqueuing them while using the editor screen.<\/p>\n\n\n\n<p>Now that we have two new files we\u2019re calling, we\u2019ve gotta make sure we are telling <code>npm<\/code> to compile them. So, do that in <code>package.json<\/code>, in the <code>scripts<\/code> section:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"scripts\": {\n  \"build\": \"wp-scripts build src\/index.js src\/frontend.js\",\n  \"format\": \"wp-scripts format\",\n  \"lint:css\": \"wp-scripts lint-style\",\n  \"lint:js\": \"wp-scripts lint-js\",\n  \"packages-update\": \"wp-scripts packages-update\",\n  \"plugin-zip\": \"wp-scripts plugin-zip\",\n  \"start\": \"wp-scripts start src\/index.js src\/frontend.js\"\n},<\/code><\/pre>\n\n\n\n<p>Another way to include the files is to define them in the block metadata contained in our <code>block.json<\/code> file, <a href=\"https:\/\/css-tricks.com\/getting-started-with-wordpress-block-development\/#aa-block-metadata\">as noted<\/a> in the introduction to block development:<\/p>\n\n\n\n<pre rel=\"JSON\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"viewScript\": [ \"file:.\/frontend.js\", \"example-shared-view-script\" ],\n\"style\": [ \"file:.\/frontend.css\", \"example-shared-style\" ],<\/code><\/pre>\n\n\n\n<p>The only reason I\u2019m going with the <code>package.json<\/code> method is because I am already making use of the <code>render_callback()<\/code> method.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"rendering-the-json-data\">Rendering the JSON data<\/h3>\n\n\n<p>In the rendering part, I am concentrating only on a single block. Generally speaking, you would want to target multiple blocks on the front end. In that case, you need to make use of <code>document.querySelectorAll()<\/code> with the block\u2019s specific ID.<\/p>\n\n\n\n<p>I\u2019m basically going to wait for the window to load and grab data for a few key objects from JSON and apply them to some markup that renders them on the front end. I am also going to convert the <code>attributes<\/code> data to a JSON object so that it is easier to read through the JavaScript and set the details from JSON to HTML for things like the football league logo, team logos, and stats.<\/p>\n\n\n\n<p>The \u201cLast 5 games\u201d column shows the result of a team\u2019s last five matches. I have to manually alter the data for it since the API data is in a string format. Converting it to an array can help make use of it in HTML as a separate element for each of a team\u2019s last five matches.<\/p>\n\n\n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">import \".\/frontend.scss\";\n\n\/\/ Wait for the window to load\nwindow.addEventListener( \"load\", () => {\n  \/\/ The code output\n  const dataEl = document.querySelector( \".data pre\" ).innerHTML;\n  \/\/ The parent rankings element\n  const tableEl = document.querySelector( \".league-table\" );\n  \/\/ The table headers\n  const tableHeaderEl = document.querySelector( \"#league-standings .header\" );\n  \/\/ Parse JSON for the code output\n  const dataJSON = JSON.parse( dataEl );\n  \/\/ Print a little note in the console\n  console.log( \"Data from the front end\", dataJSON );\n  \n  \/\/ All the teams \n  let teams = dataJSON.data.response[ 0 ].league.standings[ 0 ];\n  \/\/ The league logo\n  let leagueLogoURL = dataJSON.data.response[ 0 ].league.logo;\n  \/\/ Apply the league logo as a background image inline style\n  tableHeaderEl.style.backgroundImage = `url( ${ leagueLogoURL } )`;\n  \n  \/\/ Loop through the teams\n  teams.forEach( ( team, index ) => {\n    \/\/ Make a div for each team\n    const teamDiv = document.createElement( \"div\" );\n    \/\/ Set up the columns for match results\n    const { played, win, draw, lose, goals } = team.all;\n\n    \/\/ Add a class to the parent rankings element\n    teamDiv.classList.add( \"team\" );\n    \/\/ Insert the following markup and data in the parent element\n    teamDiv.innerHTML = `\n      &lt;div class=\"position\">\n        ${ index + 1 }\n      &lt;\/div>\n      &lt;div class=\"team-logo\">\n        &lt;img src=\"${ team.team.logo }\" \/>\n      &lt;\/div>\n      &lt;div class=\"team-name\">${ team.team.name }&lt;\/div>\n      &lt;div class=\"stats\">\n        &lt;div class=\"games-played\">${ played }&lt;\/div>\n        &lt;div class=\"games-won\">${ win }&lt;\/div>\n        &lt;div class=\"games-drawn\">${ draw }&lt;\/div>\n        &lt;div class=\"games-lost\">${ lose }&lt;\/div>\n        &lt;div class=\"goals-for\">${ goals.for }&lt;\/div>\n        &lt;div class=\"goals-against\">${ goals.against }&lt;\/div>\n        &lt;div class=\"points\">${ team.points }&lt;\/div>\n      &lt;\/div>\n      &lt;div class=\"form-history\">&lt;\/div>\n    `;\n    \n    \/\/ Stringify the last five match results for a team\n    const form = team.form.split( \"\" );\n    \n    \/\/ Loop through the match results\n    form.forEach( ( result ) => {\n      \/\/ Make a div for each result\n      const resultEl = document.createElement( \"div\" );\n      \/\/ Add a class to the div\n      resultEl.classList.add( \"result\" );\n      \/\/ Evaluate the results\n      resultEl.innerText = result;\n      \/\/ If the result a win\n      if ( result === \"W\" ) {\n        resultEl.classList.add( \"win\" );\n      \/\/ If the result is a draw\n      } else if ( result === \"D\" ) {\n        resultEl.classList.add( \"draw\" );\n      \/\/ If the result is a loss\n      } else {\n        resultEl.classList.add( \"lost\" );\n      }\n      \/\/ Append the results to the column\n      teamDiv.querySelector( \".form-history\" ).append( resultEl );\n    });\n\n    tableEl.append( teamDiv );\n  });\n});<\/code><\/pre>\n\n\n\n<p>As far as styling goes, you\u2019re free to do whatever you want! If you want something to work with, I have a full set of styles you can use as a starting point.<\/p>\n\n\n\n<p>I styled things in SCSS since the <code>@wordpress\/create-block<\/code> package supports it out of the box. Run <code>npm run start<\/code> in the command line to watch the SCSS files and compile them to CSS on save. Alternately, you can use <code>npm run build<\/code> on each save to compile the SCSS and build the rest of the plugin bundle.<\/p>\n\n\n\n<details >\n  <summary>\n          View SCSS      <\/summary>\n  \n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">body {\n  background: linear-gradient(to right, #8f94fb, #4e54c8);\n}\n\n.data pre {\n  display: none;\n}\n\n.header {\n  display: grid;\n  gap: 1em;\n  padding: 10px;\n  grid-template-columns: 1fr 1fr 3fr 4fr 3fr;\n  align-items: center;\n  color: white;\n  font-size: 16px;\n  font-weight: 600;\n  background-repeat: no-repeat;\n  background-size: contain;\n  background-position: right;\n}\n\n.frontend#league-standings {\n  width: 900px;\n  margin: 60px 0;\n  max-width: unset;\n  font-size: 16px;\n\n  .header {\n    .stats {\n      display: flex;\n      gap: 15px;\n\n      &amp;amp; &amp;gt; div {\n        width: 30px;\n      }\n    }\n  }\n}\n\n.league-table {\n  background: white;\n  box-shadow:\n    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,\n    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\n  padding: 1em;\n\n  .position {\n    width: 20px;\n  }\n\n  .team {\n    display: grid;\n    gap: 1em;\n    padding: 10px 0;\n    grid-template-columns: 1fr 1fr 3fr 4fr 3fr;\n    align-items: center;\n  }\n\n  .team:not(:last-child) {\n    border-bottom: 1px solid lightgray;\n  }\n\n  .team-logo img {\n    width: 30px;\n  }\n\n  .stats {\n    display: flex;\n    gap: 15px;\n  }\n\n  .stats &amp;gt; div {\n    width: 30px;\n    text-align: center;\n  }\n\n  .form-history {\n    display: flex;\n    gap: 5px;\n  }\n\n  .form-history &amp;gt; div {\n    width: 25px;\n    height: 25px;\n    text-align: center;\n    border-radius: 3px;\n    font-size: 15px;\n  }\n\n  .form-history .win {\n    background: #347d39;\n    color: white;\n  }\n\n  .form-history .draw {\n    background: gray;\n    color: white;\n  }\n\n  .form-history .lost {\n    background: lightcoral;\n    color: white;\n  }\n}<\/code><\/pre>\n\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"heres-the-demo\">Here\u2019s the demo!<\/h3>\n\n\n<p>Check that out \u2014 we just made a block plugin that fetches data and renders it on the front end of a WordPress site.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/manojkumar.online\/lab\/wp\/api-league-table\/\" rel=\"noopener\">Open demo<\/a><\/div>\n<\/div>\n\n\n\n<p>We found an API, <code>fetch()<\/code>-ed data from it, saved it to the WordPress database, parsed it, and applied it to some HTML markup to display on the front end. Not bad for a single tutorial, right?<\/p>\n\n\n\n<p>Again, we can do the same sort of thing so that the rankings render in the Block Editor in addition to the theme\u2019s front end. But hopefully keeping this focused on the front end shows you how fetching data works in a WordPress block, and how the data can be structured and rendered for display.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There\u2019ve been some new tutorials popping here on CSS-Tricks for working with WordPress blocks. One of them is an introduction to WordPress block development and it\u2019s a good place to learn what blocks are and to register them in WordPress for use in pages and posts. While the block basics are nicely covered in that [&hellip;]<\/p>\n","protected":false},"author":288717,"featured_media":373964,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Rendering External API Data in WordPress Blocks on the Front End by Manoj Kumar","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[667,264,14583],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-blocks-api.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":374381,"url":"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-back-end\/","url_meta":{"origin":373952,"position":0},"title":"Rendering External API Data in WordPress Blocks on the Back End","date":"November 1, 2022","format":false,"excerpt":"This is a continuation of my last article about \"Rendering External API Data in WordPress Blocks on the Front End\". In that last one, we learned how to take an external API and integrate it with a block that renders the fetched data on the front end of a WordPress\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-blocks-api.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375577,"url":"https:\/\/css-tricks.com\/saving-settings-for-a-custom-wordpress-block-in-the-block-editor\/","url_meta":{"origin":373952,"position":1},"title":"Saving Settings for a Custom WordPress Block in the Block Editor","date":"December 12, 2022","format":false,"excerpt":"We\u2019ve accomplished a bunch of stuff in this series! We created a custom WordPress block that fetches data from an external API and renders it on the front end. Then we took that work and extended it so the data also renders directly in the WordPress block editor. After that,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-blocks-api.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375098,"url":"https:\/\/css-tricks.com\/creating-a-settings-ui-for-a-custom-wordpress-block\/","url_meta":{"origin":373952,"position":2},"title":"Creating a Settings UI for a Custom WordPress Block","date":"November 17, 2022","format":false,"excerpt":"So far, we\u2019ve covered how to work with data from an external API in a custom WordPress block. We walked through the process of fetching that data for use on the front end of a WordPress site, and how to render it directly in the WordPress Block Editor when placing\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-blocks-api.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341720,"url":"https:\/\/css-tricks.com\/code-blocks-but-better\/","url_meta":{"origin":373952,"position":3},"title":"Code blocks, but better","date":"June 1, 2021","format":false,"excerpt":"Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The line highlighter is unique in that it only syntax highlights\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-31-at-9.58.54-AM.png?fit=1200%2C521&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374910,"url":"https:\/\/css-tricks.com\/managing-css-styles-in-a-wordpress-block-theme\/","url_meta":{"origin":373952,"position":4},"title":"Managing CSS Styles in a WordPress Block Theme","date":"November 7, 2022","format":false,"excerpt":"The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for adding fluid type support in WordPress by way of theme.json, a new file that WordPress has been pushing hard to become a central source of truth for defining styles\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373732,"url":"https:\/\/css-tricks.com\/getting-started-with-wordpress-block-development\/","url_meta":{"origin":373952,"position":5},"title":"Getting Started With WordPress Block Development","date":"September 30, 2022","format":false,"excerpt":"Let\u2019s acknowledge that developing for WordPress is weird right now. Whether you\u2019re new to WordPress or have worked with it for eons, the introduction of \u201cFull-Site Editing\u201d (FSE) features, including the Block Editor (WordPress 5.0) and the Site Editor (WordPress 5.9), have upended the traditional way we build WordPress themes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373952"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288717"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=373952"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373952\/revisions"}],"predecessor-version":[{"id":376188,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373952\/revisions\/376188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/373964"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=373952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=373952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=373952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}