Here’s a step-by-step guide on how to implement this functionality using custom JavaScript and WordPress hooks. Before implementing the functionality, identify the custom post type where you want to apply this feature. Let’s assume the custom post type is named “Component.”

Add the following JavaScript code to your WordPress theme’s functions.php file or use a custom JavaScript file linked to your theme child folder:

function wpb_hook_javascript() {
  if (is_singular('component')) { 
    ?>
<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    // Get the elements
    var previewButtonDesktop = document.querySelector('.preview-button__dekstop');
    var previewButtonMobile = document.querySelector('.preview-button__mobile');
    var previewContentDiv = document.querySelector('.preview-content');

    function setMobileView() {
      // Set the width of the content div to 479px with a transition
      previewContentDiv.style.width = '479px';

      // Trigger a reflow or repaint to apply styles from media queries
      void previewContentDiv.offsetWidth;

      // Enable a smooth transition on future changes
      previewContentDiv.style.transition = 'width 0.3s ease';
    }

    function setDesktopView() {
      // Set the width of the content div to 100% with a transition
      previewContentDiv.style.width = '100%';
    }

    // Add a click event listener to the mobile preview button
    previewButtonMobile.addEventListener('click', setMobileView);

    // Add a click event listener to the desktop preview button
    previewButtonDesktop.addEventListener('click', setDesktopView);

    // Access the ACF page link field and set it as the iframe source
    var iframe = document.querySelector('.preview-content');
  });
</script>
<?php
  }
}

add_action('wp_head', 'wpb_hook_javascript');

This script sets up event listeners for the desktop and mobile preview buttons, adjusts the width of the iframe container accordingly, and ensures the iframe height adjusts dynamically based on its content.

Next step is to insert the following code snippet wherever you want to display the preview iframe, such as within a WordPress template file (e.g., single-component.php) or a custom page:

<?php
$featured_post = get_field('url_template');
?>
<iframe scrolling="no" onload="resizeIframe(this)" class="preview-content" src="<?php echo get_permalink( $featured_post->ID);?>" style="width:100%;transition: width 0.3s ease 0s;"></iframe>

This code retrieves the URL of the template page from an Advanced Custom Fields (ACF) field named ‘url_template’ and inserts it as the source of the iframe. Make sure to replace ‘url_template’ with the actual field name in your ACF setup.

Add the classes .preview-button__desktop and .preview-button__mobile to your desktop and mobile preview icons, respectively, in your HTML or WordPress template files. These classes will be used by the JavaScript to identify and add event listeners to the buttons.