Get Rid of that Extra Space Above the ACF WYSIWYG Field Content with GenerateBlocks!

I was recently working on a new website build that required a custom setup using a custom post type with some custom fields. One of the layouts had an image on the left and text on the right, which used the WYSIWYG field from ACF to populate the content.

When I viewed the content on the front end, I noticed extra space above the WYSIWYG content that wasn’t input anywhere. There were no extra breaks in my paragraph, no extra padding, and nothing in the code that explained it.

Thanks to my buddy Jake Woods, I found a simple setting switch that eliminates this extra space and keeps the code cleaner. Here’s how to fix it.

Basic Setup

To demonstrate, I created:

1. A new ACF field group with a custom field using the WYSIWYG editor. I named the field paragraph_text and applied it to all pages.
2. A test page, where I inserted sample content using the paragraph_text field.
3. A content template element in GeneratePress, using a basic two-column layout with Flexbox.
   • The left column contained an image.
   • The right column contained a Text block from GenerateBlocks 2.0.
   • I inserted a dynamic tag into the text block, selecting Post Meta → Current Post → Meta Key: paragraph_text.

The Issue: Extra Space Above the Text

On the front end, the image on the left was sitting higher than the text on the right. Inspecting the code revealed an extra <p> tag above the content that wasn’t supposed to be there.

I tried removing it manually but couldn’t find where it was coming from. That’s when Jake pointed out the simple fix.

How to Fix the Extra Space in ACF WYSIWYG Fields

1. Edit the Text Block
   • Go to the page where you inserted the Post Meta field.
   • Click on the text block containing the dynamic WYSIWYG content.
2. Change the Tag Name
   • Open the Block Settings panel at the top.
   • In the Settings Panel on the left, locate Tag Name.
   • Change the Tag Name from <p> to <div>.
3. Save and Refresh
   • Save the changes, refresh the front end, and check the alignment.
   • The text should now be aligned properly with the image, and the extra <p> tag should be gone.

Why This Works

For some reason, ACF’s WYSIWYG field inserts an extra <p> tag when used with GenerateBlocks’ text block set as a <p>. Changing it to a <div> prevents that extra tag from being generated.

I’m not sure why this happens, but until ACF or GenerateBlocks implements a better fix, this simple tag change is the easiest way to eliminate the unwanted space and keep the code clean.

Hopefully, this saves you time if you run into the same issue. See you next time!