Code Syntax Block: Fix button style and adjust its behavior (#106)

* Fix button not sticky, and overlapping * Increase number of lines shown based on discussion See #22 (comment). * Inject buttons before the `pre`, style like a frame header * Remove unused CSS attributes Co-authored-by: Kelly Dwan <[email protected]>
WordPress · Jun 10, 2022 · 4b76c08 · 4b76c08
1 parent 67eb6e8
commit 4b76c08
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 39 deletions.
diff --git a/source/wp-content/themes/wporg-developer/js/function-reference.js b/source/wp-content/themes/wporg-developer/js/function-reference.js
@@ -7,9 +7,9 @@
 
 // eslint-disable-next-line id-length -- $ OK.
 jQuery( function ( $ ) {
-	// 22.5px (line height) * 10 for 10 lines + 15px top padding + 10px extra.
+	// 22.5px (line height) * 15 for 15 lines + 15px top padding + 10px extra.
 	// The extra 10px added to partially show next line so it's clear there is more.
-	const MIN_HEIGHT = 22.5 * 10 + 15 + 10;
+	const MIN_HEIGHT = 22.5 * 15 + 15 + 10;
 
 	function collapseCodeBlock( $element, $button ) {
 		$button.text( wporgFunctionReferenceI18n.expand );
@@ -23,6 +23,7 @@ jQuery( function ( $ ) {
 	function expandCodeBlock( $element, $button ) {
 		$button.text( wporgFunctionReferenceI18n.collapse );
 		$button.attr( 'aria-expanded', 'true' );
+		// { height: auto; } can't be used here or the transition effect won't work.
 		$element.height( $element.data( 'height' ) );
 	}
 
@@ -66,7 +67,6 @@ jQuery( function ( $ ) {
 			$element.data( 'height', originalHeight );
 
 			const $expandButton = $( document.createElement( 'button' ) );
-			$expandButton.addClass( 'button-link' );
 			$expandButton.on( 'click', function () {
 				if ( 'true' === $expandButton.attr( 'aria-expanded' ) ) {
 					collapseCodeBlock( $element, $expandButton );
@@ -79,7 +79,7 @@ jQuery( function ( $ ) {
 			$container.append( $expandButton );
 		}
 
-		$element.prepend( $container );
+		$element.before( $container );
 	} );
 
 	let $usesList, $usedByList, $showMoreUses, $hideMoreUses, $showMoreUsedBy, $hideMoreUsedBy;

diff --git a/source/wp-content/themes/wporg-developer/scss/prism.scss b/source/wp-content/themes/wporg-developer/scss/prism.scss
@@ -209,27 +209,31 @@ pre.line-numbers > code {
 }
 
 /* Copy button */
-pre.wp-block-code {
-	position: relative;
-
-	> .wp-code-block-button-container {
-		display: none;
-		position: absolute;
-		top: 1rem;
-		right: 1rem;
-		z-index: 2;
-
-		button {
-			font-size: 1.4rem;
-		}
+.wp-code-block-button-container {
+	display: flex;
+	justify-content: right;
+	padding: 1rem;
+	background: $color-white;
+	border-width: 1px 1px 0;
+	border-style: solid;
+	border-color: get-color(gray-5);
+	border-top-left-radius: 0.3em;
+	border-top-right-radius: 0.3em;
+
+	button {
+		font-size: 1.2rem !important;
+	}
 
-		button + button {
-			margin-left: 0.5em;
-		}
+	button + button {
+		margin-left: 0.5em;
 	}
 
-	&:hover > .wp-code-block-button-container,
-	&:focus-within > .wp-code-block-button-container {
-		display: revert;
+	+ pre {
+		margin-top: 0;
+		border-width: 0 1px 1px;
+		border-style: solid;
+		border-color: get-color(gray-5);
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
 	}
 }
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/prism.css b/source/wp-content/themes/wporg-developer/stylesheets/prism.css