Embeds not working with Sage 10

sage
1

Hey folks! Hope everyone reading this is having an amazing day.

TLDR: Embeds work in the Gutenberg editor but not on the frontend. Fallback Blockquote is being shown on fresh Sage 10 project (latest Sage version), instead of the actual iFrame.

So, I’ve been trying to create Embed templates for one of my projects using Sage 10 & Bedrock and I’ve encountered a weird issue where the embed iFrames are being hidden and instead the fallback Blockquote element is being shown. The interesting thing is that the iFrames actually WORK in the Gutenberg editor as intended. To make my life easier and instead of disabling all of the plugins on my projects one-by-one, I’ve decided to create an empty Sage 10 project and test out the Embed functionality there.

I’ve basically created the embed-post.blade.php in my Views subfolder and embed.php in my theme’s root folder. Now, I copied a Post’s link and pasted it in a random new dummy Page to create the embed. As you can see on the Screenshot bellow, the iFrame is hidden by default and if I remove the ‘position: absolute’, the template I’ve created will appear.

image
image2198×423 187 KB

I am using the latest Sage version on both the real project I am working and the dummy project I’ve created, and the embeds don’t work on any of those. The interesting thing is that I am using Sage (older version: 10.0.0-dev) on a totally different project, and the embeds work there without any issues.

How to recreate the issue:

  1. Install Wordpress locally
  2. Install Sage 10 (latest version) and build it.
  3. Create embed-post.blade.php in the views subfolder.
  4. Create embed.php (embed.php - Pastebin.com) in the theme’s root folder.
  5. Copy any articles link and try to embed in in other article or page.
  6. Embed will work in the Gutenberg editor, but the fallback Blockquote element will be shown on the front end. The actual iFrame will be hidden.
2

I’ve posted this post long time ago but still haven’t found a solution for embeds.
They still work on the Gutenberg editor, but on the actual site they are hidden using “position: absolute; clip: rect(1px,1px,1px,1px);”

3

Hello @hiko, did you find any workaround on this?

I am using embed.blade.php in our resources/views folder and I have restored those 2 actions because I am using Soil.

add_action('wp_head', 'wp_oembed_add_discovery_links', 99);
add_action('wp_head', 'wp_oembed_add_host_js', 99);

<?php

/**
 * Contains the post embed base template
 *
 * When a post is embedded in an iframe, this file is used to create the output
 * if the active theme does not include an embed.php template.
 *
 * @package WordPress
 * @subpackage oEmbed
 * @since 4.4.0
 */

get_header('embed');

if (have_posts()) :
    while (have_posts()) :
        the_post();
        ?>

    <style>
      body {
        background: none !important;
      }

      .wp-embed {
        display: flex !important;
        border: 1px solid #ececec !important;
      }

      .wp-block-embed__wrapper {
        height: 165px !important;
      }

      .content-text {
        padding-left: 20px !important;
      }

      .wp-embed-featured-image {
        width: 250px !important;
        margin-bottom: 0 !important;
      }

      p.wp-embed-heading {
        margin: 0 0 10px !important;
      }

      @media screen and (max-width: 600px) {
        .content-text {
          padding-left: 0px !important;
        }

        .wp-embed-featured-image {
          width: 100% !important;
          margin-bottom: 0.5rem !important;
        }

        .wp-embed {
          display: block !important;
        }
      }
    </style>
        <?php
      /**
       * Contains the post embed content template part
       *
       * When a post is embedded in an iframe, this file is used to create the content template part
       * output if the active theme does not include an embed-content.php template.
       *
       * @package WordPress
       * @subpackage Theme_Compat
       * @since 4.5.0
       */
        ?>
    <div <?php post_class('wp-embed'); ?>>
        <?php
        $thumbnail_id = 0;

        if (has_post_thumbnail()) {
            $thumbnail_id = get_post_thumbnail_id();
        }

        if ('attachment' === get_post_type() && wp_attachment_is_image()) {
            $thumbnail_id = get_the_ID();
        }

        /**
         * Filters the thumbnail image ID for use in the embed template.
         *
         * @param int $thumbnail_id Attachment ID.
         *
         * @since 4.9.0
         *
         */
        $thumbnail_id = apply_filters('embed_thumbnail_id', $thumbnail_id);

        if ($thumbnail_id) {
            $aspect_ratio = 1;
            $measurements = array(1, 1);
            $image_size   = 'full'; // Fallback.

            $meta = wp_get_attachment_metadata($thumbnail_id);
            if (!empty($meta['sizes'])) {
                foreach ($meta['sizes'] as $size => $data) {
                    if ($data['height'] > 0 && $data['width'] / $data['height'] > $aspect_ratio) {
                        $aspect_ratio = $data['width'] / $data['height'];
                        $measurements = array($data['width'], $data['height']);
                        $image_size   = $size;
                    }
                }
            }

          /**
           * Filters the thumbnail image size for use in the embed template.
           *
           * @param string $image_size Thumbnail image size.
           * @param int $thumbnail_id Attachment ID.
           *
           * @since 4.4.0
           * @since 4.5.0 Added `$thumbnail_id` parameter.
           *
           */
            $image_size = apply_filters('embed_thumbnail_image_size', $image_size, $thumbnail_id);

            $shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square';

          /**
           * Filters the thumbnail shape for use in the embed template.
           *
           * Rectangular images are shown above the title while square images
           * are shown next to the content.
           *
           * @param string $shape Thumbnail image shape. Either 'rectangular' or 'square'.
           * @param int $thumbnail_id Attachment ID.
           *
           * @since 4.4.0
           * @since 4.5.0 Added `$thumbnail_id` parameter.
           *
           */
            $shape = apply_filters('embed_thumbnail_image_shape', $shape, $thumbnail_id);
        }

        if ($thumbnail_id && 'rectangular' === $shape) :
            ?>
        <div class="wp-embed-featured-image rectangular">
          <a href="<?php the_permalink(); ?>" target="_top" onclick="top.location.href='<?php the_permalink(); ?>'">
            <?php echo wp_get_attachment_image($thumbnail_id, $image_size); ?>
          </a>
        </div>
        <?php endif; ?>

      <div class="content-text">

        <p class="wp-embed-heading">
          <a href="<?php the_permalink(); ?>" target="_top" onclick="top.location.href='<?php the_permalink(); ?>'">
            <?php the_title(); ?>
          </a>
        </p>

        <?php if ($thumbnail_id && 'square' === $shape) : ?>
          <div class="wp-embed-featured-image square">
            <a href="<?php the_permalink(); ?>" target="_top" onclick="top.location.href='<?php the_permalink(); ?>'">
              <?php echo wp_get_attachment_image($thumbnail_id, $image_size); ?>
            </a>
          </div>
        <?php endif; ?>

        <div class="wp-embed-excerpt"><?php the_excerpt_embed(); ?></div>

        <?php
        /**
         * Prints additional content after the embed excerpt.
         *
         * @since 4.4.0
         */
        do_action('embed_content');
        ?>

      </div><!-- content-text added for flex-->


    </div>
        <?php
    endwhile;
else :
    get_template_part('embed', '404');
endif;

get_footer('embed');