Add About landing page #171

adamwoodnz · 2023-01-17T01:30:52Z

Closes #148

Props @tellyworth for initial content

Note that the design uses Courier Prime for the monospace serif font, but our theme has 'IBM Plex Mono', so that's what I'm using for now. I have notified design.

Screenshots

Desktop	Tablet	Mobile

How to test the changes in this Pull Request:

Build the styles
Add a page at /about-2
Open the page, test responsive behaviour, links, cross browser layout. The cover in particular should fluidly scale between 600px and 1320px

StevenDufresne · 2023-01-18T23:56:43Z

Nice! A couple things:

The link arrows are still a problem for me since they are internal links. (Issue)
The header is black in the designs. Not sure if that was changed from the figma file I am looking at.
Based on the same figma, the alignment of the "the four freedoms" content and the number list below is staggered. In this PR it's not. I like this PRs version better but that is a discrepancy i noticed.
The space between the four freedoms content and the first freedom is a bit tight, can we make it larger? Not a strong opinion though...

Designs	This PR

adamwoodnz · 2023-01-19T00:21:41Z

The header is black in the designs

Weird, the pattern builder generated the template as black-on-white even though the block in the prod page is white-on-black, nice catch 🙏

adamwoodnz · 2023-01-19T00:26:25Z

Based on the same figma, the alignment of the "the four freedoms" content and the number list below is staggered. In this PR it's not. I like this PRs version better but that is a discrepancy i noticed.

Yeah good spotting. I found that at certain sizes the large numbers didn't fit alongside the wider columns so I decided to make them consistent with the other sections above (40/60)

adamwoodnz · 2023-01-19T00:49:40Z

The space between the four freedoms content and the first freedom is a bit tight, can we make it larger?

Updated in 8b36d9e

jasmussen · 2023-01-20T09:07:10Z

Looks good, I like Plex over Courier, but I'll let Marko chime in once has a chance.

We need to update the pencil strokes per some feedback:

The vectors are in this figma, and can be exported as PNGs or SVGs, let me know what works best.

I'm not entirely sure about the pencil strokes further down the page, we can probably omit them from now and include only those at the top as a starting point. What do you think?

adamwoodnz · 2023-01-22T20:37:36Z

I'm not entirely sure about the pencil strokes further down the page, we can probably omit them from now and include only those at the top as a starting point. What do you think?

Yeah I'm not 100% sure about the positioning of them (mission swirl seems a little random, and four freedoms touches the text), but I quite like the idea of including them further down.

jasmussen · 2023-01-23T09:16:51Z

Looks good! Nice.

ryelle

Looks good - some questions about the code but nothing huge/blocking.

ryelle · 2023-01-24T18:13:13Z

source/wp-content/themes/wporg-main-2022/patterns/about.php

+ */
+
+?>
+<!-- wp:wporg/global-header /-->


Does this create duplicate header & footer on the page? The header & footer are added in the page template too.

Good catch, it doesn't seem to, but I'll remove it

Done in 75634c2

ryelle · 2023-01-24T18:37:07Z

source/wp-content/themes/wporg-main-2022/src/style/style.scss

+
+@media (min-width: 1200px) {
+	.wporg-about-cover-title {
+		margin-block-end: -42px !important;


I know GB uses logical properties, but I don't think we've used them yet — should we be concerned about browser support?

Could you add a note about where this number comes from?

should we be concerned about browser support?

Good question! Looks ok https://caniuse.com/?search=margin-block-end

Could you add a note about where this number comes from?

Done in ea616fc

ryelle · 2023-01-24T18:38:57Z

source/wp-content/themes/wporg-main-2022/src/style/style.scss

+
+@media (min-width: 600px) {
+	.wporg-about-cover-title {
+		margin-block-start: -30px !important;


Can you use the spacing values for these numbers?

Done in ea616fc

adamwoodnz · 2023-01-31T02:49:58Z

I think it's more intuitive to use the font family dropdown

I think this is key. I guess I was trying to restrict the usage to certain blocks but that's less important.

keep all the fonts together in the wporg-mu-plugin folder as a convention

If we are treating that as our font library rather than global-fonts as the name suggests, then I think you're right, if there is no load penalty.

ryelle · 2023-01-31T22:55:17Z

source/wp-content/themes/wporg-main-2022/patterns/download.php

@@ -131,19 +131,19 @@
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:list {"className":"is-style-links-list"} -->
 <ul class="is-style-links-list"><!-- wp:list-item -->
-<li><a href="https://learn.wordpress.org/course/getting-started-with-wordpress-get-setup/"><?php _e( 'WordPress courses ↗', 'wporg' ); ?></a></li>
+<li><?php _e( '<a href="https://learn.wordpress.org/course/getting-started-with-wordpress-get-setup/">WordPress courses ↗</a>', 'wporg' ); ?></li>


I don't think these strings should be changing. I think it's a result of the parser changes? In any case, the link tag itself doesn't need to be translated.

I think it would be fine if you drop the changes to these other, non-about patterns, and then iterate on the parser along with the tests PR #181 so that these don't change.

Ah yes this was based on trunk not the parser branch, thanks for that. Now updated and I'll drop the changes to other files in that PR.

ryelle

Page and styles look good to me 👍🏻

The base branch was changed.

adamwoodnz · 2023-02-02T01:44:39Z

Added Courier Prime and brushstrokes @marko-srb

I'm going to merge and deploy the draft pages this afternoon and we can iterate more during final review phase.

adamwoodnz self-assigned this Jan 17, 2023

adamwoodnz added [Component] Theme Templates, patterns, CSS [Component] Content Bugs or issues related to the page content labels Jan 17, 2023

adamwoodnz added this to the About milestone Jan 17, 2023

adamwoodnz marked this pull request as draft January 17, 2023 01:31

adamwoodnz force-pushed the add/148-about-page branch 4 times, most recently from 7bb8314 to 4effcb2 Compare January 18, 2023 23:11

adamwoodnz marked this pull request as ready for review January 18, 2023 23:11

adamwoodnz requested review from ryelle and StevenDufresne January 18, 2023 23:11

adamwoodnz force-pushed the add/148-about-page branch from c8a9703 to 53f466a Compare January 19, 2023 00:16

adamwoodnz force-pushed the add/148-about-page branch 5 times, most recently from 50fcbcf to e12ba2d Compare January 20, 2023 01:08

adamwoodnz force-pushed the add/148-about-page branch from e12ba2d to c3ea230 Compare January 22, 2023 21:21

This comment was marked as outdated.

Sign in to view

ryelle reviewed Jan 24, 2023

View reviewed changes

adamwoodnz force-pushed the add/148-about-page branch from d5e8a00 to ea616fc Compare January 25, 2023 01:00

adamwoodnz requested a review from ryelle January 25, 2023 01:02

adamwoodnz force-pushed the add/148-about-page branch from bb64440 to 0a02aba Compare January 31, 2023 21:36

ryelle reviewed Jan 31, 2023

View reviewed changes

adamwoodnz changed the base branch from trunk to fix/177-export-content-parse-list-items January 31, 2023 23:07

adamwoodnz force-pushed the fix/177-export-content-parse-list-items branch from 22e6f72 to 406e4c2 Compare January 31, 2023 23:15

Base automatically changed from fix/177-export-content-parse-list-items to trunk February 1, 2023 02:39

adamwoodnz force-pushed the add/148-about-page branch from 0a02aba to 1d578b7 Compare February 1, 2023 03:14

adamwoodnz changed the base branch from trunk to add/184-courier-prime-font February 1, 2023 03:14

adamwoodnz requested a review from ryelle February 1, 2023 03:20

ryelle previously approved these changes Feb 1, 2023

View reviewed changes

adamwoodnz added 13 commits February 2, 2023 14:20

Add draft about page to manifest and theme switcher

ce07030

Add About page template and pattern

b522de1

💄 Fix CSS lint

2f30b39

Change header and footer to white-on-black

c095655

Adjust vertical spacing

898b2f4

Simplify cover layout

67745d3

Rotate cover graphic on mobile

0265926

Add RTL support

b96a632

Update brush styles

fffffd8

Remove duplicate global header and footer from pattern

a3f49bd

Use spacing presets and add comments to CSS

87ce138

Simplify intro layout

a2e2142

Add brushstrokes to mission and 4 freedoms

60c83e6

adamwoodnz force-pushed the add/148-about-page branch from 1d578b7 to 60c83e6 Compare February 2, 2023 01:20

adamwoodnz changed the base branch from add/184-courier-prime-font to trunk February 2, 2023 01:20

Use Courier Prime font

c24268f

adamwoodnz merged commit 0b465e7 into trunk Feb 2, 2023

adamwoodnz deleted the add/148-about-page branch February 2, 2023 01:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add About landing page #171

Add About landing page #171

adamwoodnz commented Jan 17, 2023 •

edited

Loading

StevenDufresne commented Jan 18, 2023

adamwoodnz commented Jan 19, 2023

adamwoodnz commented Jan 19, 2023

adamwoodnz commented Jan 19, 2023

jasmussen commented Jan 20, 2023

adamwoodnz commented Jan 22, 2023 •

edited

Loading

This comment was marked as outdated.

jasmussen commented Jan 23, 2023

ryelle left a comment

ryelle Jan 24, 2023

adamwoodnz Jan 24, 2023

adamwoodnz Jan 24, 2023

ryelle Jan 24, 2023

ryelle Jan 24, 2023

adamwoodnz Jan 24, 2023

adamwoodnz Jan 25, 2023 •

edited

Loading

ryelle Jan 24, 2023

adamwoodnz Jan 25, 2023 •

edited

Loading

adamwoodnz commented Jan 31, 2023

ryelle Jan 31, 2023

adamwoodnz Jan 31, 2023

ryelle left a comment

adamwoodnz commented Feb 2, 2023

Add About landing page #171

Add About landing page #171

Conversation

adamwoodnz commented Jan 17, 2023 • edited Loading

Screenshots

How to test the changes in this Pull Request:

StevenDufresne commented Jan 18, 2023

adamwoodnz commented Jan 19, 2023

adamwoodnz commented Jan 19, 2023

adamwoodnz commented Jan 19, 2023

jasmussen commented Jan 20, 2023

adamwoodnz commented Jan 22, 2023 • edited Loading

This comment was marked as outdated.

jasmussen commented Jan 23, 2023

ryelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamwoodnz Jan 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamwoodnz Jan 25, 2023 • edited Loading

Choose a reason for hiding this comment

adamwoodnz commented Jan 31, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryelle left a comment

Choose a reason for hiding this comment

adamwoodnz commented Feb 2, 2023

adamwoodnz commented Jan 17, 2023 •

edited

Loading

adamwoodnz commented Jan 22, 2023 •

edited

Loading

adamwoodnz Jan 25, 2023 •

edited

Loading

adamwoodnz Jan 25, 2023 •

edited

Loading