After the introduction of the embeds feature in WordPress 4.4 there have been a few significant changes in 4.5 to make embeds more robust and easier to customize. 🎉
Embed Code Adjustments
Tickets: #35804, #35894
There were two minor changes to the <iframe> embed code:
- The iframe 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 accessibility 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).
- The iframe is now hidden using a different technique to prevent images from not being displayed properly in Firefox, working around a known bug 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
Ticket 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 URL 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 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
Tickets: #35322, #35630, #34561
- The site 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
- header 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 core 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 filter 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}.phpembed-{post-type}.phpembed.phpwp-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.
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
You must be logged in to post a comment.