Code blocks: Add "Copy" button to copy code snippets (#79)

* Function source: Add aria label to the main source code block

* Inject a "copy" button to each code block

* Style the copy button, remove unused CSS for older browsers

source/wp-content/themes/wporg-developer/inc/user-content.php

@@ -163,14 +163,45 @@ public static function comment_new_allowed_html( $commentdata ) {
 	 */
 	public static function scripts_and_styles() {
 		if ( is_singular() ) {
-			wp_enqueue_script( 'wporg-developer-function-reference', get_template_directory_uri() . '/js/function-reference.js', array( 'jquery' ), '20180724', true );
+			wp_enqueue_script(
+				'wporg-developer-function-reference',
+				get_template_directory_uri() . '/js/function-reference.js',
+				array( 'jquery', 'wp-a11y' ),
+				filemtime( dirname( __DIR__ ) . '/js/function-reference.js' ),
+				true
+			);
+			wp_localize_script(
+				'wporg-developer-function-reference',
+				'wporgFunctionReferenceI18n',
+				array(
+					'copy'   => __( 'Copy', 'wporg' ),
+					'copied' => __( 'Code copied', 'wporg' ),
+				)
+			);
 
-			wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'jquery', 'quicktags' ), '20200110', true );
-			wp_enqueue_script( 'wporg-developer-user-notes-feedback', get_template_directory_uri() . '/js/user-notes-feedback.js', array( 'jquery', 'quicktags' ), '20181023', true );
-			wp_localize_script( 'wporg-developer-user-notes-feedback', 'wporg_note_feedback', array(
-				'show'             => __( 'Show Feedback', 'wporg' ),
-				'hide'             => __( 'Hide Feedback', 'wporg' ),
-			) );
+			wp_enqueue_script(
+				'wporg-developer-user-notes',
+				get_template_directory_uri() . '/js/user-notes.js',
+				array( 'jquery', 'quicktags' ),
+				filemtime( dirname( __DIR__ ) . '/js/user-notes.js' ),
+				true
+			);
+
+			wp_enqueue_script(
+				'wporg-developer-user-notes-feedback',
+				get_template_directory_uri() . '/js/user-notes-feedback.js',
+				array( 'jquery', 'quicktags' ),
+				filemtime( dirname( __DIR__ ) . '/js/user-notes-feedback.js' ),
+				true
+			);
+			wp_localize_script(
+				'wporg-developer-user-notes-feedback',
+				'wporg_note_feedback',
+				array(
+					'show' => __( 'Show Feedback', 'wporg' ),
+					'hide' => __( 'Hide Feedback', 'wporg' ),
+				)
+			);
 		}
 	}
 

source/wp-content/themes/wporg-developer/js/function-reference.js

@@ -1,11 +1,11 @@
-/* @global jQuery */
+/* global jQuery, wporgFunctionReferenceI18n */
 /**
  * function-reference.js
  *
  * Handles all interactivity on the single function page
  */
 
-jQuery( function( $ ) {
+jQuery( function ( $ ) {
 	let $usesList, $usedByList, $showMoreUses, $hideMoreUses, $showMoreUsedBy, $hideMoreUsedBy;
 
 	function toggleUsageListInit() {
@@ -47,4 +47,35 @@ jQuery( function( $ ) {
 	}
 
 	toggleUsageListInit();
+
+	// Inject the "copy" button into every code block.
+	$( '.wp-block-code' ).each( function ( i, element ) {
+		const $element = $( element );
+		let timeoutId;
+
+		const $button = $( document.createElement( 'button' ) );
+		$button.text( wporgFunctionReferenceI18n.copy );
+		$button.on( 'click', function () {
+			clearTimeout( timeoutId );
+			const code = $element.find( 'code' ).text();
+			if ( ! code ) {
+				return;
+			}
+
+			// This returns a promise which will resolve if the copy suceeded,
+			// and we can set the button text to tell the user it worked.
+			// We don't do anything if it fails.
+			window.navigator.clipboard.writeText( code ).then( function () {
+				$button.text( wporgFunctionReferenceI18n.copied );
+				wp.a11y.speak( wporgFunctionReferenceI18n.copied );
+
+				// After 5 seconds, reset the button text.
+				timeoutId = setTimeout( function () {
+					$button.text( wporgFunctionReferenceI18n.copy );
+				}, 5000 );
+			} );
+		} );
+
+		$element.prepend( $button );
+	} );
 } );

source/wp-content/themes/wporg-developer/reference/template-source.php

@@ -35,8 +35,9 @@
 			<?php
 				echo do_blocks(
 					sprintf(
-						'<!-- wp:code {"lineNumbers":true} --><pre class="wp-block-code" data-start="%s"><code lang="php" class="language-php line-numbers">%s</code></pre><!-- /wp:code -->',
+						'<!-- wp:code {"lineNumbers":true} --><pre class="wp-block-code" data-start="%1$s" aria-label="%2$s"><code lang="php" class="language-php line-numbers">%3$s</code></pre><!-- /wp:code -->',
 						esc_attr( get_post_meta( get_the_ID(), '_wp-parser_line_num', true ) ),
+						__( 'Function source code', 'wporg' ),
 						htmlentities( get_source_code() )
 					)
 				);

source/wp-content/themes/wporg-developer/scss/main.scss

@@ -173,8 +173,7 @@
 		&:active {
 			border-color: #aaa #bbb #bbb #bbb;
 			background: #f0f0f0;
-			-webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.4);
-			box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.4);
+			box-shadow: 0 0 3px get-color(blue-40);
 		}
 
 		&.shiny-blue {

source/wp-content/themes/wporg-developer/scss/prism.scss

@@ -205,3 +205,22 @@ pre.line-numbers > code {
 	padding-right: 0.8em;
 	text-align: right;
 }
+
+/* Copy button */
+pre.wp-block-code {
+	position: relative;
+
+	> button {
+		display: none;
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		font-size: 1.4rem;
+		z-index: 2;
+	}
+
+	&:hover > button,
+	&:focus-within > button {
+		display: revert;
+	}
+}