[BBT-7] and [BBT-89] Convert CSS vars to work with hex value and create UI component for color

[spbuckle]

Description

BBT-7 and BBT-89

BBT-7

I've taken what @balw had done in the now closed PR (#14) and adapted it to fit the current state of the plugin. It's wasn't needed to add the theme palette as a localised script so that part has been removed. Two helpers have been added varToHex and hexToVar.

varToHex

By passing through a css variable name (that's been set in the standardised theme.json theme palette) and the palette itself, the helper will find the corresponding hex value from the theme palette. If the string is already a hex it returns the hex back. If the css variable is not found the original value is returned.

hexToVar

By passing through a hex value and the palette itself, the helper will find the corresponding css variable name from the theme palette. If the string is not a hex value it returns the string back. If value is not found in the theme palette the original value is returned.

BBT-89

I've added a Color component for the color attribute. This PR also renames anywhere colour (with a "u") is referenced as I think it's best to keep it consistent the code. This uses the WordPress component ColorPalette which means a user can select any colour but also select a colour from the themes registered palette. If a colour is chosen from the palette the css variable is stored so that if the palette colour is changed it will be reflected here. If a custom colour is chosen the hex value is stored.

Misc

In the preview I've changed the core/heading to level: 1 (h1) as that's what a post title would be. For the preview i've also added the class has-global-padding. This is present in the main block editor and adds left and right padding to the previews.

Renamed the variable color to themePalette in the Border component, this reflects the same in the Color component and better represents what the variable is.

Changed the padding on themer--blocks-item-component--styles so that the style controls aren't indented and have a bit more space top and bottom. I just think it looks a bit tidier for now.

Added some themer--blocks-item-component specific column styles so that we can put the style controls into columns. There is a themer--blocks-item-component--columns class and then a .themer--blocks-item-component--columns-2 class to use when 2 columns are needed. I've added a container query to drop 2 columns to 1 at a certain container size.

Change Log

• Adds varToHex, hexToVar and isHex helpers.
• Renames references of Colour/colour to Color/color for consistency.
• Adds Color component.
• Tweaks to the css in the preview.
• Adds column classes for themer--blocks-item-component.

Steps to test

• Add color attributes into your theme.json and example would be the following in { "styles": { "blocks": {} } }:

"core/paragraph": {
  "color": {
    "background": "var(--wp--preset--color--base)",
    "text": "var(--wp--preset--color--contrast)"
  }
}

• Try and change the color attributes and check they save correctly.
• Save a palette color and check the css variable is saved by exporting the theme.json.
• Save a custom color and check the hex value is saved by exporting the theme.json.

Screenshots/Videos

Screenshot: UI

Video: Demo
http://bigbite.im/v/3w2DPH

Video: Showing correct value is saved
http://bigbite.im/v/Z7DAkh

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[chrishall0]

Works great 🎉