Developer Resources gets a refresh

After many months of hard work, the redesign 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/ was launched yesterday. The goal was to provide an aesthetic refresh, update the site to a 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. theme, and provide a consistent layout throughout the site. Congratulations to everyone who was involved in this effort.

You can view the announcement post for a more detailed overview of this project. All development took 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 the design was done in Figma.

Here’s a look at the new homepage followed by a sample page from the Block Editor Handbook.

The redesigned homepage versus the previous site.
A redesigned single page layout versus the previous site.

Design is content

This redesign focused on updating the theme structure, fonts, spacing, colors, etc. It did not touch any content in the various handbooks that comprise Developer Resources. Yet, the content is why we all visit this section of WordPress.org. 

Therefore, now that Developer Resources is updated, this is the perfect time to audit and improve the content throughout. Updating documentation, especially quick fixes like formatting and grammar, is one of the best ways new (or returning) contributors can help support the WordPress project. 

If you are interested in contributing to documentation, please check out the resources below. 

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 find an issue or have suggestions for larger functional changes, feel free to open an issue on GitHub. You will also see several issues already on deck for the next iteration

Finally, make sure to join the #website-redesign 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/. channel if you are interested in additional updates coming to WordPress.org and want to contribute. Thanks!

Props to @greenshady 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/
+make.wordpress.org/accessibility/

#website-redesign #developer-hub

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 redesigned homepage versus the current site.

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.

A redesigned single page layout versus the current site.

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. 

The Developer Blog posts list on the homepage

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.

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