Spotlight Backed and Nofollow Hyperlinks in Gutenberg

I have simply gone through outdated articles over the past few years and updated the text affiliate links (affiliate links) next to any affiliate links for full disclosure. I have also changed links that were previously using rel nofollow to backed.

This is a long process, because we have been given a lot of posts and I am completely revamping the look of our theme and plugin collections. To simplify the issues, I added some code to the Internet web page that will highlight backed and nofollow links, so I can find them quickly.

I’m not the only one who could benefit from highlighting backed/rel links, so I thought I’d share some knowledge on how I did it. Being able to quickly look at a submission and see the links will help you judge if there are too many and if you should remove some. It will also help you see which links don’t have any rel functionality, so you can decide if you need to add one or not.

<h2 class=”wp-block-heading” id=”h-how-to-add-css-to-the-wordpress-editor”>Learn how to add CSS to the wordpress editor

To highlight links, we’ll want to add some CSS to the wordpress editor. If you’re working with a theme, you can simply add custom CSS to the editor using a css record, otherwise you can insert inline CSS with a hook.

Using an editor CSS record:

Simply create a brand new style-editor.css record for your theme and add the following:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style-editor.css' );
} );

wordpress will then automatically load this record into all text and block editors.

Along with inline CSS:

You will need to if you are not working with a theme, you will still be able to add CSS to the inline editor. For this you will hook into the enqueue_block_editor_assets hook

/**
 * Hooks into "enqueue_block_editor_assets" as a way to upload inline sorts to the Gutenberg Editor.
 */
add_action( 'enqueue_block_editor_assets', function() {
	wp_register_style( 'wpexplorer-editor-styles', false );
	$css="YOUR CSS HERE";
	wp_add_inline_style( 'wpexplorer-editor-styles', $css );
	wp_enqueue_style( 'wpexplorer-editor-styles' );
} );

For the purpose of this data, I will use the second method. It is because I will be able to place my code inside a plugin, so I will simply allow/disable the aptitude.

Highlighting inline links with their rel function is very easy! We will simply use the tilde CSS feature selector. In case you are not familiar with feature selectors, I recommend you take a look at w3schools. Here is an example of the CSS we can use:

a[rel~=sponsored], a[rel~=nofollow] {
    background: #FFFF00;
    color: #000;
}

This CSS will make any link that has a rel backed or nofollow functionality appear Like this.

Now, since we are working with the wordpress editor, it is a good idea to focus on .editor-styles-wrapper class name.

Centered on the editor-styles-wrapper the element is not required if you use the editor-styles method and load a css record via the child theme or if you are directed to the old editor. On the other hand it does not hurt to add it easily.

This is the updated CSS:

.editor-styles-wrapper a:is([rel~=sponsored],[rel~=nofollow]) {
    background: #FFFF00;
    color: #000;
}

In case you are using a editor-style.css record just add the code in there and save it. Another way you will be able to use the following function to insert this code inline:

/**
 * Supplies inline CSS to the block editor.
 */
add_action( 'enqueue_block_editor_assets', function() {
	wp_register_style( 'wpexplorer-editor-highlight-rel-sponsored-nofollow', false );
	wp_add_inline_style(
		'wpexplorer-editor-highlight-rel-sponsored-nofollow',
		'.editor-styles-wrapper a:is([rel~=sponsored],[rel~=nofollow]){background:#FFFF00;color: #000;}'
	);
	wp_enqueue_style( 'wpexplorer-editor-highlight-rel-sponsored-nofollow' );
} );

Result:

With this code added in case you need to edit any submissions that have nofollow or backed links, they will be highlighted so you can easily find them. Here is a screenshot from our wordpress Webhosting web page which does have affiliate links anyway:

Now I’m just going to scan everywhere for nofollow and backed links! You’ll actually be able to use this concept for various problems (not sure what it could be…let me know in the comments).

Download the Plugin

I have created a little plugin that has the code for this data if you just want to download it and upload it to your internet web page. You will be able to go check out the plugin on Github.

The reason I don’t upload those mini plugins to the wordpress.org checklist is because the review process is also complete shit. It takes a month just to get your plugin reviewed. I don’t understand why with the amount of money wordpress makes, they can’t just hire more reviewers.

Let me know in the comments if this plugin was useful to you or if you have any questions!

Spotlight Submission Backed & Nofollow Hyperlinks in Gutenberg appeared first on WPExplorer.

WP Support Plans

[ continue ]

wordpress Maintenance Plans | wordpress hosting

Learn more