Add options to override listing blocks "no results". Add a default noResultsComponents, and another for the imageGallery variation

[ionlizarazu]

• add the option to modify via config registry the "No results found" message of the Listing block as component
• add the option to have a different "No results found" message for each variation
• added as example a different "No results found" message for the ImageGallery variation
  resolves Change the "no results found" message of ListingBlock to something customizable #3552

[netlify]

✅ Deploy Preview for volto ready!

Name	Link
🔨 Latest commit	f8f740f
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/63fc7457d2dc2b0008b8f2de
😎 Deploy Preview	https://deploy-preview-3602--volto.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[cypress]

Passing run #4094 ↗︎

0

459

20

0

0

Details:

Update docs/source/blocks/index.md
Project: Volto	Commit: f8f740f22c
Status: Passed	Duration: 14:53 💡
Started: Feb 27, 2023 9:17 AM	Ended: Feb 27, 2023 9:32 AM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[erral]

IMHO to include a component in the variation to show the No results component does not work. It difficults reusing variations.

Say I want to prepare a variation to use it both in News listing and Event listings, and in one I want to put "no future events" and in the other "there are no news".

Using a single component to add this message would mean to add a new variation just to change the "No results".

My 2 cents.

[ionlizarazu]

I've added some data to the NoResults component, so now we can enhance the schema for the variation and use the values in the NoResults component.

For @erral example:

• You extend the schema for the variation with a field (no_results_text)
• Create your own NoResultsComponent showing the no_results_text data
• Configure your NoResultsComponent for your extended variation

[sneridagh]

It seems ok to me, but shouldn't this is a good use case for the component registry? Even for the variations.

config.registerComponent({
    name: 'NoResults',
    component: NoResultsComponentForVariation1,
    dependencies: ['Listing', 'Variation1'],
  });

What do you think? Anyways is fine as it is for me, just wanted to pull out use cases for the component registry.

[ionlizarazu]

It makes sense, do you have any example in other component to see how to do it? @sneridagh

[sneridagh]

@ionlizarazu

Not yet a lot of examples but:

volto/src/components/theme/PreviewImage/PreviewImage.jsx

Lines 15 to 20 in 846b095

	const src = item.image_field
	? flattenToAppURL(`${item['@id']}/@@images/${item.image_field}/${size}`)
	: config.getComponent({
	name: 'DefaultImage',
	dependencies: ['listing', 'summary'],
	}).component || DefaultImageSVG;

We are using it a lot lately:

Select which teaser template you should use based on the content type:

  const hasType = data.href?.[0]?.['@type'];

  const BodyComponent =
    (config.getComponent &&
      hasType &&
      config.getComponent({ name: 'Teaser', dependencies: [hasType] })
        .component) ||
    variation?.template ||
    DefaultBody;

and the registration:

  config.registerComponent({
    name: 'Teaser',
    component: NewsItem,
    dependencies: 'News Item',
  });

hope this helps!

[ionlizarazu]

so, shoud I register the component using registerComponent function or just writing down here: https://github.com/plone/volto/blob/master/src/config/Components.jsx

[sneridagh]

@ionlizarazu better the register component... think of it as the API to do the registrations. Like ZCA. ;)

Could be that to avoid confusion we change the registration of PreviewImage in there.

[tiberiuichim]

If we get this approved, we'll need some documentation

[erral]

I have added documentation on how to use this feature

[tiberiuichim]

@sneridagh let's merge this, it makes sense to have it

[erral]

@ksuess and what about adding an option in the schema to hide the heading or the listing when there are no results? That's easier from the CMS user perspective: just hide the title and it's done. No need to add CSS code to achieve it.

[ksuess]

@ksuess and what about adding an option in the schema to hide the heading or the listing when there are no results? That's easier from the CMS user perspective: just hide the title and it's done. No need to add CSS code to achieve it.

My request that I have to solve is: "Hide a listing if there is no result".
This is easy with a
.emptyListing { display: none;)
Instead it is a pain for an editor to visit all 1017 listings and check the "hide if there are no results".
Do you see may point now?

[erral]

I see 😅

[erral]

@sneridagh then we can merge this one and then @ksuess' PR

[sneridagh]

Just a small comment

[sneridagh]

@erral @ksuess @stevepiercy uh I realised we are using different types of quotes here, also in next one...

Is there any accepted styling for md meta?

[stevepiercy]

Double quotes " is what is created initially by a Python script, and can be copy-pasted from other .md files. This is consistent with Black and other Python style guides for Plone. If single quotes are being used, we need to change them.

Also I should review this documentation before merge. Please give me until tonight to do that. Thank you!

[stevepiercy]

This is really good stuff!

I have only a few minor changes: primarily, revert a few changes in CHANGELOG.md, and use one sentence per line.

Also be aware of your editor's defaults. If you see a lot of changes for a file that you did not deliberately edit, then you need to adapt your editor to this repo's defaults. Thank you!

[erral]

Thanks @stevepiercy for the review. I have reverted all those quotation changes.

I really don't know why my editor does this kind of stuff... I am wondering if our .estlintrc configuration may have some influence on that... I will check it.

[stevepiercy]

Just one typo, then the docs are good. Thank you!