Hi all,
How can I create a block in Pinegrow for a WordPress theme that adds a mailto: link so that the email address can be edited in the block editor?
Going slowly mad trying to figure it out.
Thanks
Phil
Hi @Phil1
You can watch this video which will help you solve the problem.
Thanks @JuniorZabunga - that helps enormously - and thanks @adamslowe
1 Like
You are welcome @Phil1
I’m still struggling with this and it should be so simple.
All I need to do is to add a mailto: link to my Pinegrow project and then set that up so that once the header block is exported, allow the email to be set in the WordPress editor. Right now, I can even see how to add a mailto link in Pinegrow. Slowly going mad 
I’m not using ACF for this
Hi @Phil1
First, in Pinegrow, select the element where you want to add the mailto link (e.g., a button or text). In the Properties panel, set the href attribute to something like mailto:example@example.com. This will create the basic mailto functionality.
To make the email address editable in WordPress, you need to use Pinegrow’s WordPress actions. Select your element again, then go to the WordPress Actions panel. Apply a “Link URL” action to your element. In the settings for this action, assign it to a dynamic field that can be edited in WordPress. For example, you can tie it to a custom field or another editable option.
Once you’ve done this, export your project and test it in WordPress. You should see an editable field for the email address in the block editor or wherever you’ve set it up.
Hope that helps 
If you’re not using ACF (as you mentioned), make sure you’re relying on Pinegrow’s built-in tools for dynamic content.
Hi Blep,
Thanks for your help, but I’m still struggling to understand this.
In this case I’m using a tel: attribute in my element.
I’ve got it set up so I can edit the phone number and assign the number to the a tel: link, but all of the other elements in that element isn’t showing up in the Block Editor or on the front end.
This is the Pinegrow code:
<a href="<?php echo 'tel:' . $attributes['phone_number']; ?>" class="align-middle duration-500 flex gap-2 items-center no-underline phone-link pl-3 text-white hover:text-yellow-400" cms-block-field="phone_number" cms-block-field-type="content" cms-block-field-default-value="01234 567890"> <p>Call Us</p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" class="text-2xl">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path fill-rule="nonzero" d="M9.366 10.682a10.556 10.556 0 0 0 3.952 3.952l.884-1.238a1 1 0 0 1 1.294-.296 11.422 11.422 0 0 0 4.583 1.364 1 1 0 0 1 .921.997v4.462a1 1 0 0 1-.898.995c-.53.055-1.064.082-1.602.082C9.94 21 3 14.06 3 5.5c0-.538.027-1.072.082-1.602A1 1 0 0 1 4.077 3h4.462a1 1 0 0 1 .997.921A11.422 11.422 0 0 0 10.9 8.504a1 1 0 0 1-.296 1.294l-1.238.884zm-2.522-.657l1.9-1.357A13.41 13.41 0 0 1 7.647 5H5.01c-.006.166-.009.333-.009.5C5 12.956 11.044 19 18.5 19c.167 0 .334-.003.5-.01v-2.637a13.41 13.41 0 0 1-3.668-1.097l-1.357 1.9a12.442 12.442 0 0 1-1.588-.75l-.058-.033a12.556 12.556 0 0 1-4.702-4.702l-.033-.058a12.442 12.442 0 0 1-.75-1.588z"/>
</g>
</svg><?php echo $attributes['phone_number']; ?></a>
The reason I’ve added the text and the icon to the element is so that I can apply the same styles for hover to everything inside it.
Works fine in Pinegow, but not in the theme.
Hi @Phil1
I think I see what’s going on.
Right now, you’re adding the cms-block-field directly on the <a> tag, and that’s the problem. Pinegrow treats cms-block-field like “this is the only content I want to manage dynamically.” So when you put it on the whole link, it assumes everything inside should be replaced by the field value. That’s why you only see the phone number showing up, and not the rest of the content like your text and icon.
The fix is simple:
Instead of putting cms-block-field on the entire <a>, you just apply it to a small part inside, like a <span>, where you want to show the phone number. This way, Pinegrow doesn’t mess with your whole structure, just the text you want to edit.
Something like:
<a href="<?php echo 'tel:' . $attributes['phone_number']; ?>" class="align-middle duration-500 flex gap-2 items-center no-underline phone-link pl-3 text-white hover:text-yellow-400">
<p>Call Us</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" class="text-2xl">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path fill-rule="nonzero" d="M9.366 10.682a10.556 10.556 0 0 0 3.952 3.952l.884-1.238a1 1 0 0 1 1.294-.296 11.422 11.422 0 0 0 4.583 1.364 1 1 0 0 1 .921.997v4.462a1 1 0 0 1-.898.995c-.53.055-1.064.082-1.602.082C9.94 21 3 14.06 3 5.5c0-.538.027-1.072.082-1.602A1 1 0 0 1 4.077 3h4.462a1 1 0 0 1 .997.921A11.422 11.422 0 0 0 10.9 8.504a1 1 0 0 1-.296 1.294l-1.238.884zm-2.522-.657l1.9-1.357A13.41 13.41 0 0 1 7.647 5H5.01c-.006.166-.009.333-.009.5C5 12.956 11.044 19 18.5 19c.167 0 .334-.003.5-.01v-2.637a13.41 13.41 0 0 1-3.668-1.097l-1.357 1.9a12.442 12.442 0 0 1-1.588-.75l-.058-.033a12.556 12.556 0 0 1-4.702-4.702l-.033-.058a12.442 12.442 0 0 1-.75-1.588z"/>
</g>
</svg>
<span cms-block-field="phone_number" cms-block-field-type="content" cms-block-field-default-value="01234 567890">
<?php echo $attributes['phone_number']; ?>
</span>
</a>
Or (if you want to mask the phone number):
<a href="tel:<?php echo esc_attr($attributes['phone_number']); ?>" class="...">
<p>Call Us</p>
<svg><!-- icĂ´ne --></svg>
</a>
If you only need the number for the href, you can also manage it through the block settings sidebar in Pinegrow, without putting cms-block-field in the HTML at all.
Hope that helps.
1 Like
Thanks @Blep - now it makes sense. I want to be able to give the site admins the ability to edit the number within the block editor and not just the href.
Thanks again for your help