[Block Library]: Add new Read More block (post link)
#37649
Conversation
ntsekouras
added
New Block
ntsekouras
requested review from
mcsf,
Mamaduka,
youknowriad,
mtias,
aristath,
jameskoster,
kjellr,
jasmussen and
carolinan
ntsekouras
requested review from
ajitbohra,
mkaz,
spacedmonkey and
TimothyBJacobs
as code owners
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { link as icon } from '@wordpress/icons'; |
There was a problem hiding this comment.
We would need a new icon here. @jasmussen, @jameskoster or any designer that finds some time 😄
|
Size Change: +1.78 kB (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
|
Thanks for the PR! Always happy to create an icon when needed. This PR extracts the "Read More" part from the Excerpt block:
It gets a bit confusing if it's used after the very same excerpt, though, can we do anything here?
The prolific use of "Read more" also immediately made me think of the existing "More" block. Is there an opportunity to use that one instead, even if we need to add some changes to make it context aware?
To be clear, I understand the use case, it's just a permalink you can put anywhere. For my own theme I'm using a Post Title block with a custom heading level, including it in post meta to link to the destination. It's pretty hacky and would be served better as a link. In that light, I've no objection to this landing, but it still makes me wonder if there isn't a smarter approach we can take. While these bespoke blocks solve the immediate problems. But this is at the expense of a proliferating the amount of blocks we have. Should the post excerpt block include this separate block so you can delete it if you don't want it? Should the "Read more" part of it be removed from the excerpt block since it's separate? Are there any other small wins we can find that help eliminate the duplicated text of a post excerpt block followed by the separate post link block? Longer term, it'd be nice to think of a systematic approach to the problem. #31815 discusses variable substitutions for images, #35596 asks for the "Post Author" block to be split out, and #26899 discusses inline post meta. The last one is the key bit for me: some themes include post metadata as prose, such as "Alice in Wonderland was posted in Book Reviews on Tuesday May 3rd, 2020". Is there a point where we have blocks for only the most basic things, but inline tokens you can write, such as {{post-link}} or {{post-date}}? |
|
One quick thought: can we/should we limit the Post Link to only be inserted inside a Query block, to increase the contextuality and reduce the overall footprint of the inserter at the root level? |
|
Thanks for the feedback Joen! ⭐
It doesn't, it leaves the
We can change the placeholder of this block for start.
I don't think this is possible as they are very different blocks. The existing more block is used for:
We should be able to add a post link without the
There is existing content that uses that and if we change it, we can't handle deprecations that would create a new block in its place. Also the excerpt read more has server side filters applied. So I think so, but I'm not sure it will be quite easy and I think it will be a breaking change.
This is a tricky one as we are talking about a templating engine and all that entails (attributes, styling and editing in general).
With the current APIs (like |
|
Thanks for the context! I understand the need for this block, my only hesitation is that it's a new block which is also partially built-in to an existing block, causing both UI and code duplication. This might be necessary, but the duplication is likely to cause confusion (as shown, a post excerpt followed by a post link). Anything we can do there would be nice, it doesn't feel ideal. |
|
Thanks for working on this, Nik. The code-wise PR looks great 👍 I can also understand some of the confusion this might cause to users after reading Joen's reply. More often than not, I think block will be used in combination with the Post Exceprt. Maybe not directly below, but in the next group/row.
|
|
What if we make the "Read More" link on the Post Except block conditional with a toggle? Something like "Enable read more link" above the existing "Show link on new line" toggle. This would be pretty handy because there are instances where I don't want the "Read More" link, but the text field annoyingly remains visible in the Editor? I am happy to put this PR together if everyone thinks it might be worthwhile. It also removes some of the confusion around this PR since the "Read More" on the Post Excerpt block can be easily toggled off in favor of the dedicated Post Link block. |
|
Thanks for opening this PR and all the discussion so far, some excellent thoughts here. It seems to me that this is essentially a block equivalent of I know it used to be common to place permalinks in various templates, but I'm not sure how prevalent that is these days... If it's not common then perhaps we can just make this an option of the excerpt block as has been suggested. Another idea that avoids adding another block but still provides flexibility to themers would be to do something with the add-link interface. If I'm adding a link while editing a query in a template, perhaps I see an option to link to the queried post? Crude example:
One benefit with this approach is that is makes it easy to add an inline permalink, where a dedicated block forces you to fiddle around with layout blocks. |
Yeah this is an interesting approach. Likely a lot more complicated to implement than a simple Post Link block, but I like the concept. If done, this could/should be added to buttons as well. That should cover all use-cases where a theme designer would want to dynamically link to a post/page/cpt within a query loop. Regardless a solution is needed and clearly the community wants it based on the number of issues. I do think a dedicated block is a bit more clear to newer users. But if there is concern about adding too many blocks, adding additional functionality to links/buttons should work as well. |
I think adding a "link to this post" option in the link modal would make sense as a replacement for Most of the traditional theme use cases for |
Chiming in as I was looking for exactly this feature and I'm agreeing with @kjellr on this, a separate Read More link is absolutely helpful and enables more design options. |
|
So what do you all think? Should we move forward with this one? If yes, we would need a new icon and a code review 😄 |
Yeah, I like it! |
Yeah, I agree. Maybe this should be called a "Read more" block? |
"read more" makes sense 👍 |
|
+1 for renaming the block to "Read More". |
ntsekouras
force-pushed
the
add/new-block-post-link
branch
from
0be3b29 to
b28c202
Compare
ntsekouras
changed the title
Read More block (post link)
ntsekouras
force-pushed
the
add/new-block-post-link
branch
from
7683580 to
611ce71
Compare
There was a problem hiding this comment.
I tested this and it worked great! Codewise there is no reason apparent to me to hold back, if anything pops up we can improve.
Left one nit on the wording of the default placeholder. My nit is made worse by the fact that the RichText component when it is empty and showing the placeholder with an a tag the blinking cursor is not visible. It is completely invisible to the user that they should start writing text. @ntsekouras do you know of any such bug, because I was not able to open an issue, but I could repro in FF and Safari.
|
Thank you all for the reviews and feedback!
@draganescu I couldn't reproduce this in FF, Safari or Chrome. If this is a bug though, with some other combination or version or something, I guess it affects all RichText instances and we should look into it.. |
|
Can we update the post excerpt block to use this block instead of the current read more link that it has? |
|
Very pleased to see this block land. Great work 👏 |
I think we should. I am not sure how to use the users existing texts, in the new block. |
We can't because |
Could we update it to use InnerBlocks? |
I don't think there is the need to do so, since this is a dynamic block getting the |
|
I'm thinking about the UX... If I add a post except block and I want to change the read more link then I need to hide it from the excerpt block and then add a read more block - I'm not sure that's how most users would expect it to work... |
I'm working on a POC for this right now. If you add a new Post Excerpt block the control will not be displayed by default. So you'd just have to add the new block. I'll create a deprecation to show the control for existing blocks that had some content in |
|
Here is the POC: #38662 |
Resolves: #32529
Resolves: #25450
Resolves: #33288
Resolves: #37247
This PR adds a new
Read Moreblock (post link) which is intended to be used inside aQuery Loop, as there is no point to be present in any other context.Notes
linkwithout any wrapper, so In order to align the link you need to wrap it in another block that can handle the aligning, most preferably aRowblock to use its content justification options. Also because is just a link, the way to control the color of the link is through thehighlightcontrol in RichText toolbar options.Post Excerptthat has this option (with more limited design options), but in many designs we want to have a separate block for the post link and without having the excerpt block. If you have both Post Excerpt and Post Link blocks, you can use this new block only, by just leaving the Post Excerpt's read more input empty, which in that case doesn't print anything.post_link.mov