Implements #33977

I'd like feedback on the direction. Should we want to pursue this, I'd improve the implementation later.

This PR experiments with moving parts of the CSS of the block to its block.json so it can be used to be merged with theme.json styles. The result of the merging will be (later in the chain overwrites the previous):

block > core's theme.json > theme's theme.json > user styles coming from the global styles sidebar

There're a few advantages to this approach:

• Block styles become easily configurable by the themes (via theme.json).
• We ship either block or theme styles, but not both.

I've noticed that many of the block styles are attached to classes (has-background, style variations, etc) so I presume, initially, we won't see a big reduction of CSS. It'll be a good first step to absorb more later (e.g.: block variations).

How to test

• Use the empty theme.
• Verify that the global-styles-inline-css embedded stylesheet in the frontend contains the following CSS coming from the block.json:

.wp-block-button__link {
  background-color: #32373c;
  color: #fff;
  font-size: 1.125em;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
}

• Add the following to the theme.json of the theme:

"styles": {
  "blocks": {
    "core/button": {
      "color": {
        "text": "#000",
        "background": "#fff"
      }
    }
  }
}

• Verify that the global-styles-inline-css embedded stylesheet in the frontend contains the following CSS (colors come from the theme now):

.wp-block-button__link {
  background-color: #fff;
  color: #000;
  font-size: 1.125em;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
}