Updating jQuery version shipped with WordPress

This has been a long time coming; the TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. #37110 is already few years old.

Following the recommendations of the jQuery team, the updating has to happen in stages:

  1. Remove jQuery Migrate 1.x. This is planned for WordPress 5.5.
  2. Update to the latest version of jQuery and add the latest jQuery Migrate. This is tentatively planned for WordPress 5.6 depending on test results. Updating to the latest jQuery UIUI User interface, version 1.12.1, is also planned for 5.6.
  3. Remove jQuery Migrate. This is tentatively planned for WordPress 5.7 or later, depending on testing.

As planned, a Test jQuery Updates pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party was released to make it easy to test different versions of jQuery, jQuery Migrate, and jQuery UI. Please install it and thoroughly test if everything works as expected, especially on the front-end, or at the settings pages of other WordPress plugins.

How to help with testing

The plugin has a settings screen found under the Plugins menu in WordPress adminadmin (and super admin). Different versions of the jQuery libraries can be selected there for testing. Please test by:

  1. Disabling jQuery Migrate, and leaving jQuery and jQuery UI at the default versions (for WordPress 5.5).
  2. Selecting jQuery 3.5.1, enabling jQuery Migrate, and selecting jQuery UI 1.12.1 (for WordPress 5.6).
Test jQuery Updates settings screen, under the Plugins menu.

Updating your code

To get ready for this jQuery update, it’s important that you update your code. The migrate plugin will assist you in identifying issues. Additionally, the jQuery Core 3.0 Upgrade Guide and 3.5 Upgrade Guide provide detailed information about what has changed. As the browser supported list is also updated, this is also a great time for you to revisit what versions of browsers are supported by your themes and plugins.

See a 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.?

If you find a bug in Test jQuery Updates, or if you run into a jQuery related issue, please report it at https://github.com/WordPress/wp-jquery-update-test. If the issue is with a default script in WordPress, please open a new ticket on Trac.

Thanks @andreamiddleton, @annezazu, and @jorbin for helping with this post.

#5-5, #jquery

#dev-notes

MediaElement upgrades in WordPress 4.9

MediaElement has been upgraded to 4.2.6 (see #39686), which includes many 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. fixes as well as:

  • Removal of all dependencies to jQuery in code to make it more portable
  • Updated UIUI User interface, using flexbox
  • 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) for player controls
  • Dropped support for older browsers (supports IE11+, Chrome, FF, Safari, Android 4+ and iOSiOS The operating system used on iPhones and iPads. 8+), keep in mind that ME.js applies to the front end and not just WP Adminadmin (and super admin)
  • Upgraded YouTube and Vimeo renderers to use new APIs (for Vimeo, it uses now https://player.vimeo.com/api/player.js, since Froogaloop is deprecated)
  • Added support for iOS 10 and Mac OS on websites using HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.

With this upgrade, a couple of things must be considered:

  1. In order to create themes compatible with it, it is required to add the classPrefix: mejs- in the player configuration, since latest version of MEJS switched to BEM naming convention, so make sure it is set correctly.
  2. player.options.mode has been removed completely.
  3. Although jQuery was removed from the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. package, a MediaElement migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. file has been included to provide full backward compatibility between themes and development of new features.

A full list of changes in MediaElement.js is available in the project’s GitHub repository.

Props to @rafa8626 for helping write this Dev Notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..

#4-9, #dev-notes, #jquery, #mediaelement

Audio / Video 2.0 – codename “Disco Fries”

Some history:

I wanted to do a Make post on my wants for Audio / Video in 3.9 to solicit feedback and spark some discussion about what the community wants / needs / doesn’t want / doesn’t need. Adding audio / video in 3.6 was a great first step, but there are some things we can do to continue to modernize Media and give our huge user base even more ways to display and manage their content. We can also make some changes that help developers navigate the new world of MediaElement.js, Backbone, and Underscore.

First Things First: New Icons

#26650 Replace media file type icons with Dashicons

There are some lingering icons in the adminadmin (and super admin) that don’t look as pretty as their MP6ify’d brethren

Document the “new” Media code introduced in 3.5

In 3.5, we overhauled Media. @Koop produced some beautiful code, and a LOT of it. Raise your hand if you’ve ever dived in and tried to program against it? Raise you hand if you understand how all of it works? Me neither. As a community, we need to help each other learn what it is and what it does. Documentation will go a long way in getting us all on the same page. Do we have a documentation standard for JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.? We need one. While this isn’t the easiest place to start, it is a necessary one. I would be happy to spend time on this, as I have spent many hours recently reading the code and learning how it works. The main files: media-editor.js, media-views.js, media-models.js

Support subtitles for Video

#26628 Use the content of a video shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. when provided.

This ticketticket Created for both bug reports and feature development on the bug tracker. speaks for itself, and already has a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing..

Generate audio/video metadata on-demand

#26825 Add ability to generate metadata for audio / video files on-demand

Add “Playlist” and “Video Playlist” shortcodes

#26631 Add a “playlist” shortcode

Adding inline players for audio and video was a great first step. How do I add music to my site? Just upload an MP3 and drop the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org on a line by itself. Done. Or use the audio shortcode. This works most of the time, but can be a little clunky if you want to share an album of your tunes. MediaElement doesn’t “support” playlists out of the box, but MediaElement is JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., and with JavaScript and little UIUI User interface elbow grease, we can EASILY support playlists.

My ticket already contains a patch, but is still considered a work in progress. I think the playlist shortcode should produce markup that does the following:

  • Works out of the box with any existing theme: the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. should be semi-bulletproof. Many of the Player libraries make heavy use of DIVs instead of items that might be overridden easily with CSSCSS Cascading Style Sheets.: LIs and the like.
  • Gives the developer total control if they want to write their own implementation
  • Exposes enough data to the page so the themer/dev can make their own decision regarding display of album cover, track metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress., captions, etc.

My current implementation drops data onto the page for each playlist inline. A wrapper div “.wp-playlist” will have a script tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) in it with type=”application/jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.”. I do this so that if ‘wp-playlist.js’ is unenqueue’d, the developer still has the data necessary to write their own implementation. The data is reachable in JS like so:

var data = $.parseJSON( el.find('script').html() );

My current UI for playlist is a basic one, and uses Backbone Views to render the tracklist on load and update the “current” playing track view. There are 2 camps of people when it comes to “JS on the frontend” – one who doesn’t like it (others) and one who says “who cares” (me). One of the reasons I am posting this at the beginning is so we can flesh out issues like this.

Abstract Gallery logic into “Collection” logic that Galleries, Playlists, etc can use with minimal registration code

I have already done a first pass at this in the playlist shortcode patch. It goes like this: a “gallery” is really a “collection” of attachments of type “image.” A “playlist” is really a “collection” of attachments of type “audio.” So they should extend or be instances of a “collection”-type class. Currently, the Gallery code has to be dupe’d. By abstracting this code, Gallery, Playlist, Video Playlist, + any other “collection” of media type can be registered minimally.

Other Ideas

  • In our playlist JS code, emit events that others can hook into – maybe a video playlist is: News clip, ad, news clip, ad, etc. When emitting events before / after an ad, the dev could disable next/prev buttons
  • Make a playlist embeddable on other sites via an 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. or embedded markup
  • Register an endpoint for audio / video that will expose the “embed code” via oEmbed

Thoughts?

#audio, #backbone, #jquery, #media, #mediaelement, #underscore, #video

The release cycle for WordPress 3.6 isn’t going…

The release cycle for WordPress 3.6 isn’t going to start until January, but we can of course start to drop in some early things before then. (This worked out nicely before the start of 3.5.)

With that in mind, I have added jQuery 1.9 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 to trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. It comes with a migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party for deprecated/removed features, and this migration plugin issues warnings in the console so we may fix them. Yes, we are likely to ship the migration plugin in 3.6 final; that’s why it exists. But for now, we should aim to fix anything not only outright broken in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but also any warnings. (There are a lot of them.)

For more, see the jQuery announcement post and the WordPress core TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker., #22975.

A side note: If you are using the WordPress Beta Tester plugin and wish to go back to the 3.5 branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch"., you can do so by changing the update stream setting from “Bleeding edgebleeding edge The latest revision of the software, generally in development and often unstable. Also known as trunk. nightlies” (which is currently 3.6-alpha) to “Point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. nightlies” (which is currently 3.5.1-alpha) and then downgrade. Of course, we’re happy to have you testing the 3.6 branch, which will be kept fairly stable throughout its development.

#3-6, #jquery

Just a heads up WP trunk uses jQuery…

Just a heads up. WP trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. uses jQuery 1.5.2. 1.5.2 no longer allows selectors of the form [property=value]. These selectors now require quotes: [property=”value”]. Unquoted values will result in “uncaught exception: Syntax error, unrecognized expression: [property=value]”. Check your plugins against 1.5.2.

#3-2, #dev-notes, #jquery

If your menus or widgets screens broke…

WordPress 3.0.5 was released at the same time as jQuery 1.5. Unfortunately, 1.5 has some backwards incompatible changes that appear to break a number of areas in the adminadmin (and super admin). The timing is awkward and it looks like it was us. It wasn’t.

There’s nothing we can do about this even for WordPress 3.1, which is freezing at jQuery 1.4.4.

If your theme deregisters jQuery and re-registers jQuery 1.5, then you’ll want to make sure that this change only applies for the frontend, i.e. ! is_admin(). (Or use the wp_enqueue_scripts hook, which only fires for the theme-side.) This might not be obvious — if you’re enqueueing the latest jQuery from, say, Google’s CDN, you’ll be getting 1.5 suddenly, and things will break.

Someone should put together a quick pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that restores and enforces the bundled jQuery in the admin. I’ll do it later tonight if no one else does.

Reference: #16508 and numerous support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations. https://en.forums.wordpress.com/. threads.

#jquery

Updated jQuery UI to 1.5.2.

Updated jQuery UIUI User interface to 1.5.2.

#jquery

Tag auto-suggest now works for more than …

Tag auto-suggest now works for more than just the first tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). Before, you had to hit “enter” and send each tag down below if you wanted to use auto-suggest, because once you typed a comma, auto-suggest would stop working. Super-lame. Now it works like you think it should.

#auto-suggest, #jquery, #tags

Updated to jQuery UI 1.5.1

Updated to jQuery UI 1.5.1

#jquery

Updated jQuery and jQuery UI to the late …

Updated jQuery and jQuery UIUI User interface to the latest from the jQuery trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision..

#jquery