[Resolved] How to stop “/ noopener noreferrer” get add to my Links in reusable buttons?

Home Forums Support [Resolved] How to stop “/ noopener noreferrer” get add to my Links in reusable buttons?

Home Forums Support How to stop “/ noopener noreferrer” get add to my Links in reusable buttons?

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1439965
    John

    Hello,
    I have recently setup buttons in block editor and they work initially when tested, but then somehow later this gets added to the Link “/ noopener noreferrer” and stops the button working. This is for all my buttons so stops my website from any conversions.

    Turns out I am not alone: https://github.com/WordPress/gutenberg/issues/14934
    AND https://tinygod.pt/gutenberg-adds-noopener-noreferrer-to-links/
    AND https://www.wpbeginner.com/beginners-guide/what-is-relnoopener-in-wordpress-explained/ (this talked about disabling Gutenberg block editor and using old classic editor then adding code into functions.php file OR a site specific plugin.
    AND more posts in WordPress.org
    It seems to be a WordPress issue (rather than specific to GP)
    I have tried amending the reusable blocks to not open in a new tab and the problem persists. Please check the buttons in this post (in sensitive data)

    There are some coding solutions mentioned but I wanted to not have to play with code.
    Is there a better solution?
    OR is there way of adding an “element” somewhere in GP (to add code into functions.php?)
    Please help ASAP as my website is currently not converting for ANY of my 30 buttons and EVERY POST so this renders my entire website useless..
    Thank you

    #1440065
    Elvin
    Staff
    Customer Support

    Hi John,

    There are some coding solutions mentioned but I wanted to not have to play with code.

    There are probably plugins that does this but we can’t really guarantee if they will always work.

    While we understand that adding codes can be frightening, you may want to try them.

    Here’s How to add PHP.

    You can try these PHP codes:

    This code snippet removes noreferrer and keeps noopener:

    //This code removes noreferrer from your new or updated posts
    function im_targeted_link_rel($rel_values) {
    return 'noopener';
    }
    add_filter('wp_targeted_link_rel', 'im_targeted_link_rel',999);
    
    //remove noreferrer on the frontend, but will still show in the editor
    function im_formatter($content) {
    $replace = array(" noreferrer" => "" ,"noreferrer " => "");
    $new_content = strtr($content, $replace);
    return $new_content;
    }
    add_filter('the_content', 'im_formatter', 999);

    If you also want to remove noopener, you can change the value of $replace inside im_formatter() function.

    from:
    $replace = array(" noreferrer" => "" ,"noreferrer " => "");

    to:
    $replace = array("noopener noreferrer" => "" ,"noreferrer " => "");.

    Important note: Doing this is against WordPress’ security practice. Please know the risk of removing these link attributes to your site.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
    https://mathiasbynens.github.io/rel-noopener/

    #1440072
    John

    Thank you,
    I noticed later a similar issue happened to another guy.
    Your support coworker David in that instance in March 2019 mentioned:

    https://generatepress.com/forums/topic/remove-noreferrer-from-external-links/
    “In this case you would be better to use the Code Snippets plugin that is referenced in that article.”

    QUESTION
    Can you please check/consult with David and get back to me with your consensus view?

    Thanks again, John

    #1440097
    Elvin
    Staff
    Customer Support

    https://generatepress.com/forums/topic/remove-noreferrer-from-external-links/
    “In this case you would be better to use the Code Snippets plugin that is referenced in that article.”

    QUESTION
    Can you please check/consult with David and get back to me with your consensus view?

    On that topic, David recommended a plugin for the user to be able add the PHP code he/she found.

    Perhaps there’s a misunderstanding with what “Code Snippet plugin” does.

    Code Snippet plugin is a WordPress plugin that works as a tool that allows the user to add PHP code without having to open and edit their functions.php file. By itself, the plugin doesn’t do anything. 🙂

    The link on “How to add PHP” from my previous reply is the same link David provided.

    Installing and Activating Code Snippet allows you to have this tool on your WP Admin Panel.
    code snippet

    Here’s a demo video of removing “noreferrer” on rel attribute using the PHP code I’ve provided via Code Snippet:
    https://share.getcloudapp.com/lluYpRjg

    Let us know if it works for you.:)

    #1440320
    John

    Hello,
    I just don’t know coding. I asked my Hosting Provider (Wealthy Affiliate SiteSupport) if they could do it for me.
    They advised “adding custom code to your website may break the whole layout and can cause more issues.

    It would be better if you provide them with your WP-admin area login details so that they could make the required changes.”

    So can you kindly do this for me?
    As you know the your theme as experts and adding this code will be easy for you.

    I would prefer if you use the Code Snippets plugin (unless you feel strongly against it) and have added the plugin to my website.

    please let me know when completed
    – thank you in advance for your kindness and professionalism

    #1440459
    David
    Staff
    Customer Support

    Hi there,

    Unfortunately we do not edit a users site in case anything breaks.

    Its fairly simple to do this.

    1. First off make sure your host has backed up your site. This is just a precaution.
    2. Go to Plugins > Install new and Search for Code Snippets
    Which is this plugin:
    https://wordpress.org/plugins/code-snippets/

    3. Once the plugin is installed go to Dashboard > Snippets > Add New.
    3.1 Give the new snippet a title.
    3.2 Paste this code in the text area:

    function my_links_control( $rel, $link ) {
    	return false;
    }
    add_filter( 'wp_targeted_link_rel', 'my_links_control', 10, 2 );

    3.3 Click Save Changes and Activate.

    Thats it – make sure to clear any caches and you should see the link no longer container those Rels

    #1440925
    John

    Hello,
    After 1.5 hours of sheer methodical process to check everything. Frustratingly, it still hasn’t worked.
    Taking the https://earnfromyourlaptop.com/usana-health-sciences-review/ as an example, I added a plain text link just below the block editor button. Plain text links have always worked, whereas the block editor reusable button has never worked other than when I created them all approx 2 weeks ago.

    PHASE 0
    I have screenshots of this before adding the code snippet advised by GP support
    https://share.getcloudapp.com/Qwu01eqZ

    PHASE 1
    Added the code snippet, cleared the cache in Wealthy Affiliate, cleared the cache in WP Rocket, then did “regenerate critical path CSS” and “Preload cache” all in WP Rocket.
    Tested the button again, still not working (see screenshot- https://share.getcloudapp.com/WnuJPweJ)

    PHASE 2
    Went into the button editor (Manage all reusable blocks and removed the “noopener noreferrer” (4th screenshot & kept as open in new tab – https://share.getcloudapp.com/P8ubPW0z) that somehow WordPress had added to the link concerned after I added the link (note the change in orange in inspect element (3rd screenshot- https://share.getcloudapp.com/qGuNLg0Z)). Button still does not work.

    What do I need to do next?

    #1441239
    David
    Staff
    Customer Support

    So i tried this and it worked:

    1. Added the code provided here:
    https://generatepress.com/forums/topic/how-to-stop-noopener-noreferrer-get-add-to-my-links-in-reusable-buttons/#post-1440459

    2. Created a new Page, added a Button block with URL and Open in New Window. Deleted the Rel Attributes. Published the Page.

    I then checked the page and the Rels were gone.
    I then re-edited the page and the Rels were still gone.

    3. I converted my new Button into to a re-useable block.

    4. I created a new page and added the Re-useable button. I did not edit the re-useable button. Published the page. Checked the page on the front end and the button had no Rels.

    NOTE: this only works with a core Button block – not with any button from another plugin.

    #1441299
    John

    Thanks David,
    Can you clarify please.
    QUESTION 1: Did you create that test page on my website that you refer to at #2?
    QUESTION 2: Can you please link me to that page so I can reverse engineer what you have done?

    If I can see exactly the page on my website then I should be able to copy it based on your instructions (your 4 step process). I have no clue about coding so can only copy and paste what you tell me to do (and thank you for helping me!)

    I only have buttons created from the core button block. There is some old SumoMe code, but we intend to replace with buttons only created by the button block. At one point was planning Elementor styled buttons but I want the fastest possible so don’t want to use Elementor on the posts, rather to use Block Editor core functions only (for speed reasons)

    Thank you

    #1441950
    John

    Hi David,
    To try and be proactive, I have tried to replicate your button process with a new button on a new post. It didn’t work.
    I will comment as I have tried to follow your 4 steps.
    1. Added the code provided here:
    https://generatepress.com/forums/topic/how-to-stop-noopener-noreferrer-get-add-to-my-links-in-reusable-buttons/#post-1440459
    Refer screenshot – I had already done this
    https://share.getcloudapp.com/Blu564o5
    This is the only code snippet enabled
    https://share.getcloudapp.com/5zuGlBrW

    2. Created a new Page, added a Button block with URL and Open in New Window. Deleted the Rel Attributes. Published the Page.
    I then checked the page and the Rels were gone.
    I then re-edited the page and the Rels were still gone.

    This appears to be where it is falling down.
    Firstly I am a code dumbo and don’t understand what your code industry speak and abbreviations of “Real attributes” and “Rels” are. I am guess it is when the “noopener noreferrer” was added by WordPress somehow to my links
    Anyway so I have just created a new button using blocks, and you can see the link to another page. At this point in the cycle, there is no “noopener noreferrer” which had been added to the other 30 buttons I created 2 weeks ago (seemingly WordPress added these)
    Anyway, here is the first screenshot and on face value to a coding dumbo, this link should work just like any other plain text link.
    https://share.getcloudapp.com/Apuk2Yeb

    2.1 “I then checked the page and the Rels were gone.”
    Firstly, I click the button on the live post and it is non-responsive
    https://share.getcloudapp.com/E0unQYLq

    I don’t see any code in the page – no “noopener noreferrer”, yet the button does not work.
    https://share.getcloudapp.com/Qwu01EBD

    I am really lost here, I don’t know what to do. None of my buttons have worked for >2 weeks,
    Please help

    #1442041
    David
    Staff
    Customer Support

    OK:

    First off Rels and Rels Attributes are the same thing. So noopener noreferrer are both attributes.

    Now the problem i see is you have add the Link URL in the wrong place.
    See this image:

    When selecting the Button Block, click the Link icon in the toolbar, an enter the URL in the field provided.

    #1443598
    John

    OK thanks David,
    So I tested it with the most recent button and it worked.

    Two more parts to clarify please would be great.
    1. Process to follow given there are 2 places to put in the link
    2. Do I still need the code snippet

    Issue 1.
    So when I went to one of my 30 buttons, I deleted the existing link (see right of screenshot, that was placed in the “Link Rel” for button settings. Then I added the link in the link bar above the block (I have it fixed at the top)

    However when I delete the existing link (on the right in the block area), and add it at the top URL/link button, what appears is “noreferrer noopener”. This just appears as I enter the link as you have advised.
    https://share.getcloudapp.com/5zuGE9BA

    So what should I do about this?
    1.1 Should I just leave it (then save) (https://share.getcloudapp.com/5zuGE9BA) OR
    1.2 Should I delete it and leave it blank then save OR (https://share.getcloudapp.com/DOuxZBzL)
    1.3 Should I paste the same link in two places then save.(https://share.getcloudapp.com/GGuRg4Ek)

    I tested both 1.1 and 1.3 and they both work.
    Here is the post concerned and it is the button at the very bottom of the post
    https://earnfromyourlaptop.com/is-wealthy-affiliate-worth-it-or-not/
    PLEASE ADVICE WHICH IS BEST FOR ME TO DO (i.e. 1.1 or 1.2 or 1.3)

    2. This leads me to the next question/issue
    Are there any scenarios that I create the link in the button, where I don’t need that code snippet?
    Or do I need that snippet for the link to work in all scenarios?

    I ask this because me website is overcoming massive speed issues (that I have spent months trying to correct since May 2020) and I am trying to keep code off it if possible.

    Thank you

    #1443868
    David
    Staff
    Customer Support

    Issue 1.

    You only add the link in the place i showed in the image here:

    https://generatepress.com/forums/topic/how-to-stop-noopener-noreferrer-get-add-to-my-links-in-reusable-buttons/#post-1442041

    1.1 Should I just leave it (then save)

    Yes just leave it then save.

    Issue 2

    The code snippet will apply to all Links that are opened in a new Tab.
    The only issue you will have is if you want a Link to open in a new tab that you want the Rel noreffer and noopener attributes to remain.

    The code snippet will have no noticeable impact on your Sites performance.

    #1444896
    John

    OK thanks so much here David.
    I can see my initial error here.
    I put the links ONLY in the “Link Rel” settings in the right hand side of my screenshots only. I did this because I was logically following down the block styles, where I chose the colour and borders. My critical error as you have explained was that rather I needed to only add the link in the place you showed in the image here:

    https://generatepress.com/forums/topic/how-to-stop-noopener-noreferrer-get-add-to-my-links-in-reusable-buttons/#post-1442041

    OK, now I get it!

    You have explained that:
    ” Rels and Rels Attributes are the same thing. So noopener noreferrer are both attributes.”
    I wanted to understand this more, so Google search of “what are rel attributes” lead me here: https://www.w3schools.com/tags/att_a_rel.asp
    Notably: The rel attribute specifies the relationship between the current document and the linked document.
    And the example given:
    A link with a rel attribute:
    Cheap Flights

    So the Rel attributes makes more sense.

    Then when I delete the links I had put in the “Link Rel” and ONLY add the links per the link icon on or above the block, choose open in a new tab, press enter.
    THEN the “noreferrer noopener” appears in the “Link rel” to the right.

    I wonder if I am the only person that makes this error using WordPress.
    Do you think it would be worthwhile if I made a YouTube video explaining visually the right and wrong ways to do it? Would there be an audience needing this info in your opinion?

    #1445298
    David
    Staff
    Customer Support

    The WordPress community is huge, with users of all different skill levels so I think there is always an audience for a YT video.

    Especially if you cover the adding of code to get around the original issue.

    As an aside, WP adds those REL attributes to stop ‘bad’ external links from being followed.
    If you’re using Comments in your posts then you may want to consider stopping commenters from adding links – which this plugin does:

    https://wordpress.org/plugins/comment-link-remove/

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.