Listing

    listing: {
        id: 'listing',
        // The chooser group, stated: a block's group is never made up.
        group: 'common',
        blockSchema: {
            fieldsets: [{ id: 'default', title: 'Default', fields: ['variation', 'fieldMapping', 'headline', 'headlineTag', 'querystring'] }],
            properties: {
                // The frontend declares its own mapping widget and what a result
                // offers to map: these are the fields its fetcher (ploneFetchItems,
                // @querystring-search) returns. A listing of another kind (related
                // items, a feed) declares the fields ITS fetcher returns.
                fieldMapping: {
                    title: 'Field mapping',
                    widget: 'field_mapping',
                    description: 'Map query result fields to item block fields',
                    sourceFields: {
                        '@id': { title: 'URL', type: 'string' },
                        title: { title: 'Title', type: 'string' },
                        description: { title: 'Description', type: 'string' },
                        image: { title: 'Lead Image', type: 'image' },
                        created: { title: 'Created', type: 'date' },
                        effective: { title: 'Published', type: 'date' },
                        Creator: { title: 'Author', type: 'string' },
                        review_state: { title: 'State', type: 'string' },
                        Subject: { title: 'Categories', type: 'array' },
                    },
                    // …and every metadata column the site's catalog holds, so a
                    // site's own fields can be mapped too.
                    vocabulary: { '@id': 'plone.app.vocabularies.MetadataFields' },
                },
                headline: { title: 'Headline', type: 'string' },
                headlineTag: { title: 'Headline tag', widget: 'select', choices: [['h1','h1'],['h2','h2'],['h3','h3'],['h4','h4'],['h5','h5'],['h6','h6']] },
                querystring: { title: 'Search criteria', widget: 'querystring' },
                query: { title: 'Query', widget: 'querystring' },
                // No static default: a listing's item type is chosen from what
                // its CONTAINER allows (blocksField '..'), and the recipe below
                // resolves `summary` against that — a context nav gets navItem.
                variation: {
                    title: 'Item Type',
                    widget: 'blockTypeSelect',
                    filterConvertibleFrom: '@default',
                    blocksField: '..',
                },
            },
        },
        schemaEnhancer: {
            inheritSchemaFrom: {
                typeField: 'variation',  // listing has no blocks field — declare on recipe
                mappingField: 'fieldMapping',
                defaultsField: 'itemDefaults',
                // The item type comes from the enclosing container's allowed
                // types; `summary` is the PREFERRED default, used only where
                // the container allows it (blockSync resolves it).
                blocksField: '..',
                filterConvertibleFrom: '@default',
                default: 'summary',
                // Override the default "hide everything not in @default":
                // teaser has an `overwrite` meta-toggle that should remain
                // editable per-child so the user can override auto-populated
                // values for a specific teaser. Listing claims styling/link
                // fields uniformly across items; not the override toggle.
                parentControlled: {
                    teaser: ['head_title', 'openLinkInNewTab', 'styles'],
                },
            },
        },
    }

{
  "@type": "listing",
  "headline": "Listing: Default",
  "variation": "default",
  "styles": {
    "backgroundColor": "transparent"
  },
  "querystring": {
    "b_size": "4",
    "limit": "10",
    "query": [
      {
        "i": "portal_type",
        "o": "plone.app.querystring.operation.selection.any",
        "v": [
          "Document"
        ]
      },
      {
        "i": "Subject",
        "o": "plone.app.querystring.operation.selection.none",
        "v": [
          "main folder"
        ]
      }
    ],
    "sort_on": "getId",
    "sort_order": "ascending"
  },
  "query": [],
  "block": "24280e07-e962-4414-8ee5-cdaf58ca5f35",
  "headlineTag": "h2"
}

function ListingBlock({ block, blockId }) {
  const [items, setItems] = useState([]);

  useEffect(() => {
    async function load() {
      const fetchItems = ploneFetchItems({ apiUrl: API_URL });
      const result = await expandListingBlocks([blockId], {
        blocks: { [blockId]: block },
        fetchItems: { listing: fetchItems },
        itemTypeField: 'variation',
      });
      setItems(result.items);
    }
    load();
  }, [block.querystring]);

  return (
    <div data-block-uid={blockId} className="listing-block">
      {items.map((item, i) => (
        <BlockRenderer key={i} block={item} />
      ))}
    </div>
  );
}

<template>
  <div :data-block-uid="blockId" class="listing-block">
    <BlockRenderer v-for="(item, i) in items" :key="i" :block="item" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({ block: Object, blockId: String });
const items = ref([]);

watch(() => props.block.querystring, async () => {
  const fetchItems = ploneFetchItems({ apiUrl: API_URL });
  const result = await expandListingBlocks([props.blockId], {
    blocks: { [props.blockId]: props.block },
    fetchItems: { listing: fetchItems },
    itemTypeField: 'variation',
  });
  items.value = result.items;
}, { immediate: true });
</script>

<script>
  import BlockRenderer from './BlockRenderer.svelte';

  export let block;
  export let blockId;

  let items = [];

  $: block.querystring, loadItems();

  async function loadItems() {
    const fetchItems = ploneFetchItems({ apiUrl: API_URL });
    const result = await expandListingBlocks([blockId], {
      blocks: { [blockId]: block },
      fetchItems: { listing: fetchItems },
      itemTypeField: 'variation',
    });
    items = result.items;
  }
</script>

<div data-block-uid={blockId} class="listing-block">
  {#each items as item, i (i)}
    <BlockRenderer block={item} />
  {/each}
</div>