Add a mechanism to use spacing presets

[fabiankaegy]

What problem does this address?

Currently in Gutenberg if a block & theme have declared support for margin/padding controls the user is presented with a spacing control that allows them to input raw CSS Unit values. This comes with two issues however:

1. Lack of consistency.
   Editors have the burden of using consistent spacing values throughout the site. They have to remember the exact value and unit they want to use for spacing across the site.

2. Lack of responsive controls
   Another issue with exposing raw values is that they are fixed and don't adjust to various breakpoints. There currently is no way of adjusting the amount of spacing you want to use depending on the viewport size besides using viewport units in CSS which can lead to very undesired outcomes.

What is your proposed solution?

There should be an option for themes to define a spacing scale similar to how themes are able to provide font sizes or colors. Instead of exposing raw values, the user can be presented with a UI that allows them to choose from a predefined list of spacing options.

CSS Frameworks like Tailwind already use this approach of spacing scales. Here is the example of the spacing scale as defined in a tailwind.config.js.

module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

The way this could work with the already existing UI of raw unit values is similar to how it works for Typography or Color options. The user first gets presented with the provided scale. They should then have an option to click a button to switch to set custom values. But the default should be choosing from a set of predefined spacing values.

[fabiankaegy]

Duplicate of #39371