New UI for the settings page of the dashboard

[xavortm]

The dashboard settings page is very basic looking - build using simple table markup and has almost zero stylings applied. I would like to suggest a change to this, where new visual elements and better organization is added to the page. Meaning - better separation between different components, description, larger click area/input fields, validation of the input fields and so on.

In short - bring the settings pages to more modern look. It won't add new features to it, so the users won't be required to make choices but instead it will make the general experience of the page better.

I am attaching sample mockup/idea screenshot I had on top of which I can work more based on the feedback and if this is needed in the first place. Any input regarding is welcome.

---

Here is the screenshot:

The validation is there to show how it can look, not that I focus on this. Honestly, I believe while it would be awesome it's not of very high priority to have it.

Another thing I want to comment about the design - the tabs on top are also only an idea, I can see how they can be a problem instead of a solution, so thoughts regarding this is also welcome. It's there just to show it visually

[desrosj]

Thanks for this ticket, @xavortm!

I am going to mark this as needs-design-feedbac.

[xavortm]

Now that I revisit this ticket, I think that the first design suggestion is a bit naive. + now we have the site health which does look nice and clean! :)

Which got me to think that there's no reason to add a whole new design look and feel for the settings, instead we can just reuse what is already set in the site health tab. Add the tabs for Settings and then we can output the very same HTML that works on the settings pages now.

The benefits:

• No need to change markup, functions etc. It's backwards compatible with all themes and plugins that hook somewhere in the settings
• It's the same as the new site health check, so it's consistent with the dashboard as a whole

Quick note though - My thoughts about the markup improvements that can be applied remains. I think that the tables and all looks kinda... outdated, but if the markup is changed, then plugin stylings and all could be broken. Not 100% what is the best approach for this.

[estelaris]

@xavortm you would like to review the work done by @melchoyce in the Block Library. It will have a similar header as Health Check

​https://make.wordpress.org/design/2019/07/11/block-directory-in-wp-admin-concepts/

[xavortm]

Thanks @estelaris! I checked it and it helped me a lot, including the comments. Only problem with it I have is that it does not follow the layout of the already existing site health check, which creates inconsistency

Posting one more way to do the settings, which was inspired from GitLab blog post on the redesign of their settings page - to add the most used options at the top and then all the rest inside tabs. Technically, this is used when there are more settings to define.

but this approach is helping in the way that WP Settings can offer more options, while keeping the UI simple - what most users use is on the top and all other more advanced settings are one click away.

Honestly my concern is backward compatibility here...

But for another positive note, this would be a good place to add a notice that visual settings can be altered from the customizer, not the WP Options page :) The text under the settings should be able to hold these URLs