Add & sync download subpages (#131)

* Content: Add & sync download subpages

* Turn on the new theme for download subpages

* Block: Download Counter (#132)

* Use the new theme for all `wp*` endpoints

This enables the new theme on `/wporg/v1/`  endpoints as well as core `/wp/v2/`.

* Add Download Counter block & endpoint

* Style the download counter block

* Add a shortcode for the latest branch constant.

* Update Counter page pattern

* Catch errors in JS

* Rename shortcode

Technically the "latest" branch would be the one in development, so rename this to better reflect its value.

* Use charcoal-2 background color

* Use `textContent` for safety, since the count value is plain text

* Update font to new monospace font

* Use the extra-light font weight

* Update page contents

* Block: Release Tables (#134)

* Initial Release Tables block

* Add the toggle view for older releases

* Visually hide table headers, add responsive styles

* Always make sure the headers are hidden

* Align all the links, even when they wrap to new lines

* Add a function check

* Remove unnecessary settings

* Replace bar with middot in hash links

* Update page content

* Update pattern file names to reflect section

* Update the "Dropdown on Mobile" style when the menu is inside a "Brush Stroke" group block.

* Use the "Dropdown on Mobile" style for nav

env/page-manifest.json

@@ -7,6 +7,26 @@
 		"slug": "download",
 		"template": "page-download.html"
 	},
+	{
+		"slug": "beta-nightly",
+		"pattern": "download-beta-nightly.php",
+		"template": "page-beta-nightly.html"
+	},
+	{
+		"slug": "counter",
+		"pattern": "download-counter.php",
+		"template": "page-counter.html"
+	},
+	{
+		"slug": "releases",
+		"pattern": "download-releases.php",
+		"template": "page-releases.html"
+	},
+	{
+		"slug": "source",
+		"pattern": "download-source.php",
+		"template": "page-source.html"
+	},
 	{
 		"slug": "mobile",
 		"template": "page-mobile.html"

source/wp-content/mu-plugins/theme-switcher.php

@@ -28,7 +28,7 @@ function should_use_new_theme() {
 	$request_uri = isset( $_SERVER['REQUEST_URI'] ) ? explode( '?', esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ) ?? '/' )[0] : '/';
 
 	// Admin page or an API request.
-	if ( is_admin() || wp_is_json_request() || 0 === strpos( $request_uri, '/wp-json/wp/' ) ) {
+	if ( is_admin() || wp_is_json_request() || 0 === strpos( $request_uri, '/wp-json/wp' ) ) {
 		return true;
 	}
 
@@ -41,6 +41,10 @@ function should_use_new_theme() {
 	$new_theme_pages = array(
 		'/',
 		'/download/',
+		'/download/beta-nightly/',
+		'/download/counter/',
+		'/download/releases/',
+		'/download/source/',
 		'/mobile/',
 	);
 	if ( ! in_array( $request_uri, $new_theme_pages ) ) {

source/wp-content/themes/wporg-main-2022/functions.php

@@ -9,7 +9,9 @@
 require_once( __DIR__ . '/inc/capabilities.php' );
 
 // Block files
+require_once( __DIR__ . '/src/download-counter/index.php' );
 require_once( __DIR__ . '/src/random-heading/index.php' );
+require_once( __DIR__ . '/src/release-tables/index.php' );
 
 /**
  * Actions and filters.

source/wp-content/themes/wporg-main-2022/inc/shortcodes.php

@@ -75,6 +75,29 @@ function() {
 	}
 );
 
+/**
+ * Shortcode to display the current stable branch of WordPress (ex, 5.7, 6.0).
+ */
+add_shortcode(
+	'stable_branch',
+	function() {
+		global $wp_version;
+		$stable_branch = '';
+
+		if ( defined( 'WP_CORE_STABLE_BRANCH' ) ) {
+			$stable_branch = WP_CORE_STABLE_BRANCH;
+		} else {
+			// Fallback if the constant is undefined. This isn't exactly correct,
+			// but displays something for testing purposes.
+			if ( preg_match( '/[0-9]+\.[0-9]/', $wp_version, $matches ) ) {
+				$stable_branch = $matches[0];
+			}
+		}
+
+		return $stable_branch;
+	}
+);
+
 /**
  * Shortcode for a link to the latest version of WordPress.
  */

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

@@ -0,0 +1,61 @@
+<?php
+/**
+ * Title: Beta/Nightly
+ * Slug: wporg-main-2022/beta-nightly
+ * Inserter: no
+ */
+
+?>
+<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}},"backgroundColor":"blueberry-1","textColor":"white","className":"is-style-brush-stroke","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull is-style-brush-stroke has-white-color has-blueberry-1-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="font-style:normal;font-weight:700"><?php _e( 'Download', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:navigation {"ref":11576,"backgroundColor":"blueberry-1","className":"is-style-dropdown-on-mobile","style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}}} -->
+<div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"level":1,"style":{"spacing":{"padding":{"right":"var:preset|spacing|60"}}},"fontSize":"heading-2"} -->
+<h1 class="has-heading-2-font-size" style="padding-right:var(--wp--preset--spacing--60)"><?php _e( 'Beta/Nightly', 'wporg' ); ?></h1>
+<!-- /wp:heading --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"fontSize":"heading-3"} -->
+<h2 class="has-heading-3-font-size"><?php _e( 'Unstable Beta Versions', 'wporg' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'If you are comfortable with PHP and would like to participate in the testing portion of our development cycle and <a href="https://core.trac.wordpress.org/newticket">report bugs you find</a>, beta releases might be for you.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'By their nature these releases are unstable and should not be used any place where your data is important. Please <a href="https://wordpress.org/support/article/backing-up-your-database/">backup your database</a> before upgrading to a beta release. To hear about the latest beta releases your best bet is to watch <a href="https://make.wordpress.org/core/">the development blog</a> and <a href="https://wordpress.org/support/forum/alphabeta/">the beta forum</a>.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'You can find the latest beta releases on the <a href="https://wordpress.org/download/releases/#betas">Beta Releases</a> page.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"fontSize":"heading-3"} -->
+<h2 class="has-heading-3-font-size" style="margin-top:var(--wp--preset--spacing--30)"><?php _e( 'Nightly Builds', 'wporg' ); ?></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'Development of WordPress moves fairly quickly and day-to-day things break as often as they are fixed. This high churn is part of our development process that aims to produce the most stable releases possible.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'If you would like to be part of this process, the best place to start is the <a href="https://make.wordpress.org/core/handbook/testing/beta/">Beta Testing Handbook</a>.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wordpress.org/nightly-builds/wordpress-latest.zip"><?php _e( 'Download the latest nightly release', 'wporg' ); ?></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->

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

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Title: Counter
+ * Slug: wporg-main-2022/counter
+ * Inserter: no
+ */
+
+?>
+<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}},"backgroundColor":"charcoal-2","textColor":"white","className":"is-style-brush-stroke","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull is-style-brush-stroke has-white-color has-charcoal-2-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="font-style:normal;font-weight:700"><?php _e( 'Download', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:navigation {"ref":11576,"textColor":"blueberry-2","backgroundColor":"charcoal-2","className":"is-style-dropdown-on-mobile","style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:cover {"overlayColor":"charcoal-2","minHeight":70,"minHeightUnit":"vh","contentPosition":"center center","align":"full"} -->
+<div class="wp-block-cover alignfull" style="min-height:70vh"><span aria-hidden="true" class="wp-block-cover__background has-charcoal-2-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"constrained","contentSize":"900px"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":1,"style":{"typography":{"fontStyle":"italic"}},"fontSize":"heading-3"} -->
+<h1 class="has-heading-3-font-size" style="font-style:italic"><?php _e( 'Number of WordPress [stable_branch] downloads', 'wporg' ); ?></h1>
+<!-- /wp:heading -->
+
+<!-- wp:wporg/download-counter {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontWeight":"200"}},"textColor":"blueberry-2"} /--></div>
+<!-- /wp:group --></div></div>
+<!-- /wp:cover -->

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

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Title: Release Archive
+ * Slug: wporg-main-2022/releases
+ * Inserter: no
+ */
+
+?>
+<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}},"backgroundColor":"blueberry-1","textColor":"white","className":"is-style-brush-stroke","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull is-style-brush-stroke has-white-color has-blueberry-1-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="font-style:normal;font-weight:700"><?php _e( 'Download', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:navigation {"ref":11576,"backgroundColor":"blueberry-1","className":"is-style-dropdown-on-mobile","style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}}} -->
+<div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"level":1,"style":{"spacing":{"padding":{"right":"var:preset|spacing|60"}}},"fontSize":"heading-2"} -->
+<h1 class="has-heading-2-font-size" style="padding-right:var(--wp--preset--spacing--60)"><?php _e( 'Releases', 'wporg' ); ?></h1>
+<!-- /wp:heading --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph -->
+<p><?php _e( 'This is an archive of every release we’ve done that we have a record of.<br>None of these are safe to use, except the <strong>latest</strong> in the 6.0 series, which is actively maintained.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'Curious about which jazzers we highlighted for each release? <a href="https://wordpress.org/about/history/">It’s on the History page</a>.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:wporg/release-tables /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->

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

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Title: Source Code
+ * Slug: wporg-main-2022/source
+ * Inserter: no
+ */
+
+?>
+<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}},"backgroundColor":"blueberry-1","textColor":"white","className":"is-style-brush-stroke","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull is-style-brush-stroke has-white-color has-blueberry-1-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"normal"} -->
+<p class="has-normal-font-size" style="font-style:normal;font-weight:700"><?php _e( 'Download', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:navigation {"ref":11576,"backgroundColor":"blueberry-1","className":"is-style-dropdown-on-mobile","style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}}} -->
+<div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"level":1,"style":{"spacing":{"padding":{"right":"var:preset|spacing|60"}}},"fontSize":"heading-2"} -->
+<h1 class="has-heading-2-font-size" style="padding-right:var(--wp--preset--spacing--60)"><?php _e( 'Source Code', 'wporg' ); ?></h1>
+<!-- /wp:heading --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph -->
+<p><?php _e( 'If you’d like to browse the WordPress source and inline documentation, we have a <a href="https://developer.wordpress.org/reference/">convenient developer reference</a> and a <a href="https://core.trac.wordpress.org/browser/">code browser</a>. We also have guides for <a href="https://make.wordpress.org/core/handbook/contribute/svn/">contributing with Subversion</a> and <a href="https://make.wordpress.org/core/handbook/contribute/git/">contributing with Git</a>.', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'The built WordPress source, <a href="https://wordpress.org/about/license/">licensed</a> under the GNU General Public License version 2 (or later), can be <a href="https://build.trac.wordpress.org/browser">browsed online</a> or checked out locally with Subversion or Git:', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><?php _e( 'Subversion: ', 'wporg' ); ?><code><?php _e( 'https://core.svn.wordpress.org/', 'wporg' ); ?></code></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><?php _e( 'Git mirror: ', 'wporg' ); ?><code><?php _e( 'git://core.git.wordpress.org/', 'wporg' ); ?></code></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'WordPress minifies core JavaScript files using UglifyJS and CSS using clean-css, all via the <a href="https://gruntjs.com/">Grunt</a> JavaScript-based task runner. The development source that includes un-minified versions of these files, along with the build scripts, can be <a href="https://core.trac.wordpress.org/browser">browsed online</a> or checked out locally with Subversion or Git:', 'wporg' ); ?></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><?php _e( 'Subversion: ', 'wporg' ); ?><code><?php _e( 'https://develop.svn.wordpress.org/', 'wporg' ); ?></code></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><?php _e( 'Git mirror: ', 'wporg' ); ?><code><?php _e( 'git://develop.git.wordpress.org/', 'wporg' ); ?></code></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:paragraph -->
+<p><?php _e( 'The source code for any program binaries or minified external scripts that are included with WordPress can be freely obtained from our <a href="https://code.trac.wordpress.org/browser/wordpress-sources">sources repository</a>.', 'wporg' ); ?></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->

source/wp-content/themes/wporg-main-2022/src/download-counter/block.json

@@ -0,0 +1,36 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/download-counter",
+	"version": "0.1.0",
+	"title": "Download Counter",
+	"category": "design",
+	"icon": "",
+	"description": "Display the download counter for a given WordPress version.",
+	"textdomain": "wporg",
+	"attributes": {},
+	"supports": {
+		"align": true,
+		"color": {
+			"background": true,
+			"text": true
+		},
+		"html": false,
+		"multiple": false,
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"blockGap": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"viewScript": "file:./view.js"
+}

source/wp-content/themes/wporg-main-2022/src/download-counter/index.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { useBlockProps } from '@wordpress/block-editor';
+import { registerBlockType } from '@wordpress/blocks';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+function Edit() {
+	const [ count, setCount ] = useState( '1,000,000' );
+	useEffect( async () => {
+		const realCount = await apiFetch( { path: '/wporg/v1/core-downloads/' } );
+		setCount( realCount );
+	}, [] );
+
+	return <div { ...useBlockProps() }>{ count }</div>;
+}
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );