Email Encoder tel: Protection Breaks the Phone Icon in a WordPress Team Block

If a WordPress Team block contains email and telephone social icons and the phone icon breaks only after enabling tel: protection in Email Encoder – Protect Email Addresses and Phone Numbers, the problem is likely caused by how the plugin processes custom link attributes.

This distinction is important:

mailto: link
→ icon remains intact

tel: link
→ enable custom href protection
→ phone icon breaks

That points away from the Team block’s CSS or icon library and toward the HTML transformation performed by Email Encoder.

The plugin’s current source shows a meaningful difference between its mailto: handling and its generic custom-link handling. The mail-link path contains explicit logic to preserve rich inner markup. The custom tel: path still passes the entire contents of the anchor through the plugin’s protected-display function.

For Team blocks that render their phone symbol as SVG, an <i> element, a nested <span>, or other markup, that transformation can replace or corrupt the icon.

What the Original Team Block May Be Rendering

A Team block’s telephone icon might generate markup conceptually similar to:

<a href="tel:+1234567890" class="team-social-link">
    <svg class="phone-icon" viewBox="0 0 24 24">
        ...
    </svg>
</a>

or:

<a href="tel:+1234567890">
    <span class="team-icon">
        <i class="phone"></i>
    </span>
</a>

The important point is that the content between:

<a ...>

and:

</a>

is HTML markup, not a phone-number string.

The encoder needs to protect:

tel:+1234567890

without rewriting:

<svg>...</svg>

or the icon wrapper.

How Email Encoder Handles Custom tel: Links

Email Encoder introduced Protect custom href attributes in version 2.1.0. The feature is intended for protocols such as:

tel:
ftp:
file:
skype:

The current plugin settings describe the option accordingly.

When tel is entered in that setting, the plugin searches the rendered HTML for complete anchors matching a pattern equivalent to:

<a ... href="tel:...">...</a>

The current public source then extracts both:

the anchor attributes

and:

everything inside the anchor

and calls the custom-href protection routine.

The relevant logic is effectively:

$attrs = shortcode_parse_atts( $match[1] );

return $self->createProtectedHrefAtt(
    $match[4],
    $attrs,
    $protection_method
);

Here:

$match[4]

is the HTML between the opening and closing <a> tags.

For an icon-only telephone link, that can be the phone icon’s actual SVG or nested markup.

The Custom-Link Function Then Protects the Display Too

The problem becomes clearer inside the custom-href encoder.

The current implementation rebuilds the anchor and then runs:

$this->get_protected_display( $display, $protection_method )

on its inner contents.

Conceptually:

Original link

<a href="tel:+123">
    [PHONE ICON HTML]
</a>

        ↓

Protect href
        +
Protect [PHONE ICON HTML]

        ↓

Rebuilt link

Protecting the href is expected.

Treating the icon’s HTML as though it were content needing obfuscation is where the compatibility problem arises.

Why the Email Icon Can Work While the Phone Icon Breaks

This is one of the strongest clues.

The current mailto: code contains special handling that the custom tel: implementation does not.

For email links, the plugin checks whether the visible contents are actually just the email address.

Its source explicitly says that when a mail link contains richer content, it should:

keep the markup intact

rather than scrambling that display.

The code distinguishes between:

<a href="mailto:user@example.com">
    user@example.com
</a>

and something richer such as:

<a href="mailto:user@example.com">
    <svg>...</svg>
</a>

The second case keeps the inner markup intact.

By contrast, the custom tel: path currently does:

$link .= $this->get_protected_display(
    $display,
    $protection_method
);

without making the same rich-markup distinction.

That difference provides a credible technical explanation for:

Email icon ✓
Phone icon ✗

on the same Team block.

Image-Encoding Mode Can Make the Failure More Obvious

There is another important code path.

The plugin’s protected-display routine checks whether the option to convert protected text to an image is enabled.

If it is, it attempts to generate an image from the supplied display content.

That makes sense for an email such as:

user@example.com

It does not make sense for markup such as:

<svg class="phone-icon">...</svg>

The plugin’s email path has already received compatibility work for this general class of problem.

Version 2.4.8 specifically fixed cases where rich-text and styled markup inside mailto: links could be replaced incorrectly. It also fixed image-encoding problems involving page-builder markup.

The current custom tel: path does not contain the equivalent rich-content preservation logic visible in the mailto: path.

Current Plugin Version

As of September 3, 2026, WordPress.org lists:

Email Encoder – Protect Email Addresses and Phone Numbers
Version: 2.5.3
Released: August 4, 2026

Version 2.5.3 fixed DOMDocument warnings involving inline SVG on sites using systems such as Elementor or HivePress. However, its changelog does not document a fix for custom tel: links replacing their inner icon markup.

Therefore, updating to 2.5.3 is recommended before troubleshooting, but there is no current changelog evidence that the update alone resolves this exact issue.

First Confirm the HTML Is Being Replaced

Before changing anything, inspect the phone icon with browser Developer Tools.

With tel protection disabled

Inspect the link and copy its HTML.

You may see something like:

<a href="tel:+123456789">
    <svg>...</svg>
</a>

Enable tel protection

Clear all caches and reload the page.

Inspect the same element again.

Compare the inner contents of:

<a href="tel:...">

If the SVG, <i>, or icon <span> has been replaced by generated Email Encoder markup or an <img>, you have directly confirmed the conflict.

Do not rely only on the visual broken-image symbol.

The HTML difference tells you what the plugin actually changed.

Check for an Empty Image Source

If the browser shows a broken-image icon, inspect the generated HTML for something such as:

<img src="">

or another invalid generated image URL.

The plugin’s current protected-display implementation contains explicit image-conversion handling, and earlier updates fixed empty/broken image output when rich mail-link content was mistaken for an email address.

If the telephone icon becomes an empty <img>, this is particularly strong evidence that icon markup is being passed through a protection method designed for textual display.

Diagnostic Test: Disable Email-to-Image Conversion

If the plugin’s settings have an option that converts protected plain addresses into images, temporarily disable it.

Then:

1. Keep tel in Protect custom href attributes.
2. Clear page/server/CDN caches.
3. Reload the Team block.
4. Check the phone icon.

If the icon returns, image conversion is participating in the failure.

This is a useful diagnostic, although it does not necessarily mean the custom tel: implementation is fully correct with every other encoding mode.

Test the telephone link as well:

Does clicking it still open the phone dialer?

and inspect the raw page source to confirm the number is protected as expected.

Safest Immediate Workaround: Stop Encoding tel: Automatically

If the phone icon must work on a production site, the safest temporary workaround is to remove:

tel

from:

Email Encoder → Protect custom href attributes

until the compatibility problem is fixed.

That should leave the Team block’s original:

<a href="tel:...">ICON</a>

markup untouched.

This sacrifices protection of the telephone number inside the href, so it is a tradeoff rather than a complete fix.

Do not claim that a phone number is protected if it remains directly visible in:

href="tel:+123456789"

in the raw page source.

Protecting Only the Visible Phone Number

If the Team block displays both an icon and a separate visible phone number, another option is to leave the icon link alone while protecting the visible text separately.

Email Encoder officially provides:

[eeb_protect_content]

for phone numbers and arbitrary content.

For example:

[eeb_protect_content]+1 234 567 890[/eeb_protect_content]




This protects the displayed number without requiring the plugin to rebuild an SVG-containing Team icon.



However, if the same number remains visible in:



href="tel:+1234567890"



a scraper that specifically parses telephone links can still obtain it.



This workaround is useful primarily when the goal is preventing simple text harvesting.



A Better Temporary Code Workaround



The plugin exposes a filter named:



eeb_custom_href



after rebuilding custom links. The filter receives the generated link, original display HTML, and link attributes.



That gives developers an update-safe way to preserve the original phone-icon markup while keeping the tel: attribute entity-encoded.



Test this on staging first:



add_filter(
    'eeb_custom_href',
    function ( $link, $display, $unused, $attrs ) {

        if (
            empty( $attrs['href'] ) ||
            stripos( $attrs['href'], 'tel:' ) !== 0
        ) {
            return $link;
        }

        $output = '<a';

        foreach ( $attrs as $key => $value ) {
            if ( strtolower( $key ) === 'href' ) {
                $value = antispambot( $value );
            }

            $output .= sprintf(
                ' %s="%s"',
                esc_attr( $key ),
                esc_attr( $value )
            );
        }

        $output .= '>';

        // Preserve the original Team-block icon markup.
        $output .= $display;

        $output .= '</a>';

        return $output;
    },
    10,
    4
);



Add the snippet through an update-safe custom plugin, MU plugin, or a reputable snippets manager.



Do not edit Email Encoder's own PHP files.



What This Workaround Changes



Instead of doing:



Encode telephone href
+
Transform phone-icon HTML



it does:



Encode telephone href
+
Keep original phone-icon HTML



That closely mirrors the rich-content preservation approach already visible in the plugin's newer mailto: implementation.



Test the Snippet Carefully



After enabling the workaround:




Clear all caches.



Open the Team page logged out.



Confirm the phone icon appears.



Click the icon.



Verify the device receives the correct phone number.



Inspect the raw page source.



Confirm the raw tel: URL is encoded to the level you expect.



Test desktop and mobile.




Also test the email icon to make sure the filter does not affect mailto: links.



The conditional check:



stripos( $attrs['href'], 'tel:' ) !== 0



limits the workaround specifically to telephone URLs.



Entity Encoding Is Obfuscation, Not Encryption



There is an important security limitation with telephone protection.



The current custom-link implementation uses WordPress's:



antispambot()



to encode the attribute.



This makes the raw HTML less obvious to basic harvesting scripts.



It does not make the phone number cryptographically secret.



The Email Encoder developer has similarly explained in a recent support discussion that entity encoding is mainly deterrence against simple raw-HTML scrapers; a determined crawler can decode entities or execute JavaScript.



A clickable tel: link ultimately needs to produce a dialable number in the visitor's browser.



So the realistic objective is:



Reduce automated harvesting



rather than:



Make a public clickable phone number impossible to recover



Why CSS Is Not the Correct Fix



A broken telephone icon can tempt you to add CSS such as:



.team-phone img {
    width: 20px;
    height: 20px;
}



But if Email Encoder has replaced:



<svg>...</svg>



with:



<img src="">



CSS cannot recreate the lost SVG.



Similarly:



display: block;



or changing z-index will not repair an invalid image source.



Inspect and fix the transformed markup first.



Do Not Modify the Team Block's SVG



If the phone icon works perfectly whenever tel: protection is disabled, there is little reason to edit:




the SVG;



the Team block;



the theme;



Font Awesome;



icon sizing CSS.




The version-controlled diagnostic is:



Same Team block
Same icon
Same theme
Same page
Same CSS

tel protection OFF → works
tel protection ON  → breaks



That isolates Email Encoder's transformation path far more effectively than redesigning the Team block.



Why This Should Be Fixed in the Plugin



The durable fix is conceptually straightforward.



The custom-link implementation should distinguish between:



plain visible telephone text



and:



rich HTML / icon markup



just as the current mailto: implementation does.



Conceptually:



if ( $display_is_plain_text_that_should_be_protected ) {
    $link .= protect_display( $display );
} else {
    $link .= $display;
}



For an icon-only telephone link:



<a href="tel:+123">
    <svg>...</svg>
</a>



the encoder should modify only the href.



It should not transform:



<svg>...</svg>



as though the SVG were an email address or telephone number.



Relevant Precedent in the Plugin Changelog



This is not an unprecedented compatibility category for Email Encoder.



Version 2.4.8 fixed:




rich-text/styled markup inside mailto: links being replaced;



image-encoding problems involving page-builder mail links.




Version 2.5.1 fixed cases where email encoding inside another plugin's inline JavaScript could corrupt page output.



Version 2.5.3 fixed DOMDocument warnings involving inline SVG.



Those fixes show that modern WordPress blocks and builders frequently produce HTML structures that require more careful handling than a simple text-only anchor.



The custom tel: implementation appears to need the same type of rich-markup preservation.



What to Include in the Plugin Bug Report



A useful report to Email Encoder should include the smallest reproducible HTML case.



For example:



<a href="tel:+1234567890">
    <svg class="phone-icon">
        ...
    </svg>
</a>



Then document:



Email Encoder version:
2.5.3

Protect custom href attributes:
tel

Protection OFF:
Phone icon visible

Protection ON:
Phone icon broken

mailto icon in same Team block:
Still works



Also include the transformed HTML from Developer Tools.



If you find:



<img src="">



or generated EEB <span>/<script> output in place of the SVG, include that.



The most technically useful description is:



filter_custom_links() passes the anchor's original inner HTML
to create_protected_href_att(), which then runs it through
get_protected_display(). Rich/icon markup is therefore being
treated as display content to encode.



The public source supports that description.



How to Verify a Future Plugin Fix



After Email Encoder releases a fix, remove any temporary custom filter and test the native implementation.



Use a Team block containing:



Email icon → mailto:
Phone icon → tel:



Then enable:



Protect custom href attributes: tel



Confirm:




Email icon renders correctly.



Phone icon renders correctly.



Phone icon remains the original SVG/icon markup.



Clicking the phone icon opens the correct dialer.



No empty <img src=""> appears.



No unexpected <span> or script replaces the icon.



The raw phone href receives the intended protection.



Mobile and desktop both work.



Browser console contains no JavaScript errors.



Other custom protocols remain unaffected.




The Practical Fix



If enabling tel: in Protect custom href attributes breaks a Team block's phone icon while its email icon remains intact, the strongest current explanation is Email Encoder's different treatment of custom links.



The plugin's mailto: code already detects rich inner content and preserves it.



Its custom-link code currently rebuilds the anchor and passes all inner content—including SVG or icon markup—through get_protected_display().



That can turn an icon into content the encoder attempts to transform, particularly when image-based protection is active.



For production, the safest immediate options are:




update to Email Encoder 2.5.3;



test with image conversion disabled;



temporarily remove tel from custom href protection if necessary;



for developers, use the eeb_custom_href filter to preserve the original inner HTML while entity-encoding the telephone href;



report the compatibility bug so custom tel: links receive the same rich-markup preservation already implemented for mailto: links.




Do not redesign the Team block or replace its phone icon until you have compared the HTML with tel: protection enabled and disabled.