Widget api

Widget allows you to define additional theme/module widgets that can be exposed as blocks. The widgets are defined from a yml file and are stored as configuration.

Widget concept

The idea behind "Widget" is to allow the front end to create reusable components that are easily configurable on the back end.

A widget can be:
- A simple header image with text in front
- A simple map
- A profile box
- ..

As they are exposed as blocks, these elements can be used to drag/drop build a site using panels/page manager. The blocks are stored in configuration.

Widget api itself does not ship any widgets, but it includes an example module to get you started.

Widget api is not designed for content creation, but for static blocks that can be easily created, stored, and moved around.

Example

theme.widget_api.yml

hero_text:
  label: 'Hero text'
  description: 'This is a widget for a hero text widget.'
  template: widgets/hero_text
  fields:
    text:
      type: textfield
      title: 'Main text'
    slogan:
      type: textfield
      title: 'Slogan'

widgets/hero_text.html.twig

<div class="hero-banner">
    <h2>{{ widget.text }}<span>{{ widget.slogan }}</span></h2>
</div>

In addition you can preprocess the content to apply required modifications.