Update global padding CSS Custom Properties to adhere to established theme.json patterns

[aurooba]

What?

This PR updates the way styles.spacing.padding properties are parsed from theme.json into CSS Custom Properties so that they adhere to the established rules on how CSS Custom Properties are generated from theme.json.

Why?

The process to set padding values in the styles.spacing section of theme.json is as follows:

  "styles": {
    "spacing": {
      "padding": {
        "top": "1rem",
        "right": "1rem",
        "bottom": "1rem",
        "left": "1rem"
      }
    }
  },

This outputs the following CSS Custom Properties:

    --wp--style--root--padding-top: 1rem;
    --wp--style--root--padding-right: 1rem;
    --wp--style--root--padding-bottom: 1rem;
    --wp--style--root--padding-left: 1rem;

However, according to the established pattern which is also documented in the Block Editor Handbook, what should actually have been generated is:

    --wp--style--root--padding--top: 1rem;
    --wp--style--root--padding--right: 1rem;
    --wp--style--root--padding--bottom: 1rem;
    --wp--style--root--padding--left: 1rem;

Because top, right, bottom, and left are keys inside the padding object. Padding effectively is the category here (to use the language of the Block Editor Handbook), and while in CSS, we are used to padding-right, padding-left etc, theme.json should adhere to its own conventions first for consistency, predictability, and a better developer experience.

How?

This is to close #49801, if accepted as the right proposal. Right now the Global Padding variables don't follow the rules set out for how the rest of theme.json properties are converted into CSS Custom Properties. This fixes that by adding a -- between padding and the key after.

Testing Instructions

1. Go to the front-end of a WordPress website
2. Inspect the CSS Code
3. See that in body the following properties are outputted:

    --wp--style--root--padding--top
    --wp--style--root--padding--right
    --wp--style--root--padding--bottom
    --wp--style--root--padding--left

Testing Instructions for Keyboard

Not applicable

Screenshots or screencast

[github-actions]

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: CSS Styling.

Read more about Type labels in Gutenberg.