ndiego / social-sharing-block Goto Github PK

Requested on Twitter - https://twitter.com/_____SexPistols/status/1483189939789774850

would love to see mastodon in here, any interest in adding it? if so, want me to ope a PR?

Requested per: https://wordpress.org/support/topic/open-links-in-small-windows/

Hi, first of all: Thanks for this great and simple block!

Currently I'm adding a custom block variation to add a "Copy Link" block (similar to #6). But for replacing the url, label and icon I need to use some nasty regex. Well actually, for url and label I can use the new WP_HTML_Tag_Processor, but for replacing the SVG icon in the render_block_outermost/social-sharing-link I need regex.

Would you accept a PR that adds a simple filter hook at the end of get_link_services, which could be used to add custom services or replace an icon. Of course, extenders would still need to register their variations in the editor.

Since I've already got it running, I could also provide a PR for #6, allthough that needs frontend JS and I'm not sure if you want to include that in your plugin.

Ported over from the WordPress.org support forum.

The block automatically shares the current post/page. But this can get tricky on archive pages. The icons will share the first post in the archive instead of the archive page itself. Adding an option where a user could manually specify a URL to share would solve this.

I noticed an issue with quotes, single quotes, and apostrophes in post titles. A post with a title like this:

This post’s sharing doesn’t ‘work’ “correctly”

Ends up like this when you share it to Twitter or email:

https://i.imgur.com/QvfrVOs.png

Ported over from the WordPress.org support forum.

What problem does this address?

A follow up to #17. This added server side filters to add custom services and render them.
Unfortunately - as pointed out by @philcable - in the editor the icon and label fallback to the email icon:

The icon and title of my variation are displaying correctly in the sidebar, but the Mail icon is displaying in the content area. This is due to the logic at https://github.com/ndiego/social-sharing-block/blob/main/src/social-sharing-link/social-list.js#L31 and https://github.com/ndiego/social-sharing-block/blob/main/src/social-sharing-link/social-list.js#L50, which falls back to the Mail block settings when the variation isn't found in the array provided in the variations file.

I know this plugin and blocks are heavily inspired by the core social-link block. They unfortunately have the same problem. Adding custom variations still falls back to the ChainIcon.

Important: This is not about the block icon - which the editor displays in the blocks toolbar, inspector controls and inserter. The block icon can be set when registering the variation via registerBlockVariation.

Testing instructions

1. Register a custom block variation for the outermost/social-sharing-link block in JavaScript (editor):

registerBlockVariation("outermost/social-sharing-link", {
    name: "link",
    isDefault: true,
    title: __("Link"),
    icon: "admin-links",
    attributes: {
      service: "link",
    },
    isActive: (blockAttributes, variationAttributes) => blockAttributes.service === "link",
  });

2. Add a social sharing block in the editor and add this variation as a child.
3. The block shows the mail icon by default.

What is your proposed solution?

1. Filters in icon/label functions:

Add filters to getIconBySite and getLabelBySite in social-list.js:

• getLabelBySite: return applyFilters('social-sharing-block.link-label', label, name);
• getIconBySite: return applyFilters('social-sharing-block.link-icon', icon, name);

The filter for the icons need to return a renderable SVG/React component, so only passing a string (like the name of a Dashicon) is not possible. One has to import the icon from @wordpress/icons.

Problems:
Those two functions are called in the Edit function of the link block and therefore will be called on each re-render. That means that those filters will be called many times. I'm not quite sure yet, what the best practice about hooks (actions + filters) in react components that re-render often is. I know core uses some filters (like editor.BlockEdit).

2. Filter the complete variations list in variations.js

Instead of directly returning the array of variations in variations.js the file instead exports a function called getVariations in which the variations are passed through a filter (applyFilters('social-sharing-block.variations', variations);).

Problems:
A developer who wants to register a block variation for a custom service has to register their variation two times or either using the offical way or the filter here. That might be confusing.
Also during block variation the call to getVariations() might occur before plugins/themes have loaded and therefore hooks of those have not been added. So theire variations through this hook are not added.
In getLabelBySite and getIconBySite we can call getVariations each time (instead in the top at import-time, that will be to early as well). But than that function gets called on each render as well (see problems solution 1).

So not ideal either.

3. Use block variation icon and label

In the edit function always try to get the icon of the current rendered variation. getIconBySite actually re-uses the icon of the variation, but only for hardcoded "core" variations of the plugin. We can use getActiveBlockVariation from the block editor data store to get the active variation and use that icon. That automatically uses core's isActive filter to get the active variation and we don't have to do any mapping/searching by service name.

Puh, for what I thought would be simple problem/solution, I wrote a lot of text 😅🙈
I think I prefer solution no 3. I've tried out solution 1 and 2 in a local dev environment. If interested and you are willing to accept a PR, I can draft one up.

Request here: https://twitter.com/nickheurter/status/1584612121907560449

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>

Thanks for creating this Nick.

I am requesting some docs on how I can use this in the InnerBlocks as a template. I would like to be able to specify the services to improve the UX. See code sample below:

 const MY_TEMPLATE = [
        [ 'outermost/social-sharing', {"showLabels":true, services: ["facebook", "twitter"] } ],
];

then use this in my block development with <InnerBlocks template={ MY_TEMPLATE } /> like in https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/

Request per: https://wordpress.org/support/topic/dodanie-udostepniania-przez-messenger/#post-15913685

ndiego, let's sit here and talk about the web share api that now exists.
Wow, a single button entitled "Share" enables the system to open the native popover to handle the sharing. Very easy.
This is good to share content directly to apps installed on the system.

So please add a button in your plugin to achieve this, something like a "System Share button", so we can add it with your plugin. It is going to serve well alongside with the current sharing buttons that straightforward share content to other websites and services.

This plugin handles the web share api: https://wordpress.org/plugins/universal-web-share/

But I believe this is also a subject to your social sharing block. Yes. Please allow to insert this button with block supports like color, typography, prefix and suffix, as it is currently done. This is the downside of the Universal Web Share plugin.

Requested on Twitter - https://twitter.com/maxielswift/status/1483337526555607051

Currently the block only supports margin, padding, and borders on the main block. There are use cases where someone may need to apply them to the icon buttons themself rather than the outer block.

Current:

Desired: