diff --git a/source/wp-content/themes/wporg-developer/inc/user-content.php b/source/wp-content/themes/wporg-developer/inc/user-content.php index 6f66fe3ba..823e3981d 100644 --- a/source/wp-content/themes/wporg-developer/inc/user-content.php +++ b/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' ), + ) + ); } } diff --git a/source/wp-content/themes/wporg-developer/js/function-reference.js b/source/wp-content/themes/wporg-developer/js/function-reference.js index fd35c30f3..1c89b34f0 100644 --- a/source/wp-content/themes/wporg-developer/js/function-reference.js +++ b/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 ); + } ); } ); diff --git a/source/wp-content/themes/wporg-developer/reference/template-source.php b/source/wp-content/themes/wporg-developer/reference/template-source.php index 82d5f2eba..9242effcc 100644 --- a/source/wp-content/themes/wporg-developer/reference/template-source.php +++ b/source/wp-content/themes/wporg-developer/reference/template-source.php @@ -35,8 +35,9 @@
%s
',
+ '%3$s
',
esc_attr( get_post_meta( get_the_ID(), '_wp-parser_line_num', true ) ),
+ __( 'Function source code', 'wporg' ),
htmlentities( get_source_code() )
)
);
diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
index c4287de20..47eb4b905 100644
--- a/source/wp-content/themes/wporg-developer/scss/main.scss
+++ b/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 {
diff --git a/source/wp-content/themes/wporg-developer/scss/prism.scss b/source/wp-content/themes/wporg-developer/scss/prism.scss
index 3e365164c..0814aba74 100644
--- a/source/wp-content/themes/wporg-developer/scss/prism.scss
+++ b/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;
+ }
+}
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css
index 9ff1752bb..36724deea 100644
--- a/source/wp-content/themes/wporg-developer/stylesheets/main.css
+++ b/source/wp-content/themes/wporg-developer/stylesheets/main.css
@@ -480,8 +480,7 @@ img {
.devhub-wrap input[type="submit"]: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 #3582c4;
}
.devhub-wrap a.button.shiny-blue,
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/prism.css b/source/wp-content/themes/wporg-developer/stylesheets/prism.css
index 583dd4074..ace3f2c22 100644
--- a/source/wp-content/themes/wporg-developer/stylesheets/prism.css
+++ b/source/wp-content/themes/wporg-developer/stylesheets/prism.css
@@ -194,3 +194,22 @@ pre.line-numbers > code {
padding-right: 0.8em;
text-align: right;
}
+
+/* Copy button */
+pre.wp-block-code {
+ position: relative;
+}
+
+pre.wp-block-code > button {
+ display: none;
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ font-size: 1.4rem;
+ z-index: 2;
+}
+
+pre.wp-block-code:hover > button,
+pre.wp-block-code:focus-within > button {
+ display: revert;
+}