I’m struggling with setting up a link control for a Gutenberg-Block. What I want to achieve is a social-icon which links to the corresponding platform, such as Facebook, insta and so on.
My markup looks like that:
<a href="#"><svg /> </a>
As a workaround I’ve ended up using a blank input control and referenced it to use as “Attribute”, but that’s not the prettiest solution!
Is there anything I did wrong? Did anyone faced a similar issue?
One more thing regarding links: Is there any possibility to prevent Gutenberg from open that links when clicking on those icons? For example I’ve set up a fixed target=“_blank” on those icons and whenever I click them inside the editor to change something the link gets opened!
TIA for your help!
Short update: I’ve managed now to make it work. Don’t know what exactly the problem was. However there is still one more thing regarding the target attribute.
I’ve set a static target=“_blank” to my social-icons. But whenever that target is present it sends the block in recovery mode at page load. I’ve also tried to use it with controls for toggling between target _self and target _blank, but in any case the block goes in recovery mode then.
Maybe Gutenberg doesn’t like that target attribute on blocks? I’ve found that discussion here on Github (target="_blank" is causing bug on "Attempt Block Recovery" · Issue #41677 · WordPress/gutenberg · GitHub). Didn’t dive too deep into Gutenberg-React code yet, but what I think to know is that there is a render and a save function available and I have to put it into the save function, but I’m not sure if Pinegrow let’s me do that?! So how would I open a link in a new tab (preferable without that behaviour that it opens the link inside of gutenberg on click), does anyone have an idea!?
@Wolfgang.Hartl for links with _blank, WP adds rel=“noopener”. This happens after the save code is generated by the block code. As a result, save code and code stored in the post don’t match and WP displays the Block recovery notice.
One solution is to add
rel="nooppener" to links with _blank in HTML project.
For dynamic target attributes (for example with Toggle), PG adds the rel if the value of the target is _blank.
Here is the code snippet with SVG icon that works ok in my tests:
<a href="#" cms-block-field="icon_url" cms-block-field-type="link" cms-block-field-title="Icon url" cms-block-field-2="target" cms-block-field-title-2="Target" cms-block-field-type-2="attr" cms-block-field-attribute-2="target" cms-block-field-control-2="toggle" cms-block-field-checkbox-value-2="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-arrow-down-left-circle-fill" viewBox="0 0 16 16" data-pg-collapsed style="font-size: 4rem;">
<path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-5.904-2.803a.5.5 0 1 1 .707.707L6.707 10h2.768a.5.5 0 0 1 0 1H5.5a.5.5 0 0 1-.5-.5V6.525a.5.5 0 0 1 1 0v2.768l4.096-4.096z"/>
For some reason, the approach that worked before (PG automatically setting href to # in edit) doesn’t work anymore. Will try to do something else.
Hey @matjaz thanks for your answer.
I’m gonna test it out and come back if it doesn’t work. Thanks for the detailed information!
The latest PG Live 6.7.2 addresses the issues mentioned in this topic. See details below and please report any issues into their respective forum topics. Note, these features are considered Beta for now.