Home›Toolset Professional Support›[Resolved] Conditionally display content in Content Template custom HTML block if custom field is empty
[Resolved] Conditionally display content in Content Template custom HTML block if custom field is empty
This thread is resolved. Here is a description of the problem and solution.
Problem: I have created a Content Template for a custom post type. I am displaying some content inside a custom HTML block. Inside that block, I would like to conditionally display some content if a specific custom field is not empty.
Solution: You can use the wpv-conditional shortcode inside a custom HTML block to add conditional logic for displaying or hiding portions of the content. For example:
[wpv-conditional if="($(wpcf-consignee-company-name) ne '' )"]
<span class="invoice-to-label">Company: [types field='consignee-company-name'][/types]</span><br>
[/wpv-conditional]
I am using the Gutenberg Editor to create a content template for a post type.
I want to apply some conditional logic to ONLY show some html code IF a specific custom field is NOT empty.
However, Gutenberg doesn't seem to allow conditional logic in html blocks.
So it seems like the only way to accomplish what I want is to put all the HTML into a View then use some "Views Conditional Logic" to hide a particular HTML output in the template if that custom field is empty.
However when I insert the View into the content template it returns the custom fields for ALL posts of that type.
I only want it to return the custom field values for the CURRENT post.
I assume that what I need to employ here are Query filters?
But I can't find anything that allows me to say "only include results for the current Post ID".
You should be able to add a Conditional block and set your condition, and then add your HTML block within the Conditional block (which acts as a container that will display/hide everything inside subject to the conditions).
Now in some cases a "consignee company name" exists, but in some cases it does not.
So I just want to exclude the "consignee company name "span" is the custom field is empty.
I don't really to break a single span into it's only Conditional Container Block.
Which is why my initial thought was to do it with a view and wrap the span in conditional tags.
However, Gutenberg doesn't seem to allow conditional logic in html blocks....I don't really to break a single span into it's only Conditional Container Block. Which is why my initial thought was to do it with a view and wrap the span in conditional tags.
Hello, it is possible to insert conditional tags in a custom HTML block manually in Content Template, I'm not sure why you are under the impression this is not supported. I do not see a need for an additional View. Unless I'm misunderstanding something here, I think you can accomplish what you want in one Content Template with a custom HTML block and a conditional shortcode. I've created a similar test checking the value of a custom field for demonstration purposes, and showing variable text based on the field value or (lack thereof). I'm using the $(slug) syntax to access custom field values from the current post. Here is the code in my Content Template in a custom HTML block:
<h4>Simple conditional test in Custom HTML block</h4>
[wpv-conditional if="($(wpcf-book-single-line-1) ne '' )" debug="true"]
<span>Custom field has value: [types field='book-single-line-1'][/types]</span><br>
[/wpv-conditional]
[wpv-conditional if="($(wpcf-book-single-line-1) eq '' )" debug="true"]
<span>Custom field has no value: [types field='book-single-line-1'][/types]</span><br>
[/wpv-conditional]
My custom field slug is "book-single-line-1". Screenshots of the template in the block editor, the book-single-line-1 custom field in two post editor screens, and the two corresponding posts on the front-end of the site. You can see the debug information output on the front-end showing the conditionals functioning as expected. Remove debug="true" from the conditional tag to turn off debug details, and replace book-single-line-1 with the slug of your custom field - consignee-company-name - throughout the code. Your custom HTML block code after edits should look like this: