[BBT-93]: Outline UI component

Joe-Rouse commented 1 year ago

Description

Completes BBT-93 - This PR adds a reusable outline component to the plugin. The component allows you to set 4 outline properties:

Width
Offset
Colour
Style

Similar to #22, I've limited the available units you can use for width & offset as some commonly used units aren't supported (e.g. %). If an unsupported unit is used, it defaults to px.

Change Log

Added shadow component to block styles section of the plugin.

Steps to test

Add some outline styles to theme.json for one of the blocks. For example:

"styles": {
"blocks": {
"core/paragraph": {
  "outline": {
    "offset": "3px",
    "width": "3px",
    "style": "dashed",
    "color": "var(--wp--preset--color--secondary)"
    }
}
}

Check that the values you added are imported correctly by the component
Change some values & check that your changes are accurately reflected in the preview
After you've made some changes, click save & then export theme.json. Check your changes have been exported correctly into the new theme.json.

Screenshots/Videos

Checklist:

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

Joe-Rouse commented 1 year ago

@g-elwell This issue should be resolved now.

I've changed the isCssLengthUnit helper so that it can accept an optional - at the start of the string. I'm also checking the UnitControl for an empty string rather than a falsy value before defaulting it back to 0px.

I've added a min value to the width UnitControl component so that you can't add a negative value into it.

Video of negative value for offset & non-negative value for width working: http://bigbite.im/v/X82COK

Joe-Rouse commented 1 year ago

@g-elwell I've also just pushed another commit which adds i18n to the select control labels as I just noticed that was missing.

spbuckle commented 1 year ago

@Joe-Rouse @g-elwell Do you think the BorderControl component would streamline this up a bit in terms of the UI? It has an input for the width but also includes the colour palette within that.

Before

After

after after-open

g-elwell commented 1 year ago

@spbuckle I like the UI improvement, if it's straight up compatible then I'd be up for switching over, if there are any complications (I don't think there will be?) I'd push til later

Joe-Rouse commented 1 year ago

@spbuckle The only concern I have with this is that there's no prop to control the units available to select. By default you can select % as a unit but this isn't valid CSS.

bigbite / themer