Jump to content

Anchor ID code <p id=closest></p> corrupts blog post editor?

Recommended Posts

Hi All,

I'm a huge fan of adding "jump lists" with paragraph anchor IDs to long blog posts.  Last night, I ran into an error where every time I hit save after adding my anchor IDs, it would corrupt the blog post:

  • Images would disappear
  • Summary blocks and newsletter blocks would go blank
  • Clicking the "Edit" button would not enter the blog edit mode. 
  • Browsing away from the blog post would trigger the "Something went wrong. There was an unexpected error and it has been logged." page.

The only way out was to delete the post and start from scratch.

After an hour or so of troubleshooting, I narrowed it down to an HTML code block of: <p id=closest></p>

Apparently, naming an Anchor ID "closest" is what caused the corruption. When I named it something else, no more issue. As I'm not the most experienced in HTML, does anyone have any insights as to why the term "closest" causes an issue with HTML code?  

I'm on Squarespace 7.1, by the way.

image.png.7e6d2df7da6d82e892bd05fc30629609.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

The first issue is attribute values, best practice, should be enclosed in quotes, to avoid issues.

<p id="closest"></p>

After you do that what happens?

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

The first issue is attribute values need to be enclosed in quotes.

<p id="closest"></p>

After you do that what happens?

Interesting - I've never actually used quotes before in my anchor IDs and they've worked flawlessly.  But good to know that it can make my HMTL code "cleaner" and less prone to errors.  I'll definitely use those from here on.

Anyway, I just tried entering the p id of "closest" with quotes on one of my blog templates, but same result.

Notice how the image block in the 1st image, and the summary block in the 2nd image go blank.  And then as mentioned in my original post, it's like it permanently corrupts the post.  Clicking edit does nothing, and navigating away from the page results in the error message.

image.thumb.png.c92c0e66909993c89a22db3ca4cf6dd6.png

image.thumb.png.381c9f54ae52587ae2da8bf816a0e4de.png

 

image.png.86b61a8a1fb1e5f2446cbd91347e47f5.png

Edited by FinalApproach
Link to comment
4 minutes ago, FinalApproach said:

I've never actually used quotes before in my anchor IDs and they've worked flawlessly.

If there are no spaces in the value then the quotes aren't needed by specification. But it is good practice to avoid issues.

Quote

Apparently, naming an Anchor ID "closest" is what caused the corruption. When I named it something else, no more issue. As I'm not the most experienced in HTML, does anyone have any insights as to why the term "closest" causes an issue with HTML code?  

This sounds like another CSS ruleset used closest and there was a conflict.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.