Initial commit of the plugin.

nuovo file:             .editorconfig
nuovo file:             .gitignore
nuovo file:             block.json
nuovo file:             build/index.asset.php
nuovo file:             build/index.css
nuovo file:             build/index.js
nuovo file:             build/style-index.css
nuovo file:             danixland-gravatar.php
nuovo file:             package-lock.json
nuovo file:             package.json
nuovo file:             readme.txt
nuovo file:             src/edit.js
nuovo file:             src/editor.scss
nuovo file:             src/index.js
nuovo file:             src/save.js
nuovo file:             src/style.scss

5 files changed, 242 insertions, 0 deletions

diff --git a/src/edit.js b/src/edit.js
new file mode 100644
index 0000000..fbd4149
--- /dev/null
+++ b/src/edit.js
@@ -0,0 +1,81 @@
+import { Placeholder, TextControl } from '@wordpress/components';
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import MD5 from 'crypto-js/md5';
+
+export default function Edit( {
+	attributes,
+	example,
+	className,
+	isSelected,
+	setAttributes,
+} ) {
+	if ( attributes.size ) {
+		var sizes = attributes.size;
+	} else {
+		var sizes = 200;
+	}
+	if ( attributes.email ) {
+		var mail = attributes.email;
+		var addr = mail.toLowerCase().trim();
+		var hash = MD5( addr ).toString();
+		var url = '//www.gravatar.com/avatar/' + hash + '?s=' + sizes;
+	}
+	var height = sizes + 40;
+	return (
+		<div className={ className }>
+			{ attributes.email && ! isSelected ? (
+				<figure
+					className={ className }
+					style={ { width: sizes + 'px', height: height + 'px' } }
+				>
+					<img
+						src={ url }
+						alt={ addr }
+						width={ sizes }
+						height={ sizes }
+					/>
+					<figcaption>{ attributes.caption }</figcaption>
+				</figure>
+			) : (
+				<Placeholder
+					label={ __( 'Gravatar', 'dnxvatar' ) }
+					instructions={ __(
+						'Insert at least the email address',
+						'dnxvatar'
+					) }
+				>
+					<TextControl
+						placeholder={ 'danix@example.com' }
+						label={ __( 'Email', 'dnxvatar' ) }
+						value={ attributes.email }
+						onChange={ ( val ) => setAttributes( { email: val } ) }
+					/>
+					<TextControl
+						placeholder={ 'my profile photo' }
+						label={ __( 'Alt text', 'dnxvatar' ) }
+						value={ attributes.alt }
+						onChange={ ( val ) => setAttributes( { alt: val } ) }
+					/>
+					<TextControl
+						placeholder={ 'this is me...' }
+						label={ __( 'Caption', 'dnxvatar' ) }
+						value={ attributes.caption }
+						onChange={ ( val ) =>
+							setAttributes( { caption: val } )
+						}
+					/>
+					<NumberControl
+						placeholder={ '200' }
+						label={ __( 'Size', 'dnxvatar' ) }
+						isShiftStepEnabled={ true }
+						labelPosition={ 'top' }
+						onChange={ ( val ) => setAttributes( { size: val } ) }
+						shiftStep={ 10 }
+						value={ sizes }
+					/>
+				</Placeholder>
+			) }
+		</div>
+	);
+}
diff --git a/src/editor.scss b/src/editor.scss
new file mode 100644
index 0000000..9cca931
--- /dev/null
+++ b/src/editor.scss
@@ -0,0 +1,8 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-dnxvatar-danixland-gravatar {
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..048682a
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,116 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { AlignmentToolbar } from '@wordpress/block-editor';
+
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+import './editor.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+registerBlockType( 'dnxvatar/danixland-gravatar', {
+	/**
+	 * This is the display title for your block, which can be translated with `i18n` functions.
+	 * The block inserter will show this name.
+	 */
+	title: __( 'Gravatar', 'dnxvatar' ),
+
+	/**
+	 * This is a short description for your block, can be translated with `i18n` functions.
+	 * It will be shown in the Block Tab in the Settings Sidebar.
+	 */
+	description: __( 'Insert a gravatar inside a post or page.', 'dnxvatar' ),
+
+	attributes: {
+		email: {
+			type: 'string',
+			source: 'text',
+			selector: 'div',
+		},
+		size: {
+			type: 'string',
+			source: 'text',
+			selector: 'div',
+		},
+		alt: {
+			type: 'string',
+			source: 'text',
+			selector: 'div',
+		},
+		caption: {
+			type: 'string',
+			source: 'text',
+			selector: 'div',
+		},
+		alignment: {
+			type: 'string',
+			default: 'none',
+		},
+	},
+	example: {
+		attributes: {
+			email: 'danix@example.com',
+			alt: 'my profile photo',
+			caption: 'this is me',
+			size: '200',
+			alignment: 'right',
+		},
+	},
+
+	/**
+	 * Blocks are grouped into categories to help users browse and discover them.
+	 * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`.
+	 */
+	category: 'common',
+
+	/**
+	 * An icon property should be specified to make it easier to identify a block.
+	 * These can be any of WordPress’ Dashicons, or a custom svg element.
+	 */
+	icon: 'businessman',
+
+	/**
+	 * Optional block extended support features.
+	 */
+	supports: {
+		// Removes support for an HTML mode.
+		html: false,
+		align: [ 'left', 'right', 'center' ],
+	},
+
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );
diff --git a/src/save.js b/src/save.js
new file mode 100644
index 0000000..060037d
--- /dev/null
+++ b/src/save.js
@@ -0,0 +1,28 @@
+import MD5 from 'crypto-js/md5';
+export default function Save( { attributes, className } ) {
+	if ( attributes.size ) {
+		var sizes = attributes.size;
+	} else {
+		var sizes = 200;
+	}
+	var height = sizes + 40;
+	var mail = attributes.email;
+	var addr = mail.toLowerCase().trim();
+	var hash = MD5( addr ).toString();
+	var url = '//www.gravatar.com/avatar/' + hash + '?s=' + sizes;
+
+	return (
+		<figure
+			className={ className }
+			style={ { width: sizes + 'px', height: height + 'px' } }
+		>
+			<img
+				src={ url }
+				alt={ attributes.alt }
+				width={ sizes }
+				height={ sizes }
+			/>
+			<figcaption>{ attributes.caption }</figcaption>
+		</figure>
+	);
+}
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 0000000..990812f
--- /dev/null
+++ b/src/style.scss
@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-dnxvatar-danixland-gravatar {
+}