Skip to content

Instantly share code, notes, and snippets.

@davidallenlewis

davidallenlewis/social-link-custom-icons.js

Last active February 13, 2025 20:31
Show Gist options
  • Save davidallenlewis/a1dc52dc8825313a198e3e91f17ad8c4 to your computer and use it in GitHub Desktop.
Save davidallenlewis/a1dc52dc8825313a198e3e91f17ad8c4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. davidallenlewis revised this gist Mar 29, 2024. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions social-link-custom-icons.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,10 +39,9 @@ const WebsiteIcon = () => (
    );

    /**
    * Attributes
    * Add postId to usesContext so we can get postId in the editor
    * Variations
    */
    function addCustomAttributes(settings, name) {
    function addCustomVariations(settings, name) {
    if ( name === 'core/social-link' ) {
    return assign({}, settings, {
    variations: merge(settings.variations, [
    @@ -83,6 +82,6 @@ function addCustomAttributes(settings, name) {
    }
    addFilter(
    'blocks.registerBlockType',
    'block-mods/query-loop-block/add-custom-attributes',
    addCustomAttributes,
    'block-mods/social-link-block/add-custom-variations',
    addCustomVariations,
    );
  2. davidallenlewis revised this gist Mar 29, 2024. 1 changed file with 55 additions and 55 deletions.
    110 changes: 55 additions & 55 deletions social-link-custom-icons.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,76 +13,76 @@ const { assign, merge } = lodash;
    * Icons
    */
    const DocumentIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M5,3H13.1667V8.83333H19V21.6667H5V3ZM19,7.66667H14.3333V3L19,7.66667Z" />
    </SVG>
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M5,3H13.1667V8.83333H19V21.6667H5V3ZM19,7.66667H14.3333V3L19,7.66667Z" />
    </SVG>
    );
    const FaxIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M7,4.5V8.25H9.5V4.5H17.1055L18.25,5.64453V8.25H20.75V5.64453C20.75,4.98047,20.4883,4.34375,20.0195,3.875L18.875,2.73047C18.4062,2.26172,17.7695,2,17.1055,2H9.5C8.12109,2,7,3.12109,7,4.5ZM2,8.25V20.75C2,21.4414,2.55859,22,3.25,22H4.5C5.19141,22,5.75,21.4414,5.75,20.75V8.25C5.75,7.55859,5.19141,7,4.5,7H3.25C2.55859,7,2,7.55859,2,8.25ZM20.75,9.5H7V20.75C7,21.4414,7.55859,22,8.25,22H20.75C21.4414,22,22,21.4414,22,20.75V10.75C22,10.0586,21.4414,9.5,20.75,9.5ZM12,12C12.3315,12,12.6495,12.1317,12.8839,12.3661C13.1183,12.6005,13.25,12.9185,13.25,13.25C13.25,13.5815,13.1183,13.8995,12.8839,14.1339C12.6495,14.3683,12.3315,14.5,12,14.5C11.6685,14.5,11.3505,14.3683,11.1161,14.1339C10.8817,13.8995,10.75,13.5815,10.75,13.25C10.75,12.9185,10.8817,12.6005,11.1161,12.3661C11.3505,12.1317,11.6685,12,12,12ZM15.75,13.25C15.75,12.9185,15.8817,12.6005,16.1161,12.3661C16.3505,12.1317,16.6685,12,17,12C17.3315,12,17.6495,12.1317,17.8839,12.3661C18.1183,12.6005,18.25,12.9185,18.25,13.25C18.25,13.5815,18.1183,13.8995,17.8839,14.1339C17.6495,14.3683,17.3315,14.5,17,14.5C16.6685,14.5,16.3505,14.3683,16.1161,14.1339C15.8817,13.8995,15.75,13.5815,15.75,13.25ZM17,17C17.3315,17,17.6495,17.1317,17.8839,17.3661C18.1183,17.6005,18.25,17.9185,18.25,18.25C18.25,18.5815,18.1183,18.8995,17.8839,19.1339C17.6495,19.3683,17.3315,19.5,17,19.5C16.6685,19.5,16.3505,19.3683,16.1161,19.1339C15.8817,18.8995,15.75,18.5815,15.75,18.25C15.75,17.9185,15.8817,17.6005,16.1161,17.3661C16.3505,17.1317,16.6685,17,17,17ZM10.75,18.25C10.75,17.9185,10.8817,17.6005,11.1161,17.3661C11.3505,17.1317,11.6685,17,12,17C12.3315,17,12.6495,17.1317,12.8839,17.3661C13.1183,17.6005,13.25,17.9185,13.25,18.25C13.25,18.5815,13.1183,18.8995,12.8839,19.1339C12.6495,19.3683,12.3315,19.5,12,19.5C11.6685,19.5,11.3505,19.3683,11.1161,19.1339C10.8817,18.8995,10.75,18.5815,10.75,18.25Z" />
    </SVG>
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M7,4.5V8.25H9.5V4.5H17.1055L18.25,5.64453V8.25H20.75V5.64453C20.75,4.98047,20.4883,4.34375,20.0195,3.875L18.875,2.73047C18.4062,2.26172,17.7695,2,17.1055,2H9.5C8.12109,2,7,3.12109,7,4.5ZM2,8.25V20.75C2,21.4414,2.55859,22,3.25,22H4.5C5.19141,22,5.75,21.4414,5.75,20.75V8.25C5.75,7.55859,5.19141,7,4.5,7H3.25C2.55859,7,2,7.55859,2,8.25ZM20.75,9.5H7V20.75C7,21.4414,7.55859,22,8.25,22H20.75C21.4414,22,22,21.4414,22,20.75V10.75C22,10.0586,21.4414,9.5,20.75,9.5ZM12,12C12.3315,12,12.6495,12.1317,12.8839,12.3661C13.1183,12.6005,13.25,12.9185,13.25,13.25C13.25,13.5815,13.1183,13.8995,12.8839,14.1339C12.6495,14.3683,12.3315,14.5,12,14.5C11.6685,14.5,11.3505,14.3683,11.1161,14.1339C10.8817,13.8995,10.75,13.5815,10.75,13.25C10.75,12.9185,10.8817,12.6005,11.1161,12.3661C11.3505,12.1317,11.6685,12,12,12ZM15.75,13.25C15.75,12.9185,15.8817,12.6005,16.1161,12.3661C16.3505,12.1317,16.6685,12,17,12C17.3315,12,17.6495,12.1317,17.8839,12.3661C18.1183,12.6005,18.25,12.9185,18.25,13.25C18.25,13.5815,18.1183,13.8995,17.8839,14.1339C17.6495,14.3683,17.3315,14.5,17,14.5C16.6685,14.5,16.3505,14.3683,16.1161,14.1339C15.8817,13.8995,15.75,13.5815,15.75,13.25ZM17,17C17.3315,17,17.6495,17.1317,17.8839,17.3661C18.1183,17.6005,18.25,17.9185,18.25,18.25C18.25,18.5815,18.1183,18.8995,17.8839,19.1339C17.6495,19.3683,17.3315,19.5,17,19.5C16.6685,19.5,16.3505,19.3683,16.1161,19.1339C15.8817,18.8995,15.75,18.5815,15.75,18.25C15.75,17.9185,15.8817,17.6005,16.1161,17.3661C16.3505,17.1317,16.6685,17,17,17ZM10.75,18.25C10.75,17.9185,10.8817,17.6005,11.1161,17.3661C11.3505,17.1317,11.6685,17,12,17C12.3315,17,12.6495,17.1317,12.8839,17.3661C13.1183,17.6005,13.25,17.9185,13.25,18.25C13.25,18.5815,13.1183,18.8995,12.8839,19.1339C12.6495,19.3683,12.3315,19.5,12,19.5C11.6685,19.5,11.3505,19.3683,11.1161,19.1339C10.8817,18.8995,10.75,18.5815,10.75,18.25Z" />
    </SVG>
    );
    const MobileIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M9.45455,4.54545V5.18182C9.45455,5.53182,9.74091,5.81818,10.0909,5.81818H13.9091C14.2591,5.81818,14.5455,5.53182,14.5455,5.18182V4.54545H15.8182C16.1682,4.54545,16.4545,4.83182,16.4545,5.18182V19.1818C16.4545,19.5318,16.1682,19.8182,15.8182,19.8182H8.18182C7.83182,19.8182,7.54545,19.5318,7.54545,19.1818V5.18182C7.54545,4.83182,7.83182,4.54545,8.18182,4.54545H9.45455ZM8.18182,2C6.42386,2,5,3.42386,5,5.18182V19.1818C5,20.9398,6.42386,22.3636,8.18182,22.3636H15.8182C17.5761,22.3636,19,20.9398,19,19.1818V5.18182C19,3.42386,17.5761,2,15.8182,2H8.18182ZM9.45455,17.9091C9.45455,18.2591,9.74091,18.5455,10.0909,18.5455H13.9091C14.2591,18.5455,14.5455,18.2591,14.5455,17.9091C14.5455,17.5591,14.2591,17.2727,13.9091,17.2727H10.0909C9.74091,17.2727,9.45455,17.5591,9.45455,17.9091Z" />
    </SVG>
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M9.45455,4.54545V5.18182C9.45455,5.53182,9.74091,5.81818,10.0909,5.81818H13.9091C14.2591,5.81818,14.5455,5.53182,14.5455,5.18182V4.54545H15.8182C16.1682,4.54545,16.4545,4.83182,16.4545,5.18182V19.1818C16.4545,19.5318,16.1682,19.8182,15.8182,19.8182H8.18182C7.83182,19.8182,7.54545,19.5318,7.54545,19.1818V5.18182C7.54545,4.83182,7.83182,4.54545,8.18182,4.54545H9.45455ZM8.18182,2C6.42386,2,5,3.42386,5,5.18182V19.1818C5,20.9398,6.42386,22.3636,8.18182,22.3636H15.8182C17.5761,22.3636,19,20.9398,19,19.1818V5.18182C19,3.42386,17.5761,2,15.8182,2H8.18182ZM9.45455,17.9091C9.45455,18.2591,9.74091,18.5455,10.0909,18.5455H13.9091C14.2591,18.5455,14.5455,18.2591,14.5455,17.9091C14.5455,17.5591,14.2591,17.2727,13.9091,17.2727H10.0909C9.74091,17.2727,9.45455,17.5591,9.45455,17.9091Z" />
    </SVG>
    );
    const PhoneIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M2,3.25L7.625,2L10.75,7.625L7.47656,10.2422C8.88672,12.9141,11.082,15.1094,13.7578,16.5234L16.375,13.25L22,16.375L20.75,22H19.5C9.83594,22,2,14.1641,2,4.5V3.25Z" />
    </SVG>
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M2,3.25L7.625,2L10.75,7.625L7.47656,10.2422C8.88672,12.9141,11.082,15.1094,13.7578,16.5234L16.375,13.25L22,16.375L20.75,22H19.5C9.83594,22,2,14.1641,2,4.5V3.25Z" />
    </SVG>
    );
    const WebsiteIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M15.7529,12C15.7529,12.8672,15.7061,13.7031,15.624,14.5H13.0107L13.5029,12.8281C13.9209,11.4062,12.6006,10.082,11.1748,10.5L8.26074,11.3555C8.27637,10.7188,8.31934,10.0977,8.38184,9.5H15.624C15.71,10.2969,15.7529,11.1328,15.7529,12ZM2.7998,12.9609C2.52246,13.043,2.28809,13.1758,2.09277,13.3477C2.03418,12.9062,2.00293,12.457,2.00293,12C2.00293,11.1367,2.1123,10.3008,2.31934,9.5H7.12793C7.05371,10.2188,7.01465,10.9609,7.00684,11.7266L2.7998,12.9609ZM11.042,21.2031L12.6436,15.75H15.4521C15.2139,17.1719,14.8467,18.4297,14.3975,19.4453C13.9873,20.3672,13.5303,21.0352,13.0889,21.457C12.6514,21.875,12.2881,22,12.0029,22C11.7217,22,11.3662,21.8789,10.9365,21.4766C10.9756,21.3906,11.0107,21.2969,11.042,21.1992V21.2031ZM16.8779,9.5H21.6865C21.8936,10.3008,22.0029,11.1367,22.0029,12C22.0029,12.8633,21.8936,13.6992,21.6865,14.5H16.8779C16.96,13.6953,17.0029,12.8594,17.0029,12C17.0029,11.1406,16.96,10.3047,16.8779,9.5ZM21.2764,8.25H16.7178C16.3271,5.75391,15.5537,3.66406,14.5576,2.32812C17.6162,3.13672,20.1045,5.35547,21.2725,8.25H21.2764ZM8.55371,8.25C8.79199,6.82812,9.15918,5.57031,9.6084,4.55078C10.0186,3.62891,10.4756,2.96094,10.917,2.53906C11.3545,2.125,11.7178,2,12.0029,2C12.2881,2,12.6514,2.125,13.0889,2.53906C13.5303,2.96094,13.9873,3.62891,14.3975,4.55078C14.8506,5.56641,15.2139,6.82422,15.4521,8.25H8.55371ZM7.28809,8.25H2.72949C3.90137,5.35547,6.38574,3.13672,9.44824,2.32812C8.45215,3.66406,7.67871,5.75391,7.28809,8.25ZM21.2764,15.75C20.1045,18.6445,17.6201,20.8633,14.5615,21.6719C15.5576,20.3359,16.3271,18.2461,16.7217,15.75H21.2764ZM3.52637,14.0508L11.5264,11.6992C11.999,11.5586,12.4404,12,12.3037,12.4766L9.95215,20.4766C9.79199,21.0195,9.0459,21.0859,8.79199,20.5781L7.6709,18.3398C7.64355,18.2891,7.6123,18.2383,7.57324,18.1953L4.13574,21.6328C3.64746,22.1211,2.85449,22.1211,2.36621,21.6328C1.87793,21.1445,1.87793,20.3516,2.36621,19.8633L5.80371,16.4258C5.76074,16.3867,5.71387,16.3516,5.65918,16.3281L3.4248,15.2109C2.91699,14.957,2.9834,14.2109,3.52637,14.0508Z" />
    </SVG>
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M15.7529,12C15.7529,12.8672,15.7061,13.7031,15.624,14.5H13.0107L13.5029,12.8281C13.9209,11.4062,12.6006,10.082,11.1748,10.5L8.26074,11.3555C8.27637,10.7188,8.31934,10.0977,8.38184,9.5H15.624C15.71,10.2969,15.7529,11.1328,15.7529,12ZM2.7998,12.9609C2.52246,13.043,2.28809,13.1758,2.09277,13.3477C2.03418,12.9062,2.00293,12.457,2.00293,12C2.00293,11.1367,2.1123,10.3008,2.31934,9.5H7.12793C7.05371,10.2188,7.01465,10.9609,7.00684,11.7266L2.7998,12.9609ZM11.042,21.2031L12.6436,15.75H15.4521C15.2139,17.1719,14.8467,18.4297,14.3975,19.4453C13.9873,20.3672,13.5303,21.0352,13.0889,21.457C12.6514,21.875,12.2881,22,12.0029,22C11.7217,22,11.3662,21.8789,10.9365,21.4766C10.9756,21.3906,11.0107,21.2969,11.042,21.1992V21.2031ZM16.8779,9.5H21.6865C21.8936,10.3008,22.0029,11.1367,22.0029,12C22.0029,12.8633,21.8936,13.6992,21.6865,14.5H16.8779C16.96,13.6953,17.0029,12.8594,17.0029,12C17.0029,11.1406,16.96,10.3047,16.8779,9.5ZM21.2764,8.25H16.7178C16.3271,5.75391,15.5537,3.66406,14.5576,2.32812C17.6162,3.13672,20.1045,5.35547,21.2725,8.25H21.2764ZM8.55371,8.25C8.79199,6.82812,9.15918,5.57031,9.6084,4.55078C10.0186,3.62891,10.4756,2.96094,10.917,2.53906C11.3545,2.125,11.7178,2,12.0029,2C12.2881,2,12.6514,2.125,13.0889,2.53906C13.5303,2.96094,13.9873,3.62891,14.3975,4.55078C14.8506,5.56641,15.2139,6.82422,15.4521,8.25H8.55371ZM7.28809,8.25H2.72949C3.90137,5.35547,6.38574,3.13672,9.44824,2.32812C8.45215,3.66406,7.67871,5.75391,7.28809,8.25ZM21.2764,15.75C20.1045,18.6445,17.6201,20.8633,14.5615,21.6719C15.5576,20.3359,16.3271,18.2461,16.7217,15.75H21.2764ZM3.52637,14.0508L11.5264,11.6992C11.999,11.5586,12.4404,12,12.3037,12.4766L9.95215,20.4766C9.79199,21.0195,9.0459,21.0859,8.79199,20.5781L7.6709,18.3398C7.64355,18.2891,7.6123,18.2383,7.57324,18.1953L4.13574,21.6328C3.64746,22.1211,2.85449,22.1211,2.36621,21.6328C1.87793,21.1445,1.87793,20.3516,2.36621,19.8633L5.80371,16.4258C5.76074,16.3867,5.71387,16.3516,5.65918,16.3281L3.4248,15.2109C2.91699,14.957,2.9834,14.2109,3.52637,14.0508Z" />
    </SVG>
    );

    /**
    * Attributes
    * Add postId to usesContext so we can get postId in the editor
    */
    function addCustomAttributes(settings, name) {
    if ( name === 'core/social-link' ) {
    return assign({}, settings, {
    variations: merge(settings.variations, [
    {
    name: 'document',
    attributes: { service: 'document' },
    title: 'Document',
    icon: DocumentIcon,
    },
    {
    name: 'fax',
    attributes: { service: 'fax' },
    title: 'Fax',
    icon: FaxIcon,
    },
    {
    name: 'mobile',
    attributes: { service: 'mobile' },
    title: 'Mobile',
    icon: MobileIcon,
    },
    {
    name: 'phone',
    attributes: { service: 'phone' },
    title: 'Phone',
    icon: PhoneIcon,
    },
    {
    name: 'website',
    attributes: { service: 'website' },
    title: 'Website',
    icon: WebsiteIcon,
    },
    ]),
    });
    }
    return settings;
    if ( name === 'core/social-link' ) {
    return assign({}, settings, {
    variations: merge(settings.variations, [
    {
    name: 'document',
    attributes: { service: 'document' },
    title: 'Document',
    icon: DocumentIcon,
    },
    {
    name: 'fax',
    attributes: { service: 'fax' },
    title: 'Fax',
    icon: FaxIcon,
    },
    {
    name: 'mobile',
    attributes: { service: 'mobile' },
    title: 'Mobile',
    icon: MobileIcon,
    },
    {
    name: 'phone',
    attributes: { service: 'phone' },
    title: 'Phone',
    icon: PhoneIcon,
    },
    {
    name: 'website',
    attributes: { service: 'website' },
    title: 'Website',
    icon: WebsiteIcon,
    },
    ]),
    });
    }
    return settings;
    }
    addFilter(
    'blocks.registerBlockType',
    'block-mods/query-loop-block/add-custom-attributes',
    addCustomAttributes,
    'blocks.registerBlockType',
    'block-mods/query-loop-block/add-custom-attributes',
    addCustomAttributes,
    );
  3. davidallenlewis created this gist Mar 29, 2024.
    88 changes: 88 additions & 0 deletions social-link-custom-icons.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    /**
    * Dependencies
    */
    import { addFilter } from '@wordpress/hooks';
    import { Path, SVG } from '@wordpress/primitives';

    /**
    * Constants
    */
    const { assign, merge } = lodash;

    /**
    * Icons
    */
    const DocumentIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M5,3H13.1667V8.83333H19V21.6667H5V3ZM19,7.66667H14.3333V3L19,7.66667Z" />
    </SVG>
    );
    const FaxIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M7,4.5V8.25H9.5V4.5H17.1055L18.25,5.64453V8.25H20.75V5.64453C20.75,4.98047,20.4883,4.34375,20.0195,3.875L18.875,2.73047C18.4062,2.26172,17.7695,2,17.1055,2H9.5C8.12109,2,7,3.12109,7,4.5ZM2,8.25V20.75C2,21.4414,2.55859,22,3.25,22H4.5C5.19141,22,5.75,21.4414,5.75,20.75V8.25C5.75,7.55859,5.19141,7,4.5,7H3.25C2.55859,7,2,7.55859,2,8.25ZM20.75,9.5H7V20.75C7,21.4414,7.55859,22,8.25,22H20.75C21.4414,22,22,21.4414,22,20.75V10.75C22,10.0586,21.4414,9.5,20.75,9.5ZM12,12C12.3315,12,12.6495,12.1317,12.8839,12.3661C13.1183,12.6005,13.25,12.9185,13.25,13.25C13.25,13.5815,13.1183,13.8995,12.8839,14.1339C12.6495,14.3683,12.3315,14.5,12,14.5C11.6685,14.5,11.3505,14.3683,11.1161,14.1339C10.8817,13.8995,10.75,13.5815,10.75,13.25C10.75,12.9185,10.8817,12.6005,11.1161,12.3661C11.3505,12.1317,11.6685,12,12,12ZM15.75,13.25C15.75,12.9185,15.8817,12.6005,16.1161,12.3661C16.3505,12.1317,16.6685,12,17,12C17.3315,12,17.6495,12.1317,17.8839,12.3661C18.1183,12.6005,18.25,12.9185,18.25,13.25C18.25,13.5815,18.1183,13.8995,17.8839,14.1339C17.6495,14.3683,17.3315,14.5,17,14.5C16.6685,14.5,16.3505,14.3683,16.1161,14.1339C15.8817,13.8995,15.75,13.5815,15.75,13.25ZM17,17C17.3315,17,17.6495,17.1317,17.8839,17.3661C18.1183,17.6005,18.25,17.9185,18.25,18.25C18.25,18.5815,18.1183,18.8995,17.8839,19.1339C17.6495,19.3683,17.3315,19.5,17,19.5C16.6685,19.5,16.3505,19.3683,16.1161,19.1339C15.8817,18.8995,15.75,18.5815,15.75,18.25C15.75,17.9185,15.8817,17.6005,16.1161,17.3661C16.3505,17.1317,16.6685,17,17,17ZM10.75,18.25C10.75,17.9185,10.8817,17.6005,11.1161,17.3661C11.3505,17.1317,11.6685,17,12,17C12.3315,17,12.6495,17.1317,12.8839,17.3661C13.1183,17.6005,13.25,17.9185,13.25,18.25C13.25,18.5815,13.1183,18.8995,12.8839,19.1339C12.6495,19.3683,12.3315,19.5,12,19.5C11.6685,19.5,11.3505,19.3683,11.1161,19.1339C10.8817,18.8995,10.75,18.5815,10.75,18.25Z" />
    </SVG>
    );
    const MobileIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M9.45455,4.54545V5.18182C9.45455,5.53182,9.74091,5.81818,10.0909,5.81818H13.9091C14.2591,5.81818,14.5455,5.53182,14.5455,5.18182V4.54545H15.8182C16.1682,4.54545,16.4545,4.83182,16.4545,5.18182V19.1818C16.4545,19.5318,16.1682,19.8182,15.8182,19.8182H8.18182C7.83182,19.8182,7.54545,19.5318,7.54545,19.1818V5.18182C7.54545,4.83182,7.83182,4.54545,8.18182,4.54545H9.45455ZM8.18182,2C6.42386,2,5,3.42386,5,5.18182V19.1818C5,20.9398,6.42386,22.3636,8.18182,22.3636H15.8182C17.5761,22.3636,19,20.9398,19,19.1818V5.18182C19,3.42386,17.5761,2,15.8182,2H8.18182ZM9.45455,17.9091C9.45455,18.2591,9.74091,18.5455,10.0909,18.5455H13.9091C14.2591,18.5455,14.5455,18.2591,14.5455,17.9091C14.5455,17.5591,14.2591,17.2727,13.9091,17.2727H10.0909C9.74091,17.2727,9.45455,17.5591,9.45455,17.9091Z" />
    </SVG>
    );
    const PhoneIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M2,3.25L7.625,2L10.75,7.625L7.47656,10.2422C8.88672,12.9141,11.082,15.1094,13.7578,16.5234L16.375,13.25L22,16.375L20.75,22H19.5C9.83594,22,2,14.1641,2,4.5V3.25Z" />
    </SVG>
    );
    const WebsiteIcon = () => (
    <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
    <Path d="M15.7529,12C15.7529,12.8672,15.7061,13.7031,15.624,14.5H13.0107L13.5029,12.8281C13.9209,11.4062,12.6006,10.082,11.1748,10.5L8.26074,11.3555C8.27637,10.7188,8.31934,10.0977,8.38184,9.5H15.624C15.71,10.2969,15.7529,11.1328,15.7529,12ZM2.7998,12.9609C2.52246,13.043,2.28809,13.1758,2.09277,13.3477C2.03418,12.9062,2.00293,12.457,2.00293,12C2.00293,11.1367,2.1123,10.3008,2.31934,9.5H7.12793C7.05371,10.2188,7.01465,10.9609,7.00684,11.7266L2.7998,12.9609ZM11.042,21.2031L12.6436,15.75H15.4521C15.2139,17.1719,14.8467,18.4297,14.3975,19.4453C13.9873,20.3672,13.5303,21.0352,13.0889,21.457C12.6514,21.875,12.2881,22,12.0029,22C11.7217,22,11.3662,21.8789,10.9365,21.4766C10.9756,21.3906,11.0107,21.2969,11.042,21.1992V21.2031ZM16.8779,9.5H21.6865C21.8936,10.3008,22.0029,11.1367,22.0029,12C22.0029,12.8633,21.8936,13.6992,21.6865,14.5H16.8779C16.96,13.6953,17.0029,12.8594,17.0029,12C17.0029,11.1406,16.96,10.3047,16.8779,9.5ZM21.2764,8.25H16.7178C16.3271,5.75391,15.5537,3.66406,14.5576,2.32812C17.6162,3.13672,20.1045,5.35547,21.2725,8.25H21.2764ZM8.55371,8.25C8.79199,6.82812,9.15918,5.57031,9.6084,4.55078C10.0186,3.62891,10.4756,2.96094,10.917,2.53906C11.3545,2.125,11.7178,2,12.0029,2C12.2881,2,12.6514,2.125,13.0889,2.53906C13.5303,2.96094,13.9873,3.62891,14.3975,4.55078C14.8506,5.56641,15.2139,6.82422,15.4521,8.25H8.55371ZM7.28809,8.25H2.72949C3.90137,5.35547,6.38574,3.13672,9.44824,2.32812C8.45215,3.66406,7.67871,5.75391,7.28809,8.25ZM21.2764,15.75C20.1045,18.6445,17.6201,20.8633,14.5615,21.6719C15.5576,20.3359,16.3271,18.2461,16.7217,15.75H21.2764ZM3.52637,14.0508L11.5264,11.6992C11.999,11.5586,12.4404,12,12.3037,12.4766L9.95215,20.4766C9.79199,21.0195,9.0459,21.0859,8.79199,20.5781L7.6709,18.3398C7.64355,18.2891,7.6123,18.2383,7.57324,18.1953L4.13574,21.6328C3.64746,22.1211,2.85449,22.1211,2.36621,21.6328C1.87793,21.1445,1.87793,20.3516,2.36621,19.8633L5.80371,16.4258C5.76074,16.3867,5.71387,16.3516,5.65918,16.3281L3.4248,15.2109C2.91699,14.957,2.9834,14.2109,3.52637,14.0508Z" />
    </SVG>
    );

    /**
    * Attributes
    * Add postId to usesContext so we can get postId in the editor
    */
    function addCustomAttributes(settings, name) {
    if ( name === 'core/social-link' ) {
    return assign({}, settings, {
    variations: merge(settings.variations, [
    {
    name: 'document',
    attributes: { service: 'document' },
    title: 'Document',
    icon: DocumentIcon,
    },
    {
    name: 'fax',
    attributes: { service: 'fax' },
    title: 'Fax',
    icon: FaxIcon,
    },
    {
    name: 'mobile',
    attributes: { service: 'mobile' },
    title: 'Mobile',
    icon: MobileIcon,
    },
    {
    name: 'phone',
    attributes: { service: 'phone' },
    title: 'Phone',
    icon: PhoneIcon,
    },
    {
    name: 'website',
    attributes: { service: 'website' },
    title: 'Website',
    icon: WebsiteIcon,
    },
    ]),
    });
    }
    return settings;
    }
    addFilter(
    'blocks.registerBlockType',
    'block-mods/query-loop-block/add-custom-attributes',
    addCustomAttributes,
    );