Last active
October 11, 2022 13:58
-
-
Save cameronjonesweb/75f63c42d92f1ced7f8757bc194c6c71 to your computer and use it in GitHub Desktop.
The painful efforts of adding a custom icon to the social links block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Path, SVG } from '@wordpress/primitives'; | |
| export const PlayHqIcon = () => ( | |
| <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1"> | |
| <Path fill="#4897D2" d="M23.3,5.4l-0.1,0.8C16.7,2.5,8.8,2.2,2,5.4v0c2.9-2.1,6.2-3.5,9.7-4.1c0.3-0.1,0.6-0.1,0.9-0.1 c3.6-0.5,7.3-0.1,10.8,1.1C23.4,3.3,23.4,4.3,23.3,5.4L23.3,5.4z"/> | |
| <Path fill="#9057A3" d="M2,5.4C2,5.4,2,5.4,2,5.4C2,5.5,2,5.4,2,5.4L2,5.4z"/> | |
| <Path fill="#9057A3" d="M12.6,1.1c-0.3,0-0.6,0.1-0.9,0.1C8.2,1.9,4.9,3.3,2,5.4C1.9,4.3,1.9,3.3,2,2.2C5.4,1,9,0.7,12.6,1.1z"/> | |
| <Path d="M11.9,3.2C8.5,3.2,5.1,4,2,5.4c0,0-0.1,0-0.1,0C1.5,5.7,1,5.9,0.6,6.2c0.4,3.1,1.4,6.1,3,8.8l1-8.2 c0,0,0-0.1,0.1-0.1s0.1-0.1,0.1-0.1h2c0.1,0,0.2,0.1,0.2,0.2l-0.5,3.7c0,0,0,0.1,0.1,0.1h2.6c0,0,0,0,0.1,0c0,0,0,0,0-0.1l0.5-3.7 c0,0,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1h2c0,0,0.1,0,0.1,0.1c0,0,0,0.1,0,0.1l-1.2,9.6c0,0,0,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1h-2 c0,0-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1l0.5-3.8c0,0,0-0.1-0.1-0.1H6.3c0,0-0.1,0-0.1,0.1l-0.6,5.1c1.8,2.2,3.9,4,6.3,5.4 c2.6-1.5,5-3.6,6.8-6l-1-1c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.3-1.3,0.5-2,0.5c-0.9,0-1.8-0.3-2.4-0.9c-0.6-0.6-0.9-1.5-0.9-2.3 c0-0.2,0-0.4,0-0.6l0.4-2.8c0.1-0.7,0.3-1.3,0.7-1.9c0.4-0.6,0.9-1,1.5-1.3c0.6-0.3,1.3-0.5,2-0.5c0.6,0,1.2,0.1,1.8,0.4 c0.5,0.2,0.9,0.6,1.2,1.1C20,8.4,20.1,9,20.1,9.6c0,0.2,0,0.4,0,0.6L19.7,13c0,0.4-0.1,0.7-0.3,1.1l0.7,0.7c0,0,0,0,0.1,0.1 c1.6-2.6,2.6-5.6,3-8.6C19.8,4.2,15.9,3.2,11.9,3.2L11.9,3.2z"/> | |
| <Path d="M15.3,8.9c-0.3,0.3-0.5,0.7-0.6,1.2l-0.4,3c0,0.1,0,0.2,0,0.3c0,0.4,0.1,0.7,0.3,1c0.3,0.2,0.6,0.4,0.9,0.4 c0.4,0,0.8-0.2,1.1-0.5c0.3-0.3,0.5-0.7,0.6-1.2l0.4-3c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.7-0.3-1c-0.3-0.2-0.6-0.4-1-0.4 C16,8.5,15.6,8.6,15.3,8.9L15.3,8.9z"/> | |
| </SVG> | |
| ); | |
| const PlayHqSocialLink = { | |
| name: 'playhq', | |
| attributes: { service: 'playhq' }, | |
| title: 'PlayHQ', | |
| icon: PlayHqIcon, | |
| }; | |
| wp.domReady( function() { | |
| wp.hooks.addFilter( | |
| 'blocks.registerBlockType', | |
| 'playhq-social-icon/social-link-block', | |
| function( settings, name ) { | |
| if ( 'core/social-link' === name ) { | |
| if ( settings.variations.length ) { | |
| var variation = PlayHqSocialLink; | |
| settings.variations.push( variation ); | |
| } | |
| } | |
| return settings; | |
| } | |
| ); | |
| wp.blocks.registerBlockVariation( 'core/social-link', PlayHqSocialLink ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity */ | |
| add_filter( | |
| 'render_block', | |
| function( $block_content, $block ) { | |
| if ( 'core/social-link' === $block['blockName'] && 'playhq' === $block['attrs']['service'] ) { | |
| $icon = '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1"> | |
| <path d="M20.9,4.16l-.08,.71C14.83,1.48,7.57,1.22,1.35,4.17v-.03C3.98,2.19,7.03,.88,10.25,.31c.28-.05,.54-.08,.81-.11,3.34-.46,6.74-.12,9.92,1,.04,.99,.01,1.97-.08,2.95Z" fill="#4897d2"/> | |
| <path d="M1.35,4.14s-.06,.04-.09,.07c.03-.01,.06-.03,.09-.04v-.03Z" fill="#9057a3"/> | |
| <path d="M11.06,.2c-.27,.04-.54,.07-.81,.11C7.03,.88,3.98,2.19,1.35,4.14c-.09-.97-.12-1.95-.08-2.92C4.41,.11,7.76-.24,11.06,.2Z" fill="#9057a3"/> | |
| <path class="cls-3" d="M10.41,2.13c-3.13,0-6.23,.7-9.06,2.04-.03,.01-.06,.02-.09,.04-.43,.21-.85,.42-1.26,.66,.37,2.85,1.32,5.6,2.79,8.08l.93-7.59s.02-.08,.05-.11c.03-.03,.08-.05,.12-.05h1.8c.1,0,.15,.05,.15,.16l-.42,3.4s.02,.07,.06,.07h2.4s.03,0,.05-.02c.01-.01,.02-.03,.02-.05l.42-3.4s.03-.08,.06-.11c.03-.03,.07-.05,.11-.05h1.82s.08,.02,.1,.05c.03,.03,.04,.07,.03,.11l-1.09,8.9s-.03,.08-.06,.11c-.03,.03-.07,.05-.11,.05h-1.82s-.08-.02-.11-.05c-.03-.03-.04-.07-.03-.11l.42-3.5s0-.07-.05-.07h-2.38s-.06,.02-.08,.07l-.57,4.75c1.62,1.99,3.59,3.67,5.81,4.96,2.43-1.4,4.56-3.28,6.25-5.52l-.93-.94c-.07,.04-.12,.09-.19,.13-.58,.29-1.23,.44-1.88,.43-.83,.04-1.63-.24-2.25-.79-.57-.56-.87-1.34-.83-2.13,0-.17,0-.34,.03-.51l.33-2.63c.07-.64,.29-1.24,.65-1.77,.35-.51,.82-.92,1.37-1.2,.58-.29,1.22-.44,1.86-.43,.57-.01,1.13,.11,1.65,.36,.45,.22,.82,.57,1.07,1.01,.26,.46,.39,.99,.37,1.52,0,.17,0,.34-.03,.51l-.32,2.63c-.04,.34-.12,.67-.23,.99l.66,.66s.04,.04,.08,.07c1.45-2.44,2.39-5.16,2.75-7.98-3.18-1.8-6.77-2.75-10.42-2.74Z"/> | |
| <path class="cls-3" d="M13.55,7.38c-.29,.29-.47,.68-.51,1.09l-.33,2.73c0,.09-.01,.18-.01,.26-.02,.33,.09,.66,.32,.91,.23,.23,.54,.35,.86,.33,.39,0,.77-.14,1.05-.42,.29-.29,.47-.68,.51-1.09l.34-2.73c.01-.08,.01-.16,.01-.24,.02-.34-.1-.67-.32-.92-.23-.23-.55-.36-.88-.34-.39,0-.76,.14-1.03,.41Z"/> | |
| </svg>'; | |
| $dom = new DOMDocument(); | |
| $dom->loadHTML( $block_content, LIBXML_NOWARNING ); | |
| $old_icon = $dom->getElementsByTagName( 'svg' )->item( 0 ); | |
| $old_icon->innerHTML = $icon; | |
| $block_content = $dom->saveHtml(); | |
| } | |
| return $block_content; | |
| }, | |
| 10, | |
| 2 | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| add_filter( | |
| 'render_block', | |
| function( $block_content, $block ) { | |
| if ( 'core/social-link' === $block['blockName'] && 'playhq' === $block['attrs']['service'] ) { | |
| $icon = '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1"> | |
| <path d="M20.9,4.16l-.08,.71C14.83,1.48,7.57,1.22,1.35,4.17v-.03C3.98,2.19,7.03,.88,10.25,.31c.28-.05,.54-.08,.81-.11,3.34-.46,6.74-.12,9.92,1,.04,.99,.01,1.97-.08,2.95Z" fill="#4897d2"/> | |
| <path d="M1.35,4.14s-.06,.04-.09,.07c.03-.01,.06-.03,.09-.04v-.03Z" fill="#9057a3"/> | |
| <path d="M11.06,.2c-.27,.04-.54,.07-.81,.11C7.03,.88,3.98,2.19,1.35,4.14c-.09-.97-.12-1.95-.08-2.92C4.41,.11,7.76-.24,11.06,.2Z" fill="#9057a3"/> | |
| <path class="cls-3" d="M10.41,2.13c-3.13,0-6.23,.7-9.06,2.04-.03,.01-.06,.02-.09,.04-.43,.21-.85,.42-1.26,.66,.37,2.85,1.32,5.6,2.79,8.08l.93-7.59s.02-.08,.05-.11c.03-.03,.08-.05,.12-.05h1.8c.1,0,.15,.05,.15,.16l-.42,3.4s.02,.07,.06,.07h2.4s.03,0,.05-.02c.01-.01,.02-.03,.02-.05l.42-3.4s.03-.08,.06-.11c.03-.03,.07-.05,.11-.05h1.82s.08,.02,.1,.05c.03,.03,.04,.07,.03,.11l-1.09,8.9s-.03,.08-.06,.11c-.03,.03-.07,.05-.11,.05h-1.82s-.08-.02-.11-.05c-.03-.03-.04-.07-.03-.11l.42-3.5s0-.07-.05-.07h-2.38s-.06,.02-.08,.07l-.57,4.75c1.62,1.99,3.59,3.67,5.81,4.96,2.43-1.4,4.56-3.28,6.25-5.52l-.93-.94c-.07,.04-.12,.09-.19,.13-.58,.29-1.23,.44-1.88,.43-.83,.04-1.63-.24-2.25-.79-.57-.56-.87-1.34-.83-2.13,0-.17,0-.34,.03-.51l.33-2.63c.07-.64,.29-1.24,.65-1.77,.35-.51,.82-.92,1.37-1.2,.58-.29,1.22-.44,1.86-.43,.57-.01,1.13,.11,1.65,.36,.45,.22,.82,.57,1.07,1.01,.26,.46,.39,.99,.37,1.52,0,.17,0,.34-.03,.51l-.32,2.63c-.04,.34-.12,.67-.23,.99l.66,.66s.04,.04,.08,.07c1.45-2.44,2.39-5.16,2.75-7.98-3.18-1.8-6.77-2.75-10.42-2.74Z"/> | |
| <path class="cls-3" d="M13.55,7.38c-.29,.29-.47,.68-.51,1.09l-.33,2.73c0,.09-.01,.18-.01,.26-.02,.33,.09,.66,.32,.91,.23,.23,.54,.35,.86,.33,.39,0,.77-.14,1.05-.42,.29-.29,.47-.68,.51-1.09l.34-2.73c.01-.08,.01-.16,.01-.24,.02-.34-.1-.67-.32-.92-.23-.23-.55-.36-.88-.34-.39,0-.76,.14-1.03,.41Z"/> | |
| </svg>'; | |
| $before = explode( '<svg', $block_content ); | |
| $after = explode( '</svg>', $before[1] ); | |
| $block_content = $before[0] . $icon . $after[1]; | |
| } | |
| return $block_content; | |
| }, | |
| 10, | |
| 2 | |
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| wp.domReady( function() { | |
| wp.blocks.registerBlockVariation( | |
| 'core/social-link', | |
| { | |
| name: 'playhq', | |
| attributes: { service: 'playhq' }, | |
| title: 'PlayHQ', | |
| } | |
| ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Path, SVG } from '@wordpress/primitives'; | |
| export const PlayHqIcon = () => ( | |
| <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1"> | |
| <Path fill="#4897D2" d="M23.3,5.4l-0.1,0.8C16.7,2.5,8.8,2.2,2,5.4v0c2.9-2.1,6.2-3.5,9.7-4.1c0.3-0.1,0.6-0.1,0.9-0.1 c3.6-0.5,7.3-0.1,10.8,1.1C23.4,3.3,23.4,4.3,23.3,5.4L23.3,5.4z"/> | |
| <Path fill="#9057A3" d="M2,5.4C2,5.4,2,5.4,2,5.4C2,5.5,2,5.4,2,5.4L2,5.4z"/> | |
| <Path fill="#9057A3" d="M12.6,1.1c-0.3,0-0.6,0.1-0.9,0.1C8.2,1.9,4.9,3.3,2,5.4C1.9,4.3,1.9,3.3,2,2.2C5.4,1,9,0.7,12.6,1.1z"/> | |
| <Path d="M11.9,3.2C8.5,3.2,5.1,4,2,5.4c0,0-0.1,0-0.1,0C1.5,5.7,1,5.9,0.6,6.2c0.4,3.1,1.4,6.1,3,8.8l1-8.2 c0,0,0-0.1,0.1-0.1s0.1-0.1,0.1-0.1h2c0.1,0,0.2,0.1,0.2,0.2l-0.5,3.7c0,0,0,0.1,0.1,0.1h2.6c0,0,0,0,0.1,0c0,0,0,0,0-0.1l0.5-3.7 c0,0,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1h2c0,0,0.1,0,0.1,0.1c0,0,0,0.1,0,0.1l-1.2,9.6c0,0,0,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1h-2 c0,0-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1l0.5-3.8c0,0,0-0.1-0.1-0.1H6.3c0,0-0.1,0-0.1,0.1l-0.6,5.1c1.8,2.2,3.9,4,6.3,5.4 c2.6-1.5,5-3.6,6.8-6l-1-1c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.3-1.3,0.5-2,0.5c-0.9,0-1.8-0.3-2.4-0.9c-0.6-0.6-0.9-1.5-0.9-2.3 c0-0.2,0-0.4,0-0.6l0.4-2.8c0.1-0.7,0.3-1.3,0.7-1.9c0.4-0.6,0.9-1,1.5-1.3c0.6-0.3,1.3-0.5,2-0.5c0.6,0,1.2,0.1,1.8,0.4 c0.5,0.2,0.9,0.6,1.2,1.1C20,8.4,20.1,9,20.1,9.6c0,0.2,0,0.4,0,0.6L19.7,13c0,0.4-0.1,0.7-0.3,1.1l0.7,0.7c0,0,0,0,0.1,0.1 c1.6-2.6,2.6-5.6,3-8.6C19.8,4.2,15.9,3.2,11.9,3.2L11.9,3.2z"/> | |
| <Path d="M15.3,8.9c-0.3,0.3-0.5,0.7-0.6,1.2l-0.4,3c0,0.1,0,0.2,0,0.3c0,0.4,0.1,0.7,0.3,1c0.3,0.2,0.6,0.4,0.9,0.4 c0.4,0,0.8-0.2,1.1-0.5c0.3-0.3,0.5-0.7,0.6-1.2l0.4-3c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.7-0.3-1c-0.3-0.2-0.6-0.4-1-0.4 C16,8.5,15.6,8.6,15.3,8.9L15.3,8.9z"/> | |
| </SVG> | |
| ); | |
| wp.domReady( function() { | |
| wp.blocks.registerBlockVariation( | |
| 'core/social-link', | |
| { | |
| name: 'playhq', | |
| attributes: { service: 'playhq' }, | |
| title: 'PlayHQ', | |
| icon: PlayHqIcon, | |
| } | |
| ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Path, SVG } from '@wordpress/primitives'; | |
| export const PlayHqIcon = () => ( | |
| <SVG width="24" height="24" viewBox="0 0 24 24" version="1.1"> | |
| <Path fill="#4897D2" d="M23.3,5.4l-0.1,0.8C16.7,2.5,8.8,2.2,2,5.4v0c2.9-2.1,6.2-3.5,9.7-4.1c0.3-0.1,0.6-0.1,0.9-0.1 c3.6-0.5,7.3-0.1,10.8,1.1C23.4,3.3,23.4,4.3,23.3,5.4L23.3,5.4z"/> | |
| <Path fill="#9057A3" d="M2,5.4C2,5.4,2,5.4,2,5.4C2,5.5,2,5.4,2,5.4L2,5.4z"/> | |
| <Path fill="#9057A3" d="M12.6,1.1c-0.3,0-0.6,0.1-0.9,0.1C8.2,1.9,4.9,3.3,2,5.4C1.9,4.3,1.9,3.3,2,2.2C5.4,1,9,0.7,12.6,1.1z"/> | |
| <Path d="M11.9,3.2C8.5,3.2,5.1,4,2,5.4c0,0-0.1,0-0.1,0C1.5,5.7,1,5.9,0.6,6.2c0.4,3.1,1.4,6.1,3,8.8l1-8.2 c0,0,0-0.1,0.1-0.1s0.1-0.1,0.1-0.1h2c0.1,0,0.2,0.1,0.2,0.2l-0.5,3.7c0,0,0,0.1,0.1,0.1h2.6c0,0,0,0,0.1,0c0,0,0,0,0-0.1l0.5-3.7 c0,0,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1h2c0,0,0.1,0,0.1,0.1c0,0,0,0.1,0,0.1l-1.2,9.6c0,0,0,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1h-2 c0,0-0.1,0-0.1-0.1c0,0,0-0.1,0-0.1l0.5-3.8c0,0,0-0.1-0.1-0.1H6.3c0,0-0.1,0-0.1,0.1l-0.6,5.1c1.8,2.2,3.9,4,6.3,5.4 c2.6-1.5,5-3.6,6.8-6l-1-1c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.3-1.3,0.5-2,0.5c-0.9,0-1.8-0.3-2.4-0.9c-0.6-0.6-0.9-1.5-0.9-2.3 c0-0.2,0-0.4,0-0.6l0.4-2.8c0.1-0.7,0.3-1.3,0.7-1.9c0.4-0.6,0.9-1,1.5-1.3c0.6-0.3,1.3-0.5,2-0.5c0.6,0,1.2,0.1,1.8,0.4 c0.5,0.2,0.9,0.6,1.2,1.1C20,8.4,20.1,9,20.1,9.6c0,0.2,0,0.4,0,0.6L19.7,13c0,0.4-0.1,0.7-0.3,1.1l0.7,0.7c0,0,0,0,0.1,0.1 c1.6-2.6,2.6-5.6,3-8.6C19.8,4.2,15.9,3.2,11.9,3.2L11.9,3.2z"/> | |
| <Path d="M15.3,8.9c-0.3,0.3-0.5,0.7-0.6,1.2l-0.4,3c0,0.1,0,0.2,0,0.3c0,0.4,0.1,0.7,0.3,1c0.3,0.2,0.6,0.4,0.9,0.4 c0.4,0,0.8-0.2,1.1-0.5c0.3-0.3,0.5-0.7,0.6-1.2l0.4-3c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.7-0.3-1c-0.3-0.2-0.6-0.4-1-0.4 C16,8.5,15.6,8.6,15.3,8.9L15.3,8.9z"/> | |
| </SVG> | |
| ); | |
| const PlayHqSocialLink = { | |
| name: 'playhq', | |
| attributes: { service: 'playhq' }, | |
| title: 'PlayHQ', | |
| icon: PlayHqIcon, | |
| }; | |
| wp.hooks.addFilter( | |
| 'blocks.registerBlockType', | |
| 'playhq-social-icon/social-link-block', | |
| function( settings, name ) { | |
| if ( 'core/social-link' === name ) { | |
| if ( settings.variations.length ) { | |
| var variation = PlayHqSocialLink; | |
| if ( ! variation.isActive ) { | |
| variation.isActive = ( blockAttributes, variationAttributes ) => blockAttributes.service === variationAttributes.service; | |
| } | |
| settings.variations.push( variation ); | |
| } | |
| } | |
| return settings; | |
| } | |
| ); | |
| wp.domReady( function() { | |
| wp.blocks.registerBlockVariation( 'core/social-link', PlayHqSocialLink ); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment