Welcome to the MetaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!
The Meta team is responsible for maintaining and managing WordPress.orgWordPress.orgThe 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/ websites. Our work is mostly done on the meta trac. If you see a bug, file a ticket!
Over the past few months, contributors have been working on a new design for the Developer Resources section of WordPress.orgWordPress.orgThe 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, BlockBlockBlock 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-developerGitHubGitHubGitHub 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.
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 CoreCoreCore 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 SlackSlackSlack 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!
On Wednesday, October 18th, we will update the WordPress Showcase as part of the ongoing visual refresh of WordPress.orgWordPress.orgThe 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/.
We began this project last year and have continually iterated on the initial design throughout 2023. In the past few months, a team of contributors has worked hard across Figma, GitHub, and the new #website-redesignSlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel to get Showcase v2 ready for launch.
The Showcase should be a natural starting point when a visitor arrives on WordPress.org and wants to explore what WordPress can do. It should inspire and demonstrate what’s possible, from personal blogs and portfolios to online businesses and enterprise-level sites. The Showcase should be instrumental in answering the question, “Why WordPress?”
Achieving this goal begins with an update to the design and structure of the site as well as the return of Showcase as a top-level navigation link (handled separately).
These are just the first steps. Feedback and ideas for future iterations are encouraged. Please comment below or raise an issue on GitHub.
Design
The new Showcase design follows the general mold of the current Showcase while overhauling the aesthetics and improving the user experience. It emphasizes bold visuals and a more dynamic browsing experience through tags and categories. Individual site pages now include desktop and mobile screenshots, while the site introduces an improved layout on mobile devices.
A diversity of websites is presented in this initial redesign, from Fortune 500 companies and celebrity fan sites to small boutique businesses and artist portfolios.
This design also paves the way for future iterations. Some ideas include spotlighting popular use cases and introducing more engaging content like “site of the month.” The possibilities are endless. What would you like to see?
Development
While the new design is the most apparent change, Showcase is now powered by blocks. Specifically, it’s a custom child theme that sits atop the WordPress.org parent block theme. This structure allows the site to take advantage of CoreCoreCore 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.
The Showcase also introduces new blockBlockBlock 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.-based functionality and several components that will be used elsewhere on the WordPress.org network. Improvements, such as the standardization of layout and spacing variables (#105) and the new Query FilterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. block (#441), will make it easier to update other areas of WordPress.org to blocks.
Content
This iteration of Showcase has primarily focused on design and development. That said, some content work was done to ensure all sites in the Showcase are up to date.
For launch, 101 sites have been added to the site, many of which were brought over from the current Showcase, or had been submitted but were never actually added. This number will grow with new submissions.
Earlier this year, two Make posts were published regarding the content moderation and submission guidelines for Showcase. You can review both here:
Moderating submissions and maintaining the Showcase takes a significant amount of contribution hours. As a result, there have been times in the past when the Showcase was left somewhat neglected.
Looking ahead, we need to streamline the submission process as much as possible. Submissions will likely always require manual review, but the rest of the process should be automated where possible. As an example, automated email notifications are currently being explored (#223). This work will take time, but should not impede the launch of Showcase v2.
Thank you to everyone who contributed to this revitalization of the WordPress Showcase, whether in Figma, GitHub, or in the #website-redesign channel in Slack. As with all changes to WordPress.org, this is just a single iteration with many more to come in the future.
If you would like to propose a change or report an issue, please do so in the wporg-showcase-2022GitHubGitHubGitHub 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. 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.
The global headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer navigation will be updated on Wednesday, October 18th, to continually improve the user experience on WordPress.orgWordPress.orgThe 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/ as discussed in #360 Navigation: Rephrase a few items, reconsider sorting, and #364 Footer: Revisit footer links and categorize.
Global header navigation
In September 2022, the global navigation menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.was updated to better organize content across the WordPress.org network. This iteration notably grouped several previously top-level menu items into sub-menus.
Since then, there has been a discussion (see #360) about how the navigation could be further improved with a greater focus on visitors exploring WordPress for the first time. Overall, the changes are relatively minimal, but this iteration notably adds Showcase and Hosting back as top-level menu items and simplifies the Download & Extend grouping.
A live demonstration of the upcoming changes.
Content changes
Showcase is back as a top-level menu item.
The goal is to make the Showcase more visible and to provide visitors, especially new-to-WordPress visitors, a way to see what can be built with WordPress.
This update is related to the pending Showcase v2 launch.
Hosting is back as a top-level menu item.
The goal is to provide new-to-WordPress visitors with a better path to getting started with WordPress since some form of hosting is always required.
While outside the scope of these navigation updates, some exploratory work is being done in Figma to improve the aesthetics of the Hosting page and explain why hosting is required for WordPress. This would make the page feel more educational and help new-to-WordPress visitors get oriented.
Download & Extend is renamed to just Extend.
The goal is to simplify this section and “decouple” menu items that focus on “extending” WordPress and those related to “getting” WordPress.
“Downloading” a .zip is also not the primary way users get WordPress these days, so directing folks to the Get WordPress button makes more sense, especially for new-to-WordPress visitors.
The Get WordPress and Mobile links under Extend are removed.
Visitors are now directed to the Get WordPress button to “get” WordPress. The mobile app CTA is already present on this page.
The current page is v1, and v2 is planned (#318). This page aims to tell the story of blocks in WordPress. It was placed under Extend since making custom blocks and working with the BlockBlockBlock 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 are key ways of “extending” what WordPress can do.
In Extend, the Plugins link has been moved above Patterns to reflect its higher importance.
The WordPress Swag Store has been renamed to Swag Store.
Functional changes
Make sub-menus open on-click instead of on-hover to reduce the number of actual links in the navigation and subtly improve accessibilityAccessibilityAccessibility (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) (#440)
Prevent screenreaders from reading the external link arrows (↗) to improve accessibility (#453)
Global footer navigation
The update to the global footer navigation is minimal. There has been a lot of great discussion about a more extensive overhaul (see #364), which future iterations should consider.
The most significant change is to denote all external links with an arrow (↗) to match the implementation in the global header navigation.
Content changes
All external links are denoted with an arrow (↗)
Links are now loosely ordered by:
About
Showcase/Extend
Ways to learn WordPress
Ways to get involved/support WordPress
Other important external links
The Public Code link is removed to ensure an equal number of links in each column.
Swag is renamed to Swag Store to match the global header navigation.
The capitalization of WordPress.TV is fixed to match the global header navigation.
Thank you to everyone who participated in crafting these changes, both in GitHubGitHubGitHub 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/ and in the #website-redesign channel in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. As with all changes to WordPress.org, this is just a single iteration, with many more to come. The website is constantly evolving.
If you would like to propose a change or report an issue, please do so in the wporg-mu-plugins GitHub repository, which handles all navigation (among other things) across the WordPress.org network. Also, join the #website-redesign Slack channel if you are interested in additional updates coming to WordPress.org and want to contribute.
