Updating jQuery shipped with WordPress to version 4.0

Just a quick note that the Test jQuery Updates plugins was updated to include the most recent versions: jQuery 4.0.0-beta.2 and jQuery Migrate 3.5.2. The plan is to update jQuery to version 4.0 soon after it is released, most likely in WordPress 6.8.

It seems this update will be a lot less likely to trigger errors than the previous one. Nevertheless, early, extensive testing would be great. Testing jQuery 4.0 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. would also allow the WordPress community to provide feedback to the jQuery team, and help resolve any possible problems before the release.

How to help with testing

Just install and activate the 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 on a test site. There are no additional settings, activating it will replace the bundled versions of jQuery and jQuery Migrate with the versions from the plugin. Then continue as usual. If you notice any errors with a jQuery related script, please report them. If you’re able to troubleshoot them and find the exact cause, please report them directly to the jQuery team. To stop testing, deactivate the plugin.

Another very nice way would be to test in a WordPress Playground. This method doesn’t require a test site. It can also be used to test if other plugins may be affected by the updated jQuery.

Thanks @ironprogrammer for the review and suggestions.

#jquery

DevChat meeting Summary – April 28, 2021

Agenda for the two meetings. Thanks to @peterwilsoncc and @jeffpaul for leading the 05:00 and 20:00 UTC devchats respectively.

Link to 05:00 UTC devchat meeting on the core channel on Slack

Link to 20:00 UTC devchat meeting on the core channel on Slack

Announcements and news

Feedback on posts requested

  • @iandunn needs your input on the topic of assisting 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 developers to avoid specific bugs that result in WordPress end users having a bad experience. He has suggested potential solutions including static code analysisStatic code analysis "...the analysis of computer software that is performed without actually executing programs, in contrast with dynamic analysis, which is analysis performed on programs while they are executing." - Wikipedia, and has provided a list of questions to help guide the discussion. Do read it and provide feedback from your perspective.
  • @francina: Would Stats Dashboards Help Your Team? Read this post for more details. Would folks in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. feel that any sorts of stats on a dashboard would support in their work in core?
  • New team CC Search to join WordPress. CC Search, a CC0 (Creative Commons Zero) image search engine, is joining the WordPress project with more than 500 million openly licensed and public domain images discoverable from more than 50 sources, audio and video soon to come. Read this post for more information @chanthaboune: more news and context coming in the next few weeks.
  • Wonderful design reference for those looking for ways to quickly prototype WordPress UIUI User interface in Figma. Read this blog post
  • WP Briefing podcast. @jeffpaul: these are super quick to digest, provide a good on-ramp to what’s latest in WordPress. Check out all the episodes at this link and find links to subscribe in your favorite podcast app.

WordPress 5.8 Release

@francina gave an update – Thanks to everyone who volunteered and right now I can confirm these roles:

Release leadRelease Lead The community member ultimately responsible for the Release.: Matt Mullenweg (@matt)
Release Coordinators: Jeff Paul (@jeffpaul) and Jonathan Desrosiers (@desrosj)
Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. Lead: Luke Carbis (@lukecarbis)
Core Tech Lead: Helen Hou-Sandí (@helen)
Editor Tech Lead: Riad Benguella (@youknowriad)
Marketing and Communication Lead: Josepha Haden-Chomphosy (@chanthaboune)
Documentation Lead: Milana Cap (@milana_cap)
Support Lead: Mary Job (@mariaojob)
Testing Lead: Piotrek Boniu (@boniu91)

  • @francina: “If I have messaged you and asked to join the release as part of the supporting crew, thanks for being part of the collaborative work that makes WordPress so great. Everyone! Join us in the channel #5-8-release-leads
  • If you have any questions about releases which you are following along, and if you want to ask questions: #core and #core-editor are the right channels
  • 5.8 release team

Full Site Editing (FSE) related items

  • Open call to send in your questions on Full Site Editing (FSE) Round 2 – reminder from @annezazu that you can submit questions, no matter who you are. The call closes 12 May 2021. This is part of the collaboration in #fse-outreach-experiment
  • [More posts on FSE in the posts requesting feedback section above]
  • Marketing has social media text available which can be reused to promote the different FSE calls 
  • @helen making a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. based theme with the full site editor

Component maintainers and committers update

  • @sergey: Work has continued on further fixing some long-standing coding standards issues in core, see ticketticket Created for both bug reports and feature development on the bug tracker. #52627 for more details.Build/Test Tools, Date/Time, I18Ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill., Permalinks: No major news this week.
  • @clorith: Site Health catching up a bit on older and unanswered tickets
  • @audrasjb: Menus, Widgets, Upgrade/Install: nothing new. I scrubbed some tickets in the Menus component but no major news to share.
  • Following on from discussion last week @marybaum nominates @abhanonstopnewsuk as co-maintainer for the Help/ About page component 
  • In the last week, they have been going through the tickets since and will give an update in future devchats.

jQuery

  • @Hareesh: some attention requested on #52163. With this out of the way, we would have less jQuery migrate warnings, and it would be easier to fix any remaining warnings.
  • @clorith: jQuery UI hasn’t been updated yet, we are still waiting on their release, which I believe is scheduled for the end of May/start of June 
  • @davidb: jQuery release is right before 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 then, if the dates hold
  • @clorith: Yeah, which is a bit tighter than I’d like, but it is what it is… we’ll have a look once it’s ready to see what’s going on and what the best approach is. Building from source while they’re still modifying it isn’t really an option in my opinion.

Open Floor

  • @notlaura: feedback requested on ticket #53070. Establish a Core CSSCSS Cascading Style Sheets. deprecation path, and ask if anyone is interested in working on it! This is something we’ve been discussing in #core-css

Community

  • @chanthaboune: As you may be aware, many of our fellow contributors are experiencing disruptions in their lives right now above and beyond the (seemingly) routine disruptions of this pandemic life. From big earthquakes to big spikes in COVID cases to unrest right outside their doors, some of your WordPress pals are hurting more than usual.
  • For my part, I can say take whatever time you need to take care of yourselves. You are important and WordPress is not more important than your health and well-being.
  • For all of us, if you haven’t reached out to your friends to see how they are, please do.

Thanks to @meher and @webcommsat for the devchat notes and @marybaum for her help with them.

#5-8, #dev-chat, #fse, #fse-outreach-experiment, #jquery

Updating core jQuery to version 3 – part 2

A 3-step plan was outlined for upgrading the version of jQuery bundled with core in June 2020.

The first step was included with WordPress 5.5, which stopped enabling jQuery Migrate version 1.x by default.

As part of #50564, part two of this process was committed, which updated the bundled jQuery version to 3.5.1. Alongside this, jQuery Migrate was also updated to version 3.3.2.

For the duration of WordPress 5.6, the migrate script will remain enabled by default, to capture any unexpected uses of deprecated features.

Do note that the Migrate script for version 3 is not compatible with features that the previous migrate script provided a polyfill for. The features that previously were marked as deprecated are no longer available. The purpose of jQuery Migrate version 3.3.2 in WordPress 5.6 is to help with updating (migrating) all jQuery based 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/. from jQuery version 1.12.4 to 3.5.1.

When testing the changes, it is recommended to enable SCRIPT_DEBUG. This will load jQuery Migrate in debug mode, and output stack traces in your JavaScript developer console.

As this is a major upgrade to the jQuery library, please make sure you test your plugins and themes as thoroughly as possible before the release of WordPress 5.6 to avoid any preventable breakage.

The jQuery Core Upgrade Guide provides details on what features are deprecated, and removed, and how to upgrade your code accordingly.

#5-6, #dev-notes, #jquery

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, and 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 shortcode 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 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.. 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. threads.

#jquery

Updated jQuery UI to 1.5.2.

Updated jQuery UIUI User interface to 1.5.2.

#jquery