Block Setting Templates - Reusable block configurations

[camya]

Gutenberg blocks contain many settings. (drop cap, sizes, colors, alignment, ...)
This could result in style inconsistencies over time, if editors for example choose different settings for the same type of block.

"Block Setting Templates" could help here. These templates are packages of predefined block settings.
If the user selects the template (from a list, dropdown), all preconfigured settings are applied for the current block.

Example templates for "wp:core/paragraph" (see matching config below):

• "Important Note" - Paragraph with a drop cap, the colors are preselected to look like a yellow Post-It note. Font size: 16
• "Special Info" - Paragraph with lime background, yellow text, font size: 15
• "Beautiful Gradient" - Apply only CSS classes ".myproject-block-text .myproject-block-text-gradient" - Editing of settings disabled.

These templates can be created by the user in the frontend (button "create new template")
or programatically via configuration file. (see pseudo code config below)

Notes:

• The option to set CSS classes and prevent user modifications is helpful, if editors have to 100% follow a "Style Guide" / CI to create posts.
• Fixed CSS classes (with disabled customizable) help to prevent inline styles.

Block Setting Template config (pseudo code)

"block-setting": [
    "wp:core/paragraph": [
        "template": [
            "Important Note": {
                customizable: true, // user can overwrite all settings
    		setting: {"dropCap":true,"width":"right","textColor":"#151518","backgroundColor":"#ffff99","fontSize":16}
            },
            "Special Info": {
                customizable: {'dropCap', 'fontSize'}, // user could only overwrite these settings
    		setting: {"dropCap":false,"width":"center","textColor":"yellow","backgroundColor":"lime","fontSize":15}
            },
            "Beautiful Gradient": {
                customizable: false, // user can't overwrite any setting
    		setting: ".myproject-block-text .myproject-block-text-gradient" // hardcoded css classes
            }
        ]
    ],
    "wp:core/heading": [
        "template": []
    ]
]

This is only a suggestion and first idea. Maybe there is a better way to implement something like this.

[ChemicalSailor]

This is a brilliant idea. Gives a site admin a nice method to soft-enforce styling on other users. I think it would be best handled by the theme in the first instance. A front end to modify the theme's default block styles is probably more customiser or plugin territory.

[mtias]

Some of these are already possible — if you save in a page or post a block comment with default attributes:

<!-- wp:paragraph {"dropCap":true,"placeholder":"My placeholder text..."} -->
<p class="has-drop-cap"></p>
<!-- /wp:paragraph -->

[mtias]

Closing as we have implemented initial support for templates. Larger proposal with future plans here: #3588