[{"data":1,"prerenderedAt":1849},["ShallowReactive",2],{"/guides/wordpress-api":3,"surround":1840},{"id":4,"title":5,"body":6,"date":1831,"description":1832,"extension":1833,"meta":1834,"navigation":324,"path":1835,"seo":1836,"sitemap":1837,"stem":1838,"__hash__":1839},"guides/guides/wordpress-api.md","Using the WordPress API to create a newsletter from your posts",{"type":7,"value":8,"toc":1816},"minimark",[9,13,19,22,33,38,41,64,71,74,77,81,84,99,106,109,117,123,129,138,141,147,158,162,169,242,246,252,256,259,262,970,981,985,992,1123,1126,1155,1159,1168,1238,1245,1248,1715,1718,1741,1745,1748,1760,1763,1766,1782,1786,1812],[10,11,5],"h1",{"id":12},"using-the-wordpress-api-to-create-a-newsletter-from-your-posts",[14,15,18],"p",{"className":16},[17],"text-sm","Last updated: May 30, 2022",[14,20,21],{},"Learn how to use Maizzle to fetch content from an API endpoint, process it, and display it in an HTML email newsletter.",[14,23,24,25,32],{},"You may ",[26,27,31],"a",{"href":28,"rel":29},"https://codepen.io/maizzle/pen/wvaeOVM?editors=1000",[30],"nofollow","preview the final result"," on CodePen.",[34,35,37],"h2",{"id":36},"initial-setup","Initial setup",[14,39,40],{},"As always, let's start by creating a new Maizzle project.",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh","",[49,50,51],"code",{"__ignoreMap":47},[52,53,56,60],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sizJ4","npx",[52,61,63],{"class":62},"sfCc6"," create-maizzle\n",[14,65,66,67,70],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[49,68,69],{},"./example-wordpress",", and select the Default Starter.",[14,72,73],{},"Choose Yes when prompted to Install dependencies.",[14,75,76],{},"Once it finishes installing dependencies, open the project folder in your favorite editor.",[34,78,80],{"id":79},"wordpress-api","WordPress API",[14,82,83],{},"Instead of imagining abstract APIs and how you'd interact with them, let's work with a real one so you can actually follow along and test things out yourself.",[14,85,86,87,92,93,98],{},"Given its popularity, we'll be using the ",[26,88,91],{"href":89,"rel":90},"https://developer.wordpress.org/rest-api/",[30],"WordPress REST API"," in our example. We'll also need to fetch data from a real blog, so let's use the wonderful ",[26,94,97],{"href":95,"rel":96},"https://css-tricks.com",[30],"CSS-Tricks",".",[14,100,101,102],{},"The WordPress API on CSS-Tricks is available at ",[26,103,104],{"href":104,"rel":105},"https://css-tricks.com/wp-json/wp/v2/",[30],[14,107,108],{},"Click that link and you'll see the various routes you can access.",[110,111,113,116],"h3",{"id":112},"posts-route",[49,114,115],{},"/posts"," route",[14,118,119,120,122],{},"We can fetch posts from the ",[49,121,115],{}," route:",[14,124,125],{},[26,126,127],{"href":127,"rel":128},"https://css-tricks.com/wp-json/wp/v2/posts/",[30],[14,130,131,132,137],{},"We can also use ",[26,133,136],{"href":134,"rel":135},"https://developer.wordpress.org/rest-api/reference/posts/#arguments",[30],"query string parameters"," in order to refine our API call.",[14,139,140],{},"For example, this only asks for the 3 latest posts:",[14,142,143],{},[26,144,145],{"href":145,"rel":146},"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=3&_embed=1",[30],[148,149,150,153,154,157],"alert",{},[49,151,152],{},"_embed=1","\n is a request scope that adds a few more fields to the response. We use it to include \n",[49,155,156],{},"_embedded[\"wp:featuredmedia\"]","\n.\n",[34,159,161],{"id":160},"fetch-posts","Fetch posts",[14,163,164,165,168],{},"Let's use the ",[49,166,167],{},"\u003Cfetch>"," tag to fetch posts from the CSS-Tricks WordPress API.",[42,170,175],{"className":171,"code":172,"filename":173,"language":174,"meta":47,"style":47},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cx-main>\n  \u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n    \u003C!-- Posts are now available in {{ response }} -->\n  \u003C/fetch>\n\u003C/x-main>\n","emails/example.html","html",[49,176,177,189,215,222,232],{"__ignoreMap":47},[52,178,179,183,186],{"class":54,"line":55},[52,180,182],{"class":181},"soJEP","\u003C",[52,184,185],{"class":58},"x-main",[52,187,188],{"class":181},">\n",[52,190,192,195,198,202,205,208,211,213],{"class":54,"line":191},2,[52,193,194],{"class":181},"  \u003C",[52,196,197],{"class":58},"fetch",[52,199,201],{"class":200},"sQMLp"," url",[52,203,204],{"class":181},"=",[52,206,207],{"class":200},"\"",[52,209,210],{"class":62},"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1",[52,212,207],{"class":200},[52,214,188],{"class":181},[52,216,218],{"class":54,"line":217},3,[52,219,221],{"class":220},"smVoC","    \u003C!-- Posts are now available in {{ response }} -->\n",[52,223,225,228,230],{"class":54,"line":224},4,[52,226,227],{"class":181},"  \u003C/",[52,229,197],{"class":58},[52,231,188],{"class":181},[52,233,235,238,240],{"class":54,"line":234},5,[52,236,237],{"class":181},"\u003C/",[52,239,185],{"class":58},[52,241,188],{"class":181},[34,243,245],{"id":244},"use-in-template","Use in Template",[14,247,248,251],{},[49,249,250],{},"promotional.html"," in Maizzle displays 6 articles in four different layouts. Above, we're also fetching the latest 6 articles from CSS-Tricks, so it's a perfect fit ✌",[110,253,255],{"id":254},"featured-post","Featured Post",[14,257,258],{},"Let's update the Hero with background image to show the first post.",[14,260,261],{},"Our code becomes:",[42,263,267],{"className":264,"code":265,"filename":173,"language":266,"meta":47,"style":47},"language-hbs shiki shiki-themes tailwind-css tailwind-css","---\nbodyClass: bg-gray-200\ntitle: \"Latest posts on CSS-Tricks\"\npreheader: \"👀 Lorem, ipsum, and much dolor in this week's edition\"\n---\n\n\u003Cx-main>\n  \u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n    \u003C!-- ... existing template markup before the HERO \u003Ctr> -->\n    \u003Ctr>\n      \u003Ctd class=\"bg-top bg-no-repeat bg-cover rounded text-left\" style=\"background-image: url('{{ response[0]._embedded['wp:featuredmedia'][0]['source_url'] || 'https://via.placeholder.com/600x400' }}');\">\n        \u003C!--[if mso]>\n        \u003Cv:image src=\"{{ response[0]._embedded['wp:featuredmedia'][0]['source_url'] || 'https://via.placeholder.com/600x400' }}\" xmlns:v=\"urn:schemas-microsoft-com:vml\" style=\"width:600px;height:400px;\" />\n        \u003Cv:rect fill=\"false\" stroke=\"false\" style=\"position:absolute;width:600px;height:400px;\">\n        \u003Cv:textbox inset=\"0,0,0,0\">\u003Cdiv>\u003C![endif]-->\n        \u003Cdiv class=\"leading-8\">‍\u003C/div>\n        \u003Ctable class=\"w-full\">\n          \u003Ctr>\n            \u003Ctd class=\"w-12 sm:w-4\">\u003C/td>\n            \u003Ctd>\n              \u003Ch1 class=\"m-0 mb-4 text-4xl text-white sm:leading-10\">\n                {{ response[0].title.rendered }}\n              \u003C/h1>\n              \u003Cdiv class=\"m-0 text-white text-lg leading-6\">\n                {{ response[0].excerpt.rendered }}\n              \u003C/div>\n              \u003Cdiv class=\"leading-8\">‍\u003C/div>\n              \u003Ctable>\n                \u003Ctr>\n                  \u003Cth class=\"bg-indigo-800 hover:bg-indigo-700 rounded\" style=\"mso-padding-alt: 16px 24px;\">\n                    \u003Ca href=\"{{ response[0].link }}\" class=\"block font-semibold text-white text-base leading-full py-4 px-6 [text-decoration:none]\">Read more →\u003C/a>\n                  \u003C/th>\n                \u003C/tr>\n              \u003C/table>\n            \u003C/td>\n            \u003Ctd class=\"w-12 sm:w-4\">\u003C/td>\n          \u003C/tr>\n        \u003C/table>\n        \u003Cdiv class=\"leading-8\">‍\u003C/div>\n        \u003C!--[if mso]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n      \u003C/td>\n    \u003C/tr>\n  \u003C/fetch>\n\u003C/x-main>\n","hbs",[49,268,269,274,285,301,315,319,326,335,354,360,371,459,465,471,477,483,515,536,546,572,581,602,622,632,652,670,679,706,715,725,758,817,827,837,846,856,879,889,899,926,932,942,952,961],{"__ignoreMap":47},[52,270,271],{"class":54,"line":55},[52,272,273],{"class":62},"---\n",[52,275,276,279,282],{"class":54,"line":191},[52,277,278],{"class":58},"bodyClass",[52,280,281],{"class":181},":",[52,283,284],{"class":62}," bg-gray-200\n",[52,286,287,290,292,295,298],{"class":54,"line":217},[52,288,289],{"class":58},"title",[52,291,281],{"class":181},[52,293,294],{"class":200}," \"",[52,296,297],{"class":62},"Latest posts on CSS-Tricks",[52,299,300],{"class":200},"\"\n",[52,302,303,306,308,310,313],{"class":54,"line":224},[52,304,305],{"class":58},"preheader",[52,307,281],{"class":181},[52,309,294],{"class":200},[52,311,312],{"class":62},"👀 Lorem, ipsum, and much dolor in this week's edition",[52,314,300],{"class":200},[52,316,317],{"class":54,"line":234},[52,318,273],{"class":62},[52,320,322],{"class":54,"line":321},6,[52,323,325],{"emptyLinePlaceholder":324},true,"\n",[52,327,329,331,333],{"class":54,"line":328},7,[52,330,182],{"class":181},[52,332,185],{"class":58},[52,334,188],{"class":181},[52,336,338,340,342,344,346,348,350,352],{"class":54,"line":337},8,[52,339,194],{"class":181},[52,341,197],{"class":58},[52,343,201],{"class":200},[52,345,204],{"class":181},[52,347,207],{"class":200},[52,349,210],{"class":62},[52,351,207],{"class":200},[52,353,188],{"class":181},[52,355,357],{"class":54,"line":356},9,[52,358,359],{"class":220},"    \u003C!-- ... existing template markup before the HERO \u003Ctr> -->\n",[52,361,363,366,369],{"class":54,"line":362},10,[52,364,365],{"class":181},"    \u003C",[52,367,368],{"class":58},"tr",[52,370,188],{"class":181},[52,372,374,377,380,383,385,387,390,392,395,397,399,402,406,409,412,415,418,420,423,426,428,431,433,435,437,440,442,445,447,450,452,455,457],{"class":54,"line":373},11,[52,375,376],{"class":181},"      \u003C",[52,378,379],{"class":58},"td",[52,381,382],{"class":200}," class",[52,384,204],{"class":181},[52,386,207],{"class":200},[52,388,389],{"class":62},"bg-top bg-no-repeat bg-cover rounded text-left",[52,391,207],{"class":200},[52,393,394],{"class":200}," style",[52,396,204],{"class":181},[52,398,207],{"class":200},[52,400,401],{"class":62},"background-image: url('{{ ",[52,403,405],{"class":404},"s8qYB","response",[52,407,408],{"class":62},"[",[52,410,411],{"class":404},"0",[52,413,414],{"class":62},"]",[52,416,417],{"class":404},"._embedded",[52,419,408],{"class":62},[52,421,422],{"class":200},"'",[52,424,425],{"class":62},"wp:featuredmedia",[52,427,422],{"class":200},[52,429,430],{"class":62},"][",[52,432,411],{"class":404},[52,434,430],{"class":62},[52,436,422],{"class":200},[52,438,439],{"class":62},"source_url",[52,441,422],{"class":200},[52,443,444],{"class":62},"] || ",[52,446,422],{"class":200},[52,448,449],{"class":62},"https://via.placeholder.com/600x400",[52,451,422],{"class":200},[52,453,454],{"class":62}," }}');",[52,456,207],{"class":200},[52,458,188],{"class":181},[52,460,462],{"class":54,"line":461},12,[52,463,464],{"class":220},"        \u003C!--[if mso]>\n",[52,466,468],{"class":54,"line":467},13,[52,469,470],{"class":220},"        \u003Cv:image src=\"{{ response[0]._embedded['wp:featuredmedia'][0]['source_url'] || 'https://via.placeholder.com/600x400' }}\" xmlns:v=\"urn:schemas-microsoft-com:vml\" style=\"width:600px;height:400px;\" />\n",[52,472,474],{"class":54,"line":473},14,[52,475,476],{"class":220},"        \u003Cv:rect fill=\"false\" stroke=\"false\" style=\"position:absolute;width:600px;height:400px;\">\n",[52,478,480],{"class":54,"line":479},15,[52,481,482],{"class":220},"        \u003Cv:textbox inset=\"0,0,0,0\">\u003Cdiv>\u003C![endif]-->\n",[52,484,486,489,492,494,496,498,501,503,506,509,511,513],{"class":54,"line":485},16,[52,487,488],{"class":181},"        \u003C",[52,490,491],{"class":58},"div",[52,493,382],{"class":200},[52,495,204],{"class":181},[52,497,207],{"class":200},[52,499,500],{"class":62},"leading-8",[52,502,207],{"class":200},[52,504,505],{"class":181},">",[52,507,508],{"class":58},"‍",[52,510,237],{"class":181},[52,512,491],{"class":58},[52,514,188],{"class":181},[52,516,518,520,523,525,527,529,532,534],{"class":54,"line":517},17,[52,519,488],{"class":181},[52,521,522],{"class":58},"table",[52,524,382],{"class":200},[52,526,204],{"class":181},[52,528,207],{"class":200},[52,530,531],{"class":62},"w-full",[52,533,207],{"class":200},[52,535,188],{"class":181},[52,537,539,542,544],{"class":54,"line":538},18,[52,540,541],{"class":181},"          \u003C",[52,543,368],{"class":58},[52,545,188],{"class":181},[52,547,549,552,554,556,558,560,563,565,568,570],{"class":54,"line":548},19,[52,550,551],{"class":181},"            \u003C",[52,553,379],{"class":58},[52,555,382],{"class":200},[52,557,204],{"class":181},[52,559,207],{"class":200},[52,561,562],{"class":62},"w-12 sm:w-4",[52,564,207],{"class":200},[52,566,567],{"class":181},">\u003C/",[52,569,379],{"class":58},[52,571,188],{"class":181},[52,573,575,577,579],{"class":54,"line":574},20,[52,576,551],{"class":181},[52,578,379],{"class":58},[52,580,188],{"class":181},[52,582,584,587,589,591,593,595,598,600],{"class":54,"line":583},21,[52,585,586],{"class":181},"              \u003C",[52,588,10],{"class":58},[52,590,382],{"class":200},[52,592,204],{"class":181},[52,594,207],{"class":200},[52,596,597],{"class":62},"m-0 mb-4 text-4xl text-white sm:leading-10",[52,599,207],{"class":200},[52,601,188],{"class":181},[52,603,605,608,610,612,614,616,619],{"class":54,"line":604},22,[52,606,607],{"class":62},"                {{ ",[52,609,405],{"class":404},[52,611,408],{"class":62},[52,613,411],{"class":404},[52,615,414],{"class":62},[52,617,618],{"class":404},".title.rendered",[52,620,621],{"class":62}," }}\n",[52,623,625,628,630],{"class":54,"line":624},23,[52,626,627],{"class":181},"              \u003C/",[52,629,10],{"class":58},[52,631,188],{"class":181},[52,633,635,637,639,641,643,645,648,650],{"class":54,"line":634},24,[52,636,586],{"class":181},[52,638,491],{"class":58},[52,640,382],{"class":200},[52,642,204],{"class":181},[52,644,207],{"class":200},[52,646,647],{"class":62},"m-0 text-white text-lg leading-6",[52,649,207],{"class":200},[52,651,188],{"class":181},[52,653,655,657,659,661,663,665,668],{"class":54,"line":654},25,[52,656,607],{"class":62},[52,658,405],{"class":404},[52,660,408],{"class":62},[52,662,411],{"class":404},[52,664,414],{"class":62},[52,666,667],{"class":404},".excerpt.rendered",[52,669,621],{"class":62},[52,671,673,675,677],{"class":54,"line":672},26,[52,674,627],{"class":181},[52,676,491],{"class":58},[52,678,188],{"class":181},[52,680,682,684,686,688,690,692,694,696,698,700,702,704],{"class":54,"line":681},27,[52,683,586],{"class":181},[52,685,491],{"class":58},[52,687,382],{"class":200},[52,689,204],{"class":181},[52,691,207],{"class":200},[52,693,500],{"class":62},[52,695,207],{"class":200},[52,697,505],{"class":181},[52,699,508],{"class":58},[52,701,237],{"class":181},[52,703,491],{"class":58},[52,705,188],{"class":181},[52,707,709,711,713],{"class":54,"line":708},28,[52,710,586],{"class":181},[52,712,522],{"class":58},[52,714,188],{"class":181},[52,716,718,721,723],{"class":54,"line":717},29,[52,719,720],{"class":181},"                \u003C",[52,722,368],{"class":58},[52,724,188],{"class":181},[52,726,728,731,734,736,738,740,743,745,747,749,751,754,756],{"class":54,"line":727},30,[52,729,730],{"class":181},"                  \u003C",[52,732,733],{"class":58},"th",[52,735,382],{"class":200},[52,737,204],{"class":181},[52,739,207],{"class":200},[52,741,742],{"class":62},"bg-indigo-800 hover:bg-indigo-700 rounded",[52,744,207],{"class":200},[52,746,394],{"class":200},[52,748,204],{"class":181},[52,750,207],{"class":200},[52,752,753],{"class":62},"mso-padding-alt: 16px 24px;",[52,755,207],{"class":200},[52,757,188],{"class":181},[52,759,761,764,766,769,771,773,776,778,780,782,784,787,790,792,794,796,798,801,803,805,808,811,813,815],{"class":54,"line":760},31,[52,762,763],{"class":181},"                    \u003C",[52,765,26],{"class":58},[52,767,768],{"class":200}," href",[52,770,204],{"class":181},[52,772,207],{"class":200},[52,774,775],{"class":62},"{{ ",[52,777,405],{"class":404},[52,779,408],{"class":62},[52,781,411],{"class":404},[52,783,414],{"class":62},[52,785,786],{"class":404},".link",[52,788,789],{"class":62}," }}",[52,791,207],{"class":200},[52,793,382],{"class":200},[52,795,204],{"class":181},[52,797,207],{"class":200},[52,799,800],{"class":62},"block font-semibold text-white text-base leading-full py-4 px-6 [text-decoration:none]",[52,802,207],{"class":200},[52,804,505],{"class":181},[52,806,807],{"class":62},"Read more ",[52,809,810],{"class":58},"→",[52,812,237],{"class":181},[52,814,26],{"class":58},[52,816,188],{"class":181},[52,818,820,823,825],{"class":54,"line":819},32,[52,821,822],{"class":181},"                  \u003C/",[52,824,733],{"class":58},[52,826,188],{"class":181},[52,828,830,833,835],{"class":54,"line":829},33,[52,831,832],{"class":181},"                \u003C/",[52,834,368],{"class":58},[52,836,188],{"class":181},[52,838,840,842,844],{"class":54,"line":839},34,[52,841,627],{"class":181},[52,843,522],{"class":58},[52,845,188],{"class":181},[52,847,849,852,854],{"class":54,"line":848},35,[52,850,851],{"class":181},"            \u003C/",[52,853,379],{"class":58},[52,855,188],{"class":181},[52,857,859,861,863,865,867,869,871,873,875,877],{"class":54,"line":858},36,[52,860,551],{"class":181},[52,862,379],{"class":58},[52,864,382],{"class":200},[52,866,204],{"class":181},[52,868,207],{"class":200},[52,870,562],{"class":62},[52,872,207],{"class":200},[52,874,567],{"class":181},[52,876,379],{"class":58},[52,878,188],{"class":181},[52,880,882,885,887],{"class":54,"line":881},37,[52,883,884],{"class":181},"          \u003C/",[52,886,368],{"class":58},[52,888,188],{"class":181},[52,890,892,895,897],{"class":54,"line":891},38,[52,893,894],{"class":181},"        \u003C/",[52,896,522],{"class":58},[52,898,188],{"class":181},[52,900,902,904,906,908,910,912,914,916,918,920,922,924],{"class":54,"line":901},39,[52,903,488],{"class":181},[52,905,491],{"class":58},[52,907,382],{"class":200},[52,909,204],{"class":181},[52,911,207],{"class":200},[52,913,500],{"class":62},[52,915,207],{"class":200},[52,917,505],{"class":181},[52,919,508],{"class":58},[52,921,237],{"class":181},[52,923,491],{"class":58},[52,925,188],{"class":181},[52,927,929],{"class":54,"line":928},40,[52,930,931],{"class":220},"        \u003C!--[if mso]>\u003C/div>\u003C/v:textbox>\u003C/v:rect>\u003C![endif]-->\n",[52,933,935,938,940],{"class":54,"line":934},41,[52,936,937],{"class":181},"      \u003C/",[52,939,379],{"class":58},[52,941,188],{"class":181},[52,943,945,948,950],{"class":54,"line":944},42,[52,946,947],{"class":181},"    \u003C/",[52,949,368],{"class":58},[52,951,188],{"class":181},[52,953,955,957,959],{"class":54,"line":954},43,[52,956,227],{"class":181},[52,958,197],{"class":58},[52,960,188],{"class":181},[52,962,964,966,968],{"class":54,"line":963},44,[52,965,237],{"class":181},[52,967,185],{"class":58},[52,969,188],{"class":181},[14,971,972,973,976,977,980],{},"We can use ",[49,974,975],{},"response[index]"," to output data for each post, manually. For example, we would use ",[49,978,979],{},"response[1].title.rendered"," to show the title of the second post.",[110,982,984],{"id":983},"post-dates","Post dates",[14,986,987,988,991],{},"We can add a function to ",[49,989,990],{},"config.js"," and use it to format the post's date according to our audience's locale:",[42,993,997],{"className":994,"code":995,"filename":990,"language":996,"meta":47,"style":47},"language-js shiki shiki-themes tailwind-css tailwind-css","module.exports = {\n  formattedDate(str) {\n    const date = new Date(str)\n    return date.toLocaleDateString('en-US', {day: 'numeric', month: 'short', year: 'numeric'})\n  }\n}\n","js",[49,998,999,1017,1034,1057,1113,1118],{"__ignoreMap":47},[52,1000,1001,1004,1007,1010,1014],{"class":54,"line":55},[52,1002,1003],{"class":58},"module",[52,1005,98],{"class":1006},"sprQ5",[52,1008,1009],{"class":58},"exports",[52,1011,1013],{"class":1012},"sVevU"," =",[52,1015,1016],{"class":1006}," {\n",[52,1018,1019,1023,1026,1029,1032],{"class":54,"line":191},[52,1020,1022],{"class":1021},"s2ImL","  formattedDate",[52,1024,1025],{"class":1006},"(",[52,1027,1028],{"class":404},"str",[52,1030,1031],{"class":1006},")",[52,1033,1016],{"class":1006},[52,1035,1036,1039,1042,1044,1047,1050,1052,1054],{"class":54,"line":217},[52,1037,1038],{"class":404},"    const",[52,1040,1041],{"class":62}," date ",[52,1043,204],{"class":1012},[52,1045,1046],{"class":58}," new",[52,1048,1049],{"class":1021}," Date",[52,1051,1025],{"class":62},[52,1053,1028],{"class":404},[52,1055,1056],{"class":62},")\n",[52,1058,1059,1062,1065,1067,1070,1072,1075,1078,1081,1084,1086,1089,1091,1094,1096,1099,1101,1104,1106,1108,1111],{"class":54,"line":224},[52,1060,1061],{"class":58},"    return",[52,1063,1064],{"class":404}," date",[52,1066,98],{"class":1006},[52,1068,1069],{"class":1021},"toLocaleDateString",[52,1071,1025],{"class":62},[52,1073,1074],{"class":62},"'en-US'",[52,1076,1077],{"class":1006},",",[52,1079,1080],{"class":1006}," {",[52,1082,1083],{"class":62},"day",[52,1085,281],{"class":1006},[52,1087,1088],{"class":62}," 'numeric'",[52,1090,1077],{"class":1006},[52,1092,1093],{"class":62}," month",[52,1095,281],{"class":1006},[52,1097,1098],{"class":62}," 'short'",[52,1100,1077],{"class":1006},[52,1102,1103],{"class":62}," year",[52,1105,281],{"class":1006},[52,1107,1088],{"class":62},[52,1109,1110],{"class":1006},"}",[52,1112,1056],{"class":62},[52,1114,1115],{"class":54,"line":234},[52,1116,1117],{"class":1006},"  }\n",[52,1119,1120],{"class":54,"line":321},[52,1121,1122],{"class":1006},"}\n",[14,1124,1125],{},"We can then display it in the template with an expression like this:",[42,1127,1129],{"className":264,"code":1128,"language":266,"meta":47,"style":47},"{{ page.formattedDate(response[1].date) }}\n",[49,1130,1131],{"__ignoreMap":47},[52,1132,1133,1135,1138,1140,1142,1144,1147,1149,1152],{"class":54,"line":55},[52,1134,775],{"class":62},[52,1136,1137],{"class":404},"page.formattedDate",[52,1139,1025],{"class":62},[52,1141,405],{"class":404},[52,1143,408],{"class":62},[52,1145,1146],{"class":404},"1",[52,1148,414],{"class":62},[52,1150,1151],{"class":404},".date",[52,1153,1154],{"class":62},") }}\n",[110,1156,1158],{"id":1157},"looping","Looping",[14,1160,1161,1162,1165,1166,281],{},"We can use the ",[49,1163,1164],{},"\u003Ceach>"," tag in Maizzle to loop over each item in the ",[49,1167,405],{},[42,1169,1171],{"className":264,"code":1170,"language":266,"meta":47,"style":47},"\u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n  \u003Ceach loop=\"post in response\">\n    {{ post.title.rendered }}\n  \u003C/each>\n\u003C/fetch>\n",[49,1172,1173,1191,1212,1222,1230],{"__ignoreMap":47},[52,1174,1175,1177,1179,1181,1183,1185,1187,1189],{"class":54,"line":55},[52,1176,182],{"class":181},[52,1178,197],{"class":58},[52,1180,201],{"class":200},[52,1182,204],{"class":181},[52,1184,207],{"class":200},[52,1186,210],{"class":62},[52,1188,207],{"class":200},[52,1190,188],{"class":181},[52,1192,1193,1195,1198,1201,1203,1205,1208,1210],{"class":54,"line":191},[52,1194,194],{"class":181},[52,1196,1197],{"class":58},"each",[52,1199,1200],{"class":200}," loop",[52,1202,204],{"class":181},[52,1204,207],{"class":200},[52,1206,1207],{"class":62},"post in response",[52,1209,207],{"class":200},[52,1211,188],{"class":181},[52,1213,1214,1217,1220],{"class":54,"line":217},[52,1215,1216],{"class":62},"    {{ ",[52,1218,1219],{"class":404},"post.title.rendered",[52,1221,621],{"class":62},[52,1223,1224,1226,1228],{"class":54,"line":224},[52,1225,227],{"class":181},[52,1227,1197],{"class":58},[52,1229,188],{"class":181},[52,1231,1232,1234,1236],{"class":54,"line":234},[52,1233,237],{"class":181},[52,1235,197],{"class":58},[52,1237,188],{"class":181},[14,1239,1240,1241,98],{},"Want to loop over a specific subset only? You can use ",[26,1242,1244],{"href":1243},"/docs/templates#expressions","expressions",[14,1246,1247],{},"For example, let's show the last 2 posts in a list format at the end of the template:",[42,1249,1251],{"className":264,"code":1250,"filename":173,"language":266,"meta":47,"style":47},"\u003Cx-main>\n  \u003Cfetch url=\"https://css-tricks.com/wp-json/wp/v2/posts?page=1&per_page=6&_embed=1\">\n    \u003Ch3 class=\"m-0 text-base font-semibold text-gray-500 uppercase\">From the archives\u003C/h3>\n    \u003Cdiv class=\"leading-6\">‍\u003C/div>\n    \u003Ctable class=\"w-full\">\n      \u003Ceach loop=\"post in response.slice(-2)\">\n        \u003Ctr>\n          \u003Ctd>\n            \u003Cp class=\"text-xs text-gray-500 mb-0.5\">\n              {{ page.formattedDate(post.date) }}\n            \u003C/p>\n            \u003Ch4 class=\"m-0 mb-1 text-xl font-semibold\">\n              \u003Ca href=\"{{ post.link }}\" class=\"text-blue-500 hover:text-blue-400 [text-decoration:none]\">\n                {{ post.title.rendered }}\n              \u003C/a>\n            \u003C/h4>\n            \u003Cdiv class=\"m-0 text-gray-500\">\n              {{ post.excerpt.rendered }}\n            \u003C/div>\n            \u003Cif condition=\"loop.last\">\n              \u003Ctable class=\"w-full\">\n                \u003Ctr>\n                  \u003Ctd class=\"py-6\">\n                    \u003Cdiv class=\"bg-gray-300 h-px leading-px\">‍\u003C/div>\n                  \u003C/td>\n                \u003C/tr>\n              \u003C/table>\n            \u003C/if>\n          \u003C/td>\n        \u003C/tr>\n      \u003C/each>\n    \u003C/table>\n  \u003C/fetch>\n\u003C/x-main>\n",[49,1252,1253,1261,1279,1307,1334,1352,1371,1379,1387,1406,1420,1428,1448,1482,1490,1498,1506,1525,1534,1542,1563,1581,1589,1608,1635,1643,1651,1659,1667,1675,1683,1691,1699,1707],{"__ignoreMap":47},[52,1254,1255,1257,1259],{"class":54,"line":55},[52,1256,182],{"class":181},[52,1258,185],{"class":58},[52,1260,188],{"class":181},[52,1262,1263,1265,1267,1269,1271,1273,1275,1277],{"class":54,"line":191},[52,1264,194],{"class":181},[52,1266,197],{"class":58},[52,1268,201],{"class":200},[52,1270,204],{"class":181},[52,1272,207],{"class":200},[52,1274,210],{"class":62},[52,1276,207],{"class":200},[52,1278,188],{"class":181},[52,1280,1281,1283,1285,1287,1289,1291,1294,1296,1298,1301,1303,1305],{"class":54,"line":217},[52,1282,365],{"class":181},[52,1284,110],{"class":58},[52,1286,382],{"class":200},[52,1288,204],{"class":181},[52,1290,207],{"class":200},[52,1292,1293],{"class":62},"m-0 text-base font-semibold text-gray-500 uppercase",[52,1295,207],{"class":200},[52,1297,505],{"class":181},[52,1299,1300],{"class":62},"From the archives",[52,1302,237],{"class":181},[52,1304,110],{"class":58},[52,1306,188],{"class":181},[52,1308,1309,1311,1313,1315,1317,1319,1322,1324,1326,1328,1330,1332],{"class":54,"line":224},[52,1310,365],{"class":181},[52,1312,491],{"class":58},[52,1314,382],{"class":200},[52,1316,204],{"class":181},[52,1318,207],{"class":200},[52,1320,1321],{"class":62},"leading-6",[52,1323,207],{"class":200},[52,1325,505],{"class":181},[52,1327,508],{"class":58},[52,1329,237],{"class":181},[52,1331,491],{"class":58},[52,1333,188],{"class":181},[52,1335,1336,1338,1340,1342,1344,1346,1348,1350],{"class":54,"line":234},[52,1337,365],{"class":181},[52,1339,522],{"class":58},[52,1341,382],{"class":200},[52,1343,204],{"class":181},[52,1345,207],{"class":200},[52,1347,531],{"class":62},[52,1349,207],{"class":200},[52,1351,188],{"class":181},[52,1353,1354,1356,1358,1360,1362,1364,1367,1369],{"class":54,"line":321},[52,1355,376],{"class":181},[52,1357,1197],{"class":58},[52,1359,1200],{"class":200},[52,1361,204],{"class":181},[52,1363,207],{"class":200},[52,1365,1366],{"class":62},"post in response.slice(-2)",[52,1368,207],{"class":200},[52,1370,188],{"class":181},[52,1372,1373,1375,1377],{"class":54,"line":328},[52,1374,488],{"class":181},[52,1376,368],{"class":58},[52,1378,188],{"class":181},[52,1380,1381,1383,1385],{"class":54,"line":337},[52,1382,541],{"class":181},[52,1384,379],{"class":58},[52,1386,188],{"class":181},[52,1388,1389,1391,1393,1395,1397,1399,1402,1404],{"class":54,"line":356},[52,1390,551],{"class":181},[52,1392,14],{"class":58},[52,1394,382],{"class":200},[52,1396,204],{"class":181},[52,1398,207],{"class":200},[52,1400,1401],{"class":62},"text-xs text-gray-500 mb-0.5",[52,1403,207],{"class":200},[52,1405,188],{"class":181},[52,1407,1408,1411,1413,1415,1418],{"class":54,"line":362},[52,1409,1410],{"class":62},"              {{ ",[52,1412,1137],{"class":404},[52,1414,1025],{"class":62},[52,1416,1417],{"class":404},"post.date",[52,1419,1154],{"class":62},[52,1421,1422,1424,1426],{"class":54,"line":373},[52,1423,851],{"class":181},[52,1425,14],{"class":58},[52,1427,188],{"class":181},[52,1429,1430,1432,1435,1437,1439,1441,1444,1446],{"class":54,"line":461},[52,1431,551],{"class":181},[52,1433,1434],{"class":58},"h4",[52,1436,382],{"class":200},[52,1438,204],{"class":181},[52,1440,207],{"class":200},[52,1442,1443],{"class":62},"m-0 mb-1 text-xl font-semibold",[52,1445,207],{"class":200},[52,1447,188],{"class":181},[52,1449,1450,1452,1454,1456,1458,1460,1462,1465,1467,1469,1471,1473,1475,1478,1480],{"class":54,"line":467},[52,1451,586],{"class":181},[52,1453,26],{"class":58},[52,1455,768],{"class":200},[52,1457,204],{"class":181},[52,1459,207],{"class":200},[52,1461,775],{"class":62},[52,1463,1464],{"class":404},"post.link",[52,1466,789],{"class":62},[52,1468,207],{"class":200},[52,1470,382],{"class":200},[52,1472,204],{"class":181},[52,1474,207],{"class":200},[52,1476,1477],{"class":62},"text-blue-500 hover:text-blue-400 [text-decoration:none]",[52,1479,207],{"class":200},[52,1481,188],{"class":181},[52,1483,1484,1486,1488],{"class":54,"line":473},[52,1485,607],{"class":62},[52,1487,1219],{"class":404},[52,1489,621],{"class":62},[52,1491,1492,1494,1496],{"class":54,"line":479},[52,1493,627],{"class":181},[52,1495,26],{"class":58},[52,1497,188],{"class":181},[52,1499,1500,1502,1504],{"class":54,"line":485},[52,1501,851],{"class":181},[52,1503,1434],{"class":58},[52,1505,188],{"class":181},[52,1507,1508,1510,1512,1514,1516,1518,1521,1523],{"class":54,"line":517},[52,1509,551],{"class":181},[52,1511,491],{"class":58},[52,1513,382],{"class":200},[52,1515,204],{"class":181},[52,1517,207],{"class":200},[52,1519,1520],{"class":62},"m-0 text-gray-500",[52,1522,207],{"class":200},[52,1524,188],{"class":181},[52,1526,1527,1529,1532],{"class":54,"line":538},[52,1528,1410],{"class":62},[52,1530,1531],{"class":404},"post.excerpt.rendered",[52,1533,621],{"class":62},[52,1535,1536,1538,1540],{"class":54,"line":548},[52,1537,851],{"class":181},[52,1539,491],{"class":58},[52,1541,188],{"class":181},[52,1543,1544,1546,1549,1552,1554,1556,1559,1561],{"class":54,"line":574},[52,1545,551],{"class":181},[52,1547,1548],{"class":58},"if",[52,1550,1551],{"class":200}," condition",[52,1553,204],{"class":181},[52,1555,207],{"class":200},[52,1557,1558],{"class":62},"loop.last",[52,1560,207],{"class":200},[52,1562,188],{"class":181},[52,1564,1565,1567,1569,1571,1573,1575,1577,1579],{"class":54,"line":583},[52,1566,586],{"class":181},[52,1568,522],{"class":58},[52,1570,382],{"class":200},[52,1572,204],{"class":181},[52,1574,207],{"class":200},[52,1576,531],{"class":62},[52,1578,207],{"class":200},[52,1580,188],{"class":181},[52,1582,1583,1585,1587],{"class":54,"line":604},[52,1584,720],{"class":181},[52,1586,368],{"class":58},[52,1588,188],{"class":181},[52,1590,1591,1593,1595,1597,1599,1601,1604,1606],{"class":54,"line":624},[52,1592,730],{"class":181},[52,1594,379],{"class":58},[52,1596,382],{"class":200},[52,1598,204],{"class":181},[52,1600,207],{"class":200},[52,1602,1603],{"class":62},"py-6",[52,1605,207],{"class":200},[52,1607,188],{"class":181},[52,1609,1610,1612,1614,1616,1618,1620,1623,1625,1627,1629,1631,1633],{"class":54,"line":634},[52,1611,763],{"class":181},[52,1613,491],{"class":58},[52,1615,382],{"class":200},[52,1617,204],{"class":181},[52,1619,207],{"class":200},[52,1621,1622],{"class":62},"bg-gray-300 h-px leading-px",[52,1624,207],{"class":200},[52,1626,505],{"class":181},[52,1628,508],{"class":58},[52,1630,237],{"class":181},[52,1632,491],{"class":58},[52,1634,188],{"class":181},[52,1636,1637,1639,1641],{"class":54,"line":654},[52,1638,822],{"class":181},[52,1640,379],{"class":58},[52,1642,188],{"class":181},[52,1644,1645,1647,1649],{"class":54,"line":672},[52,1646,832],{"class":181},[52,1648,368],{"class":58},[52,1650,188],{"class":181},[52,1652,1653,1655,1657],{"class":54,"line":681},[52,1654,627],{"class":181},[52,1656,522],{"class":58},[52,1658,188],{"class":181},[52,1660,1661,1663,1665],{"class":54,"line":708},[52,1662,851],{"class":181},[52,1664,1548],{"class":58},[52,1666,188],{"class":181},[52,1668,1669,1671,1673],{"class":54,"line":717},[52,1670,884],{"class":181},[52,1672,379],{"class":58},[52,1674,188],{"class":181},[52,1676,1677,1679,1681],{"class":54,"line":727},[52,1678,894],{"class":181},[52,1680,368],{"class":58},[52,1682,188],{"class":181},[52,1684,1685,1687,1689],{"class":54,"line":760},[52,1686,937],{"class":181},[52,1688,1197],{"class":58},[52,1690,188],{"class":181},[52,1692,1693,1695,1697],{"class":54,"line":819},[52,1694,947],{"class":181},[52,1696,522],{"class":58},[52,1698,188],{"class":181},[52,1700,1701,1703,1705],{"class":54,"line":829},[52,1702,227],{"class":181},[52,1704,197],{"class":58},[52,1706,188],{"class":181},[52,1708,1709,1711,1713],{"class":54,"line":839},[52,1710,237],{"class":181},[52,1712,185],{"class":58},[52,1714,188],{"class":181},[14,1716,1717],{},"Notes:",[1719,1720,1721,1725],"ul",{},[1722,1723,1724],"li",{},"we also added the post date in a paragraph above the title",[1722,1726,1727,1728,1735,1736,1740],{},"we're using ",[26,1729,1731,1734],{"href":1730},"/docs/tags#loop-meta",[49,1732,1733],{},"loop"," meta"," to output the divider only ",[1737,1738,1739],"em",{},"between"," list items",[34,1742,1744],{"id":1743},"conclusion","Conclusion",[14,1746,1747],{},"All that we've done in this tutorial is to:",[1749,1750,1751,1757],"ol",{},[1722,1752,1753,1754,1756],{},"Use the ",[49,1755,167],{}," tag to fetch JSON data from an API endpoint",[1722,1758,1759],{},"Use that data in a Maizzle template",[14,1761,1762],{},"So this isn't tied to WordPress: it was used as an example because of its convenient API, but you're free to implement it with any other APIs.",[14,1764,1765],{},"Some ideas:",[1719,1767,1768,1771,1774],{},[1722,1769,1770],{},"use your CMS as an authoring system for your newsletter's content",[1722,1772,1773],{},"show the latest products from your store",[1722,1775,1776,1777],{},"include data from ",[26,1778,1781],{"href":1779,"rel":1780},"https://github.com/public-apis/public-apis",[30],"public APIs",[34,1783,1785],{"id":1784},"resources","Resources",[1719,1787,1788,1793,1799,1804],{},[1722,1789,1790],{},[26,1791,97],{"href":95,"rel":1792},[30],[1722,1794,1795],{},[26,1796,1798],{"href":1797},"/docs/events","Maizzle Events",[1722,1800,1801],{},[26,1802,91],{"href":89,"rel":1803},[30],[1722,1805,1806,1811],{},[26,1807,1810],{"href":1808,"rel":1809},"https://github.com/maizzle/starter-wordpress-api",[30],"GitHub repository"," for this tutorial",[1813,1814,1815],"style",{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .s8qYB, html code.shiki .s8qYB{--shiki-light:#3730A3;--shiki-dark:#3730A3}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .s2ImL, html code.shiki .s2ImL{--shiki-light:#00BF99;--shiki-dark:#00BF99}",{"title":47,"searchDepth":191,"depth":191,"links":1817},[1818,1819,1823,1824,1829,1830],{"id":36,"depth":191,"text":37},{"id":79,"depth":191,"text":80,"children":1820},[1821],{"id":112,"depth":217,"text":1822},"/posts route",{"id":160,"depth":191,"text":161},{"id":244,"depth":191,"text":245,"children":1825},[1826,1827,1828],{"id":254,"depth":217,"text":255},{"id":983,"depth":217,"text":984},{"id":1157,"depth":217,"text":1158},{"id":1743,"depth":191,"text":1744},{"id":1784,"depth":191,"text":1785},"2020-03-02T00:00:00.000Z","Learn how to use the WordPress API and Maizzle to create an HTML email newsletter with your latest posts.","md",{},"/guides/wordpress-api",{"title":5,"description":1832},{"loc":1835},"guides/wordpress-api","AfihqwOLOddMEiTa9y488rnGiPwLq-fyMTR5v4nSCyc",[1841,1845],{"title":1842,"path":1843,"stem":1844,"children":-1},"How to create an email newsletter from an RSS feed","/guides/rss-feed","guides/rss-feed",{"title":1846,"path":1847,"stem":1848,"children":-1},"How to use CSS background gradients in HTML emails","/guides/gradients","guides/gradients",1780318597580]