Embeds Changes in WordPress 4.5

After the introduction ofĀ the embeds feature in WordPress 4.4 there have been a few significant changes in 4.5 to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). embeds more robust and easier to customize. šŸŽ‰

Embed CodeĀ Adjustments

Tickets: #35804, #35894

There were two minor changes to the <iframe>Ā embed code:

  1. The iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the userā€™s browser.ā€™s titleĀ attribute has been adjusted to betterĀ describe its content for improved accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both ā€œdirect accessā€ (i.e. unassisted) and ā€œindirect accessā€ meaning compatibility with a personā€™s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility).
  2. The iframeĀ is now hidden using a different technique to prevent images from not being displayed properly in Firefox, working around a known bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. in that browser.

Discovery Improvements

Ticketticket Created for both bug reports and feature development on the bug tracker.: #35979

Since WordPress 4.4, oEmbed discovery has been turned on by default. Using auto discovery, WordPress tries to find embeddable content when a URLURL A specific web address of a website or web page on the Internet, such as a websiteā€™s URL www.wordpress.org is pasted on a new line in the editor. [36880]Ā prevents timeouts from happening whenĀ requesting the URL by limiting the response size to 150KB.

Embedding Static Front Pages

Ticket: #34971

Previously, embedding a static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a ā€œstatic front pageā€ which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example. was not possible due to not having an /embed/Ā endpoint. Now embedĀ is a reserved slugĀ that canā€™t be used for new pages/posts.Ā When https://example.com/foo/embed/ is an existing page, embeds fall back to https://example.com/foo/?embed=true.

Embed Template Changes

Displays select embed template and template part locations, as well as various areas of an example embed view. Covers embed.php, the_embed_site_title(), embed-content.php, the_excerpt_embed(), and print_embed_sharing_options().

Tickets: #35322, #35630, #34561

  • The sitesite (versus network, blog) icon in the embed template used to fall back to an image located insideĀ /wp-admin/. This was problematic when the directory is not accessible to the public. That image is now loaded from insideĀ /wp-includes/.
  • Thanks to an adjustedĀ click event handler, links inside the iframe now work even when theyā€™re inserted dynamically after the page load.
  • By far the biggest changes affect the way theĀ embed template is loaded šŸ’ŖšŸ½.Ā Most notably,Ā the oldĀ wp-includes/embed-template.phpĀ file has been deprecated and split into five new template parts that can be individually overridden by themes:
    • embed.php
    • embed-404.php
    • embed-content.php
    • headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitorā€™s opinion about your content and you/ your organizationā€™s brand. It may also look different on different screen sizes.-embed.php
    • footer-embed.php

The five new template parts live in /wp-includes/theme-compat/ and allow coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to gracefully fall back should themes prefer not to override any or all of them.

Previously, the embed template could only beĀ changed using the embed_templateĀ filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. This filter can now be leveraged directly within the template hierarchy via the already-existing {$type}_template filter (where $type equals ā€œembedā€).

See get_query_template() and locate_template() for more information.

See [36693] for the relevant changeset.

Embeds in the Template Hierarchy

Ticket: #34278

In addition to the new base embed.php template and related template parts, themes can now implement embed templates for specific post types and post formats within the confines of the template hierarchy. The embeds template cascade looks like this:

  • embed-{post-type}-{post_format}.php
  • embed-{post-type}.php
  • embed.php
  • wp-includes/theme-compat/embed.php

Note that this is the first time direct theme-compat inheritance has been integrated with the template hierarchy. This approach allows core to provide basic, yet standardized templates and template parts for handling post embeds.

To leverage the core embed template parts, simply use standard get_template_part() calls within your themes. The template hierarchy will do the rest.

For example:

  • If the theme is leveraging its own version of embed.php template, it would likely call template parts directly, e.g. get_template_part( 'embed', 'content' );
  • If the theme is relying on the core embed template parts ā€“ i.e. not providing its own embed-content.php file ā€“ the template hierarchy would fall back to using wp-includes/theme-compat/embed-content.php, and so on.

See [36876] for the relevant changeset.

Note:
For more information on extending embeds within the scope of the template hierarchy, check out the new Embeds section in the Template Hierarchy reference in the Theme Developer handbook.

#4-5, #dev-notes, #embeds