[BBT-121] Manage all styles

[g-elwell]

Description

Fixes BBT-121 - Allows the addition and editing of style attributes even when they are not present in the original theme.json file

This PR builds on previous work on style components, and simply removes their conditional rendering so that they are always present on every block/element/pseudo-element.

There were a few adjustments to be made to accommodate undefined variables, but once addressed the components work as expected, allowing users to save and edit styles.

Change Log

• Unconditionally render all style components
• Fix undefined variable errors
• In StylesColor - render colour pickers for "background" and "text" rather than checking for presence in the theme

Steps to test

• Load themer with a blank theme.json file (may need to contain {})
• Add and edit styles of various types across multiple blocks/elements
• Attempt to save styles, export theme.json, reset styles, etc.
• If any crashes are experienced, please share console logs
• Note that interactive styles (eg hover, focus) will not be visible unless you remove the inert attribute from the preview container (see video)

Screenshots/Videos

Screen.Capture.on.2023-12-04.at.14-53-30.mov

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

[Joe-Rouse]

Found an issue with both the padding (shown below) and margin controls on blocks without existing padding/margin styles:

Screen.Recording.2023-12-04.at.16.19.17.mov

[Joe-Rouse]

Found an issue where you can't change the font appearance to anything but default/regular/regular italic:

Screen.Recording.2023-12-04.at.16.21.49.mov

[g-elwell]

Thanks @Joe-Rouse - I've fixed both of those issues now and re-checked all inputs, nothing else is coming up for me.

The padding/margin one was similar to the previous issues, I had just missed it.

The font updating one was a little different, perhaps it wasn't showing up until this refactor, but we were attempting to update the config object twice during the same action which caused only one of the values to update. Refactoring the onChange handler to accept an object rather than a value and a single key prevents this, and with hindsight may be a better approach overall.

[Joe-Rouse]

@g-elwell Looks pretty good to me now. One thing I was wondering before approving though, do you know why some of these blocks aren't greyed out even when using an empty theme.json ({})?

I only get it on those two and the columns block.

[g-elwell]

@g-elwell Looks pretty good to me now. One thing I was wondering before approving though, do you know why some of these blocks aren't greyed out even when using an empty theme.json ({})?

I only get it on those two and the columns block.

Yeah, it looks as though WP hard-codes some base styles even when the theme theme.json file is empty.

https://github.com/WordPress/wordpress-develop/blob/f2c05952c07bf8860a49211854479a5e478069d2/src/wp-includes/class-wp-theme-json-resolver.php#L153

Core theme.json is here: https://github.com/WordPress/wordpress-develop/blob/6.4/src/wp-includes/theme.json

[Joe-Rouse]

Looks good to me. Tested where I can and I can't make it crash anymore. Other features like the theme.json exporter/, reset etc. all still work as expected.