Share on Mastodon icon doesn't work

[sebastienserre]

Hello,
The share on Mastodon feature below each of the posts doesn't seem to work.
On my side, it's opening a window with the same content as the page.

[jeherve]

The Mastodon modal relies on a query parameter (nb) that gets added to the end of the sharing URLs. This should happen here:
​https://plugins.trac.wordpress.org/browser/jetpack/tags/14.1/modules/sharedaddy/sharing.js#L471

However, that parameter is not properly added on the make p2s, even though the sharing script above is loaded on the page:

It may be interesting to add some debugging in that sharing script above (or rather ​the minified version when in a production environment or if SCRIPT_DEBUG is set to false) to figure out if init() gets triggered as expected.

[dd32]

@jeherve Thanks for that!

That code is running on page load, but o2 re-renders the content after the code has run.

There's code included in the sharing JS to catch when a new post is added, but it seems like it was changed to target the infinite-scroll event only, rather than the one that O2 uses.

This seems to have happened in ​https://github.com/Automattic/jetpack/commit/29cf4c78b25d6845085038e3a05139dc2c5ab829

The o2 one isn't namespaced as you can see in ​https://github.com/search?q=repo%3AAutomattic%2Fo2%20post-load&type=code

However, Since the jQuery events (used by o2) are "on top of" the DOM and are not DOM native events, I suspect we actually have to fix this in o2 rather than JP.. which is kinda annoying, because it'll mean either a) Switching everything from jQuery events to native events, or b) Firing both types of events.

Regardless; SD probably would want to also listen to the generic post-load event rather than just the is.post-load which I've assumed is infinite-scroll.

To confirm this, the below JS causes this to be fixed, by listening for the o2 jQuery event and firing the native custom event that SD is listening for.

add_action( 'wp_footer', function() {
	echo "<script>
		jQuery( 'body' ).on( 'post-load', function() {
			var e = document.createEvent( 'CustomEvent' );
			e.initCustomEvent( 'is.post-load', true, true, null );
			document.body.dispatchEvent( e );
		} );
		</script>";
} );

[jeherve]

Replying to dd32:

I suspect we actually have to fix this in o2 rather than JP.

We may indeed have to update o2 down the road. Jetpack's Infinite Scroll moved from the generic post-load to is.post-load back in 2020, when we moved away from jQuery. See ​https://github.com/Automattic/jetpack/pull/14886#issuecomment-601156200

That said, maybe we can ensure that Jetpack's Sharing buttons remain compatible with both implementations. I'm happy to file a PR for that in Jetpack tomorrow. 👍

[dd32]

Replying to jeherve:

That said, maybe we can ensure that Jetpack's Sharing buttons remain compatible with both implementations. I'm happy to file a PR for that in Jetpack tomorrow. 👍

Given how long ago this change was, I think we can just hack this into the WordPress.org o2 implementation for now.. but if you'd like to consider adding some jQuery-BC code into Jetpack, I'm happy for you to do that.

[jeherve]

Replying to dd32:

Given how long ago this change was, I think we can just hack this into the WordPress.org o2 implementation for now.

If you're cool with that, that would be my vote. I looked into what I needed to bring back to Jetpack to support this old implementation, and I think fixing it in o2 makes more sense for now.

[dd32]

Replying to jeherve:

Replying to dd32:

Given how long ago this change was, I think we can just hack this into the WordPress.org o2 implementation for now.

If you're cool with that, that would be my vote.

Let's just do that.

I'm not sure what I'm doing wrong but the code I attempted to test this with just now doesn't work, and I'm not sure why.. If someone can point out my error, that'd be great.

function scripts() {
        // Jetpack Mastodon sharing fix. See https://meta.trac.wordpress.org/ticket/7877
        wp_add_inline_script(
                'jquery-core',
                "jQuery( 'body' ).on( 'post-load', function() {
                        var e = document.createEvent( 'CustomEvent' );
                        e.initCustomEvent( 'is.post-load', true, true, null );
                        document.body.dispatchEvent( e );
                } );"
        );
}
add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\scripts', 11 );

Also tried adding it in the inline_scripts() function directly on wp_footer and that didn't take. I'm not sure what I'm doing wrong, and don't have the time to debug it.