I am trying to: give the text and fields the same style within the Fields and Text block.
When writing text and setting it as a <p> in my theme it gives the <p> a 20px bottom margin. I've wrapped the field in a <p> expecting it to apply a 20px margin as well but it doesn't.
The outputted code removes the <p> so the field has no style and it messes everything up as there is no way to style the field.
Code in Toolset:
<!-- wp:toolset-blocks/fields-and-text -->
<div class="tb-fields-and-text" data-toolset-blocks-fields-and-text="1">
<p>Growing conditions:</p>
<p>[types field='native-to' separator=', '][/types]</p>
</div>
<!-- /wp:toolset-blocks/fields-and-text -->
Outputted code:
<div class="tb-fields-and-text" data-toolset-blocks-fields-and-text="63ec159b7aa4138265e7eb55d9f7fc86">
<p>Growing conditions:</p>
Moist well drained soil
</div>
To resolve it I've had to put a bottom margin on the block itself, but that only works as the field is the 2nd item. If it were the first item I would not be able to style it and I would need to revert to using paragraph and single field block - which kinda defeats the point of the Fields and Text block?
Hello and thank you for contacting the Toolset support.
If I understand well, the <p> tag is not generated on the frontend, right?
Please check if this issue appears when:
- Only Toolset plugins are activated. It will tell us if there is an interaction issue with another plugin.
- The theme is set to a WordPress default like Twenty-Twenty. It will tell us if there is an interaction issue with your theme.
If the problem disappears, start activating one at a time to track where the incompatibility is produced.
If this does not help, can you allow me temporary access to your website to check this further? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Thank you for the site's credentials. I was also able to reproduce this issue on a clean install. Let me escalate it to our 2nd Tier for another analysis.
In the meantime, you can force the generation of the <p> tags by wrapping the field shortcode inside a wpv-autop shortcode:
<p><strong>Light conditions:</strong></p>
[wpv-autop][types field='light-conditions'][/types][/wpv-autop]
I implemented this for the block that contains "Light conditions" and it worked.
Please note that the theme's styles remove the bottom margin for the last p tag. Check this screenshot hidden link
My issue is resolved now. Thank you!
Hello Mary,
I just want to let you know that finally, our developers have decided that fixing this issue is too risky and could break other parts in Toolset. The current outcome is how WordPress handles paragraphs with only a shortcode. You will get the same output with the core Classic / HTML block. To "fix" this core behavior may require some ugly filtering, which probably opens new issues for other cases.
We recommend using wpv-autop shortcode to enforce a <p> paragraph.
All the best.
Jamal