diff --git a/blocks/sketch/editor.scss b/blocks/sketch/editor.scss index 9be48bdb..f42999d6 100644 --- a/blocks/sketch/editor.scss +++ b/blocks/sketch/editor.scss @@ -1,8 +1,8 @@ .wp-block-a8c-sketch { &__brush-style-popover { /** - * Take care of default width for popover content. - */ + * Take care of default width for popover content. + */ .components-popover__content { min-width: initial; } diff --git a/blocks/sketch/src/controls.js b/blocks/sketch/src/controls.js index 9cd0e28b..e9feca78 100644 --- a/blocks/sketch/src/controls.js +++ b/blocks/sketch/src/controls.js @@ -1,18 +1,10 @@ -/** - * Internal dependencies - */ -import { ColorControlIcon, BrushSizeControlIcon, BrushSizeIcon } from './icons'; /** * 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, - ExternalLink, Icon, PanelBody, TextareaControl, @@ -20,7 +12,15 @@ import { ToolbarDropdownMenu, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { trash } from '@wordpress/icons'; +import { trash, upload } from '@wordpress/icons'; +import { store as noticesStore } from '@wordpress/notices'; + +/** + * Internal dependencies + */ +import uploadBlobToMediaLibrary from '../../../lib/upload-image'; +import svgDomToBlob from '../../../lib/svg-dom-to-blob'; +import { ColorControlIcon, BrushSizeControlIcon, BrushSizeIcon } from './icons'; const brushes = [ { @@ -46,8 +46,19 @@ const Controls = ( { isEmpty, title, setTitle, + blockRef, + attributes, } ) => { const colors = useSetting( 'color.palette' ) || []; + const { createErrorNotice, createInfoNotice } = useDispatch( noticesStore ); + function getSVGNodeElement() { + if ( ! blockRef.current ) { + return; + } + + return blockRef.current.querySelector( 'svg' ); + } + return ( <> @@ -58,7 +69,7 @@ const Controls = ( { isAlternate: true, } } icon={ } - label={ __( 'Brush', 'sketch' ) } + label={ __( 'Brush', 'a8c-sketch' ) } controls={ brushes.map( ( control ) => ( { ...control, isActive: control.value === preset, @@ -75,7 +86,7 @@ const Controls = ( { icon={ } /> } - label={ __( 'Color', 'sketch' ) } + label={ __( 'Color', 'a8c-sketch' ) } > { () => ( + + + + + { + 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' ), + }, + ], + } + ); + } ); + } ); + } } + label={ __( 'Upload', 'a8c-sketch' ) } /> - + { __( - "Add a short-text description so it's recognized as the accessible name for the sketch." + "Add a short-text description so it's recognized as the accessible name for the sketch.", + 'a8c-sketch' ) } } @@ -113,4 +161,5 @@ const Controls = ( { ); }; + export default Controls; diff --git a/blocks/sketch/src/edit.js b/blocks/sketch/src/edit.js index 7abc1375..06b8866b 100644 --- a/blocks/sketch/src/edit.js +++ b/blocks/sketch/src/edit.js @@ -109,6 +109,8 @@ const Edit = ( { attributes, isSelected, setAttributes } ) => { isEmpty={ ! strokes.length } title={ title } setTitle={ setTitle } + blockRef={ ref } + attributes={ attributes } />
{ + mediaUpload( { + additionalData: { + title, + caption, + description, + }, + allowedTypes: [ 'image' ], + filesList: [ imageBlob ], + onFileChange: ( images ) => { + if ( ! images?.length ) { + return; + } + + const image = images[ 0 ]; + if ( ! image?.id ) { + return; + } + fn( null, image ); + }, + onError: fn, + } ); + }; +} \ No newline at end of file