Search

A search interface with faceted filtering. Contains a child listing block for results and typed facets (checkbox, select, date range, toggle) for filtering.

The search example block being edited in Inka

Search with Facets

Filter by

Content Type
Tags

Slider Block

A carousel/slider that cycles through slides. Slides are stored as an object_list — each slide has a title, description, image, and optional button.

Search Shortcuts Block

Renders a set of values as links into a faceted search — a "tag cloud" of shortcuts. Each value links to a search page with ?facet.<index>=<value> pre-set, which a Search block reads from the URL.

RSS Feed Block

Renders entries from an external RSS feed, reusing the listing machinery. Each entry is rendered with a configurable item type (variation).

Related Items Block

Renders the current page's related items relation field (default relatedItems) as a list, reusing the listing machinery — each related item is rendered with a configurable item type (variation).

Hero Block

A full-width hero section with heading, subheading, image, rich text description, and a call-to-action button. Demonstrates multiple field types in a single block: string, textarea, slate, image, and object_browser.

Cookie Consent Block

A consent banner and a preferences dialog, written by one block. It is the worked example for revealing the place a FIELD is edited — data-block-selector="uid#fieldName".

Simple Search

Previewing and Testing Content

Preview content locally by serving the Markdown through the mock API, and check it with the block sanity test — which discovers every block on the served content and verifies it renders across frontends.

Content as Markdown

Author Plone block content as readable Markdown. One loader turns a .md file into block JSON, so the same file is the content the API serves, the deploy ships, and the docs render — with no JSON to hand-edit.

Visual Editing

Templates & Layouts

Templates allow editors to centrally control content and reuse content. They allow a developer to not have to hard code layout decisions and instead use rules to apply user layouts in template content stored separately from the page, or give the user a choice on which layout they want.

Server-rendered frontends

Inka works with any frontend, including ones that have no client-side

Live Preview

To make your site editable with Inka you load hydra.js in your frontend and call initBridge(). This sets up a two-way communication channel that handles authentication, page navigation, and live content updates.

Developer Reference

Schema

Pass this object inside the blocks option when calling initBridge() to register this block type with the admin UI. See Custom Blocks for the full setup guide.

{
  "properties": {
    "variation": {
      "title": "Variation"
    },
    "query": {
      "title": "Query",
      "widget": "querystring"
    },
    "listingBodyTemplate": {
      "title": "Results template"
    },
    "showSearchInput": {
      "title": "Show search input",
      "type": "boolean"
    },
    "showSortOn": {
      "title": "Show sort on",
      "type": "boolean"
    },
    "showTotalResults": {
      "title": "Show total results",
      "type": "boolean"
    },
    "sortOnOptions": {
      "title": "Sort on options",
      "type": "array"
    },
    "facets": {
      "title": "Facets",
      "widget": "object_list",
      "typeField": "type",
      "allowedBlocks": [
        "checkboxFacet",
        "selectFacet",
        "daterangeFacet",
        "toggleFacet"
      ],
      "defaultBlockType": "checkboxFacet"
    },
    "headline": {
      "title": "Headline",
      "type": "string"
    },
    "title": {
      "title": "Title",
      "type": "string"
    },
    "facetsTitle": {
      "title": "Facets title",
      "type": "string"
    },
    "quickAnswerSample": {
      "title": "Sample question",
      "type": "string"
    },
    "quickAnswer": {
      "title": "Quick answer",
      "widget": "blocks_layout",
      "allowedBlocks": [
        "quickAnswer"
      ]
    },
    "listing": {
      "title": "Results Listing",
      "widget": "blocks_layout",
      "description": "Listing block to render search results",
      "allowedBlocks": [
        "listing",
        "default",
        "summary",
        "teaser",
        "image"
      ],
      "maxLength": 1,
      "defaultBlockType": "listing"
    }
  }
}

JSON Block Data

Example JSON as stored in the Plone content API. This is the data structure your component will receive in the block prop.

{
  "@type": "search",
  "headline": "Search with Facets",
  "listingBodyTemplate": "summary",
  "facetsTitle": "Filter by",
  "facets": [
    {
      "@id": "facet-type",
      "type": "checkboxFacet",
      "title": "Content Type",
      "field": {
        "value": "portal_type",
        "label": "Type"
      },
      "multiple": true,
      "hidden": false
    },
    {
      "@id": "facet-subject",
      "type": "checkboxFacet",
      "title": "Tags",
      "field": {
        "value": "Subject",
        "label": "Tags"
      },
      "multiple": true,
      "hidden": false
    }
  ],
  "blocks": {
    "facet-listing": {
      "@type": "listing",
      "variation": "summary",
      "querystring": {
        "query": [
          {
            "i": "path",
            "o": "plone.app.querystring.operation.string.absolutePath",
            "v": "/"
          }
        ],
        "sort_on": "effective",
        "sort_order": "descending"
      }
    }
  },
  "blocks_layout": {
    "listing": [
      "facet-listing"
    ]
  },
  "query": {
    "b_size": "4",
    "query": [
      {
        "i": "path",
        "o": "plone.app.querystring.operation.string.absolutePath",
        "v": "/"
      }
    ],
    "sort_on": "effective",
    "sort_order": "descending"
  },
  "showSearchInput": true,
  "showSortOn": true,
  "showTotalResults": true
}

Rendering

How this block renders in your frontend. Add its handling to your renderer, or — for list-style blocks — register a fetcher and reuse your list rendering.

function SearchBlock({ block, blockId }) {
  const [query, setQuery] = useState('');

  const facets = (block.facets || []).filter(f => !f.hidden);
  const listing = block.blocks_layout?.listing || [];
  const listingId = listing[0];
  const listingBlock = listingId ? (block.blocks?.[listingId]) : null;

  return (
    <div data-block-uid={blockId} className="search-block">
      {block.headline && <h2 data-edit-text="headline">{block.headline}</h2>}
      <input
        type="search"
        placeholder="Search..."
        value={query}
        onChange={e => setQuery(e.target.value)}
      />

      {facets.length > 0 && (
        <div className="facets">
          <h4 data-edit-text="facetsTitle">{block.facetsTitle || 'Filter'}</h4>
          {facets.map(facet => (
            <FacetRenderer key={facet['@id']} facet={facet} />
          ))}
        </div>
      )}

      {listingBlock && (
        <ListingBlock block={listingBlock} blockId={listingId} />
      )}
    </div>
  );
}

function FacetRenderer({ facet }) {
  switch (facet.type) {
    case 'checkboxFacet':
      return <fieldset data-block-uid={facet['@id']}><legend data-edit-text="title">{facet.title}</legend>{/* checkbox options */}</fieldset>;
    case 'selectFacet':
      return <label data-block-uid={facet['@id']}><span data-edit-text="title">{facet.title}</span><select>{/* options */}</select></label>;
    case 'daterangeFacet':
      return <label data-block-uid={facet['@id']}><span data-edit-text="title">{facet.title}</span><input type="date" /> – <input type="date" /></label>;
    case 'toggleFacet':
      return <label data-block-uid={facet['@id']}><input type="checkbox" /> <span data-edit-text="title">{facet.title}</span></label>;
    default:
      return null;
  }
}