Layout Grid Block Issues

  • Unknown's avatar
    justjennifer · Member ·

    Howdy, I’m starting to work more with layouts and would like to understand why I’m having issues with the Layout Grid block.

    About a year ago, I used the Layout Grid block as the first block in a post and the following occurred:

    First, the initial Paragraph block inside the Layout Grid block rode up over the bottom of the featured image, necessitating the addition of a Spacer block above the Paragraph block to push the Paragraph block content below the featured image (as illustrated below).

    Second, the content of the Layout Grid block was completely ignored in the site’s RSS feed.

    I contacted support at that time and they reported it on github https://github.com/Automattic/wp-calypso/issues/46085 but I still don’t know what caused these issues. (FWIW I revised that specific post after the fact to remove the Layout Grid, but the RSS feed never updated with the missing content.)

    In a recent effort to create a Post Template using the Layout Grid block, I again encountered the same issue of the first Paragraph block of the post content riding up over the bottom of the featured image and again added a spacer in order to move the content of the layout grid below that image. (temp screenshot)

    Needless-to-say, I find myself a bit hesitant to actually use my new template if the issues I mentioned above are still unresolved.

    Any insights would be appreciated. Alternatively, I’m open to alternate ways to create such a Post template. TIA 😊

  • aleone89 · Staff ·

    Hello Jennifer!

    I’ve done some investigation into this and it looks like this is being caused by the following CSS:

    
@media only screen and (min-width: 560px)
.singular .hentry .entry-content>*:first-child.alignfull {
    margin-top: -64px;
}

    Which is being loaded in this file: /masterbar-overrides/masterbar.css

    This file is present on WordPress.com sites and self-hosted sites that use Jetpack.

    There isn’t a fix for this yet, so using a spacer is definitely the right thing to use here.

    I’ve updated my findings on the GH report you mentioned to help with this issue.

  • Unknown's avatar
    justjennifer · Member ·

    Thanks very much @aleone89!

    Does one issue affect the other? I’m particularly concerned about the missing content in the site feed.

  • aleone89 · Staff ·

    Hello there,

    Hmm, I couldn’t see that it did.. When looking at the test post, I couldn’t see the RSS feed in place there, even in the back end?

    Is this appearing (not appearing, but used) on a different post?

  • Unknown's avatar
    justjennifer · Member ·

    Hi, You can see what happened with my original post from a year ago in that github thread. The link to the post itself is there as well.

    I haven’t yet published the test post on my private demo site. Would it help you if I did so?

  • aleone89 · Staff ·

    Hello Jennifer!

    Ah I see what you mean there.

    I haven’t yet published the test post on my private demo site. Would it help you if I did so?

    I see the entirety of that post is in a layout grid – would you be able to publish this to see if this content appears in the feed?

    If it does, would it be possible to publish another post, whereby half is in a layout grid, and half isn’t – I’m wondering if the combination of content methods maybe a factor here.

    I hope this helps thus far.

  • Unknown's avatar
    justjennifer · Member ·

    Hello again, OK-there are now three published posts on my ablogdemo.wordpress.com site, all using that post template (via copy post):
    Test Layout-with spacer, half-and-half
    Test Layout-with spacer
    Test Layout-no spacer

    On the first published post “Test Layout-no spacer” there is no overlap of the first lines of the Paragraph block on top of the featured image on the Posts page. However, if you click through to single post view, the first line of the Paragraph block does overlap the bottom of the featured image.

    So far, all the post content is visible in the Reader and in the email that was sent out. I’ll check a different RSS reader (Feedly) later.

    Thanks again.

  • supernovia · Staff ·

    Hey there. So I’m looking at the github issue and suspecting it’d help if the two issues were separate, even thought they may be related. The issue’s title mentions RSS feeds but focuses on a layout issue. And we aren’t getting other reports of the layout issue.

    So I think I want to separate the two issues, and make sure each of them is clearly defined.

    I’m going to work on troubleshooting the feed issue first.

  • supernovia · Staff ·

    Ah, got the layout issue now, actually, and am removing my previous responses since they just added to the confusion.

    re: the feed issues, I think I got a bit turned around on that, but ultimately I’m not seeing the issue at my test site’s /feed — all of the content in a post is there, including layout content. All other posts are there, too.

    I’m viewing the feed source itself, at /feed by the way, rather than using a reader. I just do a find in page for <title> to make sure all my posts show up. I tested freeder and it looks good, too.

    Let me know what you find. If it is resolved, we’ll close that issue.

    Then if we file the layout separately, I think we’ll be golden.

  • Unknown's avatar
    justjennifer · Member ·

    Thanks for all the efforts and assistance here. ☕

    The full post content is visible also on Feedly for all three posts, so the ignored content part of the issue appears resolved, I think.

    However, I did encounter one oddity in the RSS feed on the half-and-half post. That post’s <description> field displays the text outside the layout grid, “This part is outside the Layout Grid…,” etc. I’m not sure what that might mean or if it affects the feed display in some way.

    FWIW-that RSS <description> field is empty in the other two test posts.

    Thanks again.

  • Unknown's avatar
    justjennifer · Member ·

    Thank You, @supernovia for mentioning different themes!

    I just switched ablogdemo.wordpress.com from Hever to Zoologist and indeed there are other issues.

    On the Posts page, the “half-and-half” post shows the Post title, featured image AND just below the featured image, truncated text from outside of the Layout grid and then the Post metadata. If you click through to the single post view, the post displays as expected.

    Again on the Posts page, the other two posts display their Post title, featured image and Post metadata (no post content visible at all). The single post view displays as expected with no overlapping text on the featured image, including the “no spacer” post.

    OK, then, more coffee?

  • aleone89 · Staff ·

    Hello,

    However, I did encounter one oddity in the RSS feed on the half-and-half post. That post’s <description> field displays the text outside the layout grid, “This part is outside the Layout Grid…,” etc. I’m not sure what that might mean or if it affects the feed display in some way.

    FWIW-that RSS <description> field is empty in the other two test posts.

    Interesting… So if I’m reading this all correctly… there’s two issues here…

    1. Content Layout Grid is not appearing in an RSS feed… As detailed in the original GH https://github.com/Automattic/wp-calypso/issues/46085

    2. The layout grid overlap, which I’m of the mind should be it’s own GH issue, specific to the theme.

    I don’t see the overlap happening on Zoologist thus far.


    @supernovia     what are your thoughts?

    On the Posts page, the “half-and-half” post shows the Post title, featured image AND just below the featured image, truncated text from outside of the Layout grid and then the Post metadata. If you click through to the single post view, the post displays as expected.

    Interesting… This could very well be related to the original GH: https://github.com/Automattic/wp-calypso/issues/46085

    Again on the Posts page, the other two posts display their Post title, featured image and Post metadata (no post content visible at all).

    Got it, because all of this is in a Layout Block…

    This would make this a Block specific issue…

    Yes indeed! More coffee!

  • supernovia · Staff ·

    So I suspect there are _three_ issues here. Whew! And when we’re working on one more than one in a single thread, it’s easy for things to get tangled up. Even more so if we lump multiple problems into a single issue on Github.

    Given that, and the fact that title problem in the initial issue is resolved, I’ve closed it with a comment.

    I have duplicated the negative margin issue, and confirmed it’s only happening in Hever. I’ve filed a separate issue in the right repository for Hever:
    https://github.com/Automattic/themes/issues/4978

    Zoologist is a brand new theme and I’m not surprised to find it struggles with the layout block in posts, since that block is typically used in pages. I’m going to split that into a separate thread here to reduce confusion. See you on the flip side!

  • supernovia · Staff ·

    And — split. You can find the new thread here.

  • Unknown's avatar
    justjennifer · Member ·

    Good morning and thanks again. Quite a lot to unpack here. I’ll read through and reply a bit later.

    One thing I do want to ask, given my comments above, is there a correlation between the RSS feed oddities I mentioned and the Posts page display?


    @supernovia     you said

    with the layout block in posts, since that block is typically used in pages

    which is information I was searching for and couldn’t find anywhere. But, it’s not entirely clear to me why the Layout Grid block would be limited to pages, since it’s also possible to use “copy post” if you have a post template you want to maintain.

  • Unknown's avatar
    justjennifer · Member ·

    @aleone89 you said

    1. Content Layout Grid is not appearing in an RSS feed

    If I can judge by the emails that went out and by entries in the WPcom Reader and Feedly, the full post content (including the content in the Layout Grid block) did appear in the RSS feed when I published those posts using the Hever theme. The anomaly concerning the RSS post Description field is what I found by looking directly at the RSS feed. Not to confuse things, I’ll post a bit more in the other thread that @supernovia opened on the Zoologist theme.

    2. The layout grid overlap, which I’m of the mind should be it’s own GH issue, specific to the theme.

    I understand @supernovia has taken care of this.

    Have I left anything unanswered here?

  • aleone89 · Staff ·

    Gotcha,

    Looking at the other thread, it certainly does look like a Blockbases specific issue.

    I can’t see there’s anything left unanswered :)

  • The topic ‘Layout Grid Block Issues’ is closed to new replies.