CARVIEW |
Navigation Menu
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Enhance Term Description Block with Context Support #71525
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhance Term Description Block with Context Support #71525
Conversation
- Added `usesContext` to `block.json` for `termId` and `taxonomy`. - Implemented `useTermDescription` hook to fetch term descriptions based on context or fallback to template parsing. - Updated `TermDescriptionEdit` component to display term descriptions or a placeholder based on the fetched data. This improves the block's functionality by allowing it to dynamically retrieve and display term descriptions in various contexts.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is working great in my testing, nice work! I'm able to see the term description content in both the editor and the front end:
Editor | Front end |
---|---|
![]() |
![]() |
And I can see your approach very closely matches the query-title
and post-title
implementations.
I can only see the tiniest of improvements: we usually end all comments with a full stop.
packages/block-library/src/term-description/use-term-description.js
Outdated
Show resolved
Hide resolved
packages/block-library/src/term-description/use-term-description.js
Outdated
Show resolved
Hide resolved
packages/block-library/src/term-description/use-term-description.js
Outdated
Show resolved
Hide resolved
</div> | ||
{ termDescription ? ( | ||
<div | ||
dangerouslySetInnerHTML={ { __html: termDescription } } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should this termDescription
go through some sanitization before being passed to dangerouslySetInnerHTML
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The term description here uses term_description()
, which already applies sanitisation. I don't believe the content can be edited at any other point, so I'm not sure we need additional sanitisation here. This also follows the same pattern as post-content
, post-title
, and post-author
.
* This maintains the same logic as the original implementation for cases where | ||
* no termId/taxonomy context is provided. | ||
*/ | ||
function useTemplateBasedTermData() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So much duplication with useArchiveLabel()
here. Could make sense to consider avoiding it and maybe adding some documentation, because it can be particularly difficult to follow some bits, like the regex match processing, for example.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, to be honest, as this was a PR to tentatively dip my feet into something quite spontaneous, that hadn't been previously discussed, I opted for the minimal approach which wouldn't modify anything else.
I suggest that we merge this PR in this state, and then deal with refactoring in a follow-up PR, so we keep things contained.
What do you think? My concern to keep things “atomically testable”: so we make sure this PR does whatever it says it does, and then we move on to touch other parts of the system which will require a different set of tests, and for which we have safe fallback.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good to me - I'm good with opening an issue so we can follow up on the deduplication at a later point.
return { | ||
termDescription, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above, I don't see a good reason to return an object.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wanted to keep the return type consistent with useArchiveLabel
, so that, when used, these kinds of hooks require the least amount of thought from the consumers as possible, and they look more readable together. Pushing a commit to change this, however, we can always revert it to this type if you think my reasoning makes sense.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think I prefer the flat version 😉
IMO, the only time when an object with a single property is fine is when we expect that the return value will grow in time and we don't yet have the design for it, but we want to minimize breaking changes and integration cost.
}, [] ); | ||
|
||
const taxonomyMatches = templateSlug?.match( | ||
/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would love to see this documented. At first glance, the category|tag|taxonomy-
vs (category|tag)|taxonomy-
looks like a mistake.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the same RegEx used in useArchiveLabel
, copy+pasted. See my comment above about refactoring: I think in a followup PR we can consolidate and document.
(Besides, I see some dirty code in useArchiveLabel
anyways that could use a cleanup PR).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, happy to have that in a follow up 👍 just let's make sure it doesn't fall through the cracks (document it in an issue or in TODO as a comment)
// Access core/editor by string to avoid @wordpress/editor dependency. | ||
// eslint-disable-next-line @wordpress/data-no-store-string-literals | ||
const { getCurrentPostId, getCurrentPostType, getCurrentTemplateId } = | ||
select( 'core/editor' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do think this is a bit messed up. We don't really avoid a @wordpress/editor
dependency, do we? So why pretend? Looks like something we should address further down the line.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we're mainly avoiding @wordpress/block-library
from being dependent on @wordpress/editor
, as blocks can be loaded into a non-post block editor. We're doing something similar for useArchiveLabel()
, so if we're going to address this in a different way, then perhaps we could handle both of these cases at once in a separate PR (and probably a few other similar cases).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense and sounds good to be addressed together and separately from this PR.
const hasContext = Boolean( termId && taxonomy ); | ||
|
||
return { | ||
hasContext, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need to expose hasContext
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm guessing this might be for extensibility reasons, but I'm sure @sunyatasattva can confirm.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, exactly. This was added to make sure that, downstream, the block can know whether the result of the content is coming from the template data or from the passed down context. This is useful when this block is going to be used as an inner block of some arbitrary parent (in one example case: Featured Category block in WooCommerce).
hasContext, | ||
setDescription, | ||
termDescription: hasContext | ||
? fullDescription?.rendered || description || '' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should the empty string fallback be at the end of all the logic?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mm, not sure I get what you mean. You mean after the whole ternary? Because the other side of the ternary (templateBasedData
) already falls back to an empty string.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm looking at the code and can't recall why I suggested this. Maybe it was because of the ''
fallbacks in other places in the code. Feel free to disregard 👍
return useSelect( | ||
( select ) => { | ||
if ( ! taxonomy || ! termSlug ) { | ||
return { termDescription: '' }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need to return an object? Seems like we can just return the string there.
I'll let @mikachan do another round of review, as I don't have much review cycles this week - thanks! 🐢 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All the changes look good to me, thanks @sunyatasattva!
Looks like we have a few follow-up tasks:
- Reduce the duplication with
useArchiveLabel
anduseTemplateBasedTermData
: #71525 (comment) - Consolidate and document the regex used in both hooks: #71525 (comment)
- Address the workarounds for avoiding being dependent on
@wordpress/editor
in@wordpress/block-library
: #71525 (comment)
I think this is ready to bring in 🚢 ✨
Shouldn't this PR also handle the php rendering of the block when the context is provided? |
I have a fix here: #72238 |
What?
The
term-description
block, as opposed to thepost-title
or thequery-title
, always showed a placeholder, even when the data was technically available (e.g. if the user was modifying a specific category template).This PR fixes that by allowing the
term-description
block to either receive context from a parent (like thepost-title
), or fallback to the parsing of the template slug (like thequery-title
).Why?
Not showing the actual content is not only a degraded user experience (as the user can't preview the template correctly without displaying the actual description), but also inconsistent with the behavior of other blocks.
How?
The PR basically implements already available patterns from
post-title
andquery-title
. This allows the block to be quite versatile and reusable in different contexts.Testing Instructions
Preserving original functionality
term-description
block.New functionality
term-description
block.