Override editor style before creating canvas from HTML

See: #2.
sortabrilliant · Jan 27, 2020 · 5cc3496 · 5cc3496
1 parent 770f4b3
commit 5cc3496
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/build/index.asset.php b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-plugins', 'wp-polyfill'), 'version' => '148c2420ee5d0556bf0e3e0245ccf4b0');
+<?php return array('dependencies' => array('lodash', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-plugins', 'wp-polyfill'), 'version' => 'c5e62fb8b3d36ea793225edb445019a9');
diff --git a/build/index.js b/build/index.js
diff --git a/src/util.js b/src/util.js
@@ -36,16 +36,15 @@ export function captureBlock( id, name ) {
 	const filename = kebabCase( name ) + '-screenshot';
 	const block = document.querySelector( `[data-block="${ id }"]` );
 
-	// Remove some styles before creating canvas.
-	const options = {
-		onclone: ( document ) => {
-			document.getElementById( `block-${ id }` )
-				.classList
-				.remove( 'has-child-selected' );
-		},
-	};
-
-	html2canvas( block, options ).then( ( canvas ) => {
+	// Hack: Temporarely override styles.
+	const style = document.createElement( 'style' );
+	document.head.appendChild( style );
+	style.sheet.insertRule( `#block-${ id } *::before { border: none; }`, 0 );
+
+	html2canvas( block ).then( ( canvas ) => {
 		download( canvas, filename );
+
+		// Remove custom style.
+		document.head.removeChild( style );
 	} );
 }