WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 18 months ago

Last modified 12 months ago

#32802 closed enhancement (fixed)

Update Masonry (v3.3.2) & imagesLoaded (v3.2.0) package

Reported by: Ninos Ego Owned by: ocean90
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.3
Component: External Libraries Keywords: needs-testing has-patch
Focuses: javascript Cc:

Description

Masonry should be updated to version 3.3.0. The current version in use is v3.1.2.
Also I removed the deprecated package jquery.masonry.js. If you still want to support jquery-masonry as handler, you could also link to the version v3.3.0. This version supports both native & jquery style. See also:
http://masonry.desandro.com/#initialize-with-jquery

Additionally I splitted imagesLoaded from masonry package & updated from v3.1.4 to v3.1.8. Isotope and masonry don't ship it by default. There are also theme/plugin-developers, which want to use imagesLoaded with isotope or other scripts/libraries or may just masonry withouth imagesLoaded (e.g. because it's buggy with the src-set attr & ff). They should have the opinion to load that lib without initializing masonry or the other way.

PS: jQuery should also be updated to v2.1.4. If you want I can create another patch :-)
PS²: With the attached patch it seems I cannot remove following file: /wp-includes/js/jquery/jquery.masonry.min.js

Attachments (8)

masonry.patch (181.5 KB) - added by Ninos Ego 2 years ago.
masonry.2.patch (181.5 KB) - added by Ninos Ego 2 years ago.
Use only lowercase for handling names..
masonry-clean.patch (185.6 KB) - added by Ninos Ego 2 years ago.
masonry (without jquery-masonry).patch (188.9 KB) - added by Ninos Ego 2 years ago.
Without jquery-masonry handle
masonry (with jquery-masonry handle).patch (189.0 KB) - added by Ninos Ego 2 years ago.
With jquery-masonry handle
jquery-masonry (without imagesLoaded).patch (188.7 KB) - added by Ninos Ego 2 years ago.
jquery-masonry (without imagesLoaded)
jquery-masonry (with imagesLoaded).patch (188.7 KB) - added by Ninos Ego 2 years ago.
jquery-masonry (with imagesLoaded)
32802.patch (63.0 KB) - added by grapplerulrich 18 months ago.
version 3.2 with the correct dependencies

Download all attachments as: .zip

Change History (35)

@Ninos Ego
2 years ago

#1 @Ninos Ego
2 years ago

  • Focuses docs removed
  • Keywords has-patch needs-testing needs-codex dev-feedback added

@Ninos Ego
2 years ago

Use only lowercase for handling names..

#2 @samuelsidler
2 years ago

I'm not sure what substantial changes there are between Masonry 3.1.2 and 3.3.0, but we'd probably want to make sure it doesn't break anything on our end. How well has this been tested with WordPress?

If we were going to take this, it'd probably need to land before beta, which is this Wednesday (2 days).

Note: We updated jQuery to 1.11.3 in #32794. I don't think we plan to update to jQuery 2.x any time soon.

#3 @Ninos Ego
2 years ago

There're just small fixes:
https://github.com/desandro/masonry/blob/master/changelog.md

I implemented that patch for a short time (some days) on my test environment. I'm also using masonry on fronend (intensively) and haven't found any bugs in font- and also backend.

The main feature is, that this masonry-version supports native js and also jQuery, so you don't need the two versions anymore. ImagesLoaded is also not shipped in package anymore (see description above). The API is still the same.

#4 @rwky
2 years ago

The masonry v 3.1.2 is being displayed very weird (content over the edges, grid not aligning right) on Google Chrome Version 45.0.2454.85 (64-bit), OS X 10.10.5 .
Just in case anyone is having this type of bug :) in cross browser compatibility.

Last edited 2 years ago by rwky (previous) (diff)

#5 @Ninos Ego
2 years ago

Current version is 3.3.2 :)

#6 @jorbin
2 years ago

  • Keywords needs-patch added; has-patch removed

We shouldn't eliminate 'jquery-masonry' since doing so will break any attempt to load that handler. The handler should just load no script and have 'masonry' as a dependency.

imagesLoaded should be a dependency of masonry since it was in the old file. Eliminating it would break sites that depend on it being in masonry.

https://github.com/desandro/masonry/compare/v3.1.3...v3.3.2 is the diff between versions.

We should find a few plugins and themes depending on masonry and make sure to test those. Anyone have suggestions?

@kovshenin, I see your name in some of the commits. Any thoughts here?

Last edited 2 years ago by jorbin (previous) (diff)

#7 @Ninos Ego
2 years ago

  • Keywords has-patch added; needs-patch removed

I would definitely remove 'jquery-masonry'. The version is very old. I don't think that so many themes use 'masonry', even less 'jquery-masonry'. By removing 'jquery-masonry' you'll not break much themes. Also sometime you need to force them to update their theme, you cannot stay backwardcompatible forever.

Regarding the dependency of imagesLoaded, I would not add that. There are also people which want to use masonry without the imagesLoaded library (e.g. myself). Here again I'm sure you'll not break much themes, and if, they should update their theme (therefor you have major updates :D).

Attached my updated patch (with newest version of the masonry library).

PS: In one of my current themes I'm using masonry on many places and had no problems with that patch. Also the masonry feature of the famous page builder plugin 'VisualComposer' had no problems.

Last edited 2 years ago by Ninos Ego (previous) (diff)

#8 @Ninos Ego
2 years ago

  • Summary changed from Update Masonry (v3.3.0) & imagesLoaded (v3.1.8) package to Update Masonry (v3.3.2) & imagesLoaded (v3.1.8) package

#9 @grapplerulrich
2 years ago

@Ninos Ego - To be able to update Masonry it would be best to just to do that. There are still a number of themes that still use jquery-masonry. I keep on seeing theme authors uploading themes that use it. Leaving it in core does not effect you.

I would also recommend creating a new ticket for adding "imagesLoaded". It is already excluded in v3.1.4 so that should not have any adverse effects.

This ticket was mentioned in Slack in #themereview by georgeolaru. View the logs.


2 years ago

#11 @Ninos Ego
2 years ago

@grapplerulrich sry but i did not understood your response completely. Do you want

  1. to still support masonry v2 (jquery-masonry)
  2. a fallback of the jquery-masonry handle (When using 'jquery-masonry' wp should load 'masonry')

After your answer I'll update my patch, than hopefully you can merge it into v4.4 :)

PS: imagesLoaded is still included in the wp-masonry package, so it should be part of this ticket:
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/masonry.min.js#L12

Last edited 2 years ago by Ninos Ego (previous) (diff)

#12 @Ninos Ego
2 years ago

  • Summary changed from Update Masonry (v3.3.2) & imagesLoaded (v3.1.8) package to Update Masonry (v3.3.2) & imagesLoaded (v3.2.0) package

@Ninos Ego
2 years ago

Without jquery-masonry handle

@Ninos Ego
2 years ago

With jquery-masonry handle

#13 @Ninos Ego
2 years ago

I've added two patches, think the second one is what you need.

PS: twentythirteen & twentyfourteen uses the old handle jquery-masonry. Not very professional for wp theme authors :D After merging I'll create a new patch for these two themes.

#14 @grapplerulrich
2 years ago

I do not have commit access but I have experience with contributing to WP. By only fixing one thing in a ticket makes it move faster normally.

The jquery-masonry handle needs to stay in WP core with the shiv for backwards compatibility.

I think it was a mistake to include imagesLoaded within the masonry file.

It would be good to check how many themes are using imagesloaded when using the masonry handle.

// Masonry v2 depended on jQuery. v3 does not. The older jquery-masonry handle is a shiv.
// It sets jQuery as a dependency, as the theme may have been implicitly loading it this way.
$scripts->add( 'masonry', "/wp-includes/js/masonry.min.js", array(), '3.3.2', 1 );
$scripts->add( 'imagesloaded', "/wp-includes/js/imagesloaded.min.js", array(), '3.2.0', 1 );
$scripts->add( 'jquery-masonry', "/wp-includes/js/jquery/jquery.masonry$dev_suffix.js", array( 'jquery', 'masonry', 'imagesloaded' ), '3.3.2', 1 );

@Ninos Ego
2 years ago

jquery-masonry (without imagesLoaded)

@Ninos Ego
2 years ago

jquery-masonry (with imagesLoaded)

#15 @Ninos Ego
2 years ago

@grapplerulrich I've added two new patches, so the devs can choose now :D

#16 @sayontan
2 years ago

As an aside, there is a pretty severe bug in the version of the imagesLoaded script (3.1.4) that is bundled with WP 4.4, which makes the script almost useless on FireFox. The details can be seen here: https://github.com/desandro/imagesloaded/issues/191. Is there any chance of including imagesLoaded version 3.2.0 (as per this patch) in the next release?

#17 @ocean90
18 months ago

  • Keywords needs-refresh added; needs-codex dev-feedback removed
  • Milestone changed from Awaiting Review to Future Release

For back-compat please make sure that imagesloaded is still a dependency of masonry after a split.

@grapplerulrich
18 months ago

version 3.2 with the correct dependencies

#18 @grapplerulrich
18 months ago

  • Keywords needs-refresh removed

The patch has been uploaded. I have not updated to 4.0 as it removes IE 8-9 support. We can discuss updating to 4.0 in a new ticket.

#19 @ocean90
18 months ago

  • Milestone changed from Future Release to 4.6
  • Owner set to ocean90
  • Status changed from new to accepted

#20 @ocean90
18 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 37891:

External Libraries: Update Masonry to 3.3.2 and imagesLoaded to 3.2.0.

Also split imagesLoaded and Masonry into separate files so imagesLoaded can be used independently.

Diff Masonry: https://github.com/desandro/masonry/compare/v3.1.4...v3.3.2
Diff imagesLoaded: https://github.com/desandro/imagesloaded/compare/v3.1.4...v3.2.0

Props Ninos Ego, grapplerulrich.
Fixes #32802.

This ticket was mentioned in Slack in #themereview by grapplerulrich. View the logs.


18 months ago

#22 @jorbin
16 months ago

In 38261:

External Libraries: Update Masonry shim to prevent error using isAnimated option

The isAnimated option throws an error and causes Masonry to stop functioning. Masonry.prototype.options is no longer defined in 3.3.2, this.options is and does the same. Masonry was updated to 3.3.2 in [37891].

Reported upstream: https://github.com/desandro/masonry-v2-3-shim/pull/1

Props stephenharris, ocean90, azaozz for testing and second sign off.
See #37666, #32802.

#23 @jorbin
16 months ago

In 38262:

External Libraries: Update Masonry shim to prevent error using isAnimated option

Merges [38261] to the 4.6 branch.

The isAnimated option throws an error and causes Masonry to stop functioning. Masonry.prototype.options is no longer defined in 3.3.2, this.options is and does the same. Masonry was updated to 3.3.2 in [37891].

Reported upstream: https://github.com/desandro/masonry-v2-3-shim/pull/1

Props stephenharris, ocean90, azaozz for testing and second sign off.
Fixes #37666.
See #32802.

#25 @dfavor
14 months ago

Please provide a link to unminified imagesloaded.min.js + for future versions of this code, include both minified + unminified versions.

Currently something's amiss with imagesloaded.min.js + there's no debugging it, because it's minified.

https://www.webpagetest.org/result/161021_C0_1MMB shows the problem.

imagesloaded.min.js stuck for 80+ seconds.

The imagesloaded.min.js code requires being debugged + either fixed or guards added which protect it from being called in odd ways by... whatever code calls it.

#26 @dfavor
14 months ago

Just realized this ticket is closed. I'll open a new issue ticket.

This ticket was mentioned in Slack in #core by swissspidy. View the logs.


12 months ago

Note: See TracTickets for help on using tickets.