The Pattern Directory gets a refresh and is now powered by blocks

Over the past few weeks, the MetaMeta Meta 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 has been working on a new theme for the Pattern Directory as part of a broader effort to establish a consistent design language across 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/. The updated site launched today. Congratulations to everyone involved in this effort.

With this update, the site is now using a block child theme and the shared WordPress.org parent theme, laying the groundwork for future improvements. For now, the main changes were to convert everything to blocks and standardize the layout, typography, and colors. Rosetta sites (for example, de.wordpress.org/patterns, or es.wordpress.org/patterns) have also been updated to use the new design.

The new theme also utilizes the Interactivity API for many user interactions, such as favoriting a pattern, and performance is improved. The site loads in under one second on a high-speed connection, down from about three seconds with the old theme. There is 70-80 percent less JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. per page, and the page weight is about 40 percent smaller overall. 

Here’s a look at the new homepage, followed by a single pattern page.

The updated homepage versus the previous design.
The updated homepage versus the previous design.
The updated single pattern layout versus the previous design.
The updated single pattern layout versus the previous design.

And here’s a look at the Spanish-language version of the Pattern Directory, which has already been translated. Some translation work may be needed for each foreign-language site, which can be managed in the WordPress Pattern Directory project.

The updated homepage and a single pattern in the Spanish Pattern Directory.
The updated homepage and a single pattern in the Spanish Pattern Directory.

Next steps

As with the recent Forums refresh, this update to the Patterns directory is not a complete redesign and plenty of work remains to be done. However, this iteration is a big step forward, especially for the directory’s underlying architecture, and will unblock larger improvements down the line. Notably, the pattern creation experience remains unchanged but could use an overhaul. An issue has been created, and you can follow along on 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/.

Additionally, the Design team has been conceptualizing more substantial improvements in how related patterns can be packaged together and presented to users. The latest designs in Figma explore pattern “bundles” and an improved pattern creation flow. 

If you find an issue or have suggestions for larger functional changes, please create an issue in the GitHub repository or feel free to leave comments on the design explorations in Figma.

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 @ryelle and @laurlittle for reviewing this post and providing feedback.

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

#website-redesign

Meeting Agenda for April 17, 2023

Is there anything additional you would like discussed? Leave your comments below, or drop them into the Meta Slack channel.

👋🏻 Intro/Welcome

🆕 News

MetaMeta Meta 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. news

Projects

  • Are there any new projects in Meta currently being worked on?
    • Update from Website-Redesign
      • Homepage
      • Forums
    • Update from AccessibilityAccessibility 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) Testing

Meta Posts

Events

Mercantile Store:

Meta Team:

Pattern Directory Team:

Photos Team:

Polyglots TeamPolyglots Team Polyglots Team is a group of multilingual translators who work on translating plugins, themes, documentation, and front-facing marketing copy. https://make.wordpress.org/polyglots/teams/.:

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Review Team:

Playground

Support Forums Team:

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/

Cross-team news

Open Discussion

Action Items

The Forums get a refresh

Over the past few weeks, the MetaMeta Meta 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 has been working on a new theme for Forums as part of a broader effort to establish a consistent design language across 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/. The updated site launched today. Congratulations to everyone involved in this effort.

In addition to standardizing the structure, fonts, spacing, and colors, the Forums homepage now matches the layout of the newly redesigned Developer Resources section, improving consistency within the Learn section of the site.

Here’s a look at the new homepage, followed by an individual forums page and a single post.

The updated homepage versus the current site.


The updated forums layout versus the current site.


The updated single post layout versus the current site.

Next steps

This refresh is not a complete redesign, and there is still work to be done. Rather, it’s intended to be a quick iteration to set the stage for future improvements. You can view the complete redesign proposal in Figma and the current development project board for Forums in 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/

The forums on non-English sites (Rosetta sites) will not change as part of this update. Polyglots mentors can contact the #meta 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 to switch to the new theme. Some translation work will need to be done and that can be managed in the Forums project. The goal is to have all Rosetta sites switched over by July 1, 2024.

If you find an issue or have suggestions for larger functional changes, please add an item to the WordPress.org issues queue on GitHub or in Meta Trac

Finally, 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 @adamwood, @dufresnesteven, and @ryelle for reviewing this post and providing feedback.

+make.wordpress.org/support/
+make.wordpress.org/design/
+make.wordpress.org/polyglots/
+make.wordpress.org/marketing/
+make.wordpress.org/accessibility/

#website-redesign

Homepage updates

If you visit WordPress.org, you will notice a few changes. This is not a complete reenvisioning of the homepage but rather a quick initial iteration that aims to accomplish a few things. 

  • Do a better job targeting new-to-WordPress users or those who are coming back to the platform after some time away.
  • Showcase modern WordPress, particularly the latest release, with a CTA to learn more.
  • Elevate the community section above the learning resources and add a link to the new Events page. 
  • Compact the design slightly.

Here’s the old design and the updated version side-by-side.

The old homepage design next to the new iteration.

The MetaMeta Meta 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 has implemented several processes that make updating the homepage relatively easy. It’s entirely 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. editor page that then syncs back to template files stored in version control. 

The homepage should feel alive and dynamic. It should be updated consistently to showcase what’s new in WordPress, both in the CMS and the community. So what would you like to see? 

Next steps

Each section of the homepage can be viewed as a separate “module” that all work together to form the page. In this iteration, the following modules were updated: 

You can view the different versions of each module that were explored and continue to be explored in Figma. Add comments and share ideas there. You can also create issues directly in the wporg-main-2022 GithHub repository. This is the theme that powers the main 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/ site. 

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.

Props to @ryelle and @joen for reviewing this post and providing feedback.

#website-redesign

Meeting Agenda for April 3, 2024

👋🏻 Intro/Welcome

🆕 News

MetaMeta Meta 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. news

Projects – Are there any new projects in Meta currently being worked on?

Resurface Requests

  • 5296: Dynamic Share Image for Plugins, Themes, Blocks, and Patterns enhancing the appearance 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/ content when shared on social media platforms. It suggests implementing dynamic share images for plugins, themes, blocks, and patterns, similar to what 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/ has recently introduced for its repositories.
  • 7369: WordPress.tv Star rating info content outside the box and overlapping

Communication (Matrix, 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/., IRC):

Make (Get Involved) / P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/.:

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory:

Support Forums:

Nick asked us to review the new look.

Playground

Swag Store (mercantile.wordpress.org):

WordPress.org Site:

Hosting Page Updates

Cross-team news

Other news

Open Floor

Open Discussion

Action Items

Meeting Agenda for March 20, 2024

This week’s meeting will be held Wednesday, March 20, 2024 and @courane01 will be hosting.

👋🏻 Intro/Welcome

Have something to add to the agenda? Leave a comment on the post.

🆕 News

MetaMeta Meta 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. news

  • Projects
    • Are there any new projects in Meta currently being worked on?
    • AccessibilityAccessibility 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) Testing: Focuses on enhancing accessibility across the WordPress platform, including Project Eudaimonia’s efforts. List of .org sites
  • Meta Posts
  • Supoorting Make WP Teams
    • All teams:
      • Handbooks on GitHub: We are moving all handbooks to 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/ to facilitate easier contributions. At the bottom of each page, there will be a link to the source code.
    • Photos
    • Plugins
      • Add requires_plugins to the Update Check API: Enhancement to prevent auto-updates of plugins that change their dependencies, ensuring auto-updater trust.
      • Feature to help plugin developers create blueprints for previews: Encouragement for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers to create blueprint.json files for enabling the Live Preview button.
    • Meta
      • Broken screenshot in Post Lists Block docs: Fixing broken screenshots in the Post Lists 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. documentation on HelpHub.
      • Photo Directory Contribution in Activity Stream: Suggestion to show accepted Photo Directory contributions in the 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/ user activity stream.
      • Improved Design of Cookies Close & Accept Popup: Proposing design improvements for the cookie consent popup.
      • Improved Design of Dropdowns: Suggestions for adding an active class or toggling the arrow on dropdowns for better visual indication.
      • Profile Page Not Showing Correct Icon for Plugin: This update addresses an issue where a plugin’s icon is incorrectly displayed on the author’s profile page.
    • Support
  • 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/.
    • Email plugin: Redirecting the support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations. for an outdated plugin due to it receiving irrelevant queries, with plans to contact the plugin’s author for further actions.
    • Removed a malicious link: from cl.wordpress.org forums section, previously leading to an obsolete domain, to prevent further security risks.
    • Badge Requests: Should we document the BuddyPress request process?
    • Plugin support issues didn’t add up correctly. There was a hiccup in how resolved support threads were counted, especially if there hadn’t been any activity in the last two months. Dion dove into the code, ticketed the issue, and deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. a fix ensuring accurate display of resolved support threads
    • Cookie consent: Adam Zielinski raised concerns about WordPress.org’s lack of a cookie consent modal and its legality, leading to a discussion with Jono Alderson, who expressed that the site is likely non-compliant with GDPR-adjacent legislation due to its lack of a consent framework and vague privacy policies.

Cross-team news

Other news

Open Floor

Contribute

  • Feedback requested

Open Discussion

Action Items

X-post: Translation Events Prototype

X-comment from +make.wordpress.org/polyglots: Comment on Translation Events Prototype

Meta Meeting Agenda for February 21, 2024

👋🏻 Intro/Welcome

🆕 News

MetaMeta Meta 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 news

Cross-team news

Open Discussion

Action Items

Project Thread: Documentation Redesign

In early 2023, the Documentation site, also known as HelpHub, underwent a redesign and transitioned 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. You can learn more about this project in the original kick-off and launch posts.

The refresh of HelpHub set the stage for a redesign of Developer Resources (DevHub) last year, both part 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/’s Learn section. Ideally, both documentation sites should look and function similarly.

During the course of the DevHub update, design improvements were made, particularly to the homepage, and the block theme structure was refined. The new DevHub design was launched in December, so it’s now time for another iteration of HelpHub to ensure both sites are consistent.

Objective

Update HelpHub with the latest functionality and aesthetic introduced in the DevHub redesign. Add additional functionality to assist with content and user feedback management.

Overview

Given that the site is already a block theme, most of it won’t require changes. The redesign will concentrate on these specific areas:

  • Refreshing the homepage layout to be consistent with the DevHub redesign
  • Updating the block child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. with enhancements from the DevHub redesign
  • Standardizing typography, especially the heading fonts, to align with other Learn WordPress.org sections (#490)
  • Enhancing the process for receiving and managing feedback
  • Refining how updates to documentation articles are tracked (improving the changelog)

This update aims to be completed within a few weeks. During the redesign process, we’ll assess any new issues that arise. Depending on their nature and urgency, they’ll either be addressed in this iteration or placed on the backlog for future iterations. 

Project updates will be provided here throughout the process, and any important resources will be added to the post for easy reference. Redesign feedback can be left in Figma, on GitHub, or here in the comments. Please continue to log any content-related issues in the Documentation Issue Tracker.

Timeline

Start: February 19th
End: March 26th

Resources

Project Members

Docs: @estelaris
Design: @fcoveram
Development (MetaMeta Meta 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.): @ryelle
Cross-team coordination: @ndiego

Props to @estelaris, @fcoveram, and @ryelle for their help in shaping this project and reviewing this post. 

+make.wordpress.org/docs/
+make.wordpress.org/design/

#project-thread, #website-redesign

X-post: Discussion: Translation Plugin on Learn

X-comment from +make.wordpress.org/training: Comment on Discussion: Translation Plugin on Learn