search

helen / wp-style-guide

Still not really a real thing. Also more of a pattern library.
327 stars 34 forks source link

Inventory/catalog existing admin UI #14

Open helen opened 8 years ago

helen commented 8 years ago

Since the current operating idea is not to redesign the admin, we need to base a reusable component system on what currently exists. So what currently exists?

Possible/likely "deliverables" for a task like this:

What else might be produced? What is or isn't valuable from the above? What does this block, and is there anything blocking this?

helen commented 8 years ago

Example of an inventory: https://twitter.com/brad_frost/status/716018152513994752

0aveRyan commented 8 years ago

Started on this over the weekend, close to an MVP but not quite complete. Saw your tweet and figured I'd push up what I had. Feedback welcome!

https://github.com/dryanmedia/patterns

bueltge commented 8 years ago

Since years have this plugin similar goals, maybe a merge is helpful to create a solid solution. https://github.com/bueltge/WordPress-Admin-Style

Luciaisacomputer commented 8 years ago

Is there an official WP Trello or something similar to put all the screenshots in? Might be nice to have somewhere more visual to put all of the UI elements. Im thinking that each column could be Admin page specific, followed by a column with universal elements, and then one off items.

Update: I created one here in the mean time to compile all the admin screens - https://trello.com/b/FDjjqYbL/wordpress-ui-inventory

For now I'm taking full page screenshots of each page, then the sub-pages for those sections. I also need to add some media/comments/content to get those states as well.

helen commented 8 years ago

@dryanmedia @bueltge Thanks for those! They seem like they will come in handy eventually. For the moment, I strongly believe that a visually-driven, non-code inventory of what actually exists is the most important thing for this particular issue/task. It's not about figuring out what can be done with what exists, but rather really taking stock of what's been done in (and to) the admin. Abstracting patterns out based on existing code limits us to thinking within current and past practices, which are often not very good. I think it's also critical that non-developers have a framework within which to participate, and a focus on a functional plugin is discouraging in that regard.

@LukePettway I have no particular method in mind with regards to collation; I had not thought about using Trello that way, which seems quite clever. There's no central WP Trello (Trac is what we use for bug tracking and issue management, which is not good/terrible for visual tasks), but I've encouraged a number of people to use it to best suit their needs in a given component or focus area. I don't see why we couldn't continue on with what you've got and see how it works out.

Luciaisacomputer commented 8 years ago

@helen Thanks! I find it very useful to have a visual cascading chart for stuff like this. If you or anyone wants/needs access to this I can give out editing rights to it. I still need to go in and label stuff better but it works for now.

0aveRyan commented 8 years ago

@helen agreed, how/where are y'all planning on "taking stock"? happy to pitch in. in building that, finding a number of patterns that have very use-specific class selectors that could be generalized as these become abstract patterns (undoubtedly breaking things).

Luciaisacomputer commented 8 years ago

Well this has been a learning experience so far. I've never used Press This, so it's now included on Trello. I also found a few other pages like the filter for Themes. There really are a ton of little pages I honestly never knew existed.

I'm wondering if we take a sort of Atomic Design approach, and start slicing out from there, we can work down towards smaller and smaller UI components? There are certain "organisms" such as the media uploader that are used across all of the pages, even if it is only a link to a specific state of it.

I wonder how many other elements are tucked away in less-utilized features. Which reminds me, I didn't even consider revisions. Is that technically a page/view as it does have it's on php template.

There aren't any pages that don't exist in the admin navigation architecture but are still accessible by direct access are there?

helen commented 8 years ago

@dryanmedia I think what @LukePettway is doing with that Trello board is fantastic so far and think it's worth continuing with that. I honestly had no method in mind myself; whatever works best for the task.

@LukePettway So... there are a couple "hidden" pages I can think of, and there might be more that I'm not thinking of. There's also the world of multisite and the network admin. :)

One is the approve/spam/trash comment screen you get to from the emailed links - they look like http://wp.dev/wp-admin/comment.php?action=editcomment&c=57&action=approve.

Another is the former media library modal which some plugins still call. I don't think that should influence anything moving forward but knowing it's there so any CSS that really belongs in deprecated-media.css can be moved will probably come in handy at some point. Direct access looks something like http://wp.dev/wp-admin/media-upload.php?post_id=1&tab=library - note that it's meant to be loaded in an iframe like plugin details.

As for revisions, it has a couple different views and I know some people want to do more work on it so it's probably worth cataloguing on its own rather than grouping with, say, the edit screen. Also of consideration are help and screen options.

I think the Atomic Design approach could work here - as with all things OSS, I would also be prepared to have to shift approach. I am not personally the biggest fan of its nomenclature but if we look at how things are generally constructed in the admin it aligns well. For an example of something that's kind of constructed in a reusable way right now, take a look at the filter bar, as seen in themes, plugins, and media library (.wp-filter). Might be a good jumping off point for what works and what doesn't work for a design system.

helen commented 8 years ago

@LukePettway Oh, and if you want to add me to that Trello board, my username there is helenhousandi.

Luciaisacomputer commented 8 years ago

@helen I totally agree with you about the naming of things in Atomic Design, for now it definitely helps in thinking about how to pick pieces apart and later if we stumble across a WP-unique nomenclature that could be awesome.

I'll go through and add those pages as well that you mentioned. Do you think that email should count in our design system, or are they really external to WordPress and not worth cataloging? Aside from those hidden pages, are there any other UI elements that WordPress has, that are used by plugins? Jetpack for example has a special notification box that appears above the plugins page content area after it is installed, I'm assuming that it is simply using a hook to insert it there but much like the old media upload, is it possible there are other elements only added if a hook is used?

@dryanmedia Let me know if you need access to the Trello board, same goes for anyone else.

The next step after getting the rest of these page and vetting them one more time to ensure we have everything, would be to get the bigger elements such as upload boxes, tab boxes, menus, anything comprised of multiple elements. It might not be a bad idea to list where each of those items is located/accessed from.

Once we have all the bigger UI elements we can then start slicing out the individual components from them. Just like with the larger ones, knowing where the smaller elements come from and what pages they are on is also useful.

Luciaisacomputer commented 8 years ago

I've been slacking off on this for a bit because I'm in the process of moving. Is this still something we are actively pursuing? I do have most of the primary UI elements mapped out on Trello, just need to do the smaller pieces.