Get First Paragraph Block in Template

  • swcomm

    (@swcomm)


    3 years, 9 months ago

    I was playing with this and this to try and get the first paragraph block and display it in a specific div in my template. I can get that first para block where I want it, but I can’t figure out how to then exclude that first para block when I display the rest of the post content in different div in the template. I’m not finding the references to parsing and serializing blocks very helpful in this case. The rest of the content could be any number and variety of block types. Thanks in advance for any advice.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    3 years, 9 months ago

    What would be the purpose of this specific div? I’m guessing it’s to easily style the first paragraph differently than the rest. If so, why not style the first paragraph as desired using the :first-child CSS pseudo-selector? It’d be a lot cleaner than attempting to parse content. For example:

    .entry-content p:first-child {
   font-weight: bold;
}

    The trouble with using block parsing is the external context that you need is lacking. You could instead parse the entire content just before it is output, similar to how auto excerpts work. But if your need can be achieved with CSS alone, all the better.

    Thread Starter swcomm

    (@swcomm)

    3 years, 9 months ago

    No, not to simply style it differently – want it in my header div. I’m well aware of how to use the first-child selector to style a p differently. That won’t give me what I want.

    Moderator bcworkz

    (@bcworkz)

    3 years, 9 months ago

    The header content is a completely different context external to the editor. I think you’d need to manage something like that at the template level. In the header, get the content and parse it to extract the first paragraph. Then again where content is output, stripping out the same first paragraph.

    Alternately, would it be feasible to only style the first paragraph so that it appears to be part of the header? Not in HTML, only visually. The title and post meta would probably be in the way. If the HTML were structured correctly, you could use the CSS flexbox model to reorder things so the title appears after the first paragraph.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Get First Paragraph Block in Template’ is closed to new replies.