LinkControl: Add CSS class to improve styling for external links

[bhubbard]

What problem does this address?

I am using css to add an icon after any link that is external simple example:

a[target="_blank"]

The problem is for button blocks (maybe other blocks?) the link is a div in gutenberg. So my css does not style the link to match the frontend of the site. Ok, not a problem, I can target it, however there is no way to target the div based on if its an external link.

What is your proposed solution?

If the link within the button has "Open in new tab" checked, we add a class such as "external-link" or "blank-target" or "link-target-blank". With this new class I can target it via custom css for the editor.

[richtabor]

Shouldn't that CSS target the button block's link? this is the markup for the core/button block:

<div class="wp-block-button">
   <a class="wp-block-button__link wp-element-button" href="#" target="_blank">Test</a>
</div>

[bhubbard]

@richtabor

Yes, you are correct, here is the actually css I am using on my site:

.wp-block-button.is-style-fill a[target="_blank"]::after,
.wp-block-button.is-style-outline a[target="_blank"]::after {
    content: "";
    width: 1.2em;
    height: 1.2em;
    margin-bottom: -0.1em;
    margin-left: 0.15em;
    display: inline-block;
    overflow: visible;
    margin-right: -0.15em;
    mask: url('../../images/icons/icon-external-link.svg') no-repeat;
    mask-size: cover;
    vertical-align: inherit;
    position: relative;
        z-index: 1;
    background-color: currentColor;
    transition: transform 0.5s ease-in-out;
}

Styling works just fine on the front end of the site, the issue is that in the editor even though the css is loading in the editor it doesn't display as the css is targeting an tag and not the

displayed by the editor. Here is an example of the same button in the editor:

<div role="textbox" aria-multiline="true" aria-label="Button text" aria-readonly="false" class="block-editor-rich-text__editable wp-block-button__link has-red-dark-color has-text-color has-link-color wp-element-button rich-text" contenteditable="true" data-wp-block-attribute-key="text" style="color: rgb(216, 1, 1); white-space: pre-wrap; min-width: 1px;">Button Text</div>

If this would be changed to have has-external-link (or similar class name) than I can target it:

<div role="textbox" aria-multiline="true" aria-label="Button text" aria-readonly="false" class="block-editor-rich-text__editable wp-block-button__link has-red-dark-color has-text-color has-external-link has-link-color wp-element-button rich-text" contenteditable="true" data-wp-block-attribute-key="text" style="color: rgb(216, 1, 1); white-space: pre-wrap; min-width: 1px;">Button Text</div>

Example:

.wp-block-button.is-style-fill a[target="_blank"]::after,
.wp-block-button.is-style-outline a[target="_blank"]::after,
div.wp-block-button__link.has-external-link::after {
    content: "";
    width: 1.2em;
    height: 1.2em;
    margin-bottom: -0.1em;
    margin-left: 0.15em;
    display: inline-block;
    overflow: visible;
    margin-right: -0.15em;
    mask: url('../../images/icons/icon-external-link.svg') no-repeat;
    mask-size: cover;
    vertical-align: inherit;
    position: relative;
        z-index: 1;
    background-color: currentColor;
    transition: transform 0.5s ease-in-out;
}

Ah, I see. There's nothing in the block markup within the editor to indicate it's _blank. 🤔

[bhubbard]

@richtabor Does the proposed solution of adding a class when the link is set to "_blank" for the target work? Would "has-external-link" be a good class name or something more like "link-target-blank"?