{"id":374381,"date":"2022-11-01T05:57:22","date_gmt":"2022-11-01T12:57:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374381"},"modified":"2022-12-12T09:08:06","modified_gmt":"2022-12-12T17:08:06","slug":"rendering-external-api-data-in-wordpress-blocks-on-the-back-end","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-back-end\/","title":{"rendered":"Rendering External API Data in WordPress Blocks on the Back End"},"content":{"rendered":"\n<p>This is a continuation of my last article about <a href=\"https:\/\/css-tricks.com\/?p=373952&amp;preview=1&amp;_ppp=49998c408c\">&#8220;Rendering External API Data in WordPress Blocks on the Front End&#8221;<\/a>. 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 site.<\/p>\n\n\n\n<p>The thing is, we accomplished this in a way that prevents us from seeing the data in the WordPress Block Editor. In other words, we can insert the block on a page but we get no preview of it. We only get to see the block when it&#8217;s published.<\/p>\n\n\n\n<p>Let&#8217;s revisit the example block plugin we made in the last article. Only this time, we&#8217;re going to make use of the JavaScript and React ecosystem of WordPress to fetch and render that data in the back-end Block Editor as well.<\/p>\n\n\n\n<!--more-->\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><a href=\"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-front-end\/\">Rendering Data on the Front End<\/a><\/li>\n\n\n\n<li>Rendering Data on the Back End <em>(you are here!)<\/em><\/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<h3 class=\"wp-block-heading\" id=\"where-we-left-off\">Where we left off<\/h3>\n\n\n<p>As we kick this off, <a href=\"https:\/\/manojkumar.online\/lab\/wp\/api-league-table\/\" rel=\"noopener\">here&#8217;s a demo<\/a> where we landed in the last article that you can reference. You may have noticed that I used a <code>render_callback<\/code> method in the last article so that I can make use of the attributes in the PHP file and render the content.<\/p>\n\n\n\n<p>Well, that may be useful in situations where you might have to use some native WordPress or PHP function to create dynamic blocks. But if you want to make use of just the JavaScript and React (JSX, specifically) ecosystem of WordPress to render the static HTML along with the attributes stored in the database, you only need to focus on the <code>Edit<\/code> and <code>Save<\/code> functions of the block plugin.<\/p>\n\n\n\n<ul>\n<li>The <code><strong>Edit<\/strong><\/code> function renders the content based on what you want to see in the Block Editor. You can have interactive React components here.<\/li>\n\n\n\n<li>The <code><strong>Save<\/strong><\/code> function renders the content based on what you want to see on the front end. You cannot have the the regular React components or the hooks here. It is used to return the static HTML that is saved into your database along with the attributes.<\/li>\n<\/ul>\n\n\n\n<p>The <code>Save<\/code> function is where we\u2019re hanging out today. We can create interactive components on the front-end, but for that we need to manually include and access them outside the <code>Save<\/code> function in a file like we did in the last article.<\/p>\n\n\n\n<p>So, I am going to cover the same ground we did in the last article, but this time you can see the preview in the Block Editor <em>before<\/em> you publish it to the front end.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/CD5PVdbd?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-block-props\">The block props<\/h3>\n\n\n<p>I intentionally left out any explanations about the <code>edit<\/code> function&#8217;s props in the last article because that would have taken the focus off of the main point, the rendering.<\/p>\n\n\n\n<p class=\"is-style-explanation\">If you are coming from a React background, you will likely understand what is that I am talking about, but if you are new to this, I would recommend <a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\" rel=\"noopener\">checking out components and props in the React documentation<\/a>.<\/p>\n\n\n\n<p>If we log the <code>props<\/code> object to the console, it returns a list of WordPress functions and variables related to our block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1776\" height=\"283\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/UOi58CX.png?resize=1776%2C283&#038;ssl=1\" alt=\"Console log of the block properties.\" class=\"wp-image-374383\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/UOi58CX.png?w=1776&amp;ssl=1 1776w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/UOi58CX.png?resize=300%2C48&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/UOi58CX.png?resize=1024%2C163&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/UOi58CX.png?resize=768%2C122&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/UOi58CX.png?resize=1536%2C245&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We only need the <code>attributes<\/code> object and the <code>setAttributes<\/code> function which I am going to destructure from the <code>props<\/code> object in my code. In the last article, I had modified RapidAPI&#8217;s code so that I can store the API data through <code>setAttributes()<\/code>. Props are only readable, so we are unable to modify them directly.<\/p>\n\n\n\n<p>Block props are similar to state variables and <code>setState<\/code> in React, but React works on the client side and <code>setAttributes()<\/code> is used to store the attributes permanently in the WordPress database after saving the post. So, what we need to do is save them to <code>attributes.data<\/code> and then call that as the initial value for the <code>useState()<\/code> variable.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-edit-function\">The <code>edit<\/code> function<\/h3>\n\n\n<p>I am going to copy-paste the HTML code that we used in <code>football-rankings.php<\/code> in the last article and edit it a little to shift to the JavaScript background. Remember how we created two additional files in the last article for the front end styling and scripts? With the way we&#8217;re approaching things today, there&#8217;s no need to create those files. Instead, we can move all of it to the <code>Edit<\/code> function.<\/p>\n\n\n\n<details >\n  <summary>\n          Full code      <\/summary>\n  \n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">import { useState } from \"@wordpress\/element\";\nexport default function Edit(props) {\n  const { attributes, setAttributes } = props;\n  const [apiData, setApiData] = useState(null);\n    function fetchData() {\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      fetch(\n        \"https:\/\/api-football-v1.p.rapidapi.com\/v3\/standings?season=2021&amp;league=39\",\n          options\n      )\n      .then((response) => response.json())\n      .then((response) => {\n        let newData = { ...response }; \/\/ Deep clone the response data\n        setAttributes({ data: newData }); \/\/ Store the data in WordPress attributes\n        setApiData(newData); \/\/ Modify the state with the new data\n      })\n      .catch((err) => console.error(err));\n    }\n    return (\n      &lt;div {...useBlockProps()}>\n        &lt;button onClick={() => getData()}>Fetch data&lt;\/button>\n        {apiData &amp;&amp; (\n          &lt;>\n          &lt;div id=\"league-standings\">\n            &lt;div\n              className=\"header\"\n              style={{\n                backgroundImage: `url(${apiData.response[0].league.logo})`,\n              }}\n            >\n              &lt;div className=\"position\">Rank&lt;\/div>\n              &lt;div className=\"team-logo\">Logo&lt;\/div>\n              &lt;div className=\"team-name\">Team name&lt;\/div>\n              &lt;div className=\"stats\">\n                &lt;div className=\"games-played\">GP&lt;\/div>\n                &lt;div className=\"games-won\">GW&lt;\/div>\n                &lt;div className=\"games-drawn\">GD&lt;\/div>\n                &lt;div className=\"games-lost\">GL&lt;\/div>\n                &lt;div className=\"goals-for\">GF&lt;\/div>\n                &lt;div className=\"goals-against\">GA&lt;\/div>\n                &lt;div className=\"points\">Pts&lt;\/div>\n              &lt;\/div>\n              &lt;div className=\"form-history\">Form history&lt;\/div>\n            &lt;\/div>\n            &lt;div className=\"league-table\">\n              {\/* Usage of [0] might be weird but that is how the API structure is. *\/}\n              {apiData.response[0].league.standings[0].map((el) => {\n                \n                {\/* Destructure the required data from all *\/}\n                const { played, win, draw, lose, goals } = el.all;\n                  return (\n                    &lt;>\n                    &lt;div className=\"team\">\n                      &lt;div class=\"position\">{el.rank}&lt;\/div>\n                      &lt;div className=\"team-logo\">\n                        &lt;img src={el.team.logo} \/>\n                      &lt;\/div>\n                      &lt;div className=\"team-name\">{el.team.name}&lt;\/div>\n                      &lt;div className=\"stats\">\n                        &lt;div className=\"games-played\">{played}&lt;\/div>\n                        &lt;div className=\"games-won\">{win}&lt;\/div>\n                        &lt;div className=\"games-drawn\">{draw}&lt;\/div>\n                        &lt;div className=\"games-lost\">{lose}&lt;\/div>\n                        &lt;div className=\"goals-for\">{goals.for}&lt;\/div>\n                        &lt;div className=\"goals-against\">{goals.against}&lt;\/div>\n                        &lt;div className=\"points\">{el.points}&lt;\/div>\n                      &lt;\/div>\n                      &lt;div className=\"form-history\">\n                        {el.form.split(\"\").map((result) => {\n                          return (\n                            &lt;div className={`result-${result}`}>{result}&lt;\/div>\n                          );\n                        })}\n                      &lt;\/div>\n                    &lt;\/div>\n                    &lt;\/>\n                  );\n                }\n              )}\n            &lt;\/div>\n          &lt;\/div>\n        &lt;\/>\n      )}\n    &lt;\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<p>I have included the React hook <a href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\" rel=\"noopener\"><code>useState()<\/code><\/a> from <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\" rel=\"noopener\"><code>@wordpress\/element<\/code><\/a> rather than using it from the React library. That is because if I were to load the regular way, it would download React for every block that I am using. But if I am using <code>@wordpress\/element<\/code> it loads from a single source, i.e., the WordPress layer on top of React.<\/p>\n\n\n\n<p>This time, I have also not wrapped the code inside <code>useEffect()<\/code> but inside a function that is called only when clicking on a button so that we have a live preview of the fetched data. I have used a state variable called <code>apiData<\/code> to render the league table conditionally. So, once the button is clicked and the data is fetched, I am setting <code>apiData<\/code> to the new data inside the <code>fetchData()<\/code> and there is a rerender with the HTML of the football rankings table available.<\/p>\n\n\n\n<p>You will notice that once the post is saved and the page is refreshed, the league table is gone. That is because we are using an empty state (<code>null<\/code>) for <code>apiData<\/code>&#8216;s initial value. When the post saves, the attributes are saved to the <code>attributes.data<\/code> object and we call it as the initial value for the <code>useState()<\/code> variable like this:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const [apiData, setApiData] = useState(attributes.data);<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-save-function\">The <code>save<\/code> function<\/h3>\n\n\n<p>We are going to do almost the same exact thing with the <code>save<\/code> function, but modify it a little bit. For example, there&#8217;s no need for the &#8220;Fetch data&#8221; button on the front end, and the <code>apiData<\/code> state variable is also unnecessary because we are already checking it in the <code>edit<\/code> function. But we do need a random <code>apiData<\/code> variable that checks for <code>attributes.data<\/code> to conditionally render the JSX or else it will throw undefined errors and the Block Editor UI will go blank.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='281' src='https:\/\/videopress.com\/embed\/U7xT5J4F?cover=1&amp;playsinline=1&amp;posterUrl=https%3A%2F%2Fcss-tricks.com%2Fwp-content%2Fuploads%2F2022%2F10%2Fnew-data-on-save-null-1_mp4_dvd.original.jpg&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<details >\n  <summary>\n          Full code      <\/summary>\n  \n\n<pre rel=\"JSX\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">export default function save(props) {\n  const { attributes, setAttributes } = props;\n  let apiData = attributes.data;\n  return (\n    &lt;>\n      {\/* Only render if apiData is available *\/}\n      {apiData &amp;&amp; (\n        &lt;div {...useBlockProps.save()}>\n        &lt;div id=\"league-standings\">\n          &lt;div\n            className=\"header\"\n            style={{\n              backgroundImage: `url(${apiData.response[0].league.logo})`,\n            }}\n          >\n            &lt;div className=\"position\">Rank&lt;\/div>\n            &lt;div className=\"team-logo\">Logo&lt;\/div>\n            &lt;div className=\"team-name\">Team name&lt;\/div>\n            &lt;div className=\"stats\">\n              &lt;div className=\"games-played\">GP&lt;\/div>\n              &lt;div className=\"games-won\">GW&lt;\/div>\n              &lt;div className=\"games-drawn\">GD&lt;\/div>\n              &lt;div className=\"games-lost\">GL&lt;\/div>\n              &lt;div className=\"goals-for\">GF&lt;\/div>\n              &lt;div className=\"goals-against\">GA&lt;\/div>\n              &lt;div className=\"points\">Pts&lt;\/div>\n            &lt;\/div>\n            &lt;div className=\"form-history\">Form history&lt;\/div>\n          &lt;\/div>\n          &lt;div className=\"league-table\">\n            {\/* Usage of [0] might be weird but that is how the API structure is. *\/}\n            {apiData.response[0].league.standings[0].map((el) => {\n              const { played, win, draw, lose, goals } = el.all;\n                return (\n                  &lt;>\n                  &lt;div className=\"team\">\n                    &lt;div className=\"position\">{el.rank}&lt;\/div>\n                      &lt;div className=\"team-logo\">\n                        &lt;img src={el.team.logo} \/>\n                      &lt;\/div>\n                      &lt;div className=\"team-name\">{el.team.name}&lt;\/div>\n                      &lt;div className=\"stats\">\n                        &lt;div className=\"games-played\">{played}&lt;\/div>\n                        &lt;div className=\"games-won\">{win}&lt;\/div>\n                        &lt;div className=\"games-drawn\">{draw}&lt;\/div>\n                        &lt;div className=\"games-lost\">{lose}&lt;\/div>\n                        &lt;div className=\"goals-for\">{goals.for}&lt;\/div>\n                        &lt;div className=\"goals-against\">{goals.against}&lt;\/div>\n                        &lt;div className=\"points\">{el.points}&lt;\/div>\n                      &lt;\/div>\n                      &lt;div className=\"form-history\">\n                        {el.form.split(\"\").map((result) => {\n                          return (\n                            &lt;div className={`result-${result}`}>{result}&lt;\/div>\n                          );\n                        })}\n                      &lt;\/div>\n                    &lt;\/div>\n                  &lt;\/>\n                );\n              })}\n            &lt;\/div>\n          &lt;\/div>\n        &lt;\/div>\n      )}\n    &lt;\/>\n  );\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n<\/details>\n\n\n<p>If you are modifying the <code>save<\/code> function after a block is already present in the Block Editor, it would show an error like this:<\/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\/10\/PKKKyxY.png?resize=1920%2C969&#038;ssl=1\" alt=\"The football rankings block in the WordPress block Editor with an error message that the block contains an unexpected error.\" class=\"wp-image-374386\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/PKKKyxY.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/PKKKyxY.png?resize=300%2C151&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/PKKKyxY.png?resize=1024%2C517&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/PKKKyxY.png?resize=768%2C388&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/PKKKyxY.png?resize=1536%2C775&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>That is because the markup in the saved content is different from the markup in our new <code>save<\/code> function. Since we are in development mode, it is easier to remove the bock from the current page and re-insert it as a new block \u2014 that way, the updated code is used instead and things are back in sync.<\/p>\n\n\n\n<p>This situation of removing it and adding it again can be avoided if we had used the <code>render_callback<\/code> method since the output is dynamic and controlled by PHP instead of the save function. So each method has it\u2019s own advantages and disadvantages.<\/p>\n\n\n\n<p class=\"is-style-explanation\">Tom Nowell provides a thorough explanation on what not to do in a <code>save<\/code> function in <a href=\"https:\/\/wordpress.stackexchange.com\/a\/401099\/70936\" rel=\"noopener\">this Stack Overflow<\/a> <a href=\"https:\/\/wordpress.stackexchange.com\/a\/401099\/70936\" rel=\"noopener\">answer<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"styling-the-block-in-the-editor-and-the-front-end\">Styling the block in the editor and the front end<\/h3>\n\n\n<p>Regarding the styling, it is going to be almost the same thing we looked at in the last article, but with some minor changes which I have explained in the comments. I&#8217;m merely providing the full styles here since this is only a proof of concept rather than something you want to copy-paste (unless you really do need a block for showing football rankings styled just like this). And note that I&#8217;m still using SCSS that compiles to CSS on build.<\/p>\n\n\n\n<details >\n  <summary>\n          Editor styles      <\/summary>\n  \n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">\/* Target all the blocks with the data-title=\"Football Rankings\" *\/\n.block-editor-block-list__layout \n.block-editor-block-list__block.wp-block[data-title=\"Football Rankings\"] {\n  \/* By default, the blocks are constrained within 650px max-width plus other design specific code *\/\n  max-width: unset;\n  background: linear-gradient(to right, #8f94fb, #4e54c8);\n  display: grid;\n  place-items: center;\n  padding: 60px 0;\n\n  \/* Button CSS - From: https:\/\/getcssscan.com\/css-buttons-examples - Some properties really not needed :) *\/\n  button.fetch-data {\n    align-items: center;\n    background-color: #ffffff;\n    border: 1px solid rgb(0 0 0 \/ 0.1);\n    border-radius: 0.25rem;\n    box-shadow: rgb(0 0 0 \/ 0.02) 0 1px 3px 0;\n    box-sizing: border-box;\n    color: rgb(0 0 0 \/ 0.85);\n    cursor: pointer;\n    display: inline-flex;\n    font-family: system-ui, -apple-system, system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 16px;\n    font-weight: 600;\n    justify-content: center;\n    line-height: 1.25;\n    margin: 0;\n    min-height: 3rem;\n    padding: calc(0.875rem - 1px) calc(1.5rem - 1px);\n    position: relative;\n    text-decoration: none;\n    transition: all 250ms;\n    user-select: none;\n    -webkit-user-select: none;\n    touch-action: manipulation;\n    vertical-align: baseline;\n    width: auto;\n    &amp;:hover,\n    &amp;:focus {\n      border-color: rgb(0, 0, 0, 0.15);\n      box-shadow: rgb(0 0 0 \/ 0.1) 0 4px 12px;\n      color: rgb(0, 0, 0, 0.65);\n    }\n    &amp;:hover {\n      transform: translateY(-1px);\n    }\n    &amp;:active {\n      background-color: #f0f0f1;\n      border-color: rgb(0 0 0 \/ 0.15);\n      box-shadow: rgb(0 0 0 \/ 0.06) 0 2px 4px;\n      color: rgb(0 0 0 \/ 0.65);\n      transform: translateY(0);\n    }\n  }\n}<\/code><\/pre>\n\n\n<\/details>\n\n\n<details >\n  <summary>\n          Front-end styles      <\/summary>\n  \n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">\/* Front-end block styles *\/\n.wp-block-post-content .wp-block-football-rankings-league-table {\n  background: linear-gradient(to right, #8f94fb, #4e54c8);\n  max-width: unset;\n  display: grid;\n  place-items: center;\n}\n\n#league-standings {\n  width: 900px;\n  margin: 60px 0;\n  max-width: unset;\n  font-size: 16px;\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-color: transparent;\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: right;\n\n    .stats {\n      display: flex;\n      gap: 15px;\n      &amp;amp; &amp;gt; div {\n        width: 30px;\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  .position {\n    width: 20px;\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  .team:not(:last-child) {\n    border-bottom: 1px solid lightgray;\n  }\n  .team-logo img {\n    width: 30px;\n    top: 3px;\n    position: relative;\n  }\n  .stats {\n    display: flex;\n    gap: 15px;\n    &amp;amp; &amp;gt; div {\n      width: 30px;\n      text-align: center;\n    }\n  }\n  .last-5-games {\n    display: flex;\n    gap: 5px;\n    &amp;amp; &amp;gt; div {\n      width: 25px;\n      height: 25px;\n      text-align: center;\n      border-radius: 3px;\n      font-size: 15px;\n    &amp;amp; .result-W {\n      background: #347d39;\n      color: white;\n    }\n    &amp;amp; .result-D {\n      background: gray;\n      color: white;\n    }\n    &amp;amp; .result-L {\n      background: lightcoral;\n      color: white;\n    }\n  }\n}\n<\/code><\/pre>\n\n\n<\/details>\n\n\n<p>We add this to <code>src\/style.scss<\/code> which takes care of the styling in both the editor and the frontend. I will not be able to share the demo URL since it would require editor access but I have a video recorded for you to see the demo:<\/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:\/\/vimeo.com\/756487294\" rel=\"noopener\">Check out the demo<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Pretty neat, right? Now we have a fully functioning block that not only renders on the front end, but also fetches API data and renders right there in the Block Editor \u2014 with a refresh button to boot!<\/p>\n\n\n\n<p>But if we want to take <em>full<\/em> advantage of the WordPress Block Editor, we ought to consider mapping some of the block&#8217;s UI elements to <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/block-controls-toolbar-and-sidebar\/\" rel=\"noopener\">block controls<\/a> for things like setting color, typography, and spacing. That&#8217;s a nice next step in the block development learning journey.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a continuation of my last article about &#8220;Rendering External API Data in WordPress Blocks on the Front End&#8221;. 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 site. The thing is, we [&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":"Say you have a WordPress block that renders external API data on the front end. This post shows how to get it working in the block editor, too.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[667,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":373952,"url":"https:\/\/css-tricks.com\/rendering-external-api-data-in-wordpress-blocks-on-the-front-end\/","url_meta":{"origin":374381,"position":0},"title":"Rendering External API Data in WordPress Blocks on the Front End","date":"October 11, 2022","format":false,"excerpt":"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\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":374381,"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":374381,"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":291587,"url":"https:\/\/css-tricks.com\/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin\/","url_meta":{"origin":374381,"position":3},"title":"Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin","date":"June 20, 2019","format":false,"excerpt":"WordPress released their anticipated over to the post editor, nicknamed Gutenberg, which is also referred to as the block editor. It transforms a WordPress post into a collection of blocks that you can add, edit, remove and re-order in the layout. Before the official release, Gutenberg was available as a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/gutenberg-editor-wires.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292306,"url":"https:\/\/css-tricks.com\/finally-a-post-on-finally-in-promises\/","url_meta":{"origin":374381,"position":4},"title":"Finally&#8230; A Post on Finally in Promises","date":"July 16, 2019","format":false,"excerpt":"\u201cWhen does finally fire in a JavaScript promise?\u201d This is a question I was asked in a recent workshop and I thought I\u2019d write up a little post to clear up any confusion. The answer is, to quote Snape: ...always. The basic structure is like this: try { \/\/ I\u2019ll\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/rectangle-pattern_dus4nu.png?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":374381,"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\/374381"}],"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=374381"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374381\/revisions"}],"predecessor-version":[{"id":376189,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/374381\/revisions\/376189"}],"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=374381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=374381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}