[Resolved] Duplicate IDs & Orphaned P Tags

[Author]

Posts

[devinH]

I ran my site through HTML validator and found two major problems:

Problem 1:
There are lots of orphaned </p> tags that I did not create. In Chrome's inspector, it would show as if there's an empty <p></p> tag, but when I checked the source, there were only orphaned </p> tags. This happens throughout the site, in home page and archive pages.

View Code (see end of line 2)

  <article id="post-[wpv-post-id]" class="et_pb_post clearfix post type-post status-publish format-video has-post-thumbnail hentry post_format-post-format-video">
    <a href="[wpv-post-url]" class="entry-featured-image-url"><img src="[wpv-post-featured-image output="url" size="large"]" alt="[wpv-post-excerpt length="20" count="word" format="noautop"]" width="1080" height="675"></a>
    <h2 class="entry-title">
      <a href="[wpv-post-url]">[wpv-post-title output="sanitize"]</a>
	</h2>
	<div class="post-meta">[wpv-conditional if="( '[wpv-post-url item="@article-author.parent"]' ne '' )"]By <span class="author vcard"><a href="[wpv-post-url item="@article-author.parent"]" title="Posts by [wpv-post-title output="sanitize" item="@article-author.parent"]" rel="author">[wpv-post-title output="sanitize" item="@article-author.parent"]</a> on </span> [/wpv-conditional]<span>[wpv-post-date format="M j, Y"]</span></div>
  </article>

HTML Output

<article id="post-4998" class="et_pb_post clearfix post type-post status-publish format-video has-post-thumbnail hentry post_format-post-format-video">
    <a href="/first-friendships/" class="entry-featured-image-url"><img src="<em><u>hidden link</u></em>" alt="How did you last meet a friend? Chances are, you were introduced through another friend or, they've been in your …" width="1080" height="675"></a></p>
<h2 class="entry-title">
      <a href="/first-friendships/">First Friendships</a><br />
	</h2>
<div class="post-meta">By <span class="author vcard"><a href="/person/maygen-kardash/" title="Posts by Maygen Kardash" rel="author">Maygen Kardash</a> on </span> <span>September 30, 2018</span></div>
</article>

Problem 2:
When a View is called several times in a page, it would create multiple elements with the same ID, for example:

<div id="wpv-view-layout-4174-CATTRc067f87894ae5f85a7c4d877ea13f828TCPID81" class="js-wpv-view-layout js-wpv-layout-responsive js-wpv-view-layout-4174-CATTRc067f87894ae5f85a7c4d877ea13f828TCPID81"...>
<div id="et-boc" class="et-boc">
<form id="js-toolset-maps-coords-form" class="js-wpv-ajax-results-enabled">

The 3 elements / tags above repeat every time that particular view is called. I understand that "et-boc" is a Divi tag, but is there a way to get rid of it? Also, Toolset Maps isn't used in this View, but why is it even part of the code?

Please use the dev site URL and credential I provided to debug. The .htaccess username and password are the same as the WordPress one.

Thanks

[Christian Cox]

Hi, I'm able to see the issue on your staging environment, but I'm not able to replicate the same problem on my own local testing environment, so I must be missing something critical. Can you create a backup of your site's themes and plugins directories, as well as a database dump file? Then post a link where I can download those files and run some additional tests. The Flywheel system does not allow me to use backup plugins like Duplicator so I'm not able to create a backup myself.

I will activate private reply fields here. You can add a download link to Dropbox or Drive or another reputable file sharing service.

[Christian Cox]

Okay thanks for your patience. I have escalated two issues to my 2nd tier support team for further investigation:
1. Duplicate IDs are applied to multiple instances of the same View on a page. I can replicate this reliably on my own local site.
2. An extra closing "p" tag is applied in the markup of one View on your site. This problem I cannot replicate reliably on my own local site, but since I have the clone of your site I have enough to show the issue and get some feedback.

I'll let you know as soon as I have some additional information to share about these issues.

[Christian Cox]

The 3 elements / tags above repeat every time that particular view is called.
My 2nd tier team has provided a bit of explanation on this. When a View is inserted multiple times on a page, different shortcode attribute values will cause the ID to be unique. So add a shortcode attribute to the View, and make the value unique for each instance of the shortcode. Like this:

[wpv-view name="your-view-slug" wpvcategory="abc"]<br />
[wpv-view name="your-view-slug" wpvcategory="def"]<br />
[wpv-view name="your-view-slug" wpvcategory="ghi"]<br />

Each of these Views will be inserted in the page markup with unique IDs. If the "Don’t include current page in query result" checkbox is checked, a TCPID gets added at the end of the ID. If the View's Query Filters do not use any shortcode attributes, it's acceptable to add arbitrary shortcode attributes to make the View IDs unique.

I understand that "et-boc" is a Divi tag, but is there a way to get rid of it?
Divi introduced this change—which even affects Views where the template is *not* designed with Divi—in version 3.10.1. After many user complaints about side-effects it is expected to be removed in subsequent Divi versions.

An extra closing "p" tag is applied in the markup of one View on your site
We're still investigating this. I'll keep you posted here.

[devinH]

Thanks for looking into this, Christian.

But those views used in the Featured section with the same IDs do have different offset parameter:

[wpv-view name="latest-article" wpvcategory="featured" offset="0"]
[wpv-view name="latest-article" wpvcategory="featured" offset="1"]
[wpv-view name="latest-article" wpvcategory="featured" offset="2"]

Is that not enough to create a different ID?

[Christian Cox]

Is that not enough to create a different ID?
Interesting, 2nd tier didn't mention the offset property but apparently it's not enough in this case to produce a unique ID. I have added an arbitrary attribute and cleared the cache, and now unique IDs are being used.

[wpv-view name="latest-article" wpvcategory="featured" offset="0" abcd="0"]
[wpv-view name="latest-article" wpvcategory="featured" offset="1" abcd="1"]
[wpv-view name="latest-article" wpvcategory="featured" offset="2" abcd="2"]
[wpv-view name="latest-article" wpvcategory="featured" offset="3" abcd="3"]
[wpv-view name="latest-article" wpvcategory="featured" offset="4" abcd="4"]
[wpv-view name="latest-article" wpvcategory="featured" offset="5" abcd="5"]

An extra closing "p" tag is applied in the markup of one View on your site
It seems there are a few options here:
1. Add an explicit excerpt to each post rather than relying on the fallback contents of the post body. This option requires no custom code, but requires a significant amount of manual intervention in wp-admin.
2. Create a custom shortcode to use in the alt attribute instead of wpv-post-excerpt. The custom shortcode should output the post body after stripping tags and truncating the contents as needed.
3. Develop a custom code solution that loops over all existing posts and copies content from the post body into the post excerpt field after stripping HTML tags. This fixes the problem in old posts without requiring manual intervention in wp-admin, but requires manual intervention from now on when creating posts.

[devinH]

Hi Christian,

I added an arbitrary parameter to the [wpv-view] shortcode and that worked. It's weird that the offset parameter didn't.

After you mentioned it, I can confirm that the problem is because of [wpv-post-excerpt].

<a href="[wpv-post-url]" class="entry-featured-image-url"><img src="[wpv-post-featured-image output="url" size="large"]" alt="[wpv-post-excerpt length="20" count="word" format="noautop"]" width="1080" height="675"></a>

But according to the following thread, [wpv-post-excerpt] already strips out all the tags, so I'm not sure why it's necessary to strip out the tags from [wpv-post-excerpt] again?
https://toolset.com/forums/topic/views-strip-out-html-markup-form-excerpt/

Thanks

[Christian Cox]

The wpv-post-excerpt shortcode does strip tags from the content, but that's not the real problem here. There seems to be a quirk where the shortcode parser is adding automatic paragraphs applied around the first "a" tag in the CT. This is without automatic paragraphs. For some reason, the opening tag is not included but the parser adds the closing tag. If you manually add a "p" tag inside the "article" tag and surrounding the "a" tag, on my copy of the site the problem is resolved. I'm trying to push my 2nd tier support team to take another look at this because I don't really understand the need for this approach, either.

[devinH]

Then it sounds like a bug to me then. Please ask your team to look into this further, thank you, Christian.

[Christian Cox]

We have escalated this to our developers, because it appears the format "noautop" for the excerpt tag is not working as expected. I hope to have some information to share soon. I will let you know what I find out. In the meantime you can temporarily resolve the invalid markup by adding a paragraph tag around the first link, like this:

<article id="post-[wpv-post-id]" class="et_pb_post clearfix post type-post status-publish format-video has-post-thumbnail hentry post_format-post-format-video">
 <p><a href="[wpv-post-url]" class="entry-featured-image-url"><img src="[wpv-post-featured-image output="url" size="large"]" alt="[wpv-post-excerpt length="20" count="word" format="noautop"]" width="1080" height="675"></a></p>

Not an ideal solution but if valid code is prioritized over semantic code, it's an option.

[Christian Cox]

Our developers have released an erratum post about this issue along with a temporary patch file. Please test the patch and let me know if the problem is not completely resolved.

https://toolset.com/errata/an-empty-paragraph-appears-below-the-output-of-the-wpv-post-excerpt-shortcode-when-noautop-format-is-used/

[devinH]

Hi Christian,

The temporary patch file seems to be working for excerpts, but I suspect a similar bug also affects [wpv-post-body]

For example, look at the source code for this page:
hidden link

I used the following code to display post body:

[wpv-post-body view_template="None"]

On line 217 and 218

<div class="et_builder_inner_content et_pb_gutters3">
				NWL has some exciting news!  Nadia Williamson has a new partner in the Regina boutique — Teagan Barnes. Teagan has worked at NWL for 11 years and is feeling very blessed with this opportunity. With a BFA in Costume Design, she appreciates the loveliness of every dress. She is grateful for being able to share in the experience of finding women the perfect dress. As a mother of three, she is patiently waiting to be a part of her children's wedding experiences in the future.</p>

There's an orphaned </p> at the end, also at line 237 and 238:

			</div>
</p></div>

Please also take a look at this, thank you Christian.

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/orphaned-p-tags-in-content-template/

[Christian Cox]

Okay thanks, I will continue that discussion in a separate ticket, since the original issue and patch are specific to the post excerpt tag.

[devinH]

Well, I created this ticket because I was seeing orphaned P tags everywhere. Without knowing where the orphaned p tags are coming from, I didn't create this ticket specifically for the excerpt shortcode.

I really don't want to have to create a separate ticket and re-upload everything, so if possible please continue discussion here, especially because other people may be looking for a solution to the same problem, too.

Thanks Christian