WordPress Kicks Off Admin Design Overhaul with Discussion on Initial Mockups

The monumental task of overhauling WordPress’ aging admin design is coming into focus, as contributors kicked off explorations of some initial mockups this week. Gutenberg’s Phase 3 is focused on Collaboration and this admin revamp is part of that road map.

As a starting point, Automattic-sponsored product designer Saxon Fletcher published some images and videos with a design that appears to have grown out of the editor’s interface to make it a more natural part of the admin. As part of the impetus for this project, he called out plugin developers that have introduced their own admin interfaces in the interim while waiting for WordPress to prioritize this project:

“The added risk here is that plugin authors are side stepping outdated UI by introducing their own which can further fragment the WordPress experience,” he said.

Fletcher emphasized that these mockups are “broad strokes and the first of many iterations.” The structural concepts Fletcher introduced include three main areas:

  • A Sidebar for navigation
  • A Page area for the main content, management, and settings
  • A Frame representing the front-end of the site, which can be in an edit or read-only state
Frame mockup – video source: Admin Design Kickoff

“The frame can be used for previewing any type of content, including your entire site, templates, patterns etc,” Fletcher said. “Plugins can decide as to whether they benefit from having the frame in view while a task is being worked on, or hidden away. If a plugin doesn’t make use of the main content area, the frame will be in its expanded state.”

The admin bar may also be getting a makeover as part of this project, although Fletcher did not elaborate on how it might change. The admin bar doesn’t appear in any of the mockups.

“With the introduction of the frame, which represents the front-end of your site, we have an opportunity to re-think what transitioning between the front and back of your site looks like,” he said.

The initial mockups explore the idea of implementing a drill down navigation UI that can also be used to house basic content, but Fletcher acknowledged the challenges of navigating up/down the submenus more challenging. Design contributors are exploring workarounds for this, including introducing breadcrumbs or highlighting recently visited sections.

Drill down menus mockup – video source: Admin Design Kickoff

This concept for drill down navigation has received the most critical feedback in the comments of the post, as developers are concerned it will make navigation too complicated.

“Not a fan of hiding all the Admin Menus behind a maze of Breadcrumbs, also there are many complex UIs that will not convert well this idea for the menu system, the current benefit with our current menu system is that is very fast to change from one plugin to another or another area of WordPress with very few clicks,” designer Adam Pickering commented. “This proposal for the new admin menu makes that whole UX a lot more time consuming and frustrating for the user. Even if a proposal comes along where you put the previous menu item above the current position of where you are it won’t fix the issue as noted.”

Others are also concerned that the drill-down menu requires too many clicks and maybe even a popup menu on hover/long touch on mobile that pops out more options. Developer Anthony Hortin commented on how similar it is to the Customizer’s navigation:

As others have mentioned, this “drill down navigation pattern” would be incredibly frustrating to use, not only for new users, but experienced users as well. Not being able to see what options are under each menu forces the user to constantly click on each menu item, exit, click on the next menu item, exit, and so forth, until they find the screen they’re looking for. Even as someone who’s been using WordPress for 17+ years, I quite often have to hover over menus to remind myself where to find things.

This is also seen in the Customizer, which has had this style of navigation for years. When working on a new client’s site, it’s frustrating as hell trying to find options within the Customizer if they have a theme that you’re not familiar with. I would hate to see the whole Dashboard go in the same direction.

Participants in the discussion were also critical of the Frame concept for the admin, as most admin tasks don’t lend themselves to frontend previews.

“I’m most skeptical of the ‘surfaces’ approach and moving to a ‘front end first’ approach to things,” developer Jon Brown said. “Aside from theme edits, almost nothing I do in wp-admin requires or would benefit from a front-end view. If I’m managing orders on a WC site, I certainly don’t need/want to see the front end. If I’m editing plugin settings, again no front end. I get it makes sense for authoring new content, but that’s about it.”

As part of the Collaboration phase, Fletcher also proposed that the admin become more customizable for different use cases, so its navigation and system variables would make performing certain tasks more efficient for blogs, e-commerce, portfolios, and multisite, for example. He also hinted at the ability for the community to share their configurations.

“We’d like to see WordPress become a fun platform to build multiuser products on top of, more so than it already is,” he said.

WordPress developers will have a major transition ahead to make their extensions compatible with the new admin. Some individuals and teams are better positioned than others to make that step forward. Fletcher’s proposal recognizes that backwards compatibility will be an important consideration for not breaking settings pages for plugins that don’t get updated.

“Perhaps the trickiest part of this whole initiative is rolling admin changes out in a way that is iterative, doesn’t break existing workflows and encourages gradual adoption,” Fletcher said. “The site editor has given us a space to experiment, including being able to browse your site’s pages in the latest 6.3 release, and that may extend to other core admin pages like site settings, but at some point we’ll need to ‘break out’ of the editor to prevent too much duplication. We also need to support plugin pages that may never update, and do it in a way that feels seamless.”

The discussion continues and the developer community is invited to weigh in on the initial concepts and structural elements proposed in the post.


32 responses to “WordPress Kicks Off Admin Design Overhaul with Discussion on Initial Mockups”

  1. I am very worried about this; I have enough problems with the new block editor, I don’t need vast changes to the dashboard. I rely on the wp-admin page and experience that I know really well, on plug-ins that I use on multiple sites when I become familiar with them. Please take it slow and do lots of user testing with amateurs like me who do not spend most of their week on WordPress, but fit in our site maintenance between unrelated jobs, personal nonInternet projects, family, etc.

  2. I’m looking forward to a toggle between developer mode and design. Like how distraction free mode works, but switches off the live preview and replaces it with an admin panel full of quick links to various areas of WordPress. Like if the command palette was an actual palette where you can see everything, all your colours.

  3. The admin UI works really well. It’s simple, responsive, and easy to understand. It could certainly use a few tweaks like AJAX based page loading, standard notifications API, preventing plugins from attacking/modifying the layout, etc. What it doesn’t need is a complete overhaul. Don’t fix what ain’t broken. Unfortunately for us, the UI/UX designers have to mess around with things every few years in order to keep their jobs.

  4. I agree mostly with the concerns many have pitched above, certainly in the areas where drilling down is excessive and the need to have the front end visible when working with the backend settings.

    What I do like about the above videos is a little bit of the drill down. So, having just the top level with content: Pages, posts, media, CPTs, without the distraction of everything else and then sliding into more views, to see plugins and all the rest. Slide into plugins and then into each to do settings. Instead of the the front end on the right, just have big panes with settings for configuration, in context to what you are doing at the time. All this done with AJAX of course (or whatever they are calling it these days) so we don’t have to deal with interminable page loads where internet connection is slow… that does waste a lot of my time.

    And, as well as the above have a toggle to show all the back end menu for those moments when it’s good to see everything as a flat list. Best of both worlds then.

    I fear though that such logical design will ever be used or encouraged. While the new block editor is in many ways a great improvement over the classic editor, it falls down for a lot of use cases. For example a UI for post types where you can turn off the block builder content area and just have custom fields, setup specifically for controlled data entry, fronted by what ever layout template that a designer has created elsewhere.

    The way that the Gutenberg project is conceived is very much in the vein of fitting the blog use case, without much scope for other sophisticated ways of using WordPress, unless you start hacking on third party solutions.

    Let’s see what they come up with.

  5. I just watched the video—NO, no, no. Don’t make me go through multiple menus, taking up a fair amount of space, rather than a single narrow strip on the left, which holds a lot and which is familiar (and which sometimes include subitems that are easily available for browsing or use).

      • Simple is good if you care about casual end users who are going to spend the vast majority of time spent on a working WordPress site adding posts, products, events, articles, lessons, and other day-to-day tasks. Which would be around 90% of site owners. Who don’t have on-staff professionals with time on their hands to learn increasingly complex (a.k.a. “no boring”) interfaces?

      • Things should basically stay the same unless there is a compelling reason for change. Changes take work on the part of users; how many spend how much time in the WordPress dashboard, and of those with concerns, how serious are they and how frequently do they arise?
        There should be a use case made for changes, particularly those that affect function—lay out the specific problem, how the proposed solution would fix it, and what else might be affected and how (knowing that the faster the decision is made, the more likely it is that unexpected consequences will be found).
        I have been following WP Tavern for some time, but maybe have missed a lot of discussion, or not. However, there are a lot of site owners/managers who probably don’t even follow as much as I do; they will also be affected by any but superficial changes. Maybe an optional changed version, so that folks can gradually work their way in, as in the change from classic to block themes?

    • It worked for me with posts; I used Classic Post plug-in while I got used to blocks; eventually, was ready to make the switch to working directly in blocks. I also had the Classic Editor as the default for a while, switching to Block Editor until I was ready to use the Block Editor as the default.

  6. What happened to “never change a running system”? WP still has so many in-built problems from the beginning that will probably never get fixes, but the team keeps revamping the interface. For customers I always install a plugin with which I break down the author’s backend to the minimum they need as easily spottable as possible. Making users have to drill down contextual menus is bad UX design. They need to always see all their limited options at a glance in order not to feel puzzled and overwhelmed. To make that a core functionality would make sense to me.

    This update will also result in a lot more of abandoned plugins, too (as if there aren’t enough already), but e.g. to address the questions why on earth that happens so often doesn’t even come up. If the plugins I use to change the user interface will be abandoned, because they‘d have to be built new from the ground up, I dunno how to tell the users they have to learn a new interface and processes, just because the WP team felt enthusiastic and self-absorbed enough about their work, so they broke their product for the existing user base.

    The core flaws I mentioned are: a robust staging / moving process is missing, educated guesses about url structure (category and page), bad handling of umlauts in slugs, relying on the server’s php mail setup instead of using smtp, monitoring core file and directory integrity, exposing vital info for hacker bots by default and so on.

    There’s still so many third party plugins to install or code to add to theme functions, just to get a decent and robust WP install. But again the main concern is about aesthetics and just as the ever changing Gutenborg interface it will frustrate and possibly lose existing users on the way.

    Just 2 cents from a guy who sets up WordPress for the usual guy who doesn’t live entirely online.

  7. As a long time and avid user of the old-school text editor system in WP and not a fan of the block system at all (though I do use some 3rd party block builders for certain tasks/pages/posts, but NEVER for frond end site building) I hate the idea of this madness taking over the admin.

    The thought of them chaging the backend / admin to a frontend facing and dumbed down web 3.x style is concerning. The current admin while slightly clunk and at time overwealming to new users, is actually helpful and, once learned, very efficient at carrying out admin tasts.

    Changes would add a new learning curve, hide commonly used functions behide mutiple clicks,a nd IMO less the usefullness of the admin.
    If you want to do somthing, fix minor features we’ve been wanting in the current admin.. like letting us move around the menu headers/items as we need, dark and light modes, and so on..

    I don’t need to see my site’s frontend when I’m updating or adding a new plugin, checking analytics or other daily admins tasks.. You also don’t build your site design every time you edit somthing (another reason I think the block etitor for front end design is stupid) Youbuild it once via template of the block editor and hopefully lock it down..

    TLDR: This is a bad idea

  8. It’s staggering that collaboration would be the #1 task on the core team’s roadmap. 90% plus of WordPress websites are single-owner, and for those that aren’t, WordPress is still very good about letting multiple people work on the site. The only limit is individual post or page creation. But, again, just how many users are really screaming to be able to edit posts concurrently?

    As for plugin developers who create their own interfaces, the biggest offender by far is the Blocks Editor team, which has a completely non-standard interface and actively hides the dashboard. (Hint: overloading the “About WordPress” icon in the top-left corner of the block editor to exit to the dashboard is creating your own interface. With a vengance.)

  9. Redesigning just because is a terrible idea. WP Admin works very well for me. Redesigning it to make it work better is good. Redesigning it just to make it pretty is a waste of time. WP Admin needs to be functional and easy to use.
    And please don’t force dark mode onto those of us who can’t read white text on black backgrounds. For some of us it strains our eyes and gives us headaches.
    If something works well, there is no need to change it. If it isn’t broken don’t fix it is always true. And the other rule to follow is to keep it simple. And don’t put twenty year olds in charge of this. You need seasoned old programmers in their 50s, 60s, and 70s, who have decades of wisdom to know not to add fluff to an area that needs to function. Young programmers are too captivated by shiny things and ignore the serious things that need to be done.

    • Experience is important, both in programmers and in long-time users who still might not do any coding, but spend a lot of time on wp-admin. Yes, I love the enthusiasm of young developers, and certainly their ideas should be heard and given thorough evaluation, but a lot of user feedback is needed before any drastic changes, which are hard to work within.
      As a long-time classic-theme user, I started using block themes (or block-friendly classic themes) with the classic post plug-in; gradually, blocks felt more comfortable and I switched to a block-based theme when I upgraded to PHP 8 on one site—but am only now thinking about creating a theme part, or a page template.

    • I totally agree. A simple way to improve the current admin UI is installing the plugin “W2O Admin Dropdown Menu” which relocates the admin menu from left side/vertically to top of the screen/horizontally. I find this much more convenient since most programmes I use have horizontal menus with sub menues dropping down when needed. Yes, this simple plugin is five years old, but it still works like a charm. Try it out!

  10. There is an opportunity here while redesigning the admin to also make it smarter. Much smarter.

    In a new install, the priority should be those basic but important settings such as language, time zone, permalinks etc. After the site’s been running a while, these settings are not going to be edited on a daily basis.

    WordPress has so many uses that one admin layout makes no sense, regardless of design and whether that design is “aging” or “modern”. A daily blogger has very different needs to that of a shop manager who mainly processes customer orders.

    Could the new admin be developed so that it can learn what the user needs and wants from it, and adapt to those needs?

    • I have to say that I would hate a UI that thought that it knew what I needed better than I do, and tried to take away or move things around.

      We learn where things are in an admin UI almost like muscle memory. I can hardly think of a worse change than to build in a constant reshuffling or moving around of stuff 🙂

      • Just thinking out loud really. To be clear I wasn’t thinking of constant reshuffling or moving stuff around, as that sounds more like a random layout, and nothing would be taken away, just given a lower priority when the user has no need for a particular item. All opt-in of course so those who like things just so would be happy.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: