Redesigning Developer Resources and a call for testing

Over the past few months, contributors have been working on a new design for the Developer Resources section of WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, which includes the official Code Reference, BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor Handbook, Theme Handbook, and much more. 

This project aims to refresh the aesthetics of the Developer Resources section, convert the site to a block theme, and improve the overall developer experience. While this redesign includes few functional changes and virtually no content changes, the size of the site makes this project one of the largest we have tackled so far. 

All development work is taking place in the wporg-developer 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 be the repository owner. https://github.com/ repository, and you can view the staging site here: developer.wordpress.org/redesign-test. 

Design

The Developer Resources redesign follows the new WordPress.org aesthetic that debuted with the Showcase redesign last month. Given that this is developer documentation, the design takes a slightly more minimalistic and content-first approach. You can view the comprehensive design, as well as all previous iterations, in Figma.

Below is the redesigned homepage.

The internal page design takes inspiration from other popular documentation sites, such as React and MDN Web Docs. Visitors are presented with the familiar layout of a chapter list on the left, content in the middle, and a table of contents on the right.

Here’s a sample page from the Block Editor Handbook.

Development

While the new design is the most apparent change, Developer Resources will soon be powered by blocks. Specifically, it’s a custom child theme that sits atop the WordPress.org parent block theme. Much like the newly redesigned Showcase site, this structure allows us to take advantage of CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functionality like Group and Query blocks as well as custom blocks explicitly built for WordPress.org.

As we continue to migrate sections of the WordPress.org network to block themes, each subsequent project will become easier and build off prior work. For example, we completed the standardization of layout and spacing variables as part of the Showcase redesign last month. 

Content

The content and existing content management processes for all internal sections of Developer Resources will not change as part of the redesign work. The one minor exception is the homepage, as can be seen in the screenshot above.

The content for the new homepage was based on the existing site but now uses a “card” layout. This new design is highly adaptable, and additional cards can be added easily. The one new addition is a listing of the latest Developer Blog posts. 

In the last year, the Blog has become a valuable community-driven resource for content that complements the official developer documentation. Surfacing the latest posts on the homepage will increase its visibility.

The Developer Blog is also being redesigned to match the new look of Developer Resources. The goal is for developers to navigate fluidly between blog articles and official developer documentation without feeling like they are visiting two completely different sites. 

How you can help

First, thank you to everyone who has contributed so far to this new Developer Resources redesign, whether in Figma, GitHub, or the #website-redesign channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. However, we need additional help. 

Given the scope of this section, more testing is needed as we look toward launching the new design in early December. While functionality might have moved around, there should be parity between the current site and the staging site. 

Here are the major sections of Developer Relations. Each link will take you to the relevant section in the staging site.

• Block Editor Handbook
• Themes Handbook
• Plugins Handbook
• Common APIs
• Advanced Administration
• Code Reference
• REST API
• WP-CLI Commands
• Coding Standards

If you would like to propose a change or report an issue, please do so in the wporg-developer GitHub repository. Please ensure your issue has not already been reported before opening a new one. The goal is to wrap up all testing and quality assurance by the end of next week (12/1). 

As with all changes to WordPress.org, this redesign is just a single iteration, with many more to come in the future. So, if you have suggestions for larger functional changes, feel free to propose those as well. 

Also, make sure to join the #website-redesign Slack channel if you are interested in additional updates coming to WordPress.org and want to contribute. Thanks!

Props to @laurlittle, @markoserb, and @adamwood for reviewing this post and providing feedback.

+make.wordpress.org/docs/
+make.wordpress.org/themes/
+make.wordpress.org/plugins/
+make.wordpress.org/design/
+make.wordpress.org/marketing/

#website-redesign #developer-hub