X-post: New design for HelpHub in WordPress.org

X-comment from +make.wordpress.org/docs: Comment on New design for HelpHub in WordPress.org

Renaming WordPress.org Support to Documentation

Back on September 1st the main navigation of WordPress.org was updated and has already resulted in some excellent improvements in site metrics. In general, we’re seeing more pageviews compared to August, and we’ve seen significantly more visitors in sections like WPTV and News.

Given the relative success of these changes, I’d like to revisit a request that came up during the update. The current “Support” page, as titled within the page and the main nav, located at 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//support/, actually shows documentation and does not provide any method for visitors to interact with humans (save for a small callout for the forums at the bottom). Even the search box offers to “Search documentation”. There have been a few requests from the Documentation team to change this:

Over the last few weeks, there has been some conversation about what we call our “resources” for site visitors and users of WordPress. While there appears to be some consensus around wanting a new landing page that highlights all of these resources, I believe that a few of us at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US were able to reach a more immediate solution.

An entire month has passed since our September nav revision, and we can see that the web traffic to Support remains largely unchanged at about 2.5 million pageviews per week. This is unsurprising given its menu placement prior to the change and the fact that the name remained unchanged.

Given that we now have a baseline for performance, I’d like to ask 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. to move ahead with re-titling the page and updating its nav item to “Documentation”. I can monitor the performance over the coming month for any abnormalities and report back. The hope is of course that this will have a neutral to positive impact, but we can discuss further in the case that it has any negative impact.

I have commented on  https://github.com/WordPress/wporg-mu-plugins/issues/262 accordingly.

Thank you to @milana_cap, @jpantani, and the contributors at the Marketing and Documentation tables at WCUS, and to the ticket authors above: @estelaris, @juanmaguitar, and @kenshino.

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

#navigation #support #documentation

X-post: Reclassification of end-user documentation

X-comment from +make.wordpress.org/docs: Comment on Reclassification of end-user documentation

X-post: Proposal: Faster Course Development with Video-Based Courses

X-comment from +make.wordpress.org/training: Comment on Proposal: Faster Course Development with Video-Based Courses

X-post: WordCamp US Contributor Day 2022 Recap

X-comment from +make.wordpress.org/updates: Comment on WordCamp US Contributor Day 2022 Recap

Improving DevHub Code References

Today we deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. some changes to DevHub. These changes focused on making the code references easier to use, understand and navigate. You can read more about the changes in @tellyworth’s post Exploration: improving DevHub.

If you find any issues or have any feedback/suggestions on how we can further improve the code reference you can file a meta ticket or check out the GitHub repository.

Thanks!

cc +make.wordpress.org/docs/ +make.wordpress.org/core/

#docs #devhub

Simplifying the Admin Bar & Global Navigation Menu

The admin bar and global navigation menuNavigation Menu A 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. will be updated shortly to simplify the navigation as discussed on this post and in these issues: #252 Simplifying the wp-admin bar, #251 Reconfigure the site navigation.

Admin Bar

For the admin bar, if you’re logged out, you’ll see links to log in & register on every page. When you’re logged in, the admin bar has been simplified. The WordPress logo and About menu has been removed, along with the site name, comments, and some other top-level items. If you can write posts on a site, you’ll still see the “+ New” dropdown, and a new dropdown for “Edit”. If you’re a member on multiple sites, the My Sites dropdown has moved to the dropdown under your name.

These changes only apply to the front end of the site, the admin bar remains unchanged when you’re in the site admin.

Here’s an example on Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. The “New” dropdown remains the same, and the Customize link is also the same. My name & avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. appear on the right.

When on a single post/page, that would usually have the top level “Edit Page” link, now it’s collapsed with Customize into “Edit.” If the site has any special plugins like “Copy to a new draft” or the locale switcher on Learn, that will stay in the admin bar.

If I need to see my sites list, it’s over in the right dropdown under my name, each of these links take you to that site’s dashboard.

Navigation Menu

The navigation menu menu will also be updated. This is an iteration in an ongoing process to better organize the content across 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/ network and combines several ideas that were shared. This current iteration is based on the site structure as it is now and a few guidelines:

  • This approach groups pages by visitor intent. Example: “I’m here to build out my site” or “I’m here to participate in the project”.
  • To keep things slim, this approach directs visitors to top-level pages or areas where they can dig deeper rather than trying to deep-link visitors to everything. Example: There is a single link to “Learn” rather than “Tutorials” and/or “Lesson Plans”.
  • Top-level items are organized based on the frequency of visits. “About” might be most used by new visitors, but “News” will be used repeatedly by visitors every day.
  • Child items were generally sorted by broadest appeal (Ie. most visits) to least.
  • Link names should be accessible and recognizable to everyone. “Contribute” may be readily recognizable to existing community members, but alternatives like “Community” are more easily understood by everyone.
  • Parent items link to logical existing pages and also describe child items.

Note: Table 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. represents parent menu items with each column containing the respective children.

NewsDownload & ExtendLearnCommunityAbout
ThemesSupportWordCampShowcase
PatternsForumsMeetupsGutenberg
PluginsWordPress.tvPhoto DirectoryEnterprise
OpenverseDevelopersJob Board
MobileFive for the Future
Hosting

We will revisit and explore other proposed structural and design changes in future iterations. Any issues should be reported to the wporg-mu-plugins repo.

Navigation

Screen Shot 2022-08-18 at 8.41.18 AM

Items in our main navigation are totally out of control. The … it shows when the screen is too wide is not intuitive. It’s unclear why Five for the Future is a drop-down under Get Involved, or why Support needs two sub-menu items.

Finally there’s a duplicate logo, with its own hidden drop-down, in a slightly different dark grey color, in the built-in MS nav bar:

Screen Shot 2022-08-18 at 8.43.40 AM

To the right it has its own Register and Log In, and a duplicate search box.

This is a mess! What can we simplify here?

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:

X-post: Project Update: WordPress.org Homepage and Download page mockups

X-post from +make.wordpress.org/design: Project Update: WordPress.org Homepage and Download page mockups