Part of #20331
Implementing this would enable some interactions expressed in #26313
Kudos to @mtias @youknowriad for helping to identify the next steps for this.

What we have now

The block support mechanism allows block authors to easily make their blocks customizable via adding support for style properties: font size, color, etc.

Under the hood, this mechanism does three things:

1. Bounds UI controls to the block sidebar & toolbar.
2. Creates an implicit attribute for the block.
3. Casts the implicit attribute to some DOM characteristic of the root element of the block (a style attribute or a new class).

There are some use cases that aren't absorbed by this mechanism, including:

• social links block (color, size)
• buttons (existing div for backward compatibility)
• search block (add support for border)

The struggle boils down to the third point above: cast the implicit attribute to some DOM characteristic to the root node.

Next steps

A path to explore is allowing block authors a finer-grained control of how block supports work. We want to retain the bounding of UI controls to specific attributes so that block authors don't need to fiddle with controls and attribute flow. Hence, we'd allow declaring support in a way that the framework will handle rendering the UI and keeping the attribute in sync (1 and 2 in the list above) but the block author is responsible for casting the attribute on the right element (3).

Related to this fits into the global styles mechanism. Currently, blocks declare a single selector for all their style properties, so when theme authors do:

"styles":
  "core/paragraph": {
    "color": {
      "background": "red"
    },
    "typography": {
      "fontSize": "23px",
    }
}

this is transformed to:

p {
  background-color: red;
  font-size: 23px;
}

There are cases in which block selectors will need to be bounded to the support properties instead of bounded to the block, given that they may apply to different inner elements. If we have the selector bounded to a block support, the framework could also try to absorb the casting (3 in the list above) client-side.

Tasks

Adapt a single property and make one block use it: update how colors work in the social links block.

Framework implementation

• Skip serialization:
  • color Support skipping serialization in the color hook (block supports mechanism) #29142 @oandregal
  • style (covers all client hooks that add inline styles) Implement skip serialization for color key in style att #29253 @oandregal
  • border (server) Block Supports: Allow skipping serialization of border #30035 @ockham
  • font-size (client & server) Block Supports: Allow skipping serialization of font size #30879 @ockham
  • typography (server) Block Supports: Allow skipping serialization of typography attributes #30880 @ockham
  • spacing Block Supports: Allow skipping spacing support serialization #31973 @aaronrobertshaw
• Misc
  • Allow selectors per property, for cases in which different properties want to target different DOM elements.
  • Labels: align the ones in use by custom controls & controls generated by the hooks Inspector Controls: Rephrase, polish, and make consistent color labels. #30075
• Fix specificity
  • Fix specificity with single classes selectors Global Styles: fix specificity conflict of blocks with single classes as selectors #29378
  • Make block selectors with higher specificity than a class to work with user choices Presets selected by the user are not applied to the Post Title block #29381

Migrate these blocks & properties to the block supports system:

• Color for buttons Button block: add color support via block.json #29382 @oandregal
• Color for social links Social Links: Add color controls for the social links in a standard way #29565 (depends on Color controls: take labels from block supports #29155) @scruffian
• Color for navigation
• Color for pullquote @ramonjd Pullquote: add block support  #30951
• Color for table @aaronrobertshaw Table: Add colors block support #30791
• Border for button @ockham Button Block: Use hook based border support #30194
• Border (radius) for search button @aaronrobertshaw Search Block: Add border radius support using skip serialization feature #30227