{"id":1055,"date":"2024-07-07T07:11:51","date_gmt":"2024-07-07T07:11:51","guid":{"rendered":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/07\/07\/wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community-wp-tavern\/"},"modified":"2024-07-07T07:11:51","modified_gmt":"2024-07-07T07:11:51","slug":"wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community-wp-tavern","status":"publish","type":"post","link":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/07\/07\/wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community-wp-tavern\/","title":{"rendered":"WordPress Plans Ambitious Admin UI Revamp with Design System, Galvanizing Broad Support from the Developer Community &#8211; WP Tavern"},"content":{"rendered":"<p>Sarah Gooding<br \/>WordPress&#8217; admin is on deck for a long-awaited makeover after Gutenberg lead architect Mat\u00edas Ventura published <a href=\"https:\/\/make.wordpress.org\/core\/2023\/07\/12\/admin-design\/\">plans for a revamped admin design<\/a> as part of the Phase 3: Collaboration road map.<br \/>&#8220;As WordPress turns twenty years old, the overall aim of this work is to improve upon this experience at a foundational design level, giving plugins and users more control over the navigation while ensuring each WordPress experience is recognizable, intuitive, accessible, and delightful,&#8221; Ventura said.<br \/>His post is a follow-up to some <a href=\"https:\/\/make.wordpress.org\/design\/2022\/06\/13\/thinking-through-the-wordpress-admin-experience\/\">earlier admin concepts<\/a> he published a year ago which evolves the admin towards more fluid browsing and editing flows. This is similar to the block editor design that positions the admin frame as a shell that wraps around a canvas that contains the content in a zoomed state. Instead of users clicking back to access navigation tools, the tools remain present but outside of the canvas view.<br \/>Although contributors have not yet officially produced any designs for the project, Ventura shared a light version of an admin concept.<br \/>One aspect of the proposed plans that has energized the developer community is the prospect of the admin getting rebuilt with an extensible design system.<br \/>&#8220;This effort is also an opportunity to formalize the design primitives and interaction paradigms that are part of the\u00a0UI\u00a0component system begun in\u00a0<code>wordpress\/components<\/code>,&#8221; Ventura said. <br \/>&#8220;A crucial aspect is to ensure WordPress itself is built with the same pieces and APIs that plugin authors can use. Aside from color themes, our set of primitive components also need to work in dense environments like the editor, as well as environments that need more breathing room and focus like admin sections. Density, clarity, usability, and\u00a0accessibility\u00a0are paramount.&#8221;<br \/>The admin design concepts have renewed developers&#8217; excitement about the future of WordPress, but they are also hoping this revamp will solve several long-standing problems with the interface.<br \/>One recurring theme in the feedback was the need to find a way to <a href=\"https:\/\/make.wordpress.org\/core\/2023\/07\/12\/admin-design\/#comment-45084\">curb the pollution of top-level menus<\/a> and the out of control admin notices, which are hijacked by plugin developers in the absence of <a href=\"https:\/\/wptavern.com\/wp-feature-notifications-project-progresses-towards-mvp-for-standardizing-admin-notifications\">a standard notification system<\/a>.<br \/>&#8220;It\u2019s really about aligning APIs, ensuring we have semantic descriptions of capabilities, and offering the right levels of controls for both plugins and users,&#8221; Ventura said.<br \/>&#8220;I know it\u2019s a fairly limited example, but there\u2019s a nice balance in the ability to pin or unpin\u00a0plugin\u00a0sidebars on the editor, from the perspective that plugins can be opinionated, and users can still interact with those opinions.&#8221;<br \/>Another challenge that concerns developers is ensuring the new design adequately accommodates WordPress sites with large numbers of posts, pages, categories, menus, comments, and other things that can easily overwhelm a UI that was intended to be simplified.<br \/>&#8220;As part of leveraging the components across the admin interface, we need to address functional gaps (like table and list views, bulk editing operations, etc) and assist plugin needs for anything that might not be already addressed that should be addressed,&#8221; Ventura said. &#8220;Ultimately, the design library needs to be showcased in the\u00a0wordpress.org\u00a0website as a clear resource for people building upon WordPress.&#8221;<br \/>Developers who participated in the comments were optimistic about the project and reacted positively to the concepts Ventura shared.<br \/>&#8220;I often say, white space is where the magic happens,&#8221; WordPress designer and developer Brian Gardner said.<br \/>&#8220;The light\u00a0admin\u00a0concept is breathtaking and gets me even more excited than I am now about the future of WordPress.&#8221; <br \/>Several developers commented on how eagerly they are awaiting an update to a modern UI that reduces the number of page refreshes.<br \/>&#8220;Wow! It\u2019s gonna be amazing!&#8221; WPMarmite founder Alex Borto said. &#8220;A complete\u00a0admin\u00a0fluid browsing experience is much needed. I dream of navigating through the admin area without any page loads!&#8221;<br \/>For years, WordPress developers have been expected to try to match WordPress&#8217; dated admin UI on their settings pages and the Yoast SEO plugin drew criticism when it <a href=\"https:\/\/wptavern.com\/yoast-seo-20-0-introduces-new-admin-interface\">released version 20.0<\/a> with a new modern interface. Many users are\u00a0<a href=\"https:\/\/twitter.com\/DerekAshauer\/status\/1617905808293113857\">not keen<\/a>\u00a0on plugins\u00a0<a href=\"https:\/\/twitter.com\/IdeaG\/status\/1617944840611987458\">building their own UI in the admin<\/a>, as it can make things more confusing. Having a standard set of UI components would make things easier for developers who are extending WordPress.<br \/>&#8220;This gives me great optimism about securing the next 20 years of WordPress\u2019s success,&#8221; WordPress developer Mike McAlister said. &#8220;The fact that you can do\u00a0<em>anything<\/em>\u00a0with WordPress is incredible, it\u2019s probably our biggest strength.<br \/>&#8220;But without standardized design patterns for the\u00a0admin, we\u2019ve seen that devolve into a\u00a0UI\/UX\u00a0headache with\u00a0plugin\u00a0and theme developers baking their own experiences inside WordPress. Reining this in and creating a unified experience for everyone to buy into will not only make it easier on product creators, it will also be a huge win for users.&#8221;<br \/>Ventura said this document is just an outline of the admin design project and that it will be followed up with more in-depth design explorations further down the road.<br \/>SHARE THIS:<br \/>LIKE THIS<br \/>It&#8217;s going to be something like:<br \/>&#8220;Oh, you don&#8217;t like the block editor&#8217;s interface? No problem, we&#8217;ll push it even more in-your-face by applying the same treatment to the admin area.&#8221;<br \/>If they want to do something to the admin area, let them change some fonts, change some colours, but if it&#8217;s not broken, why change it?<br \/>This is an exciting perspective. The admin panel looks a bit outdated when compared to some other popular solutions. However, I can only imagine the amount of work that needs to be poured into this modernization to make all the components work together. Looking forward to the changes.<br \/>Given as how I\u2019m using Classic Widgets and Classic Editor, I hope there will be a plugin to keep this classic as well. I have to pass the websites I build on to a possibly not tech savvy customer to update content, and I\u2019ve yet to give them anything with Gutenberg features because it is so much more busy and clunky than the original WordPress layout. I can\u2019t just think as a developer when I build a site. I have to think like an end user.<br \/>You might have to look at Classic Press soon as I don&#8217;t think this revamp will have a &#8220;classic&#8221; mode..<br \/>I really hope they do not ruin the WordPress experience. I need the robustness of WordPress but with a simple enough interface for my clients. I use Admin Menu Editor to remove things for certain roles, and I hope I will still be able to do that. Sometimes too many bells and whistles are not what are needed. WordPress doesn&#8217;t need to be flashy. It needs to be usable. I just think people should have the option of whether to use Gutenburg features or things that divert radically from the classic framework of WordPress.<br \/>I don\u2019t think this update is just bells and whistles. They are literally discussing a customizable sidebar, which reduces the need to install a plugin just to do just that.<br \/> By the way, Gutenberg is just a name for a project that aims to modernize the WordPress core. In other words, it is the core. If I remember correctly, they don\u2019t want to provide support for \u201cclassic features\u201d after 2024.<br \/>That would be extremely detrimental to my business. I hope that does not happen.<br \/>There&#8217;s still a lot to account for, but for what it&#8217;s worth, the Customizer is still around \u2014\u00a0even though the Site Editor is a far more capable experience.<br \/>I don&#8217;t foresee a future WordPress admin experience that breaks the existing flows, but perhaps provides a more capable and unified approach for those who want to use it.<br \/>While I do love the idea of seeing an updated WordPress Admin UI, I am afraid not to see the whole experience get ruined. They need to take their time and make sure they give the option to keep (for whoever wants) the classic UI. Having all options available is what makes WordPress a great platform.<br \/>If gutenthing is any indication i can\u2019t wait for a Classic Admin plugin to be the most installed ever.<br \/>That\u2019s what I\u2019m saying. I will be the first to download on all the sites I use.<br \/>Nah. I don\u2019t think so. Classic Editor has 5+ million active installations, while Classic Widget just have 2+ million active installations. I suspect the new plugin you mentioned will have 1+ million active installations. Whatever the case, it won\u2019t be the most installed plugin ever.<br \/>Please don\u2019t screw WordPress up by thinking you can make it better and ending past design and usage processes.<br \/>I am hoping this, too. I have been using it for a decade in my business, and making drastic changes with no option for legacy usage would be a disaster for me and my clients.<br \/>Will this new look and feel accessible according the ATAG?<br \/>Before I found someone to show me the Classic workaround, I was sure I had to give up blogging on WP, which I have been doing since 2010.  I found the Gutenberg non-instinctive, though some folks swear by it. It took me twice as long to compose.<br \/>Please keep Classic Widgets and Classic Editor. Plugin download page says: \u201cwill be fully supported and maintained until 2024, or as long as is necessary\u201d. Well, it IS necessary. \ud83d\ude42<br \/>this is really a piece of exciting news. users can now bank on stand-alone WordPress sites with admin ability to tweak certain aspects of the design without the help of some bloated script from plugins<br \/>Here&#8217;s a wild thought: In lieu of switching out the admin and then providing a &#8220;classic admin&#8221; plugin, just provide a new fancy admin plugin.<br \/>Then track how many site admins actually choose to activate it.<br \/>I\u2019m a designer and recently moved back to using WordPress after many years of not using it, the UI being the same was good in a familiar way, but it feels slightly clunky by today\u2019s standards. I\u2019m really excited to use the redesigned interface.<br \/>Without any doubt, WordPress Admin UI needs to be redesigned. It would be nice if the option to continue to keep using the older version of the admin panel at least for a limited period of time. Just a thought.<br \/>Good Luck to the team working on the WordPress Admin UI. Looking forward to the changes to WordPress Admin UI.<br \/>Yet again, WordPress developers excited to do things that are exciting for developers.<br \/>Meanwhile, WordPress gets worse and worse for end users.<br \/> The only reason I use it is because it&#8217;s the incumbent.<br \/>Developers should not be allowed to make decisions without adult supervision.<br \/>I just saw a new customer who already had WO installed and was completely puzzled about Editor UI. He literally sighed in relief when I informed him about the Classic Editor plugin.<br \/>Inho the WP dev team has completely lost contact to the average  users, \u201ajust start blogging\u2018 and simplicity are far from a constantly changing (aka contextual) UI.<br \/>I feel this so much. I try to keep reiterating that WP needs to work for the user, not just the developer.<br \/>Enter your email address to subscribe to this blog and receive notifications of new posts by email.<br \/> \t\t\t\t\t\t\t<label \t\t\t\t\t\t\t\tid=\"subscribe-field-2-label\" \t\t\t\t\t\t\t\tfor=\"subscribe-field-2\" \t\t\t\t\t\t\t\tclass=\"screen-reader-text\" \t\t\t\t\t\t\t> \t\t\t\t\t\t\t\tEmail Address\t\t\t\t\t\t\t<\/label> \t\t\t\t\t\t\t<input \t\t\t\t\t\t\t\t\trequired=\"required\" \t\t\t\t\t\t\t\t\ttype=\"email\" \t\t\t\t\t\t\t\t\tname=\"email\" \t\t\t\t\t\t\t\t\tclass=\"no-border-radius has-20px-font-size has-#d8d8d8-border-color\" \t\t\t\t\t\t\t\t\tstyle=\"font-size: 20px;padding: 15px 23px 15px 23px;border-color: #d8d8d8;border-radius: 0px;border-width: 1px;border-color: #d8d8d8; border-style: solid;\" \t\t\t\t\t\t\t\t\tplaceholder=\"Email Address\" \t\t\t\t\t\t\t\t\tvalue=\"\" \t\t\t\t\t\t\t\t\tid=\"subscribe-field-2\" \t\t\t\t\t\t\t\t\ttitle=\"Please fill in this field.\" \t\t\t\t\t\t\t\t\/>\t\t\t\t\t\t<br \/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"action\" value=\"subscribe\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"blog_id\" value=\"9006382\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"source\" value=\"https:\/\/wptavern.com\/wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"sub-type\" value=\"subscribe-block\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"app_source\" value=\"\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"redirect_fragment\" value=\"subscribe-blog-2\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"lang\" value=\"en_US\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" id=\"_wpnonce\" name=\"_wpnonce\" value=\"685e16bbde\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community\" \/><input type=\"hidden\" name=\"post_id\" value=\"146844\"\/>\t\t\t\t\t\t\t<button type=\"submit\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"wp-block-button__link no-border-radius has-20px-font-size has-#d8d8d8-border-color\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle=\"width: 100%;font-size: 20px;padding: 15px 23px 15px 23px;margin: 0; margin-left: 0px;border-color: #d8d8d8;border-radius: 0px;border-width: 1px;border-color: #d8d8d8; border-style: solid;\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"jetpack_subscriptions_widget\" \t\t\t\t\t\t\t> \t\t\t\t\t\t\t\tSubmit\t\t\t\t\t\t\t<\/button> \t\t\t\t\t\t<br \/>WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem\u2026<br \/>\u00a9 All Rights Reserved. Powered by <a href=\"https:\/\/wordpress.org\">WordPress<\/a>, hosted by <a href=\"http:\/\/pressable.com\/?utm_source=Automattic&amp;utm_medium=rpc&amp;utm_campaign=Concierge%20Referral&amp;utm_term=concierge\">Pressable<\/a> <br \/>Subscribe now to keep reading and get access to the full archive.<br \/> \t\t\t\t\t\t\t<label \t\t\t\t\t\t\t\tid=\"subscribe-field-3-label\" \t\t\t\t\t\t\t\tfor=\"subscribe-field-3\" \t\t\t\t\t\t\t\tclass=\"screen-reader-text\" \t\t\t\t\t\t\t> \t\t\t\t\t\t\t\tType your email\u2026\t\t\t\t\t\t\t<\/label> \t\t\t\t\t\t\t<input \t\t\t\t\t\t\t\t\trequired=\"required\" \t\t\t\t\t\t\t\t\ttype=\"email\" \t\t\t\t\t\t\t\t\tname=\"email\" \t\t\t\t\t\t\t\t\t \t\t\t\t\t\t\t\t\tstyle=\"font-size: 16px;padding: 15px 23px 15px 23px;border-radius: 50px;border-width: 1px;\" \t\t\t\t\t\t\t\t\tplaceholder=\"Type your email\u2026\" \t\t\t\t\t\t\t\t\tvalue=\"\" \t\t\t\t\t\t\t\t\tid=\"subscribe-field-3\" \t\t\t\t\t\t\t\t\ttitle=\"Please fill in this field.\" \t\t\t\t\t\t\t\t\/>\t\t\t\t\t\t<br \/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"action\" value=\"subscribe\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"blog_id\" value=\"9006382\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"source\" value=\"https:\/\/wptavern.com\/wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"sub-type\" value=\"subscribe-block\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"app_source\" value=\"\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"redirect_fragment\" value=\"subscribe-blog-3\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" name=\"lang\" value=\"en_US\"\/> \t\t\t\t\t\t\t<input type=\"hidden\" id=\"_wpnonce\" name=\"_wpnonce\" value=\"685e16bbde\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/wordpress-plans-ambitious-admin-ui-revamp-with-design-system-galvanizing-broad-support-from-the-developer-community\" \/><input type=\"hidden\" name=\"post_id\" value=\"146844\"\/>\t\t\t\t\t\t\t<button type=\"submit\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"wp-block-button__link\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle=\"font-size: 16px;padding: 15px 23px 15px 23px;margin: 0; margin-left: 10px;border-radius: 50px;border-width: 1px;\" \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"jetpack_subscriptions_widget\" \t\t\t\t\t\t\t> \t\t\t\t\t\t\t\tSubscribe\t\t\t\t\t\t\t<\/button> \t\t\t\t\t\t<br \/><a href=\"#\">Continue reading<\/a><\/p>\n<p><a href=\"https:\/\/news.google.com\/rss\/articles\/CBMiiAFodHRwczovL3dwdGF2ZXJuLmNvbS93b3JkcHJlc3MtcGxhbnMtYW1iaXRpb3VzLWFkbWluLXVpLXJldmFtcC13aXRoLWRlc2lnbi1zeXN0ZW0tZ2FsdmFuaXppbmctYnJvYWQtc3VwcG9ydC1mcm9tLXRoZS1kZXZlbG9wZXItY29tbXVuaXR50gEA?oc=5\">source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sarah GoodingWordPress&#8217; admin is on deck for a long-awaited makeover after Gutenberg lead architect Mat\u00edas Ventura published plans for a revamped admin design as part of the Phase 3: Collaboration road map.&#8220;As WordPress turns twenty years old, the overall aim of this work is to improve upon this experience at&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1055","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/1055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=1055"}],"version-history":[{"count":0,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}