More Block: consider wrapping the "read more" or "continue reading" link on the front end in a <p> tag

[benoitchantre]

Describe the bug
The More block only outputs a link tag, but Classic Editor wraps the link inside a paragraph.

To Reproduce
Steps to reproduce the behavior:

1. Add a Read More tag to a post when Gutenberg is disabled or a More block in the Classic block
2. Save and inspect markup (you will find the the link is nested inside a paragraph)
3. Convert the Classic block to blocks
4. Save and inspect markup (you will find the the link is not nested inside a paragraph)

Tested with Gutenberg 3.6

Related: #8974

[designsimply]

Would you mind talking a little bit more about why you think this change is needed? Not everything works the same way in the Gutenberg editor compared to the Classic editor—a lot has changed!—and so it would be really good to include a use case or an example explaining why you think the markup should be a certain way independent of how the older editor worked.

[benoitchantre]

I think the semantic is better when the link is inside a paragraph tag.

It is also easier to keep the link aligned with the content when it is wrapped by paragraph.

[designsimply]

Thank you for the reply. Semantically, a paragraph tag is defined as:

The HTML <p> element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

I can see the argument for adding a <p> tag in the case of a posts page or archives page and an argument for it not to be there on the individual post.

^{Seen at http://alittletestblog.com/2018/09/11/ running WordPress 4.9.8 and Gutenberg 3.8.0-rc.1 using Firefox 62.0 on macOS 10.13.6.}

[designsimply]

Note: the argument alone that something is different from classic should not be relied on as a main argument. I have updated the title to try to make the request more clear. 🙂

[ukathemes]

I think the more link must be wrapped with some element at least so that it can be temized in such cases:

In the screenshot: theme twentynineteen, for inner post content applied "margin-left: auto" and "margin-right: auto" to center it. In this case, you cannot center the more link unless you specify "display: block" for it. But if you add "display: block" the more link takes up the entire width of the content...

[realworldev]

The "continue reading" link for excerpts, search results in many themes and child themes based on default themes is usually placed within the previous paragraph. This should be taken into consideration.

[ukathemes]

The "continue reading" link for excerpts, search results in many themes and child themes based on default themes is usually placed within the previous paragraph. This should be taken into consideration.

In these examples, the text and the more link are located in the same paragraph... This is for excerpts, I talk about the_content().

[realworldev]

@v-kulesh Yes, that's why I wrote "excerpts, search results".

In content the "continue reading" link is either within the previous paragraph or in an own paragraph or within the next paragraph right at the beginning, depending where the user has placed it.

[ukathemes]

In content the "continue reading" link is either within the previous paragraph or in an own paragraph or within the next paragraph right at the beginning, depending where the user has placed it.

Yes, in the old editor. In the Gutenberg this is this is a separate block (whithout own paragraph, just link).

[realworldev]

@v-kulesh Yes, that's why I wrote these placements "should be taken into consideration".

There also exists various CSS for .more-link in many themes, and/or further customization is done via the_content_more_link filter. Not sure if this filter is applied in Gutenberg, did not find any documentation about that anywhere.

Many themes also use the $more_link_text parameter of the_content(), some even with extra html inside as documented in codex. Not sure if this parameter is applied or replaced with text from "more" block in Gutenberg, did also not find any documentation.

If Gutenberg places the more link tag outside of a paragraph and still uses the more-link class, things will probably break.

[ukathemes]

There also exists various CSS for .more-link in many themes, and/or further customization is done via the_content_more_link filter. Not sure if this filter is applied in Gutenberg, did not find any documentation about that anywhere.

Thanks for the_content_more_link filter! 👍 It works in Gutenberg.

[paaljoachim]

@benoitchantre
Is this issue still valid?

Also pinging.
@tellthemachines

[tellthemachines]

It's valid, but I would argue against wrapping the link in a paragraph tag. There's no obvious semantic benefit and the link has a .more-link class that can be styled to display as a block.

[mtias]

Not planning further changes here for now.