Include default share sheet button

[joshspires]

It would be great to include a button that opens the current device's built in share sheet using the Web Share API.

It does require JavaScript to work. Below is an example I currently use on my website sffgeek.com.

If this isn't an option, allowing for a custom button that can be given an id could work as well.

<!-- Share sheet -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
		const title = document.title;
		const description = document.querySelector('meta[name="description"]').getAttribute('content');
        const url = document.location.href;

        const shareData = {
            title: title,
            text: description,
            url: url
        };

        const btn = document.getElementById('device_shr_btn');
        btn.addEventListener('click', () => {
            navigator.share(shareData);
        });
    });
</script>

[DhrRob]

This would be quite easy, in the ./build/social-sharing-link/ folder in utils.php add a new services_data, such as:

'native'  => array(
	'label' => __( 'Share', 'social-sharing-block' ),
	'url'   => 'javascript:navigator.share({url: window.location.href, title:document.title})',
	'icon'  => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><g><path d="M14.5 12c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3c0-.24.03-.46.09-.69l-4.38-2.3c-.55.61-1.33.99-2.21.99-1.66 0-3-1.34-3-3s1.34-3 3-3c.88 0 1.66.39 2.21.99l4.38-2.3c-.06-.23-.09-.45-.09-.69 0-1.66 1.34-3 3-3s3 1.34 3 3-1.34 3-3 3c-.88 0-1.66-.39-2.21-.99l-4.38 2.3c.06.23.09.45.09.69s-.03.46-.09.69l4.38 2.3c.55-.61 1.33-.99 2.21-.99z"/></g></svg>',
),

Like the print and viber services, this too has to be escaped with esc_js instead of esc_url.

The option would have to be included in index.js too, again rather simple, just add native as an selectable option.

Finally, in render.php, we add another exclusion (like print and mail) so that this doesn't open in a new tab.

if ( 'print' !== $service && 'mail' !== $service && 'native' !== $service ) {
	$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
}

I would create a PR for it myself, but frankly I have no clue how to either do a PR or use the build tools 🥲
Edit: created my PR: #29