[Resolved] Block element for Page Hero on Author Archive page — overlap of content

[Steve]

I am using an Element with Dynamic content to replace both the page hero and the query loop on author archive pages.

So far it works pretty well, I use the GB grid and it comes out as expected. However when I add a horizontal rule or separator below the element it seems to overlap with the query loop below it.

Here is a code export of the page hero block. I have it set to the hook Before content container.

I would also love to setup a heading like “Username’s posts” here too so it goes above the query of author posts. Thanks for your help!

<!-- wp:generateblocks/grid {"uniqueId":"c4ea4de0","columns":2,"horizontalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"f5bcdea3","isGrid":true,"gridId":"c4ea4de0","width":33.33,"widthMobile":100,"paddingTop":"30","paddingRight":"30","paddingBottom":"30","paddingLeft":"30","paddingSyncUnits":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generatepress/dynamic-image {"imageType":"author-avatar","avatarSize":300} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"f8af3135","isGrid":true,"gridId":"c4ea4de0","width":50,"widthMobile":100,"paddingTop":"30","paddingRight":"30","paddingBottom":"30","paddingLeft":"30","paddingSyncUnits":true,"verticalAlignment":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"82330cfd","className":"","gpDynamicTextType":"post-author","gpDynamicTextReplace":"Post author name"} -->
<h2 class="gb-headline gb-headline-82330cfd gb-headline-text">Post author name</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generatepress/dynamic-content {"contentType":"author-description"} /-->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

<!-- wp:separator {"backgroundColor":"contrast"} -->
<hr class="wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":"29px"} -->
<div style="height:29px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

[Fernando]

Hi Steve,

How does it look like from your end? Can you send a screenshot? I’m not seeing the overlapping issue from my end. How should it look like?

This is what I see: https://share.getcloudapp.com/Z4uAR6Lg

[Steve]

Thanks Fernando.

The issue is not between posts but between the page hero area with the headshot and bio and the rest of it.

There is a missing border line and spacer block that does not appear below the page hero. It’s there in the source code but it’s almost as if the float is not completely cleared.

I’ve added a screenshot below.

[Fernando]

I see. Can you try using a Container Block instead? You can add padding for the spacing, and also add a border as the divider.

[Steve]

It’s in a grid block already. I’ve attached another screenshot

[Fernando]

I see. What hook are you using for the Page Hero?

Can you try after_header?

[Steve]

Currently using “Before content container.”

[Steve]

Changing it did result in the separator and line blocks to show, but it’s outside of the content container and not ideal for our current layout.

Is there a way to using before content or before content container and still have everything show up?

Thanks

[Fernando]

I see.

Try adding a Container Block below the Grid Block. Add padding. Then, add a bottom or top border.

[Steve]

Tried, that still no luck

View post on imgur.com

There is some issue here with content overlap. Really anything I put in this Page Hero area should show up without getting overlapped. Neither of those black lines display, they are overlapped by the content archive loop below it.

Relatedly, the author bio seems to have stripped out any links or formatting. Is there a setting I need to enable that?

Thanks!

[Steve]

LMK if it’s better to start a separate thread for the author bio piece. I am using the GP dynamic text block for that, I have tried to use the Headline -> Dynamic Data but can’t seem to find anything related to archive / author bio in those options.

Thanks!

[Steve]

One additional question: is this the best way to be doing this? I’m basically customizing the page hero and the archive layout using Elements, two separate Elements. Is there a way to do it as one, and is that preferred? Thanks!

[Fernando]

The way you’re customizing this page is alright. It’s the ideal way in GP.

I’m not seeing the overlap anymore from my end. I’m seeing the separator as expected. How are you seeing it from your end? Can you take another screenshot?

As for the Author data, you can set the Source to Author meta, and then you any of these as the field name: https://developer.wordpress.org/reference/functions/get_the_author_meta/#description

[Steve]

Thanks again for your help Fernando.

This seems to have been a bug that is now resolved once updated to the latest GeneratePress theme. Yay 🙂

[Fernando]

I see. You’re welcome Steve! Glad it’s resolved now! 🙂

[Author]

Posts