Apply design to Blocks form widget, add allow/ignore of entire tags, add Block configuration support

[bennothommo]

• Add "title" of block to top left corner to be able to always identify a given block.
• Remove some of the standard Repeater design to differentiate this widget a little.
• Add blue highlight to currently hovered block.
• Tighten up the spacing to provide more room for layout.
• Added ability to ignore / allow entire tags when configuring Blocks form widget.
• Incorporated Grid repeater functionality (see https://github.com/wintercms/winter/pull/926)
• Switched "context" terminology to "tags"

Before

After

[LukeTowers]

Can we leave the "expand" arrow visible when the block is collapsed? It's more accessible, especially on mobile.

[bennothommo]

This commit (https://github.com/wintercms/wn-blocks-plugin/pull/17/commits/93e2ce8450c7edda1fb815ec35890b0912bea8d0) has introduced the ability to set up configuration values for a block. This allows configuration of a block to be shown in an inspector on the top right (next to the collapse / delete icons), saving valuable real estate and allowing the fields config to set data that will actually be visible on the page.

It does introduce a breaking change in that all partial variables from the fields are now top-level variables in the Twig portion of the block (ie. instead of {{ data.title }}, it's now {{ title }} if the fields config has a title property), but I feel this is beneficial to the idea that each block is "self-contained". Configuration values are stored in a config array.

Example block:

name: Title
description: Adds a title
icon: icon-heading
context: ["content"]
fields:
    content:
        label: false
        span: full
        type: text
config:
    size:
        label: Size
        span: auto
        type: balloon-selector
        default: h2
        options:
            h1: H1
            h2: H2
            h3: H3
            h4: H4
            h5: H5
    alignment_x:
        label: Alignment
        span: auto
        type: balloon-selector
        default: center
        options:
            left: Left
            center: Centre
            right: Right
==

{% if config.size == 'h1' %}
    {% set classes = 'font-h1-mobile text-h1-mobile xl:font-h1 xl:text-h1' %}
{% elseif config.size == 'h2' %}
    {% set classes = 'font-h2-mobile text-h2-mobile xl:font-h2 xl:text-h2' %}
{% elseif config.size == 'h3' %}
    {% set classes = 'font-h3-mobile text-h3-mobile xl:font-h3 xl:text-h3' %}
{% elseif config.size == 'h4' %}
    {% set classes = 'font-h4-mobile text-h4-mobile xl:font-h4 xl:text-h4' %}
{% elseif config.size == 'h5' %}
    {% set classes = 'font-h5-mobile text-h5-mobile xl:font-h5 xl:text-h5' %}
{% endif %}

{% if config.alignment_x == 'left' %}
    {% set alignment = 'text-left' %}
{% elseif config.alignment_x == 'center' %}
    {% set alignment = 'text-center' %}
{% elseif config.alignment_x == 'right' %}
    {% set alignment = 'text-right' %}
{% endif %}

<{{ config.size }} class="{{- classes }} {{ alignment }} text-base-heading dark:text-white">
    {{ content }}
</{{ config.size }}>

[bennothommo]

Can we leave the "expand" arrow visible when the block is collapsed? It's more accessible, especially on mobile.

Done. :)

[LukeTowers]

@bennothommo looking very sexy indeed! I think we need the following now:

• [x] Document "Added ability to ignore / allow entire contexts when configuring Blocks form widget."
• [ ] Document the new "config" inspection section, how to use it, what options are available, etc
• [ ] Adjust the default blocks that are in the blocks/ folder to account for the breaking change and make use of the config functionality when able.
• [ ] If possible increase the test coverage of the plugin, especially around the new features added in this PR

Question:

Can we avoid the breaking change by making the unmodified version of all the data in a given block (i.e. even the _group & _config properties) under the data variable, thus leaving data.title still functioning while also exposing a bit more of the internals should devs want / need it for whatever reason? We should also note that those three variables are reserved names and throw a SystemException if a block tries to define any fields under fields: with the data, _group, or _config names.

[damsfx]

Repeater is really nicer!
Great job @bennothommo .

[damsfx]

@LukeTowers @bennothommo any ETA for this PR to be merged?

The new config section is highly awaited.

[bennothommo]

@damsfx hopefully soon - just gotta document it :)

[LukeTowers]

@bennothommo what's left on this?

[bennothommo]

@LukeTowers the documentation and the updating of the in-built blocks.