Developing the redesigned Home and Download Pages

There is a new post on +make.wordpress.org/design/ announcing the redesign of the home page and download page.

Development work is already underway on a block-based theme implementing that design. The work so far has been on the basic structure and tooling. Now that the designs are ready we can begin implementing the layout. A recent copy of the theme is running on a temporary staging site. You can see an early, obviously incomplete version of the front page there already.

Most of the code development will take place in the theme repo: https://github.com/WordPress/wporg-main-2022/

That repository contains the theme, some plugins, and a full local development environment. Using Docker and a few other prerequisites, it’s possible to run a local copy for development and testing. The setup scripts will even sync a current copy of the content from the staging site.

The plan for the new theme is that as much as possible of the content and page layout will be created and managed using the editor, as opposed to code in SubversionSVN Apache Subversion (often abbreviated SVN, after its command name svn) is a software versioning and revision control system. Software developers use Subversion to maintain current and historical versions of files such as source code, web pages, and documentation. Its goal is to be a mostly compatible successor to the widely used Concurrent Versions System (CVS). WordPress core and the wordpress.org released code are all centrally managed through SVN. https://subversion.apache.org/.. Other than the headerHeader The 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, almost everything you see on the front page of the staging site is the contents of a page, edited with 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/.

A screenshot showing a portion of the current in-progress front page, built in the WordPress editor.

This means that, going forward, most changes to the newly redesigned pages on 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/ can be done directly by the folks who handle content, without requiring a code change.

Implementing the full design will require building some custom blocks and customizing existing coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. That work will take place in the GitHub repo.

The development plan is to roll out a MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia of this theme with the new front page and download page designs:

  • Build the required blocks and other customizations needed for the designs.
  • Rough out the designs in the editor on the staging site.
  • Iterate on the fine details in the editor.
  • Fix issues in code as needed.
  • Involve the Design team in making refinements as needed.
  • Test for a11yAccessibility 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), SEO, and best practices.
  • DeployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. the theme live when it’s ready.
  • Continue to iterate on the design and content in the editor after launch.

Given the complexity of making this work on Rosetta sites, we expect to initially roll out the MVP on the main WordPress.org page only, and roll out translated sites as a later iteration.

If you’d like to see how the new pages are being built using post content and 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, you can check out the theme repo and staging site here: