[BBT-121] Manage all styles

g-elwell commented 12 months ago

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

https://github.com/bigbite/themer/assets/41474928/329cc4d4-c98c-4a94-8f54-ebcfe61beda6

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

g-elwell commented 12 months ago

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 commented 12 months ago

@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 commented 12 months ago

@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

bigbite / themer