diff --git a/blocks/sketch/src/controls.js b/blocks/sketch/src/controls.js
index e9feca78..8cf0a260 100644
--- a/blocks/sketch/src/controls.js
+++ b/blocks/sketch/src/controls.js
@@ -1,7 +1,11 @@
/**
* WordPress dependencies
*/
-import { BlockControls, InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+ BlockControls,
+ InspectorControls,
+ useSetting,
+} from '@wordpress/block-editor';
import { useDispatch } from '@wordpress/data';
import {
ColorPalette,
@@ -11,6 +15,7 @@ import {
ToolbarButton,
ToolbarDropdownMenu,
} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { trash, upload } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
@@ -59,6 +64,46 @@ const Controls = ( {
return blockRef.current.querySelector( 'svg' );
}
+ const uploadImage = useCallback( () => {
+ svgDomToBlob( getSVGNodeElement(), function ( blob ) {
+ uploadBlobToMediaLibrary(
+ blob,
+ { description: attributes?.title },
+ function ( err, image ) {
+ if ( err ) {
+ return createErrorNotice( err );
+ }
+
+ createInfoNotice(
+ sprintf(
+ __(
+ 'Image created and added to the library',
+ 'a8c-sketch'
+ ),
+ image.id
+ ),
+ {
+ id: `uploaded-image-${ image.id }`,
+ type: 'snackbar',
+ isDismissible: false,
+ actions: [
+ {
+ url: `/wp-admin/upload.php?item=${ image.id }`, // @ToDo - Get the rute properly
+ label: __( 'View Image', 'a8c-sketch' ),
+ },
+ ],
+ }
+ );
+ }
+ );
+ } );
+ }, [
+ attributes,
+ createErrorNotice,
+ createInfoNotice,
+ getSVGNodeElement,
+ getSVGNodeElement,
+ ] );
return (
<>
@@ -104,40 +149,13 @@ const Controls = ( {
label={ __( 'Clear canvas', 'a8c-sketch' ) }
disabled={ isEmpty }
/>
-
{
- svgDomToBlob( getSVGNodeElement(), function( blob ) {
- uploadBlobToMediaLibrary( blob, { description: attributes?.title }, function( err, image ) {
- if ( err ) {
- return createErrorNotice( err );
- }
-
- createInfoNotice(
- sprintf(
- __( 'Image created and added to the library', 'a8c-sketch' ),
- image.id,
- ),
- {
- id: `uploaded-image-${ image.id }`,
- type: 'snackbar',
- isDismissible: false,
- actions: [
- {
- url: `/wp-admin/upload.php?item=${ image.id }`, // @ToDo - Get the rute properly
- label: __( 'View Image', 'a8c-sketch' ),
- },
- ],
- }
- );
- } );
- } );
- } }
+ onClick={ uploadImage }
label={ __( 'Upload', 'a8c-sketch' ) }
/>
diff --git a/lib/svg-dom-to-blob/index.js b/lib/svg-dom-to-blob/index.js
index 25bf5740..63eac175 100644
--- a/lib/svg-dom-to-blob/index.js
+++ b/lib/svg-dom-to-blob/index.js
@@ -5,6 +5,7 @@ export default function svgDomToBlob( svgNode, fn ) {
}
// Get SVG Blob.
+ svgNode.setAttribute("viewBox", `0 0 ${svgNode.getBoundingClientRect().width} ${svgNode.getBoundingClientRect().height}`);
const svgString = new XMLSerializer().serializeToString( svgNode );
const DOMURL = self.URL || self.webkitURL || self;
const svgBlob = new Blob( [ svgString ], { type: "image/svg+xml;charset=utf-8" } );