Modal with dynamic collection

modal.json

{"modules":{"ubf1b8172a":{"id":"ubf1b8172a","name":"HtmlElement","label":"section","settings":[{"name":"tag","value":"section"}],"parent":""},"udecedb4c3":{"id":"udecedb4c3","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["container"]},{"name":"htmlAttribute","value":[{"name":"data-container","value":"true"}]}],"parent":"ubf1b8172a","index":0},"u226cf6069":{"id":"u226cf6069","name":"Collection","label":"Collection Blog","settings":[{"name":"interactiveMode","value":true},{"name":"tag","value":"div"},{"name":"htmlAttribute","value":[{"name":"data-b-context","value":"https://woocommerce.com/wp-json/wp/v2/posts"}]},{"name":"tagClass","value":["grid"]}],"parent":"udecedb4c3","index":0},"u79ce001b6":{"id":"u79ce001b6","name":"Template","label":"Template","settings":[],"parent":"u226cf6069","index":0},"u809e67527":{"id":"u809e67527","name":"HtmlElement","label":"div","settings":[{"name":"tag","value":"div"},{"name":"tagClass","value":["card"]}],"parent":"u79ce001b6","index":0},"u6c377139c":{"id":"u6c377139c","name":"HtmlElement","label":"h3","settings":[{"name":"tag","value":"h3"},{"name":"content","value":"{{{title.rendered}}}"}],"parent":"u809e67527","index":0},"u6710c97f9":{"id":"u6710c97f9","name":"HtmlElement","label":"span","settings":[{"name":"content","value":"Learn More"},{"name":"tag","value":"span"}],"parent":"u1373a7d0d","index":0},"uee146f9a7":{"id":"uee146f9a7","name":"Template","label":"Template","settings":[],"parent":"u2725dce03","index":0},"ub277571c0":{"id":"ub277571c0","name":"HtmlElement","label":"h3","settings":[{"name":"tag","value":"h3"},{"name":"content","value":"{{{title.rendered}}}"}],"parent":"uee146f9a7","index":0},"u8f6f88cef":{"id":"u8f6f88cef","name":"HtmlElement","label":"Button Close","settings":[{"name":"content","value":"CLOSE"},{"name":"tag","value":"button"},{"name":"htmlAttribute","value":[{"name":"data-modal-deactivate"}]}],"parent":"ufddade83c","index":0},"u1373a7d0d":{"id":"u1373a7d0d","name":"HtmlElement","label":"button","settings":[{"name":"tag","value":"button"},{"name":"htmlAttribute","value":[{"name":"data-modal-activate","value":"{{id}}"}]}],"parent":"u809e67527","index":1},"ufddade83c":{"id":"ufddade83c","name":"HtmlElement","label":"Modal","settings":[{"name":"tag","value":"div"},{"name":"css","value":"%local% {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    background-color: oklch(0.168 0 0 / 0.62);\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transition: var(--transition);\n}\n\n%local%.active {\n    opacity: 1;\n    pointer-events: initial;\n    visibility: visible;\n}"},{"name":"htmlAttribute","value":[{"name":"data-modal"}]}],"parent":"udecedb4c3","index":1},"u2725dce03":{"id":"u2725dce03","name":"Collection","label":"Collection Content","settings":[{"name":"interactiveMode","value":true},{"name":"tag","value":"div"},{"name":"htmlAttribute","value":[{"name":"data-b-context","value":"https://woocommerce.com/wp-json/wp/v2/posts"}]},{"name":"css","value":"%local% {\n    padding: 40px;\n    border-radius: var(--border--radius);\n    background-color: var(--color--base--0);\n}"}],"parent":"ufddade83c","index":1},"u9a8932291":{"id":"u9a8932291","name":"HtmlElement","label":"Paragraph","settings":[{"name":"tag","value":"p"},{"name":"content","value":"{{{date}}}"}],"parent":"uee146f9a7","index":1},"u2c97789e3":{"id":"u2c97789e3","name":"HtmlCode","label":"JS","settings":[{"name":"contentHtml","value":"<script> \r\n\r\ndocument.addEventListener('click', (event) => {\r\n  const trigger = event.target.closest('[data-modal-activate]');\r\n  const closer = event.target.closest('[data-modal-deactivate]');\r\n  const modal = document.querySelector('[data-modal]');\r\n\r\n  if (trigger && modal) {\r\n    const postId = trigger.value || trigger.getAttribute('data-modal-activate');\r\n    const contextEl = modal.querySelector('[data-b-context]');\r\n    \r\n    fetch(`https://woocommerce.com/wp-json/wp/v2/posts/${postId}?_fields=title,date`)\r\n      .then(res => res.json())\r\n      .then(data => {\r\n        if (contextEl) contextEl.dataset.bContext = JSON.stringify(data);\r\n        modal.classList.add('active');\r\n      })\r\n      .catch(err => console.error(err));\r\n  } else if (closer && modal) {\r\n    modal.classList.remove('active');\r\n  }\r\n});\r\n</script>"}],"parent":"ubf1b8172a","index":1}},"indexes":{"root":["ubf1b8172a"],"ubf1b8172a":["udecedb4c3","u2c97789e3"],"udecedb4c3":["u226cf6069","ufddade83c"],"u226cf6069":["u79ce001b6"],"u79ce001b6":["u809e67527"],"u809e67527":["u6c377139c","u1373a7d0d"],"u1373a7d0d":["u6710c97f9"],"u2725dce03":["uee146f9a7"],"uee146f9a7":["ub277571c0","u9a8932291"],"ufddade83c":["u8f6f88cef","u2725dce03"]},"template":{"settings":[{"name":"dataVars","value":[{"a1":"graphQLQuery","b1":"wp","c1":"query {\n    post {\n        title: post_title\n        content: post_content\n        featured_image {\n            file_url__medium: file_url (size: MEDIUM)\n        }\n    }\n    archive {\n        posts_query {\n            pagination {\n                links\n            }\n        }\n    }\n}"}]}],"technology":"html"},"version":{"builderius":"1.1.9-beta","builderius-pro":"1.0.9-beta"},"source":"builderiusCopiedElements"}

/*************************/
1. Changing the API URL:
In the fetch line, find the domain woocommerce.com. Replace it with your own domain (e.g., mysite.com). Ensure it ends with /wp-json/wp/v2/posts/.

2. Changing the data to fetch:
After _fields=, you can add or remove fields separated by commas.

For content: _fields=title,date,content

For the author: _fields=title,date,author

Pro Tip: If you have control over the WordPress site you are 
fetching data from, the ideal approach is to create your own 
custom endpoint to fetch only the strictly necessary data.