Fix custom variation icon and label in the Editor.

[ndiego]

Fixes #17

This PR is an alternative to #22 and #21. Props to @gaambo for outlining the solution in #22.

If you now register a custom variation for the block, the correct label and icon will be available in the Editor. To test, you can use the following code. Couple this with the social_sharing_block_services_data filter and the render_block filter to modify the frontend output of your custom variation.

const customLinkIcon = wp.element.createElement(
    wp.primitives.SVG,
    { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
        wp.element.createElement(
        wp.primitives.Path,
        {
            d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z",
        }
    )
);

wp.blocks.registerBlockVariation(
    'outermost/social-sharing-link',
    {
        name: "csutom-link",
        title: "Custom Link",
        icon: customLinkIcon,
        attributes: {
            service: "custom-link",
        },
        label: 'Custom Link',
        isActive: [ 'service' ],
    }
);

Enqueue the file in using a plugin (modify file path for a theme)

function enqueue_social_service_custom_variation() {
    wp_enqueue_script(
        'social-service-custom-variation-script',
        plugins_url( 'social-service-custom-variation.js', __FILE__ ),
        array( 'wp-blocks', 'wp-dom-ready' )
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_social_service_custom_variation', 10 );