Provide a standard way of handling arbitrary content

Problem/Motivation

In addition to various precisely defined variables, many components will have a flexible region where arbitrary content can be rendered. We might think of such a region as a container, niche, or slot. There are several possible ways to render content into such niches. For consistency, it would be useful to have a standard approach.

Examples from the Bulma CSS framework, integrated in the Bulma Components module:

• Columns. In Bulma columns, each column has an area where arbitrary content can be rendered.
• Card. While many regions of a Bulma card such as a `card-image` are prescribed, the `card-content` area is "a multi-purpose container for any other element".
• Various others like Content, Notification, Container, and Level.

On the Drupal side, there are various types of data we might want to pass into such a niche. Maybe it's render arrays. Maybe it's Twig templates and accompanying variables. Maybe it's one or more embedded components.

Here are some concrete examples from .

So far in Bulma Components, we're handling these niches with a set of three variables--or, really, up to three, since the approach has not yet been consistently used. But let's take the box component (`bbox`) as an example.

The component variables include a set of three variables that can be used to add content to the niche. Two are "common variables" (shared across multiple components) and so defined elsewhere, in this case in bulma_components.component_schema.yml. Here's the expanded version:

content:
  label: 'Content to add to the box'
  nullable: true
  type: string
templates:
  label: 'Templates to be included'
  nullable: true
  type: component_sequence
  sequence:
    label: 'Template'
    type: component_template
components:
  label: 'Components to be included'
  nullable: true
  type: component_sequence
  sequence:
    label: 'Component'
    type: component_component

And here's the relevant snippet from the corresponding box component Twig template:

  {% block content %}
  {{ content }}
  {% for template in templates %}
    {{ template|raw }}
  {% endfor %}
  {% for component in components %}
    {{ component|raw }}
  {% endfor %}
  {% endblock content %}

And here's an example of feeding in the data, in this case from a sample Twig template:

{%
  set box = {
    content: 'My box content',
    components: [
      {
        component_type: 'bbutton',
        variables: {
          label: 'My button',
          size: 'is-medium',
          color: 'is-danger',
        }
      }
    ]
  }
%}
{{ include('@bulma_components/elements/box/box.html.twig', box) }}

To summarize this approach, it's:

Use a standard set of three variables, handling (a) arbitrary content such as render arrays, (b) templates to embed, and (c) other components to embed.

This kinda sorta works, but could use more though and review before anything is brought into Component Schema as a standard approach.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes