Hi - I'm using Toolset on a site with the GeneratePress theme in conjunction with Kadence Blocks. I'm trying to use the Fields and Text block inside a Kadence Tab Block. I'm running into two issues. One is that the Fields and Text block seems to be stripping out any HTML tags and just dumping the text from my field onto the page. When I inspect it in Chrome it is actually displaying it like this:
<p></p>
...field value with no HTML (even though I have added HTML in the field by using the WYSIWYG editor)
<p></p>
The other issue I'm having is somewhat related - since the text is just being dumped on the page with no paragraph tags around it, it is not picking up on the correct style from my theme. I tried to get around this by setting the Typography settings for the Fields and Text block - which worked, but it means I would have to set it manually each time I use the block (and I'm using it several times in my Kadence Tab block. I couldn't find any place I could set the display settings for any block universally, so I'm guessing that would have to be done by hand in CSS?
One is that the Fields and Text block seems to be stripping out any HTML tags and just dumping the text from my field onto the page.
Hello, it might be best in this case to use a Single Field block instead of the Fields and Text block. You will have more granular control over the output in the Field Settings panel. See the screenshot single-field-settings.png. You can use "raw" output, which will prevent any wrapping paragraph tags and should include your HTML verbatim as it is encoded in the field. You can also elect to "Apply third party filters to the output" or not, which may have some impact on the text depending on your site's other 3rd-party plugins.
I couldn't find any place I could set the display settings for any block universally, so I'm guessing that would have to be done by hand in CSS?
Hand-writing CSS is one option, yes. You can apply a CSS class in the Advanced panel of the block settings, then write the corresponding CSS styles for this class in Appearance > Customize > Additional CSS.
Another option that requires no CSS is the Reusable Block feature provided by WordPress. Use block configurations to apply text styles to the existing Fields and Text block, then add the block to Reusable blocks. To add an existing block to a Reusable block, select the block in the Block Editor and open the menu that looks like 3 vertical dots as shown in the screenshot reusable-menu.png. If you cannot see the toolbar above the block in the block editor, you may have the "Top Toolbar" mode active. You can disable that option from the menu that looks like 3 vertical dots at the top of the Block Editor screen. See the screenshot top-toolbar.png for the location.
Any time you want to use this styled Fields and Text block, you can insert it in the Block Editor by searching for "reusable" in the field search feature, or search by the reusable block name. Please be patient when searching for a reusable block, as there is a brief delay before reusable blocks are available in the dropdown list.
Another option is to insert the existing styled Fields and Text block in a Content Template. Then place the Content Template in the Block Editor design instead of the Fields and Text block. This option requires one extra block element as a container, but it requires no CSS or reusable blocks.
Thank you for that very thorough answer, Christian! In trying some of those options out, I'm wondering if my problem is more specific than I first described. In particular, it seems I am able to add any html to the custom field value - and have it display correctly in the Single Field or Fields and Text block *other* than a paragraph tag. As I understand it, in the editor WordPress will automatically strip out any paragraph tags, but then (by default) will add them to the output when you view the page. For whatever resason, this is not happening when I try to output the value of my custom field using the Single Field or Fields and Text blocks. It doesn't add the paragraph tag, so all of my text runs together in one huge paragraph. And I cannot manually add the paragraph tags in the field value of the editor, because it strips them right back out. This may be a very simple problem that I'm missing, but I am stumped. How would I ever output multiple paragraphs of text in a custom field value without them all running together?
However, your description indicates you are trying to display a custom field, so this may not be exactly the same issue. I think it would be best for me to log in and take a closer look. If that is okay with you, please use the private reply fields here to provide login credentials securely. Let me know which custom field you are trying to display, and I will give you some feedback after I login and see how everything is set up.
Okay I think part of the issue is where you are adding HTML. Each of the WYSIWYG fields in the post editor screen has two tabs - Visual and Text. If you want to add HTML, you must do that in the Text tab. In the Course Description field, I could see no HTML codes so I switched to the Text tab and added some:
In this Adobe Acrobat DC Training course, <a href="#">students</a> will <strong>learn</strong> how to...
If you look on the front-end of the site now, I can see a link tag applied to the word "students" and I can see the word "learn" has bold text. In the post editor screen, I can see the HTML code in the Course Description WYSIWYG editor. If I refresh the page, I can still see the HTML code here (screenshot attached). Furthermore, ordered list and unordered list items are shown on the front-end of the site, and they were coded with HTML in their respective custom field WYSIWYG editors before I logged in. In other words, this HTML code was already working. So maybe I don't understand the problem fully. Is there some specific HTML that is not working in a WYSIWYG editor? Please copy + paste the exact HTML code you are trying to insert, and tell me in which WYSIWYG field you are having trouble placing that HTML.
Hi Christian - thanks for checking further. Yes - the issue is specifically with <p></p> tags. All other html tags are working fine. If you try to insert a <p> tag around any block of text (and, yes, I was doing it in the Text editor) it will disappear when you switch back to the Visual editor and then back to the Text editor.
The end result is that any field value I have that is multiple paragraphs (like the Course Description field) winds up with no paragraph breaks and all run together on the front-end. I hope this makes sense. If you need more information please let me know.
Okay I have added the p tags in the WYSIWYG field's "text" tab content editor panel, enabled the raw output, and disabled third-party filter option in the Field Settings for the Course Description tab's Single Field block. On the front-end of the site, I see the wrapping paragraph tags around each paragraph of text as expected. See the screenshots here. It seems like everything is working as expected, so I'm not sure exactly where the problem was. Maybe the tags were added in the Visual tab by mistake, or maybe it was a combination of a few things. Regardless, it seems to be outputting the correct markup structure now, can you confirm?
Thanks, Christian. I do see that that works. However, what I had mentioned in my previous reply is that if you do what you have done (enter the P tags under the text tab) and then switch back to the Visual editor, the P tags will be stripped out and you will be back to the same problem. I was trying to find a way that users would not have to know that they manually need to add p tags to the field value and never switch to the visual editor. We can do that for now, I guess, but it doesn't seem to make sense that you choose the WYSIWYG editor for a field, but can never switch from the Text tab to the Visual editor without losing these tags. Not sure if it is a WordPress issue or an issue with Toolset? Thanks again for all of your help.
Regarding stripping p tags when switching between tabs in the visual editor, the same behavior can be seen in the main post editor of any post type that uses the classic editor instead of the Block Editor. So unfortunately it's more of a question of how WordPress chooses to handle automatic paragraphs in visual editor content. Toolset implements the same visual editor used by WordPress, so this same issue is inherited by WYSIWYG fields. The wpv-autop shortcode can be used as a workaround, because as I said before there is currently a known issue where the first instance of a Single Field block placed in a Content Template will drop automatic paragraph tags. I suspect you will run into that issue if you try to place the WYSIWYG field using a Single Field block in the Block Editor: https://toolset.com/errata/paragraph-tag-is-stripped-in-wysiwyg-loop-items-and-page-builders-generated-content/
You can work around the issue by placing the WYSIWYG field in your Content Template using a combination of shortcodes in a Classic block, wrapping the Types WYSIWYG field shortcode with a wpv-autop shortcode like this:
