Fix accessibility of GitHub links (#388)

* Add context to handbook github links for screen readers

Move handbook article meta github to a block so that we can get the title

* Patch after rebase

* DRY block markup

source/wp-content/themes/wporg-developer-2023/functions.php

@@ -150,6 +150,7 @@
 require __DIR__ . '/inc/block-hooks.php';
 
 // Block files
+require_once __DIR__ . '/src/article-meta-github/block.php';
 require_once __DIR__ . '/src/chapter-list/block.php';
 require_once __DIR__ . '/src/cli-command-table/block.php';
 require_once __DIR__ . '/src/code-changelog/block.php';

source/wp-content/themes/wporg-developer-2023/patterns/article-meta.php

@@ -16,7 +16,7 @@
 		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'First published', 'wporg' ); ?></p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:post-date {"fontSize":"normal"} /-->
+		<!-- wp:post-date /-->
 	</div>
 	<!-- /wp:group -->
 
@@ -26,8 +26,10 @@
 		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'Last updated', 'wporg' ); ?></p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:post-date {"displayType":"modified","fontSize":"normal"} /-->
+		<!-- wp:post-date {"displayType":"modified"} /-->
 	</div>
 	<!-- /wp:group -->
+
+	<!-- wp:wporg/article-meta-github /-->
 </div>
 <!-- /wp:group -->

source/wp-content/themes/wporg-developer-2023/src/article-meta-github/block.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/article-meta-github",
+	"version": "0.1.0",
+	"title": "Article Meta GitHub",
+	"category": "widgets",
+	"icon": "smiley",
+	"description": "",
+	"usesContext": [ "postId", "postType" ],
+	"attributes": {},
+	"supports": {
+		"inserter": false
+	},
+	"textdomain": "wporg",
+	"editorScript": "file:./index.js"
+}

source/wp-content/themes/wporg-developer-2023/src/article-meta-github/block.php

@@ -0,0 +1,104 @@
+<?php
+namespace WordPressdotorg\Theme\Developer_2023\Article_Meta_Github;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/article-meta-github',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
+}
+
+/**
+ * Render the block content.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes, $content, $block ) {
+	$github_handbooks = array(
+		'wpcs-handbook',
+		'blocks-handbook',
+		'rest-api-handbook',
+		'cli-handbook',
+		'adv-admin-handbook',
+	);
+
+	$post_type = $block->context['postType'];
+	$post_id = $block->context['postId'];
+
+	if (
+		! isset( $post_id )
+		|| ! isset( $post_type )
+		|| ! in_array( $post_type, $github_handbooks, true )
+	) {
+		return '';
+	}
+
+	$title = get_the_title( $post_id );
+
+	$content = sprintf(
+		do_blocks(
+			'<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+			<div class="wp-block-group">
+
+				<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+				<p style="font-style:normal;font-weight:700">%1$s</p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:paragraph {"className":"external-link"} -->
+				<p class="external-link"><a href="[article_edit_link]">%2$s</a></p>
+				<!-- /wp:paragraph -->
+
+			</div>
+			<!-- /wp:group -->'
+		),
+		esc_html__( 'Edit article', 'wporg' ),
+		sprintf(
+			/* translators: %s: article title */
+			__( 'Improve it on GitHub<span class="screen-reader-text">: %s</span>', 'wporg' ),
+			esc_html( $title )
+		)
+	);
+
+	if ( 'blocks-handbook' !== $post_type ) {
+		$content .= sprintf(
+			do_blocks(
+				'<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+				<div class="wp-block-group">
+
+					<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+					<p style="font-style:normal;font-weight:700">%1$s</p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:paragraph {"className":"external-link"} -->
+					<p class="external-link"><a href="[article_changelog_link]">%2$s</a></p>
+					<!-- /wp:paragraph -->
+					
+				</div>
+				<!-- /wp:group -->'
+			),
+			esc_html__( 'Changelog', 'wporg' ),
+			sprintf(
+				/* translators: %s: article title */
+				__( 'See list of changes<span class="screen-reader-text">: %s</span>', 'wporg' ),
+				esc_html( $title )
+			)
+		);
+	}
+
+	return $content;
+}

source/wp-content/themes/wporg-developer-2023/src/article-meta-github/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from '../shared/dynamic-edit';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );