Patched WordPress block `core/social-link` to allow theme developers to register own social services

class-editor-social-link.php

<?php
namespace PatchBlocks;

use WP_Block;

/**
 * Class Editor_Social_Link.
 *
 * Patch and register the `core/social-link` block if WordPress Gutenberg
 * is supported and enabled.
 *
 * @package PatchBlocks
 * @author  Michael Keck, github@michaelkeck.de
 *
 * -----------------------------------------------------------------------------
 * MIT License
 *
 * Copyright (c) 2024 Michael Keck  < github@michaelkeck.de >
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * -----------------------------------------------------------------------------
 */
class Editor_Social_Link {

  /**
   * The current class instance.
   *
   * @var self
   * @see instance()
   */
  private static $_instance;

  /**
   * @var array  Fallback service for unknown social services.
   */
  private $fallback;

  /**
   * @var array  Social media services
   */
  private $services;


  /**
   * Load social services
   */
  private function load_services() {

    // Base SVG-Element
    $svg_element = '<svg'
      . ' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"'
      . ' width="24" height="24"'
      . ' role="img" aria-hidden="true" focusable="false">%s</svg>';

    // Fallback social service is unknown, or no service was defined
    $this->fallback = [
      'link' => [
        'name' => 'Share',
        'keywords' => ['link', 'share'],
        'icon' => sprintf(
          $svg_element,
          '<path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/>'
        )
      ],
      'feed' => [
        'name' => 'RSS Feed',
        'icon' => sprintf(
          $svg_element,
          '<path d="M2,8.667V12c5.515,0,10,4.485,10,10h3.333C15.333,14.637,9.363,8.667,2,8.667z M2,2v3.333 c9.19,0,16.667,7.477,16.667,16.667H22C22,10.955,13.045,2,2,2z M4.5,17C3.118,17,2,18.12,2,19.5S3.118,22,4.5,22S7,20.88,7,19.5 S5.882,17,4.5,17z"/>'
        ),
        'keywords' => ['feed', 'rss', 'atom', 'rss-feed'],
      ],
      'mail' => [
        'name' => 'Mail',
        'icon' => sprintf(
          $svg_element,
          '<path d="M20,4H4C2.895,4,2,4.895,2,6v12c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V6C22,4.895,21.105,4,20,4z M20,8.236l-8,4.882 L4,8.236V6h16V8.236z" />'
        ),
        'keywords' => ['email', 'e-mail'],
      ],
    ];


    /**
     * Filters the json file path.
     *
     * Example:
     *
     *    add_filter(
     *      'social_services_json', function() {
     *      return get_stylesheet_directory() . 'social-services.json';
     *    });
     *
     * @param string $file  Absolute path to the json file with services.
     */
    $json_file = apply_filters(
      'social_services_json',
      rtrim(get_stylesheet_directory(), '/\\') . '/social-services.json'
    );


    /**
     * Load data from JSON-file if it exists and is readable.
     *
     * The json-data must include the root key `socialServices`.
     * Example JSON-Data (in JSON-File):
     *
     *    {
     *      "socialServices": [
     *        "share": {
     *          "name": "Share"
     *          "icon": "<svg ...><path d='...' /></svg>",
     *          "keywords": ["optional", "key", "words"]
     *        }
     *      ]
     *    }
     */
    if (!empty($json_file) && file_exists($json_file)) {
      $json_data = file_get_contents($json_file);
      if (!empty($json_data)) {
        $json_data = json_decode($json_data, true);
        if (is_array($json_data) && !empty($json_data['socialServices'])) {
          $this->services = array_merge(
            $this->fallback,
            $json_data['socialServices']
          );
          return;
        }
      }
    }

    // Default social services, if no json file was found.
    // These services are filterable with 'social_services_data' - hook.
    $this->services = [
      'facebook' => [
        'name' => 'Facebook',
        'icon' => sprintf(
          $svg_element,
          '<path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"/>'
        )
      ],
      'instagram' => [
        'name' => 'Instagram',
        'icon' => sprintf(
          $svg_element,
          '<path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"/>'
        )
      ],
      'pinterest' => [
        'name' => 'Pinterest',
        'icon' => sprintf(
          $svg_element,
          '<path d="M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2"/>'
        )
      ],
      /* Twitter is now X *
      'twitter' => [
        'name' => 'Twitter',
        'icon' => sprintf(
        $svg_element,
        '<path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z" />'
        )
      ],
      **/
      'x' => [
        'name' => 'X',
        'icon' => sprintf(
          $svg_element,
          '<path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />'
        )
      ],
      'youtube' => [
        'name' => 'YouTube',
        'icon' => sprintf(
          $svg_element,
          '<path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z" />'
        )
      ],
      'linkedin' => [
        'name' => 'LinkedIn',
        'icon' => sprintf(
          $svg_element,
          '<path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"/>'
        )
      ],
      'xing' => [
        'name' => 'XING',
        'icon' => sprintf(
          $svg_element,
          '<path d="m10.7 9.9-3.1 5.5c-.2.4-.5.6-.8.6h-2.9c-.3 0-.6-.4-.4-.7l3.1-5.4-2-3.3c-.2-.3.1-.7.5-.7h2.9c.3 0 .5.2.7.6zm3.4 4 4.1 7.5c.2.3.1.6-.3.6h-3c-.3 0-.6-.2-.8-.6l-4.1-7.5 6.5-11.4c.2-.4.4-.5.7-.5h2.9c.4 0 .6.3.5.5z"/>'
        )
      ]
    ];


    /**
     * Filters the social services.
     *
     * Example:
     *
     *    add_filter(
     *      'social_services_data', function($social_services) {
     *      return array_merge($social_services, array(
     *        'facebook' => array(
     *          'name' => 'Facebook',
     *          'icon' => '<svg><path ...></svg>',
     *          'keywords' => ['fb', 'facebook'] // <- optional
     *        ),
     *        // ...
     *      ));
     *    });
     *
     * @param  array  $services  Social services.
     */
    $this->services = apply_filters(
      'social_services_data',
      $this->services
    );

    // Add fallback to services
    $this->services = array_merge(
      $this->fallback,
      $this->services
    );
  }


  /**
   * Prepare the inline script for registering social link services
   * (variations) for the `core/social-links`.
   *
   * @return string  For printing the inline script at footer on admin pages
   */
  private function prepare_inline_script() {

    $services = [];
    foreach ($this->services as $service => $data) {
      $item = [
        'name' => $service,
        'attributes' => [
          'service' => $service
        ],
        'title' => $data['name'],
        'icon' => $data['icon']
      ];
      if (!empty($date['keywords'])) {
        $item['keywords'] = $data['keywords'];
      }
      if ($service === 'link') {
        $item['icon'] = sprintf(
          '<svg'
          . ' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"'
          . ' width="24" height="24"'
          . ' role="img" aria-hidden="true" focusable="false">%s</svg>',
          '<path d="M19.647,16.706a1.134,1.134,0,0,0-.343-.833l-2.549-2.549a1.134,1.134,0,0,0-.833-.343,1.168,1.168,0,0,0-.883.392l.233.226q.2.189.264.264a2.922,2.922,0,0,1,.184.233.986.986,0,0,1,.159.312,1.242,1.242,0,0,1,.043.337,1.172,1.172,0,0,1-1.176,1.176,1.237,1.237,0,0,1-.337-.043,1,1,0,0,1-.312-.159,2.76,2.76,0,0,1-.233-.184q-.073-.068-.264-.264l-.226-.233a1.19,1.19,0,0,0-.4.895,1.134,1.134,0,0,0,.343.833L15.837,19.3a1.13,1.13,0,0,0,.833.331,1.18,1.18,0,0,0,.833-.318l1.8-1.789a1.12,1.12,0,0,0,.343-.821Zm-8.615-8.64a1.134,1.134,0,0,0-.343-.833L8.163,4.7a1.134,1.134,0,0,0-.833-.343,1.184,1.184,0,0,0-.833.331L4.7,6.473a1.12,1.12,0,0,0-.343.821,1.134,1.134,0,0,0,.343.833l2.549,2.549a1.13,1.13,0,0,0,.833.331,1.184,1.184,0,0,0,.883-.38L8.728,10.4q-.2-.189-.264-.264A2.922,2.922,0,0,1,8.28,9.9a.986.986,0,0,1-.159-.312,1.242,1.242,0,0,1-.043-.337A1.172,1.172,0,0,1,9.254,8.079a1.237,1.237,0,0,1,.337.043,1,1,0,0,1,.312.159,2.761,2.761,0,0,1,.233.184q.073.068.264.264l.226.233a1.19,1.19,0,0,0,.4-.895ZM22,16.706a3.343,3.343,0,0,1-1.042,2.488l-1.8,1.789a3.536,3.536,0,0,1-4.988-.025l-2.525-2.537a3.384,3.384,0,0,1-1.017-2.488,3.448,3.448,0,0,1,1.078-2.561l-1.078-1.078a3.434,3.434,0,0,1-2.549,1.078,3.4,3.4,0,0,1-2.5-1.029L3.029,9.794A3.4,3.4,0,0,1,2,7.294,3.343,3.343,0,0,1,3.042,4.806l1.8-1.789A3.384,3.384,0,0,1,7.331,2a3.357,3.357,0,0,1,2.5,1.042l2.525,2.537a3.384,3.384,0,0,1,1.017,2.488,3.448,3.448,0,0,1-1.078,2.561l1.078,1.078a3.551,3.551,0,0,1,5.049-.049l2.549,2.549A3.4,3.4,0,0,1,22,16.706Z"/>'
        )
        ;
      }
      $services[] = $item;
    }

    ob_start();
    ?>
      <script>

        (function(blocks, createElem, domReady) {
          if (typeof domReady !== "function") {
            console.error("Really strange and mysterious: `wp.domReady` is not a function or undefined.");
            return;
          }

          /**
           * Create an SVG-Element from previously parsed SVG-String
           * @return {NodeListOf<ChildNode>}
           * @return {*}
           */
          function createSvgElem(parsedNodes, svgIndex) {
            svgIndex = !svgIndex ? 'svgiconelem_' + index++ : svgIndex;
            return parsedNodes.map(function(elem) {
              let
                attributes = elem.attributes,
                children = elem.childNodes,
                name = elem.nodeName,
                value = elem.nodeValue;
              let attr = {};
              if (svgIndex) {
                attr.key = svgIndex;
              }
              if (attributes) {
                Array.from(attributes).forEach(function(attribute) {
                  if (attribute.name === "style") {
                    let items = attribute.nodeValue.split(";");
                    let styles = {};
                    items.forEach(function(item) {
                      let attr = item.split(":");
                      if (attr[0] && attr[1]) {
                        styles[attr[0]] = attr[1];
                      }
                    });
                    attr[attribute.name] = styles;
                  }
                  else {
                    attr[attribute.name] = attribute.nodeValue;
                  }
                });
              }
              if (name) {
                let childs = [];
                if (children && Array.isArray(Array.from(children))) {
                  childs = createSvgElem(Array.from(children), 'socialsvgelem_' + index + '_inner');
                }
                return createElem(name, attr, childs);
              }
              return value;
            });
          }

          /**
           * Create the SVG icon to usable as component for the block
           * @param  {string} rawSvgStr   for example '<svg ...><path d"=..."/></svg>'
           * @param  {string} svgId       Unique ID for the SVG file, could be the service.name
           * @return {*}
           */
          function createSvgIcon(rawSvgStr, svgId) {
            let nodes = new DOMParser().parseFromString(rawSvgStr, "text/html").body.childNodes;
            return createSvgElem(Array.from(nodes), !!svgId ? svgId : 'socialsvgelem_' + (index++));
          }

          let blockName = "core/social-link",
            index = 0,
            services = <?php echo json_encode($services); ?>;

          /**
           * Unregister WordPress predefined variations and register variations
           * based on user defined social services
           */
          domReady(function() {

            // unregister WordPress/Gutenberg core variations
            let coreVariations = blocks.getBlockVariations(blockName, "block");
            if (coreVariations) {
              Array.from(coreVariations).forEach(function(variation) {
                blocks.unregisterBlockVariation(blockName, variation);
              });
            }

            // register our own variations
            services.forEach(function(service) {
              blocks.registerBlockVariation(blockName, {
                name: service.name,
                title: service.title,
                attributes: service.attributes,
                keywords: !!service.keywords ? service.keywords : [service.name],
                icon: function() {
                  return createSvgIcon(service.icon, service.name);
                }
              });
            });

            // show correct icon in toolbar if selected
            blocks.getBlockVariations(blockName, "block").forEach(function(variation) {
              if (variation.isActive) {
                return;
              }
              variation.isActive = function(bockAttr, variationAttr) {
                return bockAttr.service === variationAttr.service;
              };
            });
          });
        })(wp.blocks, wp.element.createElement, wp.domReady);
      </script>
    <?php
    $script = ob_get_contents();
    ob_end_clean();

    return $script;
  }


  /**
   * Get color styles
   *
   * @param  array $context
   * @return string
   */
  private function color_styles($context) {
    $styles = [];
    if (array_key_exists('iconColorValue', $context)) {
      $styles[] = 'color: ' . $context['iconColorValue'] . '; ';
    }
    if (array_key_exists('iconBackgroundColorValue', $context)) {
      $styles[] = 'background-color: ' . $context['iconBackgroundColorValue'] . '; ';
    }
    return implode('', $styles);
  }


  /**
   * Get color class names
   *
   * @param  array $context
   * @return string
   */
  private function color_classes($context) {
    $classes = array();
    if (array_key_exists('iconColor', $context)) {
      $classes[] = 'has-' . $context['iconColor'] . '-color';
    }
    if (array_key_exists('iconBackgroundColor', $context)) {
      $classes[] = 'has-' . $context['iconBackgroundColor'] . '-background-color';
    }
    return implode( ' ', $classes );
  }


  /**
   * Get specific service
   *
   * @param  string  $service
   * @param  string  $field
   * @return array|string
   */
  private function get_services($service = '', $field = '') {
    $field = (!empty($field) && ($field === 'icon' || $field === 'name') ?  $field : '');
    if (!empty($service)) {
      $service = !empty($this->services[$service]) ? $this->services[$service] : $this->fallback;
      return !empty($field) ? $service[$field] : $service;
    }
    return $this->services;
  }


  /**
   * Print the inline script for registering social link services
   * (variations) for the `core/social-links` on pages which use
   * the block editor.
   */
  public function print_inline_script() {
    $current_screen = get_current_screen();
    if (
      !wp_doing_ajax() &&
      !empty($current_screen) &&
      method_exists($current_screen, 'is_block_editor') &&
      $current_screen->is_block_editor()
    ) {
      echo $this->prepare_inline_script();
    }
  }


  /**
   * Render the `core/social-link` block on server side.
   *
   * @param  array     $attributes  The block attributes.
   * @param  string    $content     InnerBlocks content of the Block.
   * @param  WP_Block  $block       Block object.
   * @return string                 Rendered HTML of the referenced block.
   */
  public function render_block($attributes, $content, $block) {

    $url = isset($attributes['url']) ? $attributes['url'] : false;

    // Don't render a link if there is no URL set.
    if (empty($url)) {
      return '';
    }

    if (is_email($url) && !str_starts_with($url, 'mailto:')) {
      $url = 'mailto:' . $url;
    } else if (!parse_url($url, PHP_URL_SCHEME) && !str_starts_with($url, '//')) {
      $url = 'https://' . $url;
    }

    $rel     = isset($attributes['rel']) ? $attributes['rel'] : '';
    $service = isset($attributes['service']) ? $attributes['service'] : 'share';
    $label   = isset($attributes['label']) ? $attributes['label'] : sprintf(
    /* translators: %1$s: Social-network name. %2$s: URL. */
      __( '%1$s: %2$s' ),
      $this->get_services($service, 'name'),
      $url
    );

    $class_names = [
      'wp-social-link',
      'wp-social-link-' . $service,
    ];
    if (isset($attributes['className'])) {
      $class_names[] = $attributes['className'];
    }
    $color_classes = $this->color_classes($block->context);
    if (!empty($color_classes)) {
      $class_names[] = $color_classes;
    }

    $new_tab = (
      isset($block->context['openInNewTab']) &&
      $block->context['openInNewTab']
    );

    $show_labels = (
      isset($block->context['showLabels']) &&
      $block->context['showLabels']
    );

    $link_icon = $this->get_services($service, 'icon');
    $link_attributes = [
      'href="' . esc_url($url). '"',
      'aria-label="' . esc_attr($label) . '"',
      'class="wp-block-social-link-anchor"'
    ];

    $link_rel = [];
    if (!empty($rel)) {
      $link_rel[] = esc_attr($rel);
    }
    if ($new_tab) {
      $link_attributes[] = 'target="_blank"';
      array_push($link_rel, 'noopener', 'nofollow');
    }

    if (!empty($link_rel)) {
      $link_attributes[] = 'rel="' . join(' ', $link_rel) . '"';
    }
    $item_attributes = get_block_wrapper_attributes([
      'class' => join(' ', $class_names),
      'style' => $this->color_styles($block->context)
    ]);

    $link_label = sprintf(
      '<span class="wp-block-social-link-label%1$s">%2$s</span>',
      ($show_labels ? '' : ' screen-reader-text'),
      esc_html($label)
    );

    return sprintf(
    /** @lang: text */
      '<li %1$s><a %2$s>%3$s%4$s</a></li>',
      $item_attributes, join(' ', $link_attributes), $link_icon, $link_label
    );
  }

  /**
   * Register render callback for the patched block.
   *
   * @param  array  $args
   * @param  string $blockname
   * @return array  New block arguments
   */
  public function register_block_args($args, $blockname) {
    if ($blockname === 'core/social-link') {
      $args['render_callback'] = [$this, 'render_block'];
    }
    return $args;
  }


  /**
   * Constructor.
   *
   * Adds actions and filters for the patched block.
   *
   * @global  string  $pagenow  The filename of the current screen.
   */
  private function __construct() {
    global $pagenow;

    // Load social services
    $this->load_services();

    // Filter block arguments
    add_filter(
      'register_block_type_args',
      [$this, 'register_block_args'], 10, 3
    );

    // add hook for printing the required editor inline script
    if (
      !wp_doing_ajax() && is_admin() &&
      ($pagenow === 'post.php' || $pagenow === 'post-new.php')
    ) {
      add_action(
        'admin_print_footer_scripts',
        [$this, 'print_inline_script']
      );
    }
  }


  /**
   * Get class instance
   * @return self
   */
  public static function instance() {
    if (!isset(self::$_instance)) {
      self::$_instance = new self();
    }
    return self::$_instance;
  }

}