Show related items #4381

wesleybl · 2023-02-08T18:37:25Z

I need help with the layout:

Can someone help me?

netlify · 2023-02-08T18:37:33Z

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	`c586247`
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/645bb15fc8e0030008ee4f99

ksuess · 2023-02-08T19:34:37Z

I would say

rewrite Tags.jsx to Segment.Group instead of Container,
include Tags.jsx and Related.jsx in a new MetaData.jsx with a Semantic UI Container.

But this would mean a breaking change, I guess.

wesleybl · 2023-02-09T12:05:58Z

@ksuess I don't think it would be a good idea to do a breaking change for this. Someone who customized the Tags might not like it.

I tried to follow the HTML structure of the Semantic UI lists described here:

https://semantic-ui.com/elements/list.html

Of the React components, I used only the Container to wrap everything.

More suggestions?

tiberiuichim · 2023-02-09T13:00:30Z

@sneridagh @tisto any insight on a visual for this?

tisto · 2023-02-09T13:17:16Z

@tiberiuichim I can ask our designer to come up with something. Though, that might take a few days...

ichim-david · 2024-07-21T09:43:11Z

@wesleybl The related functionality is still not present in Volto to the point that it was added as a tutorial block from World Plone Day https://github.com/collective/volto-relateditems-block
I wonder at this point if something will be agreed for core...

wesleybl · 2024-07-23T13:28:33Z

@ichim-david I think related content shouldn't be in blocks. They should appear without explicit user action, as occurs in classic Plone. I will try to update this PR.

netlify · 2024-07-30T20:56:14Z

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	`521f16a`
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/67635006334dd600088a7a70

wesleybl · 2024-07-31T12:24:13Z

@ichim-david I have updated this PR. Can you please take a look?

ichim-david

@wesleybl see my review suggestions

ichim-david · 2024-07-31T12:38:02Z

packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx

+const RelatedItems = ({ relatedItems, intl }) =>
+  relatedItems && relatedItems.length > 0 ? (
+    <Container>
+      <h4 className="ui header">{intl.formatMessage(messages.relatedItems)}</h4>


The a11y tests will complain that you have a jump from h1 to h4 as it doesn't follow the normal heading ranges from h1-h4.
I suggest an h2 styled to look like the h4

Done. I also changed the HTML to look more like volto-relateditems-block. Now the Related Items will look like this:

I didn't include the CSS because it didn't make a difference.

Done. I also changed the HTML to look more like volto-relateditems-block. Now the Related Items will look like this:

I didn't include the CSS because it didn't make a difference.

@wesleybl if this is the final render update the screenshot from the ticket description with this or the latest render.

packages/volto/src/config/index.js

ichim-david · 2024-08-01T16:09:23Z

@wesleybl don't have time to spend on open-source anymore for today, I already do so for too long :) :( but I plan on checking this tomorrow.

packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx

ichim-david · 2024-08-06T14:00:20Z

@erral @pnicolli @davisagli @ksuess We need to decide on how we want to display the related items in Volto.
@wesleybl has worked on adding the display of the related items as seen in the ticket description.
There are several questions that need answering such as:

Are we ok with adding the component after the tags directly in the View template or should we add it through Slots?
Are we ok with this minimal styles or do we need something more?
This work adds the ability to see the related items in Volto core but during World Plone Day this functionality was added as a block in collective https://github.com/collective/volto-relateditems-block. Do we want to have it as a component added in the template or as a block?
What kind of options do we want for this work, do we want to show it in View.jsx or would there be a need to insert it based on certain conditions?
Should we have this feature disabled or enabled by default? If we opt for the minimal style and as a non-breaking feature we could go for the opt-in solution where you enable and further style it as needed if you want it.

Unless we all chip in on this pull request, if we have any feedback I don't know how we should treat this work because I don't know what is your expectations for the related items viewing especially given that we haven't added it to core until now.

wesleybl · 2024-08-08T15:58:05Z

@ichim-david when I made this PR, slots didn't exist in Volto. But I think it makes sense now for Related Items to be in slots. I think it would be interesting for them to be in the belowContent slot. But for that, Tags would have to be in that slot too, above the related items. See:

volto/packages/volto/src/components/theme/View/View.jsx

Lines 258 to 263 in 8915be3

    
           <SlotRenderer name="belowContent" content={this.props.content} /> 
        
           {config.settings.showTags && 
        
             this.props.content.subjects && 
        
             this.props.content.subjects.length > 0 && ( 
        
               <Tags tags={this.props.content.subjects} /> 
        
             )}

One detail is that Volto doesn't register anything in the slot. But I don't think there would be a problem registering it, right?

Can I make the change?

ichim-david · 2024-08-08T16:21:12Z

@ichim-david when I made this PR, slots didn't exist in Volto. But I think it makes sense now for Related Items to be in slots. I think it would be interesting for them to be in the belowContent slot. But for that, Tags would have to be in that slot too, above the related items. See:

volto/packages/volto/src/components/theme/View/View.jsx

Lines 258 to 263 in 8915be3

<SlotRenderer name="belowContent" content={this.props.content} />

{config.settings.showTags &&

this.props.content.subjects &&

this.props.content.subjects.length > 0 && (

<Tags tags={this.props.content.subjects} />

)}

One detail is that Volto doesn't register anything in the slot. But I don't think there would be a problem registering it, right?

Can I make the change?

@wesleybl I am more in favor of having this functionality as a registration in the below content slot rather than adding more things directly to the template especially since you can even condition the slot addition.
However I don't know what is the sentiment of this pull request and despite my effort to @ people as you have seen so far we have gotten no replies. I think it also has todo with the time of the year, people are either busy preparing for holidays or are on holidays as we speak.

Unless we get feedback from the other I don't know in what direction to point you as I don't know what the other core members think about related items.

As such I would wait for more feedback before any more development as to not have to make too many changes on and on and on.

davisagli · 2024-08-09T22:18:42Z

@wesleybl @ichim-david I like the idea of using slots for this, because then it's pretty easy for an add-on to replace the component if it wants to do something different (maybe even different components for different content types). In that case we might not need the showRelatedItems setting (because it's possible to override the slot with an empty component)

erral · 2024-08-11T16:44:51Z

Yes, I also like the idea of having it in the said slot. If I am not wrong, in Classic UI there is a viewlet to render the related items which is rendered in a viewlet manager. And slots are similar to viewlet manager, si it makes total sense.

I also agree with the point that @davisagli raises regarding the need of the showRelatedItems setting.

Regarding changing the Tags component and adding it to a Slot, it makes total sense, but I think that's out of the scope of this PR.

wesleybl · 2024-08-29T12:39:51Z

You can do this for Volto 18. If you want to backport this to Volto 16 or 17, it should be false by default there.

Done to Volto 18

fredvd · 2024-09-21T08:35:19Z

I only found this issue this week. Yes, putting the related items in the slot is the most flexible and others a good default experience.

Please consider setups where you do want authors to control the related items in a block the site could be set up to hide th default slot and add a block for the related items. Both are possible this way.

davisagli · 2024-09-21T16:12:59Z

@ichim-david Could you update your review please?

@plone/volto-team Can we merge this for Volto 18?

ichim-david · 2024-09-21T16:22:58Z

@davisagli I haven't tested the latest changes but everything that is added came out of our comments on what we think it's best. I trust your judgement on how it works with the slot implementation. At this moment I am getting ready for the trip to Ferrara so I am accepting on principle and not due to further testing.

EDIT:
I am +1 on adding to volto 18 with worst case scenario disabled by default if there is objections from @plone/volto-team to have it enabled by default

davisagli · 2024-12-17T15:57:49Z

We discussed in the Volto Team meeting. We missed merging this for Volto 18 so we want to merge it with the setting off by default. We can consider turning it on by default in the future in Volto 19.

wesleybl · 2024-12-18T19:56:23Z

We discussed in the Volto Team meeting. We missed merging this for Volto 18 so we want to merge it with the setting off by default. We can consider turning it on by default in the future in Volto 19.

@davisagli I changed the default to false.

packages/volto/news/3740.feature

packages/volto/src/components/index.js

davisagli · 2024-12-18T23:00:04Z

@wesleybl Obrigado!

wesleybl requested review from ksuess, tiberiuichim and sneridagh February 8, 2023 18:37

wesleybl force-pushed the related_items branch from c586247 to 29b2d9c Compare July 30, 2024 20:55

wesleybl requested a review from ichim-david July 31, 2024 12:24

ichim-david requested changes Jul 31, 2024

View reviewed changes

wesleybl requested a review from ichim-david July 31, 2024 20:59

wesleybl force-pushed the related_items branch from 15ac301 to 5fc1747 Compare August 1, 2024 14:57

ichim-david reviewed Aug 5, 2024

View reviewed changes

packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx Outdated Show resolved Hide resolved

wesleybl force-pushed the related_items branch 2 times, most recently from 305497e to 732213d Compare August 6, 2024 13:14

ichim-david requested review from davisagli, pnicolli and erral August 6, 2024 13:47

ichim-david requested a review from avoinea August 6, 2024 14:00

wesleybl added 3 commits August 29, 2024 09:39

Remove inline CSS

8e20f97

Related Items in slot

a6e788f

Fix news

2494812

Setting showRelatedItems true by default

85d0e8b

davisagli added the 24 status: ready label Sep 6, 2024

ichim-david self-requested a review September 21, 2024 16:20

ichim-david approved these changes Sep 21, 2024

View reviewed changes

ichim-david added 3 commits December 10, 2024 12:36

Merge branch 'main' into related_items

d56dd95

Fix imports for non barrel paths in RelatedItems.jsx

8504326

Lint fix RelatedItems.jsx

fd2a660

wesleybl added 2 commits December 18, 2024 16:33

Merge branch 'main' into related_items

ce0ce54

Setting showRelatedItems false by default

7db8608

davisagli reviewed Dec 18, 2024

View reviewed changes

packages/volto/news/3740.feature Outdated Show resolved Hide resolved

Update packages/volto/news/3740.feature

af46905

davisagli reviewed Dec 18, 2024

View reviewed changes

packages/volto/src/components/index.js Outdated Show resolved Hide resolved

davisagli added 3 commits December 18, 2024 14:32

Update packages/volto/src/components/index.js

d5ecf7b

Use useIntl instead of injectIntl

fe6e61b

Add the new setting to the settings reference

51b43cc

davisagli approved these changes Dec 18, 2024

View reviewed changes

Merge branch 'main' into related_items

521f16a

davisagli mentioned this pull request Dec 18, 2024

In Volto 19, change the showRelatedItems setting default to true #6549

Open

davisagli merged commit 928afbd into main Dec 18, 2024
72 of 73 checks passed

davisagli deleted the related_items branch December 18, 2024 22:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show related items #4381

Show related items #4381

wesleybl commented Feb 8, 2023

netlify bot commented Feb 8, 2023 •

edited

Loading

ksuess commented Feb 8, 2023

wesleybl commented Feb 9, 2023

tiberiuichim commented Feb 9, 2023

tisto commented Feb 9, 2023

ichim-david commented Jul 21, 2024

wesleybl commented Jul 23, 2024 •

edited

Loading

netlify bot commented Jul 30, 2024 •

edited

Loading

wesleybl commented Jul 31, 2024

ichim-david left a comment

ichim-david Jul 31, 2024

wesleybl Jul 31, 2024 •

edited

Loading

ichim-david Aug 6, 2024

ichim-david commented Aug 1, 2024

ichim-david commented Aug 6, 2024

wesleybl commented Aug 8, 2024

ichim-david commented Aug 8, 2024

davisagli commented Aug 9, 2024

erral commented Aug 11, 2024

wesleybl commented Aug 29, 2024

fredvd commented Sep 21, 2024

davisagli commented Sep 21, 2024

ichim-david commented Sep 21, 2024 •

edited

Loading

davisagli commented Dec 17, 2024

wesleybl commented Dec 18, 2024

davisagli commented Dec 18, 2024

Show related items #4381

Show related items #4381

Conversation

wesleybl commented Feb 8, 2023

netlify bot commented Feb 8, 2023 • edited Loading

✅ Deploy Preview for volto canceled.

ksuess commented Feb 8, 2023

wesleybl commented Feb 9, 2023

tiberiuichim commented Feb 9, 2023

tisto commented Feb 9, 2023

ichim-david commented Jul 21, 2024

wesleybl commented Jul 23, 2024 • edited Loading

netlify bot commented Jul 30, 2024 • edited Loading

✅ Deploy Preview for plone-components canceled.

wesleybl commented Jul 31, 2024

ichim-david left a comment

Choose a reason for hiding this comment

ichim-david Jul 31, 2024

Choose a reason for hiding this comment

wesleybl Jul 31, 2024 • edited Loading

Choose a reason for hiding this comment

ichim-david Aug 6, 2024

Choose a reason for hiding this comment

ichim-david commented Aug 1, 2024

ichim-david commented Aug 6, 2024

wesleybl commented Aug 8, 2024

ichim-david commented Aug 8, 2024

davisagli commented Aug 9, 2024

erral commented Aug 11, 2024

wesleybl commented Aug 29, 2024

fredvd commented Sep 21, 2024

davisagli commented Sep 21, 2024

ichim-david commented Sep 21, 2024 • edited Loading

davisagli commented Dec 17, 2024

wesleybl commented Dec 18, 2024

davisagli commented Dec 18, 2024

netlify bot commented Feb 8, 2023 •

edited

Loading

wesleybl commented Jul 23, 2024 •

edited

Loading

netlify bot commented Jul 30, 2024 •

edited

Loading

wesleybl Jul 31, 2024 •

edited

Loading

ichim-david commented Sep 21, 2024 •

edited

Loading