New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
LinkControl: Add CSS class to improve styling for external links #61056
Comments
Shouldn't that CSS target the button block's link? this is the markup for the core/button block:
|
Yes, you are correct, here is the actually css I am using on my site:
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:
If this would be changed to have
Example:
|
Ah, I see. There's nothing in the block markup within the editor to indicate it's |
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.
The text was updated successfully, but these errors were encountered: