Improve Content Types page layout

[hedgefield]

The visual headings structure, whitespace, and element order on the Content Types page are a bit messy. With this first design I've tried to improve the grouping and calmness:

• Grouped all the toggles per posttype together
• Reduced the whitespace between the toggles
• Increased the whitespace between the posttypes
• Tweaked the padding of the template editor

[afercia]

When a post type has archives, the UI shows additional controls. From an a11y perspective, I'd like to investigate if it's possible to differentiate the labels used for the title and description editors. Right now, they're the same for the single post and for the archive:

(on the left: Jetpack's Project post type, on the right: the Book post type from the Yoast test plugin)

It could be also a good opportunity to investigate design improvements when there are archives, a bit challenging because there are a lot of things displayed.

[hedgefield]

I agree it's a lot of stuff there which makes it hard to structure. How about SEO title for jetpack-portfolio single pages/archive pages?

[afercia]

Yeah that's an option, maybe a bit shorter ("Projects" instead of "jetpack-portfolio"?)

Also, having the "card" wrapping just the template editor like in your design above could help to distinguish the two sections visually?

[hedgefield]

Splitting it into two papers? I'd rather not do that, but we're experimenting with dividers between the sections to group things more, seems promising.

[afercia]

Ah OK sorry, from the design posted above I got the switch toggles were meant to be placed outside of the card.

[hedgefield]

Ahh yes I see now this is an older issue before we did the content types collapsible papers! Things happens so fast here :) I think we can close this then.