Enable adjustment of 'settings' values

[chrishall0]

Description

Fixes #94

This PR adds the feature to enable adjustment of 'settings' values in the themer editor. Suitable individual components have been built for each setting value. This could do with a review from a UI/UX point of view.

Settings are accessed using a 'settings' button to the right of each section. Settings are available site wide and for each individual block.

Each component is currently wrapped in a panel for convenience as there's a lot of options available. We can adjust this to something more suitable if required.

Screen.Recording.2024-12-18.at.12.18.06.mov

I've added in repeating functionality where required (e.g. color palettes) and the option to edit or delete any created values.

Change Log

• Adds in settings nav option
• Adds in suitable components for each setting value

Steps to test

Open up themer and and click the new settings button available next to 'Site' and each block.
Test each component and check the values can be updated with the relevant data type and saved correctly.
Test the new options are now available in the post editor.

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

[g-elwell]

@chrishall0 thanks for picking this up! It's a great start, I have a couple of initial thoughts that I'd like to run by you:

• Although valid in the schema, allowing all settings to be set on every block feels a bit overwhelming, I wonder if we should limit this for the time being and just provide a UI for the top level 'site' settings
• Some of the components have incorrect names / JSDoc comments (e.g: Settings is called Styles - I guess left over from cloning components), some are missing JSDoc comments. Could you spend a bit of time going through and checking these?
• The colour palette setting is being saved to .custom but I think this should be .theme, so that the colours we choose are available elsewhere, and also so we can edit existing theme.json colour values.

Overall it looks good, I think we'd be more refining and testing this than anything else. If we decide to limit to site settings only I hope this will make it easier to test, and we can loop Jonny in for UI/UX input once we're happy everything is working, which shouldn't take too long.

[g-elwell]

Cheers for making those changes so quickly @chrishall0

Sorry if I'm drip feeding here, just been getting to grips with things and doing some more testing...

There are a few other values which I think should be reading/saving to .theme rather than .custom so they show up properly:

• Gradient
• Duotone
• Shadow presets
• Font Families
• Font Sizes

In CodeView could we display the settings object when we navigate to the /settings panel? This will also help us see how the UI affects the settings object. It's a bit large so can be hard to see what you're editing, but better than nothing for now.

Editing spacing units seems as though it's not working correctly. Adding a value will overwrite an existing value and I'm unable to remove any of the existing values. Also, perhaps the UI should only allow specific preset values rather than free-text input.

Please can we change "Custom Settings" title to "Custom CSS" and rename component to SettingsCustomCSS to match?

Testing this with the code view in place using one of the core WordPress themes like twentytwentyfive or twentytwentyfour you can see certain values from theme.json which aren't supported. I don't necessarily think we need to support everything 100% but it could be worth documenting what is/isn't supported and we can add things if needed over time. Depends on how straightforward this is.

[chrishall0]

Missing settings:

Spacing Settings

spacingScale

    "spacingScale": {
      "theme": {
        "operator": "*",
        "increment": 1.5,
        "steps": 7,
        "mediumStep": 1.5,
        "unit": "rem"
      }
    },

spacingSizes

"spacingSizes": {
      "theme": [
        {
          "name": "Tiny",
          "size": "10px",
          "slug": "20"
        },
        {
          "name": "X-Small",
          "size": "20px",
          "slug": "30"
        },
        {
          "name": "Small",
          "size": "30px",
          "slug": "40"
        },
        {
          "name": "Regular",
          "size": "clamp(30px, 5vw, 50px)",
          "slug": "50"
        },
        {
          "name": "Large",
          "size": "clamp(30px, 7vw, 70px)",
          "slug": "60"
        },
        {
          "name": "X-Large",
          "size": "clamp(50px, 7vw, 90px)",
          "slug": "70"
        },
        {
          "name": "XX-Large",
          "size": "clamp(70px, 10vw, 140px)",
          "slug": "80"
        }
      ]
    }

Dimension Settings
aspectRatios

"aspectRatios": {
      "theme": [
        {
          "name": "Example",
          "slug": "example",
          "ratio": "16/9"
        },
      ]

I will create tickets for these missing components

[g-elwell]

This is shaping up really well @chrishall0 - I love it!

Editing colours

When editing a colour, can we also have the ability to update the name/slug?

Kapture.2025-01-09.at.14.35.42.mp4

The same goes for gradients and duotone - perhaps we could reuse the same component for both adding and editing?

Design changes

Please can we remove:

• One layer of padding/border from the site settings area so the accordion is flush to the sides of the panel
• The first item/title Site Settings as this duplicates the content above
• The first heading inside each section, as this duplicates the accordion panel title

Navigation

Would it be possible/straightforward for the navigation to the settings area to be a 'toggle' - in the sense when you click the button whilst the settings is open, it sends you back to the previous area you were editing?

Colour bugs/quirks

If you add a colour without touching the colour picker, it adds a new, blank, colour, and you can't click this to edit or delete it. Not sure if it's a bug when you try to click it, or if we should just add the colour as #000 if not interacted with, which should resolve the issue.

When a user is entering a slug, can we convert spaces to -?