Add About subpages

[adamwoodnz]

Add redesigned subpages of w.org/about: Requirements, Features, Security, Roadmap, and History.

Closes #149

Screenshots

Requirements	Features	Security	Roadmap	History

How to test the changes in this Pull Request:

1. Add the following pages to your site:

'/about-2/',
'/about-2/requirements-2/',
'/about-2/features-2/',
'/about-2/security-2/',
'/about-2/roadmap-2/',
'/about-2/history-2/',

2. Browse the pages using the navigation and internal links on '/about-2/security-2/',
3. Check responsive layout
4. Check escaping of text in patterns

[adamwoodnz]

The original page had these as list items, but it isn't possible to add ids to list items at present. This is the closest I could get and still have the ref to footnote linking functional.

[ryelle]

Should the local nav bar be sticky like it is on the Download subpages? for example: https://wordpress.org/download/releases/

[adamwoodnz]

Should the local nav bar be sticky like it is on the Download subpages?

Probably, nice catch. I'll update.

[ryelle]

Generally this is looking good, just the list spacing issue & the local nav mobile styles.

[ryelle]

I think this nav ref is incorrect, the others are 16421.

[ryelle]

Looks like it was fixed when I ran build:patterns 👍🏻

[adamwoodnz]

Oops that's my local nav menu id, thanks 🙂

[adamwoodnz]

Fixed

[ryelle]

The list here should have space between the list items. Does the list block support a blockGap? Or maybe we need a block style for "long content lists" or something?

Mockup	Page

[adamwoodnz]

PR opened as the list block doesn't support block gap: WordPress/wporg-parent-2021#72

[ryelle]

Suggested change

	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|20","left":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","className":"is-sticky","layout":{"type":"constrained"}} -->
	<div class="wp-block-group alignfull is-sticky has-white-background-color has-background" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
	<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":1.9}},"fontSize":"small"} -->
	<p class="has-small-font-size" style="font-style:normal;font-weight:700;line-height:1.9"><?php _e( 'About', 'wporg' ); ?></p>
	<!-- /wp:paragraph -->
	<!-- wp:navigation {"ref":16421,"textColor":"blueberry-1","align":"wide","className":"is-style-default","layout":{"type":"flex","justifyContent":"right"},"fontSize":"small"} /--></div>
	<!-- /wp:group --></div>
	<!-- /wp:group -->
	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"16px","right":"var:preset|spacing|60","bottom":"0","left":"var:preset|spacing|60"}}},"backgroundColor":"white","textColor":"blueberry-1","className":"is-sticky","layout":{"type":"constrained"}} -->
	<div class="wp-block-group alignfull is-sticky has-blueberry-1-color has-white-background-color has-text-color has-background" style="padding-top:16px;padding-right:var(--wp--preset--spacing--60);padding-bottom:0;padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"align":"full","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
	<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"textColor":"charcoal-1","fontSize":"small"} -->
	<p class="has-charcoal-1-color has-text-color has-small-font-size" style="font-style:normal;font-weight:700"><?php _e( 'About', 'wporg' ); ?></p>
	<!-- /wp:paragraph -->
	<!-- wp:navigation {"ref":16421,"textColor":"blueberry-1","className":"is-style-dropdown-on-mobile","style":{"spacing":{"blockGap":"24px"}},"fontSize":"small"} /--></div>
	<!-- /wp:group --></div>
	<!-- /wp:group -->

The banner needs a little tweaking for the mobile dropdown to work as a dropdown instead of a full overlay, like it does on the Download section. We have a special is-style-dropdown-on-mobile class for that. The group blocks layout also needed some updates.

I saved this ^^ change on the requirements page, but I didn't follow through with the rest of the pages, and the link color in the dropdown needs to be updated.

this suggestion	current branch

[adamwoodnz]

Updated all these. The link colors were fixed by adding a background color to the nav, thereby avoiding this Gutenberg style:

wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    color: #000;
}

[adamwoodnz]

Added 16px bottom padding to this, in place of the brushstroke we have on the Download sub nav, keeps the spacing consistent when scrolled: