Making WordPress.org

Opened 14 months ago

Last modified 10 months ago

#2389 new defect

Move TOC to allow more space for the content

Reported by: grapplerulrich Owned by:
Milestone: Priority: normal
Component: Handbooks Keywords: ui-feedback ux-feedback


The content in the handbooks gets squashed between the Chapters and Table of Contents. This distracts the reader from the content.

An example for this can be seen on Theme Internationalization page. https://developer.wordpress.org/themes/functionality/localization/


There is whitespace to the left of the TOC that we can use. The screenshot above was taken on my 13" Mac so even on smaller screens there is extra space that we can use. On larger screens there would be much more.

Change History (17)

#1 @grapplerulrich
14 months ago

Partially related to #1814

#2 @samuelsidler
14 months ago

I think that switching out the left navigation for the new one we have in the contributor handbooks will help a little, space-wise.

#3 @mapk
14 months ago

Working on some ideas here:

Current iteration (live):


  • The sidebar nav is much easier to navigate now.
  • Clearly identifies where the user is at.


  • The content is still 'smushed' in between two floating navs.
  • The grey and blue combo look a bit dated IMO.

Iteration v2:


  • Left side nav is no longer floating.
  • The break in page color gives a more 'extended' and 'airy' feeling to the page.
  • In-page nav (Topics) is lighter (not so heavy), and doesn't feel overbearing.


  • In-page nav (Topics) still smushes content. Still need to think this through.

This ticket was mentioned in Slack in #meta by mapk. View the logs.

14 months ago

#5 @Ipstenu
14 months ago

I like the left-side nav better when it's not floating. It makes it very clear what it is. A more 'static' navigation column.

In page topics is hard. Thinking about what I used to do in MediaWiki, this idea comes to mind.

Default it to where it is now. If someone uses a shortcode [show-toc] to something similar, DON'T show the ToC there, show it where the shortcode is. Allow for attributes like width=(PX|FULL) and float=(left|right) to allow for per-page customization and, if we had to, [show-toc no display] would hide it totally.

The reason that works in MediaWiki land is that the default works for most pages, but when it doesn't, the extra customization comes in handy.

#6 @grapplerulrich
14 months ago

I like the left sided nav. It makes it a bit calmer. Just need to a find a solution for the right sidebar.

#7 @samuelsidler
14 months ago

I like the new left-side nav. And I like @Ipstenu's idea in comment:5 about how we can handle the topics box without actually removing it.

This ticket was mentioned in Slack in #forums by ipstenu. View the logs.

14 months ago

#9 @mapk
14 months ago

In 4758:

Breathe: Handbook sidebar nav redesign.

The floating sidebar nav was causing readability issues and so I redesigned it to be anchored better and be more evident that it's a sidebar nav. Also redesigned the Topic in-page box to be lighter so it doesn't detract from the content as much. Still working on a better solution.

Props grapplerulrich

See #2389, #2410

#10 @mapk
14 months ago

In 4760:

Breathe: Highlighted 'active' nav item fix.

The 'active' menu item was not highlighting correctly on https://make.wordpress.org/training/handbook/about/getting-started/, so rather than relying on jQuery to make it work, I just added a CSS selector instead which works correctly now.

Props samuelsidler

See #2389, #2410

This ticket was mentioned in Slack in #meta by mapk. View the logs.

14 months ago

#12 @coffee2code
14 months ago

In 4790:

Breate: Fix display of handbook name (seen in multi-handbook sites) after changes in [4789].

See #2389.

#13 @karmatosed
10 months ago

@mapk what is the current state on this? Is it being rolled out, complete and ok to close?

#14 @mapk
10 months ago

@karmatosed I think we're good to go, but it hasn't been implemented across the board. For example, the use case in the ticket subscription hasn't adopted the new design.

#15 follow-up: @karmatosed
10 months ago

@mapk cool...so how should we go about doing that?

#16 in reply to: ↑ 15 @mapk
10 months ago

Replying to karmatosed:

@mapk cool...so how should we go about doing that?

I'm really not sure. Either @samuelsidler helped with that, or the team contributors did. Maybe @pento or @coffee2code might have an idea?

#17 @samuelsidler
10 months ago

Looks like we need a patch for devhub.

Note: See TracTickets for help on using tickets.