[wp-trac] [WordPress Trac] #51751: Update page header design

[WordPress Trac]

#51751: Update page header design
-------------------------+-------------------------------------------------
 Reporter:               |      Owner:  (none)
  michaelarestad         |
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  General      |    Version:
 Severity:  normal       |   Keywords:  needs-design-feedback has-
  Focuses:  ui           |  screenshots
-------------------------+-------------------------------------------------
 There is [https://github.com/WordPress/block-directory/issues/19 a
 proposal to create a block directory]. With that proposal comes an idea
 for a new header pattern that could be applied to all wp-admin pages.

 Here is a sample of current page headers:

 [[Image(https://cldup.com/-DlIcKR1yF.jpg)]]

 Here is the page header pattern in the proposal:

 [[Image(https://cldup.com/e3Kj4IaYHT.jpg)]]

 The page header is made up of the following:
 * **Title** - A short title of the page.
 * **Description** - These will be both informative and inspiring. We will
 need some quality copywriting here.
 * **Actions** - These can include search fields and button actions. In the
 following prototype, it is used primarily for Search, Upload, and Add New
 actions.
 * **Help and Options buttons** - These will replace the "Screen Options"
 and "Help" tabs at the top of the pages.

 It was initially designed in the context of a Block Directory page. In an
 effort to test it out, I mocked it up on a variety of pages. I made
 [https://www.figma.com/proto/dHtjHdh8lZm0DinGKP8MmT/Block-Directory?node-
 id=1885%3A456&viewport=-3514%2C1996%2C1&scaling=min-zoom a prototype] to
 easily move between the pages in order to get a better feel for it.

 [[Image(https://cldup.com/KCiEMOq71r.gif)]]

 You can also peruse [https://cloudup.com/c-n3LZwqhsP this Cloudup gallery]
 for static images.

 In the above prototype, I made two notable changes: I made the background
 white and I increased the padding of the center column to `64px` instead
 of `20px`. The design is not contingent on these changes, but certainly
 looks nicer with them in my opinion. For the curious,
 [https://cloudup.com/cMnrdDB_SN9  here is a gallery with a grey background
 and no padding change].

 As for implementation, I hope to use some of the styles from the relevant
 Gutenberg components including the toolbar buttons. I also hope to use the
 SVG icons. It would be a good first step in aligning the styles of wp-
 admin with Gutenberg.

 What do you think?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51751>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform