Implement front page

[StevenDufresne]

Closes: #158

This PR implements the front page.

Questions:

• The designs have links without text-decoration: underline;, but the new documentation site has them underlined. I assumed we want to make them the same. @javierarce @jasmussen
• I'm not certain where all the links should go to @javierarce @jasmussen

Screenshot

Mobile	Tablet	Desktop

Test

1. Add Post Content below to the front page content.
2. Replace broken URL in front-page-content.php with https://user-images.githubusercontent.com/1657336/212520185-d9840a21-b149-49c6-b4f2-c043eaf969ea.svg.
3. Visit homepage.

Image For Testing

Link: https://user-images.githubusercontent.com/1657336/212520185-d9840a21-b149-49c6-b4f2-c043eaf969ea.svg

[adamwoodnz]

Coding Standard

This is 'Coding Standards' in the design

[StevenDufresne]

The design shows the Search box aligning with 'Documentation' below

Ah okay. Broke it by adding edge-spacing for mobile. Good catch.

[adamwoodnz]

Looking good! A few minor suggestions inline

[adamwoodnz]

One last thing, I received design feedback for Enterprise that the padding was too tight on sections like this on mobile (it should be 40px vertically)

So I ended up overriding a preset just for that section:

https://github.com/WordPress/wporg-main-2022/blob/trunk/source/wp-content/themes/wporg-main-2022/src/style/style.scss#L91

[adamwoodnz]

N00b question; will this still show up as a translatable string? Or is that irrelevant

[StevenDufresne]

Not a noob question. I'm working too fast trying to get this project moving :).

This is missing translation. Thanks for the catch.

[StevenDufresne]

One last thing, I received design feedback for Enterprise that the padding was too tight on sections like this on mobile (it should be 40px vertically)

That's a nice addition. I'll make the same change here. We can think more deeply about this should it keep coming up.

[jasmussen]

The designs have links without text-decoration: underline;, but the new documentation site has them underlined. I assumed we want to make them the same.

Consistency is good, but which non-underlined designs are you referring to? I haven't been as involved here, so forgive me if I'm missing something obvious. But most links seem underlined in the Figma.

Except those in the TOC, which should probably stay non-underlined:

I'm not certain where all the links should go to
Advanced Administration?

@estelaris is this a question you can answer?

[ryelle]

Out of curiosity, why did you decide to create a page template, pattern, template part, and have post content?

In testing, I noticed the hover & focus color for the white outlined button on blue is very low-contrast. This does match the design library, so this is probably a question for @jasmussen - is this correct?

The front page is missing an h1, the first heading on the page is the first section's title.

I'm not certain where all the links should go to
Advanced Administration?

This doesn't exist yet, as I understand it's a set of articles being moved from /support. According to this repo, it will eventually live at https://developer.wordpress.org/advanced-administration/.

HTTP API?

Maybe https://developer.wordpress.org/apis/making-http-requests/? Though that's a guess.

Contribute?

Probably make.wordpress.org.

Contributor Handbook?

Currently the site links to the documentation contributor handbook, but in this context it seems like it should be something more generic. There's this handbook, which is in progress but doesn't seem very helpful at the moment (for getting involved).

[StevenDufresne]

The designs have links without text-decoration: underline;, but the new documentation site has them underlined. I assumed we want to make them the same.

Consistency is good, but which non-underlined designs are you referring to? I haven't been as involved here, so forgive me if I'm missing something obvious. But most links seem underlined in [the Figma](https://www.figma.com/file/iM8I9yAYbwjbc9q9b2WWui/Documentation---HelpHub-%2F-WordPress.org?node-id=2766%3A13537&

Developer	Documentation
Figma	Figma

[StevenDufresne]

Out of curiosity, why did you decide to create a page template, pattern, template part, and have post content?

template part

The navigation link list was different in the designs from the main one. That was corrected after the fact. I could remove the template and use CSS to change its color.

pattern

Translations.

post content

I assumed all content had to be trackable in source control so I left only the link lists in the post content so it can be modified later.

[jasmussen]

In testing, I noticed the hover & focus color for the white outlined button on blue is very low-contrast. This does match the design library, so this is probably a question for @jasmussen - is this correct?

That doesn't look right, and won't fly. I don't think we necessarily need a hover style in this case (on this background) and the focus style can be white, a la what's on news:

[ryelle]

That doesn't look right, and won't fly. I don't think we necessarily need a hover style in this case (on this background) and the focus style can be white, a la what's on news

Okay, we'll fix this in the parent theme for white-outline buttons on blueberry 👍🏻

[ryelle]

The navigation link list was different in the designs from the main one. That was corrected after the fact. I could remove the template and use CSS to change its color.

Why not just add this code in the page template (templates/front-page.html) itself?

Translations.
I assumed all content had to be trackable in source control so I left only the link lists in the post content so it can be modified later.

Translations is a good reason for patterns, if there are plans to translate the site, but mixing the two (content & patterns) was what threw me off.

[StevenDufresne]

The navigation link list was different in the designs from the main one. That was corrected after the fact. I could remove the template and use CSS to change its color.

Why not just add this code in the page template (templates/front-page.html) itself?

Translations.
I assumed all content had to be trackable in source control so I left only the link lists in the post content so it can be modified later.

Translations is a good reason for patterns, if there are plans to translate the site, but mixing the two (content & patterns) was what threw me off.

Fair, I think I'll always go with a pattern until told otherwise.

[StevenDufresne]

I kept this second navigation around for 2 reasons:

• Making the colors match is possible with CSS, but all the styles have important and we lose the ability to easily customize it in the editor.
• The site-breadcrumb doesn't match the designs. It would require extra CSS to make that work.

Having 2 link lists is not super dry, but the best of 2 evils in this case.

[ryelle]

We could try __unstableLocation to reuse menu items in different navigation blocks by the location name, but it's unstable and requires a little setup in the local environment to make it work. I keep meaning to do an experiment branch to wporg-parent when we're between projects but… 😩

[StevenDufresne]

I'm going to merge this for now and follow up with anything in the future.