Title: admin-design – Make WordPress Design --- # Tag Archives: admin-design [ ](https://profiles.wordpress.org/bph/) [Birgit Pauli-Haack](https://profiles.wordpress.org/bph/) 10:59 am _on_ September 6, 2024 Tags: admin-design, data views, [dataviews ( 2 )](https://make.wordpress.org/design/tag/dataviews/), [design ( 217 )](https://make.wordpress.org/design/tag/design/)    # 󠀁[Data Views Update #1](https://make.wordpress.org/design/2024/09/06/data-views-update-1/)󠁿 The Data Views [component](https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs) is a key part of the future of WordPress, used both in the site editor and by early adopter pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress. org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. developers. It’s being built collaboratively with the goal to streamline, standardize, and improve its functionality. This component will play a crucial role in future WordPress versions and is central to the [Admin Design ](https://make.wordpress.org/core/2023/07/12/admin-design/) efforts. This update is the start of a series to provide more frequent information about the latest and greatest, so folks can follow along, give feedback, and explore using this component. It builds on the initial update [shared in June](https://make.wordpress.org/core/2024/06/13/data-views-update-june-2024/) and will share biweekly updates going forward as it remains helpful. To get started in learning more, you can find documentation on it in the [Storybook space](https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs). A post on the Developer blog, _[Using Data Views to Display and Interact with Data in Plugins](https://developer.wordpress.org/news/2024/08/27/using-data-views-to-display-and-interact-with-data-in-plugins/)_, explains how to add a ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) app to a plugin page and use the Data Views component to display a data list. [Continue reading →](https://make.wordpress.org/design/2024/09/06/data-views-update-1/#more-12350) [#admin-design](https://make.wordpress.org/design/tag/admin-design/), [#data-views](https://make.wordpress.org/design/tag/data-views/), [#dataviews](https://make.wordpress.org/design/tag/dataviews/), [#design](https://make.wordpress.org/design/tag/design/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2024/09/06/data-views-update-1/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2024/09/06/data-views-update-1/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2024/09/06/data-views-update-1/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2024/09/06/data-views-update-1/?share=facebook) * [ X ](https://make.wordpress.org/design/2024/09/06/data-views-update-1/?share=x) * [ Reddit ](https://make.wordpress.org/design/2024/09/06/data-views-update-1/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/admin-design/?subject=%5BShared%20Post%5D%20Data%20Views%20Update%20%231&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2024%2F09%2F06%2Fdata-views-update-1%2F&share=email) [ ](https://profiles.wordpress.org/saxonafletcher/) [Saxon Fletcher](https://profiles.wordpress.org/saxonafletcher/) 9:03 pm _on_ August 10, 2023 Tags: admin-design    # 󠀁[Admin Design Kickoff](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/)󠁿 [⌊side by side admin screens showing light and dark theme with sidebar on left and site preview on right⌉⌊side by side admin screens showing light and dark theme with sidebar on left and site preview on right⌉[ _Thank you to everyone who contributed to this work so far, either_ _directly or indirectly._ _This includes [@jameskoster](https://profiles.wordpress.org/jameskoster/) [@joen](https://profiles.wordpress.org/joen/) [@richtabor](https://profiles.wordpress.org/richtabor/) [@matveb](https://profiles.wordpress.org/matveb/) [@annezazu](https://profiles.wordpress.org/annezazu/) and many many more._ --- This is a follow up to the recent [admin design post](https://make.wordpress.org/core/2023/07/12/admin-design/) on Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. which highlights the need for us to start thinking about what an evolution of WordPress admin might look like. The release of 6.3 gives us a hint of what’s to come via the Site Editor, so it’s time to chat through some of the core concepts explored, collect feedback, and begin to think through how to break this significant effort down. **Consider what you see here broad strokes and the first of many iterations. It’s going to take time to get right.** ## Why It’s first important to understand why its worthwhile spending the time on a large initiative like this. How might it allow WordPress to continue championing the open web and keep an edge on proprietary tools? ### **Managing complexity** As products expand in functionality so too does their complexity. This is a common software challenge that WordPress also faces, particularly because we have so many different types of users, including end users, site managers, builders, agencies, pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress. org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. builders etc. WordPress admin is the glue that ties together the different stages of a user’s journey, from setup to content creation to management and monitoring, which means it plays a critical role in helping to reduce the overall complexity of that journey. The added risk here is that plugin authors are side stepping outdated UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. by introducing their own which can further fragment the WordPress experience. _How might we introduce new paradigms/ mental models that make WordPress that much easier to use?_ ### **Catering to all while catering to no one** WordPress can be shaped to cater to a wide range of use cases, but this opens up an interesting design challenge (and opportunity) to ensure we are properly serving each use case well enough. We have an opportunity to take customisation and even private labelling to the next level. _How might we design WordPress in such a way that it can be tailored and rebranded to a point where it feels like an entirely new product focused on a specific use case?_ ### **External perception** The success of a product largely depends on the perception of its brand. The way people perceive WordPress, particularly developers and designers, has gone through a lot of change over the last 20 years. Sometimes, it’s taken for granted or dismissed as old software. If we want WordPress to continue to be successful we need the next generation of _creators_ to reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. [https://reactjs.org](https://reactjs.org/) positively to the mention and use of WordPress. Surface details such as visuals/UI (both in product and marketing) are are a direct extension of the brand, as is usability. _How might we use this an opportunity to help reinvigorate _the UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. and attract a new audience? **Now let’s get into the fun stuff and talk about some of the various concepts explored so far, some of which we can already begin to see in the Site Editor.** ## Surfaces As WordPress has evolved, the connection between admin and front-end has only gotten stronger. GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) introduced a WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. way of working, and the Site Editor extended that to all aspects of your site. 6.3 now completes the connection by bringing your site _into _parts of your admin experience via what we call “The Frame”. We are starting to see a new paradigm emerge that is not unlike mail and note taking experiences where content is in view alongside navigation and management based tasks, unlocking a new way of working. It’s important we identify the different surfaces of WordPress and what their roles are so that end users feel comfortable moving between them, and developers feel comfortable extending them. ### Admin Exists “under” the preview of your site. It’s what powers everything above. It can be broken down into two, extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. areas. [⌊full view of admin including sidebar on left and content area on right⌉⌊full view of admin including sidebar on left and content area on right⌉[ #### **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.** The sidebar should be used primarily for navigation as well as house simple, high level tasks that benefit from having the front-end of your site in view. Zoom in to the editor for granular edits and zoom out for broader strokes. [⌊concept that is highlighting the sidebar area used for navigation⌉⌊concept that is highlighting the sidebar area used for navigation⌉[ #### **Page** If you need more space than what the sidebar provides for a particular task, you can make use of the main content area. Examples being bulk editing posts, adding new products, managing a media gallery or pattern library. [⌊concept that is highlighting the content area used for a table view⌉⌊concept that is highlighting the content area used for a table view⌉[ ### The Frame The frame represents the front-end of your site and can be in an edit or read-only state. It sits above admin and can be used to show what impact an admin change might have on your site. It can either be in a primary or secondary position, or not visible at all. The frame can be used for previewing any type of content, including your entire site, templates, patterns etc. 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. ### 󠀁[Command Palette](https://github.com/WordPress/gutenberg/issues/48457)󠁿 The command palette is a power-user tool that sits on top of everything and is aware of what’s beneath it so that it can offer contextual actions and information. This also becomes a place for a user to “talk” to WordPress via natural language interfaces. Plugins will be able to register commands that may range from a simple shortcut to interacting with AI chatbots or wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is [http://wp-cli.org/](http://wp-cli.org/) [https://make.wordpress.org/cli/](https://make.wordpress.org/cli/) interfaces. ### The Connectors Between these surfaces lie the connectors that help users transition between them. The most obvious and important example of this is the admin bar that’s currently visible on the front-end of the site. 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. [⌊concept showing how parts of admin could be visible on front-end as a way to connect front and back⌉⌊concept showing how parts of admin could be visible on front-end as a way to connect front and back⌉[ ## Configurations Core and plugin authors should be able to make use of the surfaces outlined above in different ways depending on the job at hand. Let’s take a look at what configurations might be possible and where they would be useful. ### **Sidebar + Frame** In scenarios where a simple task in admin changes the front-end of a site you might be best served by hooking into the sidebar and previewing changes in frame. This is ideal for onboarding, site or page settings, or even hyper-focused editing experiences. [⌊concept showing sidebar containing basic settings and site preview on right⌉⌊concept showing sidebar containing basic settings and site preview on right⌉[ [⌊light themed version of sidebar and frame⌉⌊light themed version of sidebar and frame⌉[ [⌊sidebar and frame used in an onboarding experience⌉⌊sidebar and frame used in an onboarding experience⌉[ ### Sidebar + Content You can combine the use of sidebar and content for tasks that are more management orientated and require more space with multi-layered navigation or filtering. [⌊concept showing sidebar and content on the right with a table in view⌉⌊concept showing sidebar and content on the right with a table in view⌉[ [⌊light theme version of sidebar and content⌉⌊light theme version of sidebar and content⌉[ ### Content For simple management tasks that are only one level deep you can simply make use of the content area. [⌊concept showing content only configuration used for a basic settings screen⌉⌊concept showing content only configuration used for a basic settings screen⌉[ [⌊concept showing content area configuration used for a dashboard layout⌉⌊concept showing content area configuration used for a dashboard layout⌉[ ### **Sidebar + Content + Frame** A more exploratory concept depicts all three areas in combination, with the frame in a secondary position that can be called upon when a document’s presentation requires editing. However, there are questions as to whether there is an elegant way to pull this off. Post types might make use of both sidebar and frame to manage data whilst seeing the affect it might have on the front-end. An alternative side by side view. ### **Exceptions** There are some scenarios where none of the above are appropriate and content or a task deserves its own space or focus. Modality is a useful technique here that includes full screen modals ideal for multistep tasks like setup/onboarding flows. Core should aim to provide patterns that plugins can make use of to keep focused experiences consistent. [⌊full screen modal containing basic onboarding screen⌉⌊full screen modal containing basic onboarding screen⌉[ [⌊full screen modal⌉⌊full screen modal⌉[ ## Navigation We’ve introduced a drill down navigation pattern within the Site Editor which can apply to the rest of admin. There are pros and cons to this approach. It provides greater focus and the space can be used to house basic content alongside the frame or main page area, but it does make navigating up/down the IA tree a little more challenging. We are exploring ways to work around this, for example introducing breadcrumbs or highlighting recently visited sections. ## WordPress Design System As part of this work we should aim to iterate on the existing [WordPress components package](https://wordpress.github.io/gutenberg/?path=/story/components-experimental-itemgroup--with-border) which can evolve into a fully fledged, themeable system with accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) baked in that plugin authors can refer to and make use of. This also includes variables for generated color scales( ideally with a high contrast option), spacing, shadows etc. We have a unique challenge in that we need to cover dense environments like the editor, as well as environments that need more breathing room and focus like admin. This deserves its own dedicated post but in the meantime you can view and contribute to **[this tracking issue](https://github.com/WordPress/gutenberg/issues/53322)** in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/). [⌊set of components in dark theme⌉⌊set of components in dark theme⌉[ [⌊set of components in light theme⌉⌊set of components in light theme⌉[ [⌊components used in editor⌉⌊components used in editor⌉[ [⌊components used in editor⌉⌊components used in editor⌉[ ## Make it yours Combining all the above offers a tremendous amount of flexibility that can cater to a wide range of use cases. However, we’ve all seen how the WordPress experience can be polluted by ever growing top level navigation or fragmented settings screens. We need to offer a level of customisation that gives site creators (or platforms) the ability to shape the information architecture and character of admin to best suit a particular use case. Even better, how might we make it easier for the community to share their configurations with others? ### Examples Let’s take a look at a few different use cases and how they would benefit from customisable navigation and system variables. **We’d like to see WordPress become a fun platform to build multiuser products on top of, more so than it already is.** #### Blog [⌊blue themed version of admin used for a blog focused WordPress⌉⌊blue themed version of admin used for a blog focused WordPress⌉[ #### Commerce [⌊black themed version of admin used for a commerce focused WordPress⌉⌊black themed version of admin used for a commerce focused WordPress⌉[ #### Portfolio [⌊red themed version of admin used for a portfolio focused WordPress⌉⌊red themed version of admin used for a portfolio focused WordPress⌉[ ## MultisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core. 󠀁[Advanced Administration Handbook -> Create A Network.](https://developer.wordpress.org/advanced-administration/multisite/create-network/)󠁿 This ability to customise admin adds more value to multisite setups, which also have to fit in naturally with this new admin experience. [⌊site selector in admin sidebar⌉⌊site selector in admin sidebar⌉[ [⌊profile settings selector in admin sidebar⌉⌊profile settings selector in admin sidebar⌉[ ## Mobile It’s important for admin to be scalable down to mobile devices where site monitoring and administrative tasks will be done on the move. There are some details to figure around how to call upon the frame when out view. ## Backwards compatibility / release strategy 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. 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. [⌊using the frame for embedding classic pages⌉⌊using the frame for embedding classic pages⌉[ ## Follow up posts Once we’ve aligned on the high level concepts we can follow up with a few other posts that dive deeper into some of the details. Notably: * System variables and primitive component styling * Settings and table/list views * “Dashboard” views * Notifications * Backwards compatibility ## Discuss There is a lot of excitement and potential surrounding an admin redesign and how the Site Editor can act as a safe entry point to the work, but there are many risks and potential rabbit holes as well. We need to lean in to existing insights and feedback and as much as possible, starting at a high level. Low level details like UI components (lists, tables, filtering, settings pages etc) can be discussed [directly within GitHub](https://github.com/WordPress/gutenberg/issues/53322). With that in mind, here are a few questions for the community that will help progress this work forward. * What is your immediate reaction to the structural elements proposed here? (e. g. Surfaces and Navigation) * Plugin authors, how would you make use of the new frame paradigm and the various configurations? What is missing? * What admin/IA related challenges have you noticed end users running in to that we should be aware of? * What components/patterns do we need to account for? e.g. stepper for setup wizard * Any other opportunities or ideas we need to consider? [#admin-design](https://make.wordpress.org/design/tag/admin-design/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/?share=facebook) * [ X ](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/?share=x) * [ Reddit ](https://make.wordpress.org/design/2023/08/10/admin-design-kickoff/?share=reddit) * [ Email ](https://make.wordpress.org/design/tag/admin-design/?subject=%5BShared%20Post%5D%20Admin%20Design%20Kickoff&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2023%2F08%2F10%2Fadmin-design-kickoff%2F&share=email)