Redesigned Contributor Handbooks

Hello Docs Team!

I just landed a new design for the contributor handbooks, courtesy @sonjanyc (mockup is here). You can see them on the core, mobile, docs, and polyglot handbooks, among others. The design is still a little rough around the edges, but the bulk of it is there. Namely, here’s some issues I’ve noticed:

  • There’s a hover for headings in chapters box
  • Content doesn’t properly wrap around the “topics” box
  • We need to add a handbook name to each handbook, along with a design (#439)
  • The “Watch this page” widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. needs to move to be in the actions bar (#437)
  • In the polyglots handbook, for admins, “Flag Unresolved” is shown (#436)

Last but not least, I need a decision from y’all.

Currently, we list all hierarchal subpages on the page they’re from. For example, in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. handbook, on the Coding Standards page, we show the subpages as a (undesigned) list. The decision we need made is whether to keep that list and design it or to remove the list entirely. Keep in mind the Chapters sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. can be organized however you’d like; it doesn’t need to be hierarchal. If we remove the Pages list, we’ll need to make sure the content is properly linked within the page.

What say you?


Other things I should mention are that we should document these things somewhere:

  • The starting headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. tag in any page should be an <h2> to keep the topics box designed. (I went through and fixed this on the core and mobile handbooks.)
  • The Chapters sidebar is a custom menu and can be organized however you like.
  • Currently, the headings in the Chapters sidebar are merely re-styled <a> tags with # as the href. We’ll probably be changing this, however.

Finally, please note that this design is only for the contributor handbooks. The developer handbooks will have a style that matches devhub.