Add `oik-block/blockstyles` block to display information about a block's styling

[bobbingwide]

With Full Site Editing coming along soon, a block's CSS styling may be defined using theme.json and the block's block.json file. As I understand it, the theme can override the block's default styling by using theme.json And I imagine other code can override the block's styling during registration.

But how can you tell, in advance from the front end, how the block's settings and styling are defined?

The block.json file defines the default supports and the names of the style files for the block: editor and front end.

eg for the cover block

"supports": {
        "anchor": true,
        "align": true,
        "html": false,
        "spacing": {
            "padding": true
        },
        "color": {
            "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
            "text": false,
            "background": false
        }
    },
    "editorStyle": "wp-block-cover-editor",
    "style": "wp-block-cover"

There are sections in theme.json which define settings, which I believe are similar to supports, and others which define the styles. The settings may or may not trump the block's supports values and the styles define the allowed values for the theme.

Requirement

• Display settings and styling information for chosen selected block in the front end.

Proposed solution

• [ ] TBC