Current state of the try/block-theme branch

[apeatling]

I've been experimenting with this repo and updating the design of developer.wordpress.org to be based on a more compact version of the designs in this HH Figma.

At the same time I've also been working on converting the theme to be block based, and support full site editing.

Here's the status of each section:

Landing Page

The landing page keeps the same general layout, but matches the landing pages from the HH design. It also includes some links that might be good starting points.

Some thoughts:

• Could we eliminate this page entirely, and show the top level sections in the left nav bar on handbook and code reference pages? This would massively help the cohesiveness of the entire dev docs site. Right now all handbooks and the code reference feel disconnected from each other.
• The links could be dynamic. I did build a block for this, but have reverted to links added/edited via the site editor because it wasn't smart enough with the ordering and selection.

Handbook Pages

The handbook pages continue to use the content coming directly from Github markdown files. The changes largely consist of the improved styling, as well as converting the sidebar and ToC sections into sever side rendering blocks.

Some thoughts:

• The design works best when each handbook page has a short first sentence that can be highlighted and styled differently. Many pages have this, but many pages do not. Those pages would need to be updated.
• Some pages are not well constructed in terms of the guidelines and the content they contain. I think as part of this design change, the worst offenders would need to be improved.
• The design of the sidebar navigation could use some refinement, I don't think the current blue/black selected states is optimal.
• I think the order of the breadcrumb and title could be reversed, so the breadcrumb is on top. Currently it breaks the flow of title to content.
• The syntax highlighter does not inherit the new one added in the recent changes. The design can be further refined, but I do think a contrasting dark design here works best for scan-ability.

Code Reference Pages

These pages have had the least work done on them. Essentially the whole thing needs to be converted to server side rendered blocks, which I have started in the repo. Doing this will allow much greater control over the structure and design of these pages.

Here's a mockup I made using the new design as a base:

Some thoughts:

• It's been made clear that ToC is still important on these pages, so that will need to be restored.
• The user submitted comments are only present for some code pages, so these are not really realistic as a sidebar.
• It would be so much better if this could be more integrated with other pages on the dev docs. So having a consistent sidebar where you can get back and forth to different sections. See my first thought above under the landing page section.

Other Thoughts

Still quite a lot to do on this, and a bunch of design things to settle. It would be great to be able to get this in a setup where we can open PRs against it so others can more easily contribute and review. If anyone is interested in helping out on current issues, or anything mentioned above, go for it. Feel free to ping me on slack: apeatling.

[StevenDufresne]

Hi @apeatling!

We have some more complete developer.wordpress.org designs:
https://www.figma.com/file/2WxlJFzMJvqPfZL1EkAOVp/Developer-Pages?node-id=1160%3A9879

Since you started on this, we've added a fair bit of work to the parent theme. I'm thinking about forking this, integrating the parent, and using what I can of the styles you came up with.

I'm curious about what your thoughts on this are. Do you think it's a logical approach? Any other suggestions?

[apeatling]

Firstly I won't be offended if you don't use any of it, it was really just an exploration! From what I can see the design deviates quite a bit from what is here, so I'm not sure how useful the styles might be?

One part that could be useful is the individual blocks that render parts of the code pages in the editor. They are fairly rudimentary, but worth a look. They may not be useful if you are not making those pages editable in Gutenberg though.

If there's anything you can pick at and use in the direction you take feel free, I'm happy to help with any thoughts you need.

[StevenDufresne]

I'm going to close this. It's far behind now and we reused some of this.