Revitalizing the WordPress Showcase

On Wednesday, October 18th, we will update the WordPress Showcase as part of the ongoing visual refresh of WordPress.org WordPress.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/

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-redesign Slack Slack 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 to get Showcase v2 ready for launch.

While still being actively worked on , you can view the staging site here: wordpress.org/showcase-v2


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 Core Core 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. 

The Showcase also introduces new block Block 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. -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 Filter Filter Filters 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-2022   GitHub GitHub 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. 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.

Props to @ eidolonnight , @ cbringmann , @ annezazu , and @ laurlittle for reviewing this post and providing feedback.

+make.wordpress.org/design/
+make.wordpress.org/marketing/

# design , # showcase , # website-redesign