{"id":2,"date":"2022-01-21T00:08:31","date_gmt":"2022-01-21T00:08:31","guid":{"rendered":"https:\/\/loopsandlogic.us.reclaim.cloud\/?page_id=2"},"modified":"2025-11-18T02:17:26","modified_gmt":"2025-11-18T07:17:26","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/loopsandlogic.com\/","title":{"rendered":"Loops &#038; Logic"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull is-light pb-5\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-theme-palette-1-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-db690547 wp-block-group-is-layout-flex\">\n<h1 class=\"wp-block-heading\" id=\"the-wordpress-data-you-want-where-and-how-you-want-it\">The WordPress data you want, where and how you want it.<\/h1>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory wp-repo-embed\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"BlDES0AZPn\"><a href=\"https:\/\/wordpress.org\/plugins\/tangible-loops-and-logic\/\" target=\"_blank\" rel=\"noopener\">Loops &amp; Logic<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Loops &amp; Logic&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/tangible-loops-and-logic\/embed\/#?secret=tWiQGeRad7#?secret=BlDES0AZPn\" data-secret=\"BlDES0AZPn\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignsmall pt-3 pb-4\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center h4 mb-3 text-bold\">You shouldn\u2019t have to be a PHP developer to grab the information you need in WordPress and display it on the frontend of your site. <\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-embed-handler wp-block-embed-embed-handler card overflow-hidden wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"We reinvented HTML for WordPress: Introducing Loops &amp; Logic\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/-ObJkmhJ3qU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"has-text-align-center text-md\">Loops &amp; Logic (L&amp;L) allows you to go beyond the limits of page builders like Gutenberg, Elementor &amp; Beaver Builder by giving you a simple HTML-like syntax to unlock what\u2019s in your database.<\/p>\n\n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile ducky-row is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:20%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<p class=\"mb-1\">Ducky wants to help you learn! <br>Click on his friends to see how we built various parts of this site with L&amp;L.<\/p>\n\n\n<pre class=\"tangible-prism tangible-dynamic-module\" data-tangible-dynamic-module=\"prism\"><code class=\"language-html\">&lt;ul&gt;\n  &lt;Loop type=duck count=3 orderby=grapes order=desc&gt;\n    &lt;li&gt;\n      &lt;a href=&quot;{Field grapes}&quot;&gt;&lt;Field grapes \/&gt;&lt;\/a&gt;\n    &lt;\/li&gt;\n  &lt;\/Loop&gt;\n&lt;\/ul&gt;\n<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:20%\">    <div class=\"tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65{}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .documentation-links{margin-top:1rem}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tab-head{margin-bottom:1rem}@keyframes mmfadeIn{from{opacity:0}to{opacity:1}}@keyframes mmfadeOut{from{opacity:1}to{opacity:0}}@keyframes mmslideIn{from{transform:translateX(15%)}to{transform:translateX(0)}}@keyframes mmslideOut{from{transform:translateX(0)}to{transform:translateX(-10%)}}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck-align-center{text-align:center}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck-align-right{text-align:right}@media (min-width:768px){.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal .micromodal-overlay{padding:0}}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal .micromodal-content{box-shadow:none;width:100%}@media (min-width:768px){.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal .micromodal-content{max-width:750px;border-top-right-radius:0;border-bottom-right-radius:0;align-self:stretch;margin-left:auto}}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal[aria-hidden=\"false\"] .micromodal-overlay{animation:mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal[aria-hidden=\"false\"] .micromodal-content{animation:mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal[aria-hidden=\"true\"] .micromodal-overlay{animation:mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal[aria-hidden=\"true\"] .micromodal-content{animation:mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal .micromodal-content,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tutorial-duck+.micromodal .micromodal-overlay{will-change:transform}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .button-ducky{padding:0;border:0;box-shadow:none;background:none;position:relative}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .button-ducky:hover{border:0;box-shadow:none;background:none}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .button-ducky:focus{border:0;box-shadow:inset 0 0 0 1px var(--global-palette2);background:none}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .button-ducky-overlay{background-image:url(\"\");background-size:cover;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .button-ducky:hover .button-ducky-overlay,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .button-ducky:focus .button-ducky-overlay{opacity:1}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .micromodal-content:last-child{margin-bottom:0}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]{position:relative}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]::after{transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all 0.18s ease-in-out;position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]::before{background-size:100% auto !important;content:\"\"}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]::after{background:#444446;border-radius:4px;text-align:left;color:#ffffff;content:attr(aria-label);font-size:13px;font-weight:normal;padding:0.5em 1em;box-sizing:content-box;white-space:pre-wrap;width:max-content;max-width:500px}@media (max-width:991px){.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]::after{max-width:200px}}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]:hover::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]:focus::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [aria-label][role~=\"tooltip\"]:focus::after{opacity:1;pointer-events:auto}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][aria-label=\"\"]::before{display:none}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][aria-label=\"\"]::after{display:none}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"top\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:6px;width:18px;margin-bottom:5px;transform:translate3d(-50%, 0, 0);bottom:100%;left:50%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"top\"]::after{margin-bottom:11px;transform:translate3d(-50%, 0, 0);bottom:100%;left:50%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:hover::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:focus::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:focus::after{transform:translate3d(-50%, -6px, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top\"]:hover::after{transform:translate3d(-50%, -6px, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]::after{transform:translate3d(calc(-100% + 16px), 0, 0);bottom:100%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]:focus::after{transform:translate3d(calc(-100% + 16px), -6px, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]::after{transform:translate3d(calc(0% + -16px), 0, 0);bottom:100%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]:focus::after{transform:translate3d(calc(0% + -16px), -6px, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0;transform:translate3d(-50%, -10px, 0);bottom:auto;left:50%;top:100%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]::after{margin-top:11px;transform:translate3d(-50%, -10px, 0);top:100%;left:50%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:hover::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:focus::before{transform:translate3d(-50%, 0, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:focus::after{transform:translate3d(-50%, 0, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]::after{transform:translate3d(calc(-100% + 16px), -10px, 0);top:100%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]:focus::after{transform:translate3d(calc(-100% + 16px), 0, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]::after{transform:translate3d(calc(0% + -16px), -10px, 0);top:100%}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]:focus::after{transform:translate3d(calc(0% + -16px), 0, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]::after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px, -50%, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]::after{margin-right:11px}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]:hover::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]:focus::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"left\"]:focus::after{transform:translate3d(0, -50%, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]::after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px, -50%, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]::after{margin-left:11px}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]:hover::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]:hover::after,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]:focus::before,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-position=\"right\"]:focus::after{transform:translate3d(0, -50%, 0)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-size]::after{white-space:initial}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-size=\"small\"]::after{font-size:12px;padding:0.4em 0.6em;line-height:1em;margin:0}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-size=\"small\"]::before{display:none}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-size=\"medium\"]::after{width:150px}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 [role~=\"tooltip\"][data-microtip-size=\"large\"]::after{width:400px;max-width:85vw}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"]{margin-top:2rem}@media (min-width:992px){.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] .tab-head{display:flex;flex-direction:row-reverse}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] .tab-head .download-link{margin-left:auto}}@media (max-width:991px){.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] .tab-head .download-link{margin-bottom:1rem;width:100%;text-align:center}}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] .tab-group{display:flex;margin-right:auto}@media (max-width:991px){.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] .tab-group button[role=\"tab\"]{flex:1 1 100%}}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] div[role=\"tabpanel\"]{transition:all 0.2s ease-in-out}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]{box-shadow:unset}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"][aria-selected=\"true\"]{background-color:var(--global-palette-btn-bg-hover)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .download-link,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .download-link:visited{background:var(--global-palette7);color:var(--global-palette3);border-color:var(--global-palette6);box-shadow:0px 3px 0px 0px var(--global-palette6)}.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .download-link:hover,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .download-link:focus,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .download-link:visited:hover,.tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65 .download-link:visited:focus{background:var(--global-palette6);color:var(--global-palette3);border-color:var(--global-palette5);box-shadow:0px 1px 0px 0px var(--global-palette5);transform:translateY(2px)}<\/style>\n\n\n\n\n\n\n\n  <div class=\"button-ducky\" aria-label=\"\" data-microtip-position=\"top\" role=\"tooltip\"><img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/happy-ducky.png\" width=\"180\" alt=\"\"><span class=\"button-ducky-overlay\"><\/span><\/div>\n<script data-name=\"tangible-template-inline-script\">;(function(){\nvar ducky = \"\";\nvar duckyexpression = \"\";\nvar ducky_speech = \"\";\nvar tooltip_position = \"top\";\nvar modal_code = \"\";\nvar block = {\"controls\":{\"ducky\":{\"attributes\":{\"type\":\"file\",\"name\":\"ducky\",\"label\":\"Button Image\"},\"value\":[]},\"ducky-expression\":{\"attributes\":{\"type\":\"file\",\"name\":\"ducky-expression\",\"label\":\"Button Hover Image\"},\"value\":[]},\"ducky_speech\":{\"attributes\":{\"type\":\"text\",\"name\":\"ducky_speech\",\"label\":\"Button Text\",\"default\":\"Quack! I have a tutorial for you!\"},\"value\":\"\"},\"tooltip_position\":{\"attributes\":{\"type\":\"select\",\"name\":\"tooltip_position\",\"label\":\"Tooltip Position\",\"choices\":{\"left\":\"Left\",\"right\":\"Right\",\"top\":\"Top\",\"bottom\":\"Bottom\"},\"default\":\"right\"},\"value\":\"top\"},\"modal_code\":{\"attributes\":{\"type\":\"text\",\"name\":\"modal_code\",\"label\":\"Snippet name\"},\"value\":\"\"}},\"wrapper\":\"tangible-block-949e6e48-3ce4-4824-affc-8284e3fbac65\",\"post_id\":207,\"universal_id\":\"3490ffefa3f2447e9e3f5b9eb51e162c\",\"builder\":\"gutenberg\"};\n\/*\n*   This content is licensed according to the W3C Software License at\n*   https:\/\/www.w3.org\/Consortium\/Legal\/2015\/copyright-software-and-document\n*\/\n\n(function () {\n  var tablist = document.querySelectorAll('[role=\"tablist\"]')[0];\n  var tabs;\n  var panels;\n\n  generateArrays();\n\n  function generateArrays () {\n    tabs = document.querySelectorAll('[role=\"tab\"]');\n    panels = document.querySelectorAll('[role=\"tabpanel\"]');\n  }\n\n  \/\/ For easy reference\n  var keys = {\n    end: 35,\n    home: 36,\n    left: 37,\n    up: 38,\n    right: 39,\n    down: 40,\n    remove: 46,\n    enter: 13,\n    space: 32\n  };\n\n  \/\/ Add or subtract depending on key pressed\n  var direction = {\n    37: -1,\n    38: -1,\n    39: 1,\n    40: 1\n  }\n\n  \/\/ Bind listeners\n  for (i = 0; i < tabs.length; ++i) {\n    addListeners(i);\n  }\n\n  function addListeners (index) {\n    tabs[index].addEventListener('click', clickEventListener);\n    tabs[index].addEventListener('keydown', keydownEventListener);\n    tabs[index].addEventListener('keyup', keyupEventListener);\n\n    \/\/ Build an array with all tabs (<button>s) in it\n    tabs[index].index = index;\n  }\n\n  \/\/ When a tab is clicked, activateTab is fired to activate it\n  function clickEventListener (event) {\n    var tab = event.target;\n    activateTab(tab, false);\n  }\n\n  \/\/ Handle keydown on tabs\n  function keydownEventListener (event) {\n    var key = event.keyCode;\n\n    switch (key) {\n      case keys.end:\n        event.preventDefault();\n        \/\/ Activate last tab\n        focusLastTab();\n        break;\n      case keys.home:\n        event.preventDefault();\n        \/\/ Activate first tab\n        focusFirstTab();\n        break;\n\n      \/\/ Up and down are in keydown\n      \/\/ because we need to prevent page scroll >:)\n      case keys.up:\n      case keys.down:\n        determineOrientation(event);\n        break;\n    }\n  }\n\n  \/\/ Handle keyup on tabs\n  function keyupEventListener (event) {\n    var key = event.keyCode;\n\n    switch (key) {\n      case keys.left:\n      case keys.right:\n        determineOrientation(event);\n        break;\n      case keys.remove:\n        determineDeletable(event);\n        break;\n      case keys.enter:\n      case keys.space:\n        activateTab(event.target);\n        break;\n    }\n  }\n\n  \/\/ When a tablist\u00e2\u20ac\u2122s aria-orientation is set to vertical,\n  \/\/ only up and down arrow should function.\n  \/\/ In all other cases only left and right arrow function.\n  function determineOrientation (event) {\n    var key = event.keyCode;\n    var vertical = tablist.getAttribute('aria-orientation') == 'vertical';\n    var proceed = false;\n\n    if (vertical) {\n      if (key === keys.up || key === keys.down) {\n        event.preventDefault();\n        proceed = true;\n      };\n    }\n    else {\n      if (key === keys.left || key === keys.right) {\n        proceed = true;\n      }\n    }\n\n    if (proceed) {\n      switchTabOnArrowPress(event);\n    }\n  }\n\n  \/\/ Either focus the next, previous, first, or last tab\n  \/\/ depending on key pressed\n  function switchTabOnArrowPress (event) {\n    var pressed = event.keyCode;\n\n    if (direction[pressed]) {\n      var target = event.target;\n      if (target.index !== undefined) {\n        if (tabs[target.index + direction[pressed]]) {\n          tabs[target.index + direction[pressed]].focus();\n        }\n        else if (pressed === keys.left || pressed === keys.up) {\n          focusLastTab();\n        }\n        else if (pressed === keys.right || pressed == keys.down) {\n          focusFirstTab();\n        }\n      }\n    }\n  }\n\n  \/\/ Activates any given tab panel\n  function activateTab (tab, setFocus) {\n    setFocus = setFocus || true;\n    \/\/ Deactivate all other tabs\n    deactivateTabs();\n\n    \/\/ Remove tabindex attribute\n    tab.removeAttribute('tabindex');\n\n    \/\/ Set the tab as selected\n    tab.setAttribute('aria-selected', 'true');\n\n    \/\/ Get the value of aria-controls (which is an ID)\n    var controls = tab.getAttribute('aria-controls');\n\n    \/\/ Remove hidden attribute from tab panel to make it visible\n    document.getElementById(controls).removeAttribute('hidden');\n\n    \/\/ Set focus when required\n    if (setFocus) {\n      tab.focus();\n    }\n  }\n\n  \/\/ Deactivate all tabs and tab panels\n  function deactivateTabs () {\n    for (t = 0; t < tabs.length; t++) {\n      tabs[t].setAttribute('tabindex', '-1');\n      tabs[t].setAttribute('aria-selected', 'false');\n    }\n\n    for (p = 0; p < panels.length; p++) {\n      panels[p].setAttribute('hidden', 'hidden');\n    }\n  }\n\n  \/\/ Make a guess\n  function focusFirstTab () {\n    tabs[0].focus();\n  }\n\n  \/\/ Make a guess\n  function focusLastTab () {\n    tabs[tabs.length - 1].focus();\n  }\n\n  \/\/ Detect if a tab is deletable\n  function determineDeletable (event) {\n    target = event.target;\n\n    if (target.getAttribute('data-deletable') !== null) {\n      \/\/ Delete target tab\n      deleteTab(event, target);\n\n      \/\/ Update arrays related to tabs widget\n      generateArrays();\n\n      \/\/ Activate the closest tab to the one that was just deleted\n      if (target.index - 1 < 0) {\n        activateTab(tabs[0]);\n      }\n      else {\n        activateTab(tabs[target.index - 1]);\n      }\n    }\n  }\n\n  \/\/ Deletes a tab and its panel\n  function deleteTab (event) {\n    var target = event.target;\n    var panel = document.getElementById(target.getAttribute('aria-controls'));\n\n    target.parentElement.removeChild(target);\n    panel.parentElement.removeChild(panel);\n  }\n\n  \/\/ Determine whether there should be a delay\n  \/\/ when user navigates with the arrow keys\n  function determineDelay () {\n    var hasDelay = tablist.hasAttribute('data-delay');\n    var delay = 0;\n\n    if (hasDelay) {\n      var delayValue = tablist.getAttribute('data-delay');\n      if (delayValue) {\n        delay = delayValue;\n      }\n      else {\n        \/\/ If no value is specified, default to 300ms\n        delay = 300;\n      }\n    }\n\n    return delay;\n  }\n}());\n\n})()<\/script>    <\/div>\n  <\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignwide position-relative mb-0 z-index-1\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"external-resources\">External Resources<\/h2>\n\n\n    <div class=\"tangible-block-82574f1f-2c84-49ad-9abd-046e0713c2df\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-82574f1f-2c84-49ad-9abd-046e0713c2df .tt-item-description{color:var(--global-palette4)}<\/style><ul class=\"tt-loop grid-cols grid-sm-col-2 grid-lg-col-4\">\n      <li class=\"tt-item 87\">\n      <a class=\"card tt-item-wrapper tt-item-link border\" href=\"https:\/\/docs.loopsandlogic.com\/\" target=\"_blank\" rel=\"noopener\">\n        <div class=\"tt-item-content p-2\">\n\n          <div class=\"tt-item-title\">Documentation<\/div>\n          <div class=\"tt-item-description text-xs\">Technical documentation, light on examples. We\u2019re working on rounding this out with more user-friendly content.<\/div>\n        <\/div>\n        <div class=\"tt-item-footer px-2\">\n          <div class=\"tt-item-meta text-sm py-2 border-top\">\n            <div class=\"tt-item-cta\">Visit<\/div>\n          <\/div>\n        <\/div>\n      <\/a>\n    <\/li>\n      <li class=\"tt-item 291\">\n      <a class=\"card tt-item-wrapper tt-item-link border\" href=\"https:\/\/loopsandlogic.com\/roadmap\/\" rel=\"noopener\" target>\n        <div class=\"tt-item-content p-2\">\n\n          <div class=\"tt-item-title\">Roadmap<\/div>\n          <div class=\"tt-item-description text-xs\">See what we have planned for L&#038;L in the coming months<\/div>\n        <\/div>\n        <div class=\"tt-item-footer px-2\">\n          <div class=\"tt-item-meta text-sm py-2 border-top\">\n            <div class=\"tt-item-cta\">Visit<\/div>\n          <\/div>\n        <\/div>\n      <\/a>\n    <\/li>\n      <li class=\"tt-item 88\">\n      <a class=\"card tt-item-wrapper tt-item-link border\" href=\"https:\/\/tangibletalk.com\/\" target=\"_blank\" rel=\"noopener\">\n        <div class=\"tt-item-content p-2\">\n\n          <div class=\"tt-item-title\">Community forums<\/div>\n          <div class=\"tt-item-description text-xs\">Ask questions and discuss with our team and other members of the community<\/div>\n        <\/div>\n        <div class=\"tt-item-footer px-2\">\n          <div class=\"tt-item-meta text-sm py-2 border-top\">\n            <div class=\"tt-item-cta\">Visit<\/div>\n          <\/div>\n        <\/div>\n      <\/a>\n    <\/li>\n      <li class=\"tt-item 305\">\n      <a class=\"card tt-item-wrapper tt-item-link border\" href=\"https:\/\/loopsandlogic.com\/suggest-a-feature\/\" rel=\"noopener\" target>\n        <div class=\"tt-item-content p-2\">\n\n          <div class=\"tt-item-title\">Suggest a Feature<\/div>\n          <div class=\"tt-item-description text-xs\">Need something we haven\u2019t thought of?<\/div>\n        <\/div>\n        <div class=\"tt-item-footer px-2\">\n          <div class=\"tt-item-meta text-sm py-2 border-top\">\n            <div class=\"tt-item-cta\">Visit<\/div>\n          <\/div>\n        <\/div>\n      <\/a>\n    <\/li>\n  \n<\/ul>    <\/div>\n  <\/div><\/div>\n\n\n\n<div class=\"wp-block-group mt-n2\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">    <div class=\"tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8{}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .documentation-links{margin-top:1rem}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tab-head{margin-bottom:1rem}@keyframes mmfadeIn{from{opacity:0}to{opacity:1}}@keyframes mmfadeOut{from{opacity:1}to{opacity:0}}@keyframes mmslideIn{from{transform:translateX(15%)}to{transform:translateX(0)}}@keyframes mmslideOut{from{transform:translateX(0)}to{transform:translateX(-10%)}}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck-align-center{text-align:center}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck-align-right{text-align:right}@media (min-width:768px){.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal .micromodal-overlay{padding:0}}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal .micromodal-content{box-shadow:none;width:100%}@media (min-width:768px){.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal .micromodal-content{max-width:750px;border-top-right-radius:0;border-bottom-right-radius:0;align-self:stretch;margin-left:auto}}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal[aria-hidden=\"false\"] .micromodal-overlay{animation:mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal[aria-hidden=\"false\"] .micromodal-content{animation:mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal[aria-hidden=\"true\"] .micromodal-overlay{animation:mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal[aria-hidden=\"true\"] .micromodal-content{animation:mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal .micromodal-content,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tutorial-duck+.micromodal .micromodal-overlay{will-change:transform}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .button-ducky{padding:0;border:0;box-shadow:none;background:none;position:relative}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .button-ducky:hover{border:0;box-shadow:none;background:none}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .button-ducky:focus{border:0;box-shadow:inset 0 0 0 1px var(--global-palette2);background:none}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .button-ducky-overlay{background-image:url(\"\");background-size:cover;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .button-ducky:hover .button-ducky-overlay,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .button-ducky:focus .button-ducky-overlay{opacity:1}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .micromodal-content:last-child{margin-bottom:0}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]{position:relative}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]::after{transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all 0.18s ease-in-out;position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]::before{background-size:100% auto !important;content:\"\"}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]::after{background:#444446;border-radius:4px;text-align:left;color:#ffffff;content:attr(aria-label);font-size:13px;font-weight:normal;padding:0.5em 1em;box-sizing:content-box;white-space:pre-wrap;width:max-content;max-width:500px}@media (max-width:991px){.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]::after{max-width:200px}}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]:hover::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]:focus::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [aria-label][role~=\"tooltip\"]:focus::after{opacity:1;pointer-events:auto}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][aria-label=\"\"]::before{display:none}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][aria-label=\"\"]::after{display:none}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"top\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:6px;width:18px;margin-bottom:5px;transform:translate3d(-50%, 0, 0);bottom:100%;left:50%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"top\"]::after{margin-bottom:11px;transform:translate3d(-50%, 0, 0);bottom:100%;left:50%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:hover::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:focus::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:focus::after{transform:translate3d(-50%, -6px, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top\"]:hover::after{transform:translate3d(-50%, -6px, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]::after{transform:translate3d(calc(-100% + 16px), 0, 0);bottom:100%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]:focus::after{transform:translate3d(calc(-100% + 16px), -6px, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]::after{transform:translate3d(calc(0% + -16px), 0, 0);bottom:100%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]:focus::after{transform:translate3d(calc(0% + -16px), -6px, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0;transform:translate3d(-50%, -10px, 0);bottom:auto;left:50%;top:100%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]::after{margin-top:11px;transform:translate3d(-50%, -10px, 0);top:100%;left:50%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:hover::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:focus::before{transform:translate3d(-50%, 0, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:focus::after{transform:translate3d(-50%, 0, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]::after{transform:translate3d(calc(-100% + 16px), -10px, 0);top:100%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]:focus::after{transform:translate3d(calc(-100% + 16px), 0, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]::after{transform:translate3d(calc(0% + -16px), -10px, 0);top:100%}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]:focus::after{transform:translate3d(calc(0% + -16px), 0, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]::after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px, -50%, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]::after{margin-right:11px}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]:hover::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]:focus::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"left\"]:focus::after{transform:translate3d(0, -50%, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]::after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px, -50%, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]::after{margin-left:11px}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]:hover::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]:hover::after,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]:focus::before,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-position=\"right\"]:focus::after{transform:translate3d(0, -50%, 0)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-size]::after{white-space:initial}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-size=\"small\"]::after{font-size:12px;padding:0.4em 0.6em;line-height:1em;margin:0}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-size=\"small\"]::before{display:none}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-size=\"medium\"]::after{width:150px}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 [role~=\"tooltip\"][data-microtip-size=\"large\"]::after{width:400px;max-width:85vw}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"]{margin-top:2rem}@media (min-width:992px){.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] .tab-head{display:flex;flex-direction:row-reverse}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] .tab-head .download-link{margin-left:auto}}@media (max-width:991px){.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] .tab-head .download-link{margin-bottom:1rem;width:100%;text-align:center}}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] .tab-group{display:flex;margin-right:auto}@media (max-width:991px){.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] .tab-group button[role=\"tab\"]{flex:1 1 100%}}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] div[role=\"tabpanel\"]{transition:all 0.2s ease-in-out}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]{box-shadow:unset}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"][aria-selected=\"true\"]{background-color:var(--global-palette-btn-bg-hover)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .download-link,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .download-link:visited{background:var(--global-palette7);color:var(--global-palette3);border-color:var(--global-palette6);box-shadow:0px 3px 0px 0px var(--global-palette6)}.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .download-link:hover,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .download-link:focus,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .download-link:visited:hover,.tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8 .download-link:visited:focus{background:var(--global-palette6);color:var(--global-palette3);border-color:var(--global-palette5);box-shadow:0px 1px 0px 0px var(--global-palette5);transform:translateY(2px)}<\/style>\n\n\n\n\n\n\n\n      <div class=\"tutorial-duck tutorial-duck-align-\"> \n      <button class=\"button-ducky\" aria-label=\"Quack! I have a tutorial for you!\" data-microtip-position=\"left\" role=\"tooltip\" onclick=\"MicroModal.show(&#039;modal-{Field id}&#039;)\"><img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/happy-ducky.png\" width=\"100\" alt=\"\"><span class=\"button-ducky-overlay\"><\/span><\/button>\n    <\/div>\n\n    <div class=\"micromodal\" id=\"modal-249\" aria-hidden=\"true\">\n      <div data-micromodal-close class=\"micromodal-overlay\" tabindex=\"-1\" aria-labelledby=\"modal-249-title\">\n        <div class=\"micromodal-content card px-3 py-4\" role=\"dialog\" aria-modal=\"true\">\n          <div class=\"mb-2\" style=\"display: flex; align-items: center;\"><div class=\"h3 text-bold mb-0\" id=\"modal-249-title\">Menu Loop<\/div><button data-micromodal-close class=\"button-link ml-auto\">Close (ESC)<\/button><\/div>\n          <pre class=\"tangible-prism tangible-dynamic-module\" data-tangible-dynamic-module=\"prism\"><code class=\"language-html\">  &lt;ul&gt;\n    &lt;Note&gt;#1&lt;\/Note&gt;\n    &lt;Loop type=menu menu=&quot;CTA Blocks&quot;&gt;\n      &lt;Note&gt;#2&lt;\/Note&gt;\n      &lt;li class=&quot;menu-item menu-item-{Field id}&quot;&gt;\n        &lt;Note&gt;#3&lt;\/Note&gt;\n        &lt;a href=&quot;{Field url}&quot; target=&quot;{Field target}&quot; rel=&quot;noopener&quot;&gt;\n          &lt;Note&gt;#4&lt;\/Note&gt;\n          &lt;div&gt;&lt;Field title \/&gt;&lt;\/div&gt;\n          &lt;div&gt;&lt;Field description \/&gt;&lt;\/div&gt;\n          &lt;div&gt;Visit&lt;\/div&gt;\n        &lt;\/a&gt;\n      &lt;\/li&gt;\n    &lt;\/Loop&gt;\n  &lt;\/ul&gt;\n<\/code><\/pre>\n\n\n<ol class=\"wp-block-list\"><li><code>&lt;Loop type=menu><\/code> outputs menu items in a given menu. The <code>menu<\/code> attribute expects the title or ID of a menu.<\/li><li>Each menu item has an ID, sort of like a post. The ID is useful for generating HTML IDs or unique classnames for styling or Javascript.<\/li><li>The menu loop returns not only the URL of each item, but also the link target for custom menu items, which can be set to open in new tabs.<\/li><li>Finally! A use for the menu item description!<\/li><\/ol>\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\" href=\"https:\/\/loop.tangible.one\/tags\/loop\/menu\" target=\"_blank\" rel=\"noreferrer noopener\">View documentation<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n          \n          \n\n          \n          \n        <\/div>\n      <\/div>\n    <\/div>\n  \n  <script data-name=\"tangible-template-inline-script\">;(function(){\nvar ducky = \"\";\nvar duckyexpression = \"\";\nvar ducky_speech = \"Quack! I have a tutorial for you!\";\nvar tooltip_position = \"left\";\nvar modal_code = \"menu-loop\";\nvar block = {\"controls\":{\"ducky\":{\"attributes\":{\"type\":\"file\",\"name\":\"ducky\",\"label\":\"Button Image\"},\"value\":[]},\"ducky-expression\":{\"attributes\":{\"type\":\"file\",\"name\":\"ducky-expression\",\"label\":\"Button Hover Image\"},\"value\":[]},\"ducky_speech\":{\"attributes\":{\"type\":\"text\",\"name\":\"ducky_speech\",\"label\":\"Button Text\",\"default\":\"Quack! I have a tutorial for you!\"},\"value\":\"Quack! I have a tutorial for you!\"},\"tooltip_position\":{\"attributes\":{\"type\":\"select\",\"name\":\"tooltip_position\",\"label\":\"Tooltip Position\",\"choices\":{\"left\":\"Left\",\"right\":\"Right\",\"top\":\"Top\",\"bottom\":\"Bottom\"},\"default\":\"right\"},\"value\":\"left\"},\"modal_code\":{\"attributes\":{\"type\":\"text\",\"name\":\"modal_code\",\"label\":\"Snippet name\"},\"value\":\"menu-loop\"}},\"wrapper\":\"tangible-block-b4425dcd-6dc6-4109-b8c8-43ac60ad2cf8\",\"post_id\":207,\"universal_id\":\"3490ffefa3f2447e9e3f5b9eb51e162c\",\"builder\":\"gutenberg\"};\n\/*\n*   This content is licensed according to the W3C Software License at\n*   https:\/\/www.w3.org\/Consortium\/Legal\/2015\/copyright-software-and-document\n*\/\n\n(function () {\n  var tablist = document.querySelectorAll('[role=\"tablist\"]')[0];\n  var tabs;\n  var panels;\n\n  generateArrays();\n\n  function generateArrays () {\n    tabs = document.querySelectorAll('[role=\"tab\"]');\n    panels = document.querySelectorAll('[role=\"tabpanel\"]');\n  }\n\n  \/\/ For easy reference\n  var keys = {\n    end: 35,\n    home: 36,\n    left: 37,\n    up: 38,\n    right: 39,\n    down: 40,\n    remove: 46,\n    enter: 13,\n    space: 32\n  };\n\n  \/\/ Add or subtract depending on key pressed\n  var direction = {\n    37: -1,\n    38: -1,\n    39: 1,\n    40: 1\n  }\n\n  \/\/ Bind listeners\n  for (i = 0; i < tabs.length; ++i) {\n    addListeners(i);\n  }\n\n  function addListeners (index) {\n    tabs[index].addEventListener('click', clickEventListener);\n    tabs[index].addEventListener('keydown', keydownEventListener);\n    tabs[index].addEventListener('keyup', keyupEventListener);\n\n    \/\/ Build an array with all tabs (<button>s) in it\n    tabs[index].index = index;\n  }\n\n  \/\/ When a tab is clicked, activateTab is fired to activate it\n  function clickEventListener (event) {\n    var tab = event.target;\n    activateTab(tab, false);\n  }\n\n  \/\/ Handle keydown on tabs\n  function keydownEventListener (event) {\n    var key = event.keyCode;\n\n    switch (key) {\n      case keys.end:\n        event.preventDefault();\n        \/\/ Activate last tab\n        focusLastTab();\n        break;\n      case keys.home:\n        event.preventDefault();\n        \/\/ Activate first tab\n        focusFirstTab();\n        break;\n\n      \/\/ Up and down are in keydown\n      \/\/ because we need to prevent page scroll >:)\n      case keys.up:\n      case keys.down:\n        determineOrientation(event);\n        break;\n    }\n  }\n\n  \/\/ Handle keyup on tabs\n  function keyupEventListener (event) {\n    var key = event.keyCode;\n\n    switch (key) {\n      case keys.left:\n      case keys.right:\n        determineOrientation(event);\n        break;\n      case keys.remove:\n        determineDeletable(event);\n        break;\n      case keys.enter:\n      case keys.space:\n        activateTab(event.target);\n        break;\n    }\n  }\n\n  \/\/ When a tablist\u00e2\u20ac\u2122s aria-orientation is set to vertical,\n  \/\/ only up and down arrow should function.\n  \/\/ In all other cases only left and right arrow function.\n  function determineOrientation (event) {\n    var key = event.keyCode;\n    var vertical = tablist.getAttribute('aria-orientation') == 'vertical';\n    var proceed = false;\n\n    if (vertical) {\n      if (key === keys.up || key === keys.down) {\n        event.preventDefault();\n        proceed = true;\n      };\n    }\n    else {\n      if (key === keys.left || key === keys.right) {\n        proceed = true;\n      }\n    }\n\n    if (proceed) {\n      switchTabOnArrowPress(event);\n    }\n  }\n\n  \/\/ Either focus the next, previous, first, or last tab\n  \/\/ depending on key pressed\n  function switchTabOnArrowPress (event) {\n    var pressed = event.keyCode;\n\n    if (direction[pressed]) {\n      var target = event.target;\n      if (target.index !== undefined) {\n        if (tabs[target.index + direction[pressed]]) {\n          tabs[target.index + direction[pressed]].focus();\n        }\n        else if (pressed === keys.left || pressed === keys.up) {\n          focusLastTab();\n        }\n        else if (pressed === keys.right || pressed == keys.down) {\n          focusFirstTab();\n        }\n      }\n    }\n  }\n\n  \/\/ Activates any given tab panel\n  function activateTab (tab, setFocus) {\n    setFocus = setFocus || true;\n    \/\/ Deactivate all other tabs\n    deactivateTabs();\n\n    \/\/ Remove tabindex attribute\n    tab.removeAttribute('tabindex');\n\n    \/\/ Set the tab as selected\n    tab.setAttribute('aria-selected', 'true');\n\n    \/\/ Get the value of aria-controls (which is an ID)\n    var controls = tab.getAttribute('aria-controls');\n\n    \/\/ Remove hidden attribute from tab panel to make it visible\n    document.getElementById(controls).removeAttribute('hidden');\n\n    \/\/ Set focus when required\n    if (setFocus) {\n      tab.focus();\n    }\n  }\n\n  \/\/ Deactivate all tabs and tab panels\n  function deactivateTabs () {\n    for (t = 0; t < tabs.length; t++) {\n      tabs[t].setAttribute('tabindex', '-1');\n      tabs[t].setAttribute('aria-selected', 'false');\n    }\n\n    for (p = 0; p < panels.length; p++) {\n      panels[p].setAttribute('hidden', 'hidden');\n    }\n  }\n\n  \/\/ Make a guess\n  function focusFirstTab () {\n    tabs[0].focus();\n  }\n\n  \/\/ Make a guess\n  function focusLastTab () {\n    tabs[tabs.length - 1].focus();\n  }\n\n  \/\/ Detect if a tab is deletable\n  function determineDeletable (event) {\n    target = event.target;\n\n    if (target.getAttribute('data-deletable') !== null) {\n      \/\/ Delete target tab\n      deleteTab(event, target);\n\n      \/\/ Update arrays related to tabs widget\n      generateArrays();\n\n      \/\/ Activate the closest tab to the one that was just deleted\n      if (target.index - 1 < 0) {\n        activateTab(tabs[0]);\n      }\n      else {\n        activateTab(tabs[target.index - 1]);\n      }\n    }\n  }\n\n  \/\/ Deletes a tab and its panel\n  function deleteTab (event) {\n    var target = event.target;\n    var panel = document.getElementById(target.getAttribute('aria-controls'));\n\n    target.parentElement.removeChild(target);\n    panel.parentElement.removeChild(panel);\n  }\n\n  \/\/ Determine whether there should be a delay\n  \/\/ when user navigates with the arrow keys\n  function determineDelay () {\n    var hasDelay = tablist.hasAttribute('data-delay');\n    var delay = 0;\n\n    if (hasDelay) {\n      var delayValue = tablist.getAttribute('data-delay');\n      if (delayValue) {\n        delay = delayValue;\n      }\n      else {\n        \/\/ If no value is specified, default to 300ms\n        delay = 300;\n      }\n    }\n\n    return delay;\n  }\n}());\n\n})()<\/script>    <\/div>\n  <\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull mb-n5\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">    <div class=\"tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684{}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .documentation-links{margin-top:1rem}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tab-head{margin-bottom:1rem}@keyframes mmfadeIn{from{opacity:0}to{opacity:1}}@keyframes mmfadeOut{from{opacity:1}to{opacity:0}}@keyframes mmslideIn{from{transform:translateX(15%)}to{transform:translateX(0)}}@keyframes mmslideOut{from{transform:translateX(0)}to{transform:translateX(-10%)}}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck-align-center{text-align:center}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck-align-right{text-align:right}@media (min-width:768px){.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal .micromodal-overlay{padding:0}}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal .micromodal-content{box-shadow:none;width:100%}@media (min-width:768px){.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal .micromodal-content{max-width:750px;border-top-right-radius:0;border-bottom-right-radius:0;align-self:stretch;margin-left:auto}}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal[aria-hidden=\"false\"] .micromodal-overlay{animation:mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal[aria-hidden=\"false\"] .micromodal-content{animation:mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal[aria-hidden=\"true\"] .micromodal-overlay{animation:mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal[aria-hidden=\"true\"] .micromodal-content{animation:mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal .micromodal-content,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tutorial-duck+.micromodal .micromodal-overlay{will-change:transform}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .button-ducky{padding:0;border:0;box-shadow:none;background:none;position:relative}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .button-ducky:hover{border:0;box-shadow:none;background:none}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .button-ducky:focus{border:0;box-shadow:inset 0 0 0 1px var(--global-palette2);background:none}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .button-ducky-overlay{background-image:url(\"\");background-size:cover;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .button-ducky:hover .button-ducky-overlay,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .button-ducky:focus .button-ducky-overlay{opacity:1}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .micromodal-content:last-child{margin-bottom:0}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]{position:relative}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]::after{transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all 0.18s ease-in-out;position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]::before{background-size:100% auto !important;content:\"\"}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]::after{background:#444446;border-radius:4px;text-align:left;color:#ffffff;content:attr(aria-label);font-size:13px;font-weight:normal;padding:0.5em 1em;box-sizing:content-box;white-space:pre-wrap;width:max-content;max-width:500px}@media (max-width:991px){.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]::after{max-width:200px}}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]:hover::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]:focus::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [aria-label][role~=\"tooltip\"]:focus::after{opacity:1;pointer-events:auto}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][aria-label=\"\"]::before{display:none}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][aria-label=\"\"]::after{display:none}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"top\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:6px;width:18px;margin-bottom:5px;transform:translate3d(-50%, 0, 0);bottom:100%;left:50%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"top\"]::after{margin-bottom:11px;transform:translate3d(-50%, 0, 0);bottom:100%;left:50%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:hover::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:focus::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"top\"]:focus::after{transform:translate3d(-50%, -6px, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top\"]:hover::after{transform:translate3d(-50%, -6px, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]::after{transform:translate3d(calc(-100% + 16px), 0, 0);bottom:100%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top-left\"]:focus::after{transform:translate3d(calc(-100% + 16px), -6px, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]::after{transform:translate3d(calc(0% + -16px), 0, 0);bottom:100%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"top-right\"]:focus::after{transform:translate3d(calc(0% + -16px), -6px, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0;transform:translate3d(-50%, -10px, 0);bottom:auto;left:50%;top:100%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]::after{margin-top:11px;transform:translate3d(-50%, -10px, 0);top:100%;left:50%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:hover::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:focus::before{transform:translate3d(-50%, 0, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position|=\"bottom\"]:focus::after{transform:translate3d(-50%, 0, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]::after{transform:translate3d(calc(-100% + 16px), -10px, 0);top:100%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"bottom-left\"]:focus::after{transform:translate3d(calc(-100% + 16px), 0, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]::after{transform:translate3d(calc(0% + -16px), -10px, 0);top:100%}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"bottom-right\"]:focus::after{transform:translate3d(calc(0% + -16px), 0, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]::after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px, -50%, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]::after{margin-right:11px}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]:hover::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]:focus::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"left\"]:focus::after{transform:translate3d(0, -50%, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]::after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px, -50%, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]::before{background:url(\"data:image\/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A\/\/www.w3.org\/2000\/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgb%2868,%2068,%2068%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22\/%3E%3C\/svg%3E\") no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]::after{margin-left:11px}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]:hover::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]:hover::after,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]:focus::before,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-position=\"right\"]:focus::after{transform:translate3d(0, -50%, 0)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-size]::after{white-space:initial}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-size=\"small\"]::after{font-size:12px;padding:0.4em 0.6em;line-height:1em;margin:0}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-size=\"small\"]::before{display:none}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-size=\"medium\"]::after{width:150px}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 [role~=\"tooltip\"][data-microtip-size=\"large\"]::after{width:400px;max-width:85vw}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"]{margin-top:2rem}@media (min-width:992px){.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] .tab-head{display:flex;flex-direction:row-reverse}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] .tab-head .download-link{margin-left:auto}}@media (max-width:991px){.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] .tab-head .download-link{margin-bottom:1rem;width:100%;text-align:center}}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] .tab-group{display:flex;margin-right:auto}@media (max-width:991px){.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] .tab-group button[role=\"tab\"]{flex:1 1 100%}}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] div[role=\"tabpanel\"]{transition:all 0.2s ease-in-out}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]{box-shadow:unset}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .tabs[aria-orientation=\"horizontal\"] button[role=\"tab\"][aria-selected=\"true\"]{background-color:var(--global-palette-btn-bg-hover)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .download-link,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .download-link:visited{background:var(--global-palette7);color:var(--global-palette3);border-color:var(--global-palette6);box-shadow:0px 3px 0px 0px var(--global-palette6)}.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .download-link:hover,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .download-link:focus,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .download-link:visited:hover,.tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684 .download-link:visited:focus{background:var(--global-palette6);color:var(--global-palette3);border-color:var(--global-palette5);box-shadow:0px 1px 0px 0px var(--global-palette5);transform:translateY(2px)}<\/style>\n\n\n\n\n\n\n\n      <div class=\"tutorial-duck tutorial-duck-align-\"> \n      <button class=\"button-ducky\" aria-label=\"Quack! I have a tutorial for you!\" data-microtip-position=\"right\" role=\"tooltip\" onclick=\"MicroModal.show(&#039;modal-{Field id}&#039;)\"><img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/crazy-ducky.png\" width=\"100\" alt=\"\"><span class=\"button-ducky-overlay\"><\/span><\/button>\n    <\/div>\n\n    <div class=\"micromodal\" id=\"modal-256\" aria-hidden=\"true\">\n      <div data-micromodal-close class=\"micromodal-overlay\" tabindex=\"-1\" aria-labelledby=\"modal-256-title\">\n        <div class=\"micromodal-content card px-3 py-4\" role=\"dialog\" aria-modal=\"true\">\n          <div class=\"mb-2\" style=\"display: flex; align-items: center;\"><div class=\"h3 text-bold mb-0\" id=\"modal-256-title\">CPT Review Loop with ACF<\/div><button data-micromodal-close class=\"button-link ml-auto\">Close (ESC)<\/button><\/div>\n          \n<p>The reviews on our homepage are saved as a Custom Post Type (reviews) with ACF fields to handle rating and reviewer details.<\/p>\n\n\n\n<p><\/p>\n\n          \n          \n\n          \n            <div class=\"tabs\" role=\"tablist\" aria-label=\"\" aria-orientation=\"horizontal\">\n              <div class=\"tab-head\">\n                \n                <div class=\"tab-group\">\n                                      \n                    <button class=\"button\" role=\"tab\" aria-selected=\"true\" aria-controls=\"snippetSection1\" id=\"snippetTab1\">Template<\/button>\n                                      \n                    <button class=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"snippetSection2\" id=\"snippetTab2\" tabindex=\"-1\">Style<\/button>\n                  \n                <\/div>\n              <\/div>\n                              \n                <div class=\"snippet-tab\" tabindex=\"0\" role=\"tabpanel\" id=\"snippetSection1\" aria-labelledby=\"snippetTab1\">     \n                  \n                    <pre class=\"tangible-prism tangible-dynamic-module\" data-tangible-dynamic-module=\"prism\"><code class=\"language-html\"> &lt;ul class=&quot;grid-masonry&quot;&gt;\r\n    &lt;Note&gt;1&lt;\/Note&gt;\r\n    &lt;Loop type=reviews orderby_field_number=rating order=desc&gt;\r\n      &lt;li class=&quot;tt-item card {Field post_class}&quot;&gt;\r\n        &lt;div class=&quot;content&quot;&gt;\r\n          &lt;If field=rating&gt;\r\n            &lt;div class=&quot;rating&quot;&gt;\r\n              &lt;Note&gt;2&lt;\/Note&gt;\r\n              &lt;Switch check=&quot;{Field acf_radio=rating}&quot;&gt;\r\n                &lt;When value=&quot;5&quot; \/&gt;\u2605\u2605\u2605\u2605\u2605\r\n                &lt;When value=&quot;4&quot; \/&gt;\u2605\u2605\u2605\u2605\u2606\r\n                &lt;When value=&quot;3&quot; \/&gt;\u2605\u2605\u2605\u2606\u2606\r\n                &lt;When value=&quot;2&quot; \/&gt;\u2605\u2605\u2606\u2606\u2606\r\n                &lt;When value=&quot;1&quot; \/&gt;\u2605\u2606\u2606\u2606\u2606\r\n              &lt;\/Switch&gt;\r\n            &lt;\/div&gt;\r\n          &lt;\/If&gt;\r\n          &lt;div class=&quot;title&quot;&gt;&lt;Field title \/&gt;&lt;\/div&gt;\r\n          &lt;div class=&quot;description&quot;&gt;&lt;Field content \/&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=&quot;footer&quot;&gt;\r\n          &lt;Note&gt;3&lt;\/Note&gt;\r\n          &lt;Set person_content&gt;\r\n            &lt;If field=person_image&gt;\r\n              &lt;span class=&quot;avatar&quot;&gt;&lt;img src=&quot;{Field acf_image=person_image field=url}&quot; alt=&quot;{Field person_name}&quot; \/&gt;&lt;\/span&gt;\r\n            &lt;\/If&gt;\r\n            &lt;div&gt;\r\n              &lt;div class=&quot;name&quot;&gt;&lt;Field person_name \/&gt;&lt;\/div&gt;\r\n              &lt;div class=&quot;role&quot;&gt;&lt;Field person_role \/&gt;&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n          &lt;\/Set&gt;\r\n          &lt;Note&gt;4&lt;\/Note&gt;\r\n          &lt;If field=person_website&gt;\r\n            &lt;a class=&quot;author&quot; href=&quot;{Field person_website}&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;\r\n              &lt;Get person_content \/&gt;\r\n            &lt;\/a&gt;\r\n            &lt;Else \/&gt;\r\n            &lt;div class=&quot;author&quot;&gt;\r\n              &lt;Get person_content \/&gt;\r\n            &lt;\/div&gt;\r\n          &lt;\/If&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n    &lt;\/Loop&gt;\r\n  &lt;\/ul&gt;<\/code><\/pre>\n                  \n                  <ol>\n<li>To open a CPT loop, use the Post Type Slug in the type attribute. You can sort the returned posts by a custom field with <code>orderby_field<\/code> or <code>orderby_field_number<\/code><\/li>\n<li>To save a bit of time, you can use Switch\/When tags for your logic instead of If\/Else. This saves you from having to pass your field to each statement. This rating section could also be written as:<br \/>\n<code>&lt;If check=\"{Field acf_radio=rating}\" value=1&gt;\u2605\u2606\u2606\u2606\u2606&lt;Else if check=\"{Field acf_radio=rating}\" value=2 \/&gt;\u2605\u2605\u2606\u2606\u2606<\/code> etc.<\/li>\n<li>Use Set and Get to save pieces of markup for use elsewhere. In this example it&#8217;s being used for the inner author content, so that it can be placed into alternate wrappers depending on whether there&#8217;s a website link available<\/li>\n<li>When using alternate wrappers, it&#8217;s usually best to approach things this way instead of wrapping the opening and closing tags each in their own if statement<\/li>\n<\/ol>\n\n                <\/div>\n                              \n                <div hidden class=\"snippet-tab\" tabindex=\"0\" role=\"tabpanel\" id=\"snippetSection2\" aria-labelledby=\"snippetTab2\">     \n                  \n                    \n                    <pre class=\"tangible-prism tangible-dynamic-module\" data-tangible-dynamic-module=\"prism\"><code class=\"language-css\">.grid-masonry {\r\n  -moz-column-count: 1;\r\n  -webkit-column-count: 1;\r\n  column-count: 1;\r\n  -moz-column-gap: 1rem;\r\n  -webkit-column-gap: 1rem;\r\n  column-gap: 1rem;\r\n}\r\n\r\n.grid-masonry .tt-item {\r\n  break-inside: avoid;\r\n}\r\n\r\n.card {\r\n  background-color: #fff;\r\n  border-radius: 4px;\r\n  box-shadow: 0 3px 0 #f0f1f2;\r\n  padding: 1rem;\r\n}<\/code><\/pre>\n                    \n                  \n                <\/div>\n              \n            <\/div>\n          \n          \n          <div class=\"documentation-links\">\n            <div class=\"documentation-links__inner\">\n                                                <a href=\"https:\/\/docs.loopsandlogic.com\/docs\/integrations\/acf\" target=\"_blank\" class=\"button\" rel=\"noopener\">Using ACF with L&amp;L<\/a>\n                \n              \n            <\/div>\n          <\/div>\n          \n        <\/div>\n      <\/div>\n    <\/div>\n  \n  <script data-name=\"tangible-template-inline-script\">;(function(){\nvar ducky = \"\";\nvar duckyexpression = \"\";\nvar ducky_speech = \"Quack! I have a tutorial for you!\";\nvar tooltip_position = \"right\";\nvar modal_code = \"custom-review-loop\";\nvar block = {\"controls\":{\"ducky\":{\"attributes\":{\"type\":\"file\",\"name\":\"ducky\",\"label\":\"Button Image\"},\"value\":[{\"id\":223,\"url\":\"https:\\\/\\\/loopsandlogic.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/crazy-ducky.png\",\"value\":\"https:\\\/\\\/loopsandlogic.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/crazy-ducky.png\",\"alt\":\"Crazy ducky\",\"title\":\"crazy-ducky\",\"caption\":\"\",\"description\":\"\"}]},\"ducky-expression\":{\"attributes\":{\"type\":\"file\",\"name\":\"ducky-expression\",\"label\":\"Button Hover Image\"},\"value\":[]},\"ducky_speech\":{\"attributes\":{\"type\":\"text\",\"name\":\"ducky_speech\",\"label\":\"Button Text\",\"default\":\"Quack! I have a tutorial for you!\"},\"value\":\"Quack! I have a tutorial for you!\"},\"tooltip_position\":{\"attributes\":{\"type\":\"select\",\"name\":\"tooltip_position\",\"label\":\"Tooltip Position\",\"choices\":{\"left\":\"Left\",\"right\":\"Right\",\"top\":\"Top\",\"bottom\":\"Bottom\"},\"default\":\"right\"},\"value\":\"right\"},\"modal_code\":{\"attributes\":{\"type\":\"text\",\"name\":\"modal_code\",\"label\":\"Snippet name\"},\"value\":\"custom-review-loop\"}},\"wrapper\":\"tangible-block-e089bf6b-b96b-4793-ab0a-26c40cae0684\",\"post_id\":207,\"universal_id\":\"3490ffefa3f2447e9e3f5b9eb51e162c\",\"builder\":\"gutenberg\"};\n\/*\n*   This content is licensed according to the W3C Software License at\n*   https:\/\/www.w3.org\/Consortium\/Legal\/2015\/copyright-software-and-document\n*\/\n\n(function () {\n  var tablist = document.querySelectorAll('[role=\"tablist\"]')[0];\n  var tabs;\n  var panels;\n\n  generateArrays();\n\n  function generateArrays () {\n    tabs = document.querySelectorAll('[role=\"tab\"]');\n    panels = document.querySelectorAll('[role=\"tabpanel\"]');\n  }\n\n  \/\/ For easy reference\n  var keys = {\n    end: 35,\n    home: 36,\n    left: 37,\n    up: 38,\n    right: 39,\n    down: 40,\n    remove: 46,\n    enter: 13,\n    space: 32\n  };\n\n  \/\/ Add or subtract depending on key pressed\n  var direction = {\n    37: -1,\n    38: -1,\n    39: 1,\n    40: 1\n  }\n\n  \/\/ Bind listeners\n  for (i = 0; i < tabs.length; ++i) {\n    addListeners(i);\n  }\n\n  function addListeners (index) {\n    tabs[index].addEventListener('click', clickEventListener);\n    tabs[index].addEventListener('keydown', keydownEventListener);\n    tabs[index].addEventListener('keyup', keyupEventListener);\n\n    \/\/ Build an array with all tabs (<button>s) in it\n    tabs[index].index = index;\n  }\n\n  \/\/ When a tab is clicked, activateTab is fired to activate it\n  function clickEventListener (event) {\n    var tab = event.target;\n    activateTab(tab, false);\n  }\n\n  \/\/ Handle keydown on tabs\n  function keydownEventListener (event) {\n    var key = event.keyCode;\n\n    switch (key) {\n      case keys.end:\n        event.preventDefault();\n        \/\/ Activate last tab\n        focusLastTab();\n        break;\n      case keys.home:\n        event.preventDefault();\n        \/\/ Activate first tab\n        focusFirstTab();\n        break;\n\n      \/\/ Up and down are in keydown\n      \/\/ because we need to prevent page scroll >:)\n      case keys.up:\n      case keys.down:\n        determineOrientation(event);\n        break;\n    }\n  }\n\n  \/\/ Handle keyup on tabs\n  function keyupEventListener (event) {\n    var key = event.keyCode;\n\n    switch (key) {\n      case keys.left:\n      case keys.right:\n        determineOrientation(event);\n        break;\n      case keys.remove:\n        determineDeletable(event);\n        break;\n      case keys.enter:\n      case keys.space:\n        activateTab(event.target);\n        break;\n    }\n  }\n\n  \/\/ When a tablist\u00e2\u20ac\u2122s aria-orientation is set to vertical,\n  \/\/ only up and down arrow should function.\n  \/\/ In all other cases only left and right arrow function.\n  function determineOrientation (event) {\n    var key = event.keyCode;\n    var vertical = tablist.getAttribute('aria-orientation') == 'vertical';\n    var proceed = false;\n\n    if (vertical) {\n      if (key === keys.up || key === keys.down) {\n        event.preventDefault();\n        proceed = true;\n      };\n    }\n    else {\n      if (key === keys.left || key === keys.right) {\n        proceed = true;\n      }\n    }\n\n    if (proceed) {\n      switchTabOnArrowPress(event);\n    }\n  }\n\n  \/\/ Either focus the next, previous, first, or last tab\n  \/\/ depending on key pressed\n  function switchTabOnArrowPress (event) {\n    var pressed = event.keyCode;\n\n    if (direction[pressed]) {\n      var target = event.target;\n      if (target.index !== undefined) {\n        if (tabs[target.index + direction[pressed]]) {\n          tabs[target.index + direction[pressed]].focus();\n        }\n        else if (pressed === keys.left || pressed === keys.up) {\n          focusLastTab();\n        }\n        else if (pressed === keys.right || pressed == keys.down) {\n          focusFirstTab();\n        }\n      }\n    }\n  }\n\n  \/\/ Activates any given tab panel\n  function activateTab (tab, setFocus) {\n    setFocus = setFocus || true;\n    \/\/ Deactivate all other tabs\n    deactivateTabs();\n\n    \/\/ Remove tabindex attribute\n    tab.removeAttribute('tabindex');\n\n    \/\/ Set the tab as selected\n    tab.setAttribute('aria-selected', 'true');\n\n    \/\/ Get the value of aria-controls (which is an ID)\n    var controls = tab.getAttribute('aria-controls');\n\n    \/\/ Remove hidden attribute from tab panel to make it visible\n    document.getElementById(controls).removeAttribute('hidden');\n\n    \/\/ Set focus when required\n    if (setFocus) {\n      tab.focus();\n    }\n  }\n\n  \/\/ Deactivate all tabs and tab panels\n  function deactivateTabs () {\n    for (t = 0; t < tabs.length; t++) {\n      tabs[t].setAttribute('tabindex', '-1');\n      tabs[t].setAttribute('aria-selected', 'false');\n    }\n\n    for (p = 0; p < panels.length; p++) {\n      panels[p].setAttribute('hidden', 'hidden');\n    }\n  }\n\n  \/\/ Make a guess\n  function focusFirstTab () {\n    tabs[0].focus();\n  }\n\n  \/\/ Make a guess\n  function focusLastTab () {\n    tabs[tabs.length - 1].focus();\n  }\n\n  \/\/ Detect if a tab is deletable\n  function determineDeletable (event) {\n    target = event.target;\n\n    if (target.getAttribute('data-deletable') !== null) {\n      \/\/ Delete target tab\n      deleteTab(event, target);\n\n      \/\/ Update arrays related to tabs widget\n      generateArrays();\n\n      \/\/ Activate the closest tab to the one that was just deleted\n      if (target.index - 1 < 0) {\n        activateTab(tabs[0]);\n      }\n      else {\n        activateTab(tabs[target.index - 1]);\n      }\n    }\n  }\n\n  \/\/ Deletes a tab and its panel\n  function deleteTab (event) {\n    var target = event.target;\n    var panel = document.getElementById(target.getAttribute('aria-controls'));\n\n    target.parentElement.removeChild(target);\n    panel.parentElement.removeChild(panel);\n  }\n\n  \/\/ Determine whether there should be a delay\n  \/\/ when user navigates with the arrow keys\n  function determineDelay () {\n    var hasDelay = tablist.hasAttribute('data-delay');\n    var delay = 0;\n\n    if (hasDelay) {\n      var delayValue = tablist.getAttribute('data-delay');\n      if (delayValue) {\n        delay = delayValue;\n      }\n      else {\n        \/\/ If no value is specified, default to 300ms\n        delay = 300;\n      }\n    }\n\n    return delay;\n  }\n}());\n\n})()<\/script>    <\/div>\n  <\/div><\/div>\n\n\n\n<p class=\"text-lg mt-5 has-theme-palette-3-color has-text-color\">L&amp;L began its life 8 years ago as the well-loved Custom Content Shortcode plugin. <br>Here\u2019s what people had to say about L&amp;L\u2019s predecessor:<\/p>\n\n\n    <div class=\"tangible-block-d96b0e89-36e4-4726-b8b0-9573ea185a7b\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-d96b0e89-36e4-4726-b8b0-9573ea185a7b .grid-masonry .tt-item-wrapper{transform:translatez(0)}.tangible-block-d96b0e89-36e4-4726-b8b0-9573ea185a7b .tt-item-content p{margin-bottom:0.2em}.tangible-block-d96b0e89-36e4-4726-b8b0-9573ea185a7b .tt-item-rating{color:var(--global-palette1);line-height:1}.tangible-block-d96b0e89-36e4-4726-b8b0-9573ea185a7b .tt-item-author{display:flex;align-items:center}<\/style>\n  \n\n<ul class=\"tt-loop grid-masonry grid-sm-col-2 grid-lg-col-3\">\n  \n          \n    <li class=\"tt-item 143\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Absolutely brilliant<\/div>\n          <div class=\"tt-item-description text-xs\"><p>I wish I\u2019d found this years ago.<\/p>\n<p>I\u2019ve used this plugin to create detailed, dynamic loops in very complex sites, saving hours on hours of custom programming. It can draw from WordPress loops, ACF fields, you name it. It\u2019s truly fantastic.<\/p>\n<p>But what prompted this review was this morning\u2019s revelation, that it can create \u201cmeta shortcodes\u201d \u2013 so once you get your complex shortcode-loop structure built, you can create a shortcode <em>out of that<\/em>, and replace it all with one easy-to-use shortcode. I\u2019m so excited to have found this.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 153\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Amazing<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Simply amazing. Does everything I could possibly want, and even more.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 147\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Amazing plugin.<\/div>\n          <div class=\"tt-item-description text-xs\"><p>At a time when many web sites are implemented on templates (wpbakery, Divi, Elementor) that have huge restrictions, this plugin allows you to bypass these restrictions. This plugin deserves your support.<br \/>\nIn combination with ACF, it gives us a lot of possibilities.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 159\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Best Content Shortcode Plugin<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Damn, this plugin saved my time so much. Simple concept but magnificent results. I love this plugin. It gives so many possibilities. What ever page you create, this plugin is a time saver and a must have! Thank You Eliot Akira!<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 148\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Display an ACF \/ CPT in a widget<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Thanks for this! It allowed us to replace a huge chunk of code that was tangled up in a Pro theme when we redid a website (in an effort to simplify it). We used the plugin to pull a title, a preview (featured image), a download URL, and a PDF viewer URL from an ACF \/ custom post type and display all that in a sidebar widget.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 152\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Endless possibilities<\/div>\n          <div class=\"tt-item-description text-xs\"><p>The possibilities are endless\u2026<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 150\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Genius<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Thank you Eliot Akira for this wonderful plugin. Please consider to make this commercial so that:<\/p>\n<p>a) you get paid for your efforts<br \/>\nb) people use it with inner peace.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 155\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">It\u2019s a Doozy \u2013 Love this Plugin<\/div>\n          <div class=\"tt-item-description text-xs\"><p><span style=\"font-family: var(--global-body-font-family);\">I use this plugin with ACF and it saved me the time to handcode templates and snippets to file by way of Elementor, and it served Relationship field types like a champ.<\/span><\/p>\n<p>This allowed me to save the money I would have otherwise had to spend in time (manual coding) and money (buying a paid plugin to serve bidirectional Relationships fields that wasn\u2019t available in standard\/pro Elementor).<\/p>\n<p>Thank you VERY much for this gem.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 158\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Love this plugin<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Makes rapid dev of loop-content pages extremely easy and is likewise lightweight. This should really be part of wordpress core. Fantastic!<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 300\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">State of the art conception. An essential plugin.<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Custom Content Shortcode is THE way to go to take control of your WordPress installation if you cannot modify the source code, either because you cannot access it (eg. if your site is hosted on WordPress.com), or because you simply don\u2019t want to.<\/p>\n<p>These shortcodes are perfectly well thought and designed, they are just coherent and consistent all the way. It just feels like they are a native feature of WordPress.<\/p>\n<p>Combine with custom post type plugins like WCK and ACF to unlock the full power of WP, without the need to modify a single source file.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 151\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Superb! Saved my day with custom post types.<\/div>\n          <div class=\"tt-item-description text-xs\"><p>I created a custom post type to separate a specific kind of post (with custom fields) from the regular blog posts. But I was struggling to find a way to list the available custom post entries in a sidebar and had not found any plugins with the flexibility and formatting control that I needed.<\/p>\n<p>With this plug-in I was able to create 8-10 lines of shortcoding in a custom HTML widget that listed the most recent posts, showed the date\/author of each in a smaller font than the title and finished up with a pagination control allowing the user to scroll through all available posts.<\/p>\n<p>Superb!<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 149\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Thank you for this great plugin!<\/div>\n          <div class=\"tt-item-description text-xs\"><p>I was looking since days for a way to show and sort lists of custom fields and only with this plugin I could finally manage to create those kind of lists.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 154\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Unlimited possibilities<\/div>\n          <div class=\"tt-item-description text-xs\"><p>It opens endless possibilities, especially when working with ACF and custom post types.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 142\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Words are not enough\u2026!<\/div>\n          <div class=\"tt-item-description text-xs\"><p>This is amazing. Saved me hours and hours, and ended up with a much better site in the end.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n    \n    \n<\/ul>\n    <\/div>\n  \n\n\n<div style=\"height:56px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-left h4 text-bold mt-3 mb-1 has-theme-palette-3-color has-text-color\">How on earth can Loops &amp; Logic top all of that?<\/p>\n\n\n\n<p class=\"text-lg mt-2 has-theme-palette-3-color has-text-color\">Well, L&amp;L is generating its own wall of positive reviews, too:<\/p>\n\n\n    <div class=\"tangible-block-290405b5-b8a1-4ab9-8376-2b1be219f8b4\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-290405b5-b8a1-4ab9-8376-2b1be219f8b4 .grid-masonry .tt-item-wrapper{transform:translatez(0)}.tangible-block-290405b5-b8a1-4ab9-8376-2b1be219f8b4 .tt-item-content p{margin-bottom:0.2em}.tangible-block-290405b5-b8a1-4ab9-8376-2b1be219f8b4 .tt-item-rating{color:var(--global-palette1);line-height:1}.tangible-block-290405b5-b8a1-4ab9-8376-2b1be219f8b4 .tt-item-author{display:flex;align-items:center}<\/style>\n  \n\n<ul class=\"tt-loop grid-masonry grid-sm-col-2 grid-lg-col-3\">\n  \n          \n    <li class=\"tt-item 143\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Absolutely brilliant<\/div>\n          <div class=\"tt-item-description text-xs\"><p>I wish I\u2019d found this years ago.<\/p>\n<p>I\u2019ve used this plugin to create detailed, dynamic loops in very complex sites, saving hours on hours of custom programming. It can draw from WordPress loops, ACF fields, you name it. It\u2019s truly fantastic.<\/p>\n<p>But what prompted this review was this morning\u2019s revelation, that it can create \u201cmeta shortcodes\u201d \u2013 so once you get your complex shortcode-loop structure built, you can create a shortcode <em>out of that<\/em>, and replace it all with one easy-to-use shortcode. I\u2019m so excited to have found this.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 153\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Amazing<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Simply amazing. Does everything I could possibly want, and even more.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 147\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Amazing plugin.<\/div>\n          <div class=\"tt-item-description text-xs\"><p>At a time when many web sites are implemented on templates (wpbakery, Divi, Elementor) that have huge restrictions, this plugin allows you to bypass these restrictions. This plugin deserves your support.<br \/>\nIn combination with ACF, it gives us a lot of possibilities.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 159\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Best Content Shortcode Plugin<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Damn, this plugin saved my time so much. Simple concept but magnificent results. I love this plugin. It gives so many possibilities. What ever page you create, this plugin is a time saver and a must have! Thank You Eliot Akira!<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 148\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Display an ACF \/ CPT in a widget<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Thanks for this! It allowed us to replace a huge chunk of code that was tangled up in a Pro theme when we redid a website (in an effort to simplify it). We used the plugin to pull a title, a preview (featured image), a download URL, and a PDF viewer URL from an ACF \/ custom post type and display all that in a sidebar widget.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 152\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Endless possibilities<\/div>\n          <div class=\"tt-item-description text-xs\"><p>The possibilities are endless\u2026<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 150\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Genius<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Thank you Eliot Akira for this wonderful plugin. Please consider to make this commercial so that:<\/p>\n<p>a) you get paid for your efforts<br \/>\nb) people use it with inner peace.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 155\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">It\u2019s a Doozy \u2013 Love this Plugin<\/div>\n          <div class=\"tt-item-description text-xs\"><p><span style=\"font-family: var(--global-body-font-family);\">I use this plugin with ACF and it saved me the time to handcode templates and snippets to file by way of Elementor, and it served Relationship field types like a champ.<\/span><\/p>\n<p>This allowed me to save the money I would have otherwise had to spend in time (manual coding) and money (buying a paid plugin to serve bidirectional Relationships fields that wasn\u2019t available in standard\/pro Elementor).<\/p>\n<p>Thank you VERY much for this gem.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 158\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Love this plugin<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Makes rapid dev of loop-content pages extremely easy and is likewise lightweight. This should really be part of wordpress core. Fantastic!<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 300\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">State of the art conception. An essential plugin.<\/div>\n          <div class=\"tt-item-description text-xs\"><p>Custom Content Shortcode is THE way to go to take control of your WordPress installation if you cannot modify the source code, either because you cannot access it (eg. if your site is hosted on WordPress.com), or because you simply don\u2019t want to.<\/p>\n<p>These shortcodes are perfectly well thought and designed, they are just coherent and consistent all the way. It just feels like they are a native feature of WordPress.<\/p>\n<p>Combine with custom post type plugins like WCK and ACF to unlock the full power of WP, without the need to modify a single source file.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 151\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Superb! Saved my day with custom post types.<\/div>\n          <div class=\"tt-item-description text-xs\"><p>I created a custom post type to separate a specific kind of post (with custom fields) from the regular blog posts. But I was struggling to find a way to list the available custom post entries in a sidebar and had not found any plugins with the flexibility and formatting control that I needed.<\/p>\n<p>With this plug-in I was able to create 8-10 lines of shortcoding in a custom HTML widget that listed the most recent posts, showed the date\/author of each in a smaller font than the title and finished up with a pagination control allowing the user to scroll through all available posts.<\/p>\n<p>Superb!<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 149\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Thank you for this great plugin!<\/div>\n          <div class=\"tt-item-description text-xs\"><p>I was looking since days for a way to show and sort lists of custom fields and only with this plugin I could finally manage to create those kind of lists.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 154\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Unlimited possibilities<\/div>\n          <div class=\"tt-item-description text-xs\"><p>It opens endless possibilities, especially when working with ACF and custom post types.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n          \n    <li class=\"tt-item 142\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-rating mb-1\">\u2605\u2605\u2605\u2605\u2605<\/div>\n          <div class=\"tt-item-title\">Words are not enough\u2026!<\/div>\n          <div class=\"tt-item-description text-xs\"><p>This is amazing. Saved me hours and hours, and ended up with a much better site in the end.<\/p>\n<\/div>\n        <\/div>\n      <\/div>\n    <\/li>\n  \n    \n    \n<\/ul>\n    <\/div>\n  \n\n\n<p class=\"has-text-align-center h3 text-bold mt-2\">And here are just a few of the new superpowers you get with L&amp;L:<\/p>\n\n\n\n<div class=\"wp-block-group alignwide mb-4\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">    <div class=\"tangible-block-61ab4518-5b33-4634-b492-2600523176c2\">\n      <ul class=\"tt-loop grid-cols grid-md-col-2\">\n      <li class=\"tt-item tt-item-inline post-312 features type-features status-publish has-post-thumbnail hentry tag-featured mb-0\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-image-panel\">\n          <img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/feature-location.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-title\">Use as a theme builder with Layouts<\/div>\n          <div class=\"tt-item-description text-xs\">Add location rules to use layouts in your theme<\/div>\n        <\/div>\n        \n      <\/div>\n    <\/li>\n      <li class=\"tt-item tt-item-inline post-308 features type-features status-publish has-post-thumbnail hentry tag-featured mb-0\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-image-panel\">\n          <img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/feature-template-shortcode.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-title\">Load L&L templates with shortcodes<\/div>\n          <div class=\"tt-item-description text-xs\">Use the &lsqb;template&rsqb; shortcode to output one of your saved templates with support for passing attributes to use as local variables.<\/div>\n        <\/div>\n        \n      <\/div>\n    <\/li>\n      <li class=\"tt-item tt-item-inline post-309 features type-features status-publish has-post-thumbnail hentry tag-featured mb-0\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-image-panel\">\n          <img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/feature-wpfusion-integration-code.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-title\">WP Fusion integration<\/div>\n          <div class=\"tt-item-description text-xs\">Use L&L to get WP Fusion user tags and test whether content is restricted<\/div>\n        <\/div>\n        \n      <\/div>\n    <\/li>\n      <li class=\"tt-item tt-item-inline post-310 features type-features status-publish has-post-thumbnail hentry tag-featured mb-0\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-image-panel\">\n          <img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/feature-sass.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-title\">Use Sass without a compiler<\/div>\n          <div class=\"tt-item-description text-xs\">Use Sass, the popular CSS extension language, without a compile step<\/div>\n        <\/div>\n        \n      <\/div>\n    <\/li>\n      <li class=\"tt-item tt-item-inline post-311 features type-features status-publish has-post-thumbnail hentry tag-featured mb-0\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-image-panel\">\n          <img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/feature-sass-js-variables.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-title\">Pass variables to CSS and JS<\/div>\n          <div class=\"tt-item-description text-xs\">Set JS and Sass variables to easily pass data from your main template to your styles and scripts<\/div>\n        <\/div>\n        \n      <\/div>\n    <\/li>\n      <li class=\"tt-item tt-item-inline post-313 features type-features status-publish has-post-thumbnail hentry tag-featured mb-0\">\n      <div class=\"card tt-item-wrapper border\">\n        <div class=\"tt-item-image-panel\">\n          <img decoding=\"async\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2022\/01\/feature-integrations.jpg\" alt=\"\">\n        <\/div>\n        <div class=\"tt-item-content p-2\">\n          <div class=\"tt-item-title\">Upcoming premium integration with 6 popular plugins<\/div>\n          <div class=\"tt-item-description text-xs\">WooCommerce, Gravity Forms, Easy Digital Downloads, LearnDash, Lifter LMS and The Events Calendar<\/div>\n        <\/div>\n        \n      <\/div>\n    <\/li>\n  \n<\/ul>    <\/div>\n  \n\n\n<div style=\"height:64px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover is-light card p-4 pb-5\" style=\"min-height:300px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-theme-palette-1-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"get-updates-and-be-the-first-to-know-when-the-pro-version-launches\">Get updates and be the first to know when the pro version launches!<\/h2>\n\n\n<script>\nvar gform;gform||(document.addEventListener(\"gform_main_scripts_loaded\",function(){gform.scriptsLoaded=!0}),document.addEventListener(\"gform\/theme\/scripts_loaded\",function(){gform.themeScriptsLoaded=!0}),window.addEventListener(\"DOMContentLoaded\",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,themeScriptsLoaded:!1,isFormEditor:()=>\"function\"==typeof InitializeEditor,callIfLoaded:function(o){return!(!gform.domLoaded||!gform.scriptsLoaded||!gform.themeScriptsLoaded&&!gform.isFormEditor()||(gform.isFormEditor()&&console.warn(\"The use of gform.initializeOnLoaded() is deprecated in the form editor context and will be removed in Gravity Forms 3.1.\"),o(),0))},initializeOnLoaded:function(o){gform.callIfLoaded(o)||(document.addEventListener(\"gform_main_scripts_loaded\",()=>{gform.scriptsLoaded=!0,gform.callIfLoaded(o)}),document.addEventListener(\"gform\/theme\/scripts_loaded\",()=>{gform.themeScriptsLoaded=!0,gform.callIfLoaded(o)}),window.addEventListener(\"DOMContentLoaded\",()=>{gform.domLoaded=!0,gform.callIfLoaded(o)}))},hooks:{action:{},filter:{}},addAction:function(o,r,e,t){gform.addHook(\"action\",o,r,e,t)},addFilter:function(o,r,e,t){gform.addHook(\"filter\",o,r,e,t)},doAction:function(o){gform.doHook(\"action\",o,arguments)},applyFilters:function(o){return gform.doHook(\"filter\",o,arguments)},removeAction:function(o,r){gform.removeHook(\"action\",o,r)},removeFilter:function(o,r,e){gform.removeHook(\"filter\",o,r,e)},addHook:function(o,r,e,t,n){null==gform.hooks[o][r]&&(gform.hooks[o][r]=[]);var d=gform.hooks[o][r];null==n&&(n=r+\"_\"+d.length),gform.hooks[o][r].push({tag:n,callable:e,priority:t=null==t?10:t})},doHook:function(r,o,e){var t;if(e=Array.prototype.slice.call(e,1),null!=gform.hooks[r][o]&&((o=gform.hooks[r][o]).sort(function(o,r){return o.priority-r.priority}),o.forEach(function(o){\"function\"!=typeof(t=o.callable)&&(t=window[t]),\"action\"==r?t.apply(null,e):e[0]=t.apply(null,e)})),\"filter\"==r)return e[0]},removeHook:function(o,r,t,n){var e;null!=gform.hooks[o][r]&&(e=(e=gform.hooks[o][r]).filter(function(o,r,e){return!!(null!=n&&n!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][r]=e)}});\n<\/script>\n\n                <div class='gf_browser_gecko gform_wrapper gravity-theme gform-theme--no-framework gf_simple_horizontal_wrapper' data-form-theme='gravity-theme' data-form-index='0' id='gform_wrapper_1' ><div id='gf_1' class='gform_anchor' tabindex='-1'><\/div><form method='post' enctype='multipart\/form-data' target='gform_ajax_frame_1' id='gform_1' class='gf_simple_horizontal' action='\/wp-json\/wp\/v2\/pages\/2#gf_1' data-formid='1' novalidate>\n                        <div class='gform-body gform_body'><div id='gform_fields_1' class='gform_fields top_label form_sublabel_below description_below validation_below'><div id=\"field_1_3\" class=\"gfield gfield--type-email gfield_contains_required field_sublabel_below gfield--no-description field_description_below hidden_label field_validation_below gfield_visibility_visible\"  ><label class='gfield_label gform-field-label' for='input_1_3'>Email<span class=\"gfield_required\"><span class=\"gfield_required gfield_required_text\">(Required)<\/span><\/span><\/label><div class='ginput_container ginput_container_email'>\n                            <input name='input_3' id='input_1_3' type='email' value='' class='large'   placeholder='Email' aria-required=\"true\" aria-invalid=\"false\"  \/>\n                        <\/div><\/div><div id=\"field_1_4\" class=\"gfield gfield--type-hidden gfield--width-full gform_hidden field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible\"  ><div class='ginput_container ginput_container_text'><input name='input_4' id='input_1_4' type='hidden' class='gform_hidden'  aria-invalid=\"false\" value='https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/pages\/2' \/><\/div><\/div><\/div><\/div>\n        <div class='gform-footer gform_footer top_label'> <div class=\"gf-turnstile-container\"> <div id=\"cf-turnstile-gf-1\" class=\"cf-turnstile\" data-sitekey=\"0x4AAAAAAAC2SY0hbeR-XUJ9\" data-theme=\"light\" data-language=\"auto\" data-size=\"\" data-retry=\"auto\" data-retry-interval=\"1000\" data-refresh-expired=\"auto\" data-refresh-timeout=\"auto\" data-action=\"gravity-form-1\" data-callback=\"turnstileGravityCallback\" data-appearance=\"interaction-only\"><\/div> <script>document.addEventListener(\"DOMContentLoaded\", function() { setTimeout(function(){ var e=document.getElementById(\"cf-turnstile-gf-1\"); if(e&&!e.innerHTML.trim()){turnstile.render(e, {sitekey:\"0x4AAAAAAAC2SY0hbeR-XUJ9\"});} }, 200); });<\/script> <style>#cf-turnstile-gf-1 iframe { margin-bottom: 15px; }<\/style> <style>#cf-turnstile-gf-1 { margin-left: -15px; }<\/style> <\/div> <style> .gf-turnstile-container { width: 100%; } .gform_footer.top_label { display: flex; flex-wrap: wrap; } <\/style> <script>document.addEventListener(\"DOMContentLoaded\", function() {document.addEventListener('gform\/post_render', function handlePostRender(event) {if (event.detail.formId !== 1) {return;}gform.utils.addAsyncFilter('gform\/submission\/pre_submission', async function handlePreSubmission(data) {document.addEventListener('gform\/post_render', function rerenderTurnstile(event) {if (event.detail.formId !== 1) {return;}const turnstileElement = document.getElementById('cf-turnstile-gf-1');if (turnstileElement) {turnstile.remove('#cf-turnstile-gf-1');turnstile.render('#cf-turnstile-gf-1');}document.removeEventListener('gform\/post_render', rerenderTurnstile);});gform.utils.removeFilter('gform\/submission\/pre_submission', handlePreSubmission);return data;});document.removeEventListener('gform\/post_render', handlePostRender);});});<\/script><input type='submit' id='gform_submit_button_1' class='gform_button button' onclick='gform.submission.handleButtonClick(this);' data-submission-type='submit' value='Stay in the loop'  \/> <input type='hidden' name='gform_ajax' value='form_id=1&amp;title=&amp;description=&amp;tabindex=0&amp;theme=gravity-theme&amp;styles={&quot;inputPrimaryColor&quot;:&quot;#204ce5&quot;}&amp;hash=df287d5852a7ee096cec0f00bbb714ff' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submission_method' data-js='gform_submission_method_1' value='iframe' \/>\n            <input type='hidden' class='gform_hidden' name='gform_theme' data-js='gform_theme_1' id='gform_theme_1' value='gravity-theme' \/>\n            <input type='hidden' class='gform_hidden' name='gform_style_settings' data-js='gform_style_settings_1' id='gform_style_settings_1' value='{&quot;inputPrimaryColor&quot;:&quot;#204ce5&quot;}' \/>\n            <input type='hidden' class='gform_hidden' name='is_submit_1' value='1' \/>\n            <input type='hidden' class='gform_hidden' name='gform_submit' value='1' \/>\n            \n            <input type='hidden' class='gform_hidden' name='gform_currency' data-currency='USD' value='snibW0jDnBjfhlTLoaw9Fbq767WA+J2QJRtx0MhLIT\/xFTI1cA44RrJtyZsYH3MOCvY525olwI1c1QngZmfanNOloRjJeJiWbjjN73hc0ORNf8c=' \/>\n            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' \/>\n            <input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsImNjNmFiOWRkMDY0NzFkN2Y1M2I5ZDViMTg1NTBjMzcxIl0=' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' \/>\n            <input type='hidden' autocomplete='off' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' \/>\n            <input type='hidden' name='gform_field_values' value='' \/>\n            \n        <\/div>\n                        <\/form>\n                        <\/div>\n\t\t                <iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_1' id='gform_ajax_frame_1' title='This iframe contains the logic required to handle Ajax powered Gravity Forms.'><\/iframe>\n\t\t                <script>\ngform.initializeOnLoaded( function() {gformInitSpinner( 1, 'https:\/\/loopsandlogic.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery('#gform_ajax_frame_1').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_1');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_1').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_1').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_1').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_1').removeClass('gform_validation_error');}setTimeout( function() { \/* delay the scroll by 50 milliseconds to fix a bug in chrome *\/ jQuery(document).scrollTop(jQuery('#gform_wrapper_1').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_1').val();gformInitSpinner( 1, 'https:\/\/loopsandlogic.com\/wp-content\/plugins\/gravityforms\/images\/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [1, current_page]);window['gf_submitting_1'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_1').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_1').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [1]);window['gf_submitting_1'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_1').text());}else{jQuery('#gform_1').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger(\"gform_pre_post_render\", [{ formId: \"1\", currentPage: \"current_page\", abort: function() { this.preventDefault(); } }]);        if (event && event.defaultPrevented) {                return;        }        const gformWrapperDiv = document.getElementById( \"gform_wrapper_1\" );        if ( gformWrapperDiv ) {            const visibilitySpan = document.createElement( \"span\" );            visibilitySpan.id = \"gform_visibility_test_1\";            gformWrapperDiv.insertAdjacentElement( \"afterend\", visibilitySpan );        }        const visibilityTestDiv = document.getElementById( \"gform_visibility_test_1\" );        let postRenderFired = false;        function triggerPostRender() {            if ( postRenderFired ) {                return;            }            postRenderFired = true;            gform.core.triggerPostRenderEvents( 1, current_page );            if ( visibilityTestDiv ) {                visibilityTestDiv.parentNode.removeChild( visibilityTestDiv );            }        }        function debounce( func, wait, immediate ) {            var timeout;            return function() {                var context = this, args = arguments;                var later = function() {                    timeout = null;                    if ( !immediate ) func.apply( context, args );                };                var callNow = immediate && !timeout;                clearTimeout( timeout );                timeout = setTimeout( later, wait );                if ( callNow ) func.apply( context, args );            };        }        const debouncedTriggerPostRender = debounce( function() {            triggerPostRender();        }, 200 );        if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) {            const observer = new MutationObserver( ( mutations ) => {                mutations.forEach( ( mutation ) => {                    if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) {                        debouncedTriggerPostRender();                        observer.disconnect();                    }                });            });            observer.observe( document.body, {                attributes: true,                childList: false,                subtree: true,                attributeFilter: [ 'style', 'class' ],            });        } else {            triggerPostRender();        }    } );} );\n<\/script>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group mb-1 is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e63a74ff wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading my-1\" id=\"blog\">Blog<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button button-link\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/blog\">Go to blog<\/a><\/div>\n<\/div>\n<\/div>\n\n\n    <div class=\"tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46\">\n      <style data-name=\"tangible-template-inline-style\">.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .site .grid-cols::before{display:none}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols{display:grid;grid-template-columns:minmax(0, 1fr);-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem;row-gap:1rem}@media screen and (min-width:0){.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xs-col-1{grid-template-columns:minmax(0, 1fr)}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xs-col-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xs-col-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xs-col-4{grid-template-columns:1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xs-col-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xs-col-6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}}@media screen and (min-width:576px){.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-sm-col-1{grid-template-columns:minmax(0, 1fr)}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-sm-col-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-sm-col-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-sm-col-4{grid-template-columns:1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-sm-col-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-sm-col-6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}}@media screen and (min-width:768px){.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-md-col-1{grid-template-columns:minmax(0, 1fr)}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-md-col-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-md-col-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-md-col-4{grid-template-columns:1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-md-col-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-md-col-6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}}@media screen and (min-width:1025px){.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-lg-col-1{grid-template-columns:minmax(0, 1fr)}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-lg-col-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-lg-col-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-lg-col-4{grid-template-columns:1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-lg-col-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-lg-col-6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}}@media screen and (min-width:1200px){.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xl-col-1{grid-template-columns:minmax(0, 1fr)}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xl-col-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xl-col-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xl-col-4{grid-template-columns:1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xl-col-5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.tangible-block-0864c014-2d2f-493e-8e62-3a8487335e46 .grid-cols.grid-xl-col-6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}}<\/style>\r\n\r\n\r\n  \r\n    \r\n\r\n  \r\n\r\n<ul class=\"tt-loop grid-cols grid-sm-col-2 grid-lg-col-3\">\r\n  \r\n    <li class=\"tt-item post-2974 post type-post status-publish format-standard has-post-thumbnail hentry category-updates\">\r\n      <div class=\"card tt-item-wrapper tt-item-has-link border\">\r\n        <div class=\"tt-item-image tt-item-image-panel\">\r\n          \r\n            <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"500\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2025\/07\/LL-2.2.x.png\" class=\"wp-image-2975\" srcset=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2025\/07\/LL-2.2.x.png 700w, https:\/\/loopsandlogic.com\/wp-content\/uploads\/2025\/07\/LL-2.2.x-300x214.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" alt=\"\">\r\n          \r\n        <\/div>\r\n        <div class=\"tt-item-content p-2\">\r\n          \r\n            <ul class=\"tt-item-terms\">\r\n              \r\n                <li><a href=\"https:\/\/loopsandlogic.com\/category\/updates\/\">Product Updates<\/a><\/li>\r\n              \r\n            <\/ul>\r\n          \r\n          <a href=\"https:\/\/loopsandlogic.com\/version-4-2-x\/\" class=\"tt-item-title tt-item-link\">Update: Tailwind-compatible Atomic CSS, subfield dot syntax, and ACF repeater enhancements in versions 4.2.0 to 4.2.3<\/a>\r\n        <\/div>\r\n        <div class=\"tt-item-footer px-2\">\r\n          <div class=\"tt-item-meta text-sm py-2 border-top\" style=\"display: flex; width: 100%;\">\r\n            <span class=\"text-xs avatar mr-1\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"https:\/\/secure.gravatar.com\/avatar\/0bbf1f28d0712b6a960b9a0c8f01c6c5c18836ff6541ac657df977b2d2130d59?s=32&#038;d=mm&#038;r=g\" srcset=\"https:\/\/secure.gravatar.com\/avatar\/0bbf1f28d0712b6a960b9a0c8f01c6c5c18836ff6541ac657df977b2d2130d59?s=64&#038;d=mm&#038;r=g 2x\" class=\"avatar avatar-32 photo\" height=\"32\" width=\"32\"><\/span>\r\n            <div>\r\n              <span>By Dennis<\/span>\r\n              <span> on July 11, 2025<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/li>\r\n  \r\n    <li class=\"tt-item post-2959 post type-post status-publish format-standard has-post-thumbnail hentry category-updates\">\r\n      <div class=\"card tt-item-wrapper tt-item-has-link border\">\r\n        <div class=\"tt-item-image tt-item-image-panel\">\r\n          \r\n            <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"400\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2025\/06\/LL.png\" class=\"wp-image-2965\" srcset=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2025\/06\/LL.png 710w, https:\/\/loopsandlogic.com\/wp-content\/uploads\/2025\/06\/LL-300x169.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" alt=\"\">\r\n          \r\n        <\/div>\r\n        <div class=\"tt-item-content p-2\">\r\n          \r\n            <ul class=\"tt-item-terms\">\r\n              \r\n                <li><a href=\"https:\/\/loopsandlogic.com\/category\/updates\/\">Product Updates<\/a><\/li>\r\n              \r\n            <\/ul>\r\n          \r\n          <a href=\"https:\/\/loopsandlogic.com\/version-4-1\/\" class=\"tt-item-title tt-item-link\">Update: Advanced ACF support, modular pagination, and improved editor in versions 4.1.0 to 4.1.9<\/a>\r\n        <\/div>\r\n        <div class=\"tt-item-footer px-2\">\r\n          <div class=\"tt-item-meta text-sm py-2 border-top\" style=\"display: flex; width: 100%;\">\r\n            <span class=\"text-xs avatar mr-1\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"https:\/\/secure.gravatar.com\/avatar\/0bbf1f28d0712b6a960b9a0c8f01c6c5c18836ff6541ac657df977b2d2130d59?s=32&#038;d=mm&#038;r=g\" srcset=\"https:\/\/secure.gravatar.com\/avatar\/0bbf1f28d0712b6a960b9a0c8f01c6c5c18836ff6541ac657df977b2d2130d59?s=64&#038;d=mm&#038;r=g 2x\" class=\"avatar avatar-32 photo\" height=\"32\" width=\"32\"><\/span>\r\n            <div>\r\n              <span>By Dennis<\/span>\r\n              <span> on February 25, 2025<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/li>\r\n  \r\n    <li class=\"tt-item post-2805 post type-post status-publish format-standard has-post-thumbnail hentry category-updates\">\r\n      <div class=\"card tt-item-wrapper tt-item-has-link border\">\r\n        <div class=\"tt-item-image tt-item-image-panel\">\r\n          \r\n            <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"400\" src=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2024\/01\/loops-and-logic_4-0-0.png\" class=\"wp-image-2810\" srcset=\"https:\/\/loopsandlogic.com\/wp-content\/uploads\/2024\/01\/loops-and-logic_4-0-0.png 710w, https:\/\/loopsandlogic.com\/wp-content\/uploads\/2024\/01\/loops-and-logic_4-0-0-300x169.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" alt=\"\">\r\n          \r\n        <\/div>\r\n        <div class=\"tt-item-content p-2\">\r\n          \r\n            <ul class=\"tt-item-terms\">\r\n              \r\n                <li><a href=\"https:\/\/loopsandlogic.com\/category\/updates\/\">Product Updates<\/a><\/li>\r\n              \r\n            <\/ul>\r\n          \r\n          <a href=\"https:\/\/loopsandlogic.com\/update-template-previews-and-new-code-editor-in-version-4-0-0\/\" class=\"tt-item-title tt-item-link\">Update: template previews and new code editor in versions 4.0.0 to 4.0.2<\/a>\r\n        <\/div>\r\n        <div class=\"tt-item-footer px-2\">\r\n          <div class=\"tt-item-meta text-sm py-2 border-top\" style=\"display: flex; width: 100%;\">\r\n            <span class=\"text-xs avatar mr-1\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"https:\/\/secure.gravatar.com\/avatar\/a1dca9035e374c17b499b02b61f265c4dc018b8f907b6749d22a719245798fe0?s=32&#038;d=mm&#038;r=g\" srcset=\"https:\/\/secure.gravatar.com\/avatar\/a1dca9035e374c17b499b02b61f265c4dc018b8f907b6749d22a719245798fe0?s=64&#038;d=mm&#038;r=g 2x\" class=\"avatar avatar-32 photo\" height=\"32\" width=\"32\"><\/span>\r\n            <div>\r\n              <span>By Benjamin<\/span>\r\n              <span> on January 4, 2024<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/li>\r\n  \r\n<\/ul>    <\/div>\n  <\/div><\/div>\n\n\n\n<div style=\"height:80px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignsmall\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center\" id=\"like-loops-logic\">Like Loops &amp; Logic?<\/h2>\n\n\n\n<p class=\"has-text-align-center mb-3\">Like L&amp;L? Here\u2019s a secret just for those that get to the bottom of this page: you\u2019ll soon be able to build page builder blocks for Gutenberg, Elementor and Beaver Builder with L&amp;L using our upcoming Tangible Blocks plugin.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"\/tangible-blocks\">Apply for beta access here<\/a><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You shouldn\u2019t have to be a PHP developer to grab the information you need in WordPress and display it on the frontend of your site. Loops &amp; Logic (L&amp;L) allows you to go beyond the limits of page builders like Gutenberg, Elementor &amp; Beaver Builder by giving you a simple HTML-like syntax to unlock what\u2019s&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"bottom","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":193,"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":3002,"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/pages\/2\/revisions\/3002"}],"wp:attachment":[{"href":"https:\/\/loopsandlogic.com\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}