WIP - Init block Geo Information

blocks/geo-information/README.md

+# Informação geolocalizada (geo information)
+
+## Descrição
+
+Bloco para geolocalização de informações.
+
+## Como usar
+
+## Changelog
+
+1.0.0 - versão inicial
\ No newline at end of file

blocks/geo-information/block.json

+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "hacklab-blocks/geo-information",
+	"version": "1.0.0",
+	"title": "Geo information",
+	"category": "text",
+	"icon": "admin-site",
+	"description": "Bloco para geolocalização de informações",
+	"attributes": {
+		"message": {
+			"type": "string",
+			"source": "text",
+			"selector": "div"
+		}
+	},
+	"supports": {
+		"html": false
+	},
+	"textdomain": "hacklab-blocks",
+	"editorScript": "file:../../build/js/geo-information-index/geo-information-index.js",
+	"editorStyle": "file:../../build/css/geo-information-index.css",
+	"style": "file:../../build/css/style-geo-information-index.css"
+}
\ No newline at end of file

blocks/geo-information/edit.js

+/**
+ * WordPress components that create the necessary UI elements for the block
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-components/
+ */
+import { TextControl } from '@wordpress/components';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
+ *
+ * @param {Object}   props               Properties passed to the function.
+ * @param {Object}   props.attributes    Available block attributes.
+ * @param {Function} props.setAttributes Function that updates individual attributes.
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	return (
+		<TextControl
+			{ ...blockProps }
+			value={ attributes.message }
+			onChange={ ( val ) => setAttributes( { message: val } ) }
+		/>
+	);
+}

blocks/geo-information/editor.scss

+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-create-block-gutenpride input[type='text'] {
+	font-family: Gilbert;
+	font-size: 64px;
+	color: inherit;
+	background: inherit;
+	border: 0;
+}

blocks/geo-information/geo-information.php

+<?php
+namespace hacklabBlocks;
+
+/**
+ * Geo information render_callback
+ */
+function geo_information_callback( $attributes, $content, $block ) {
+
+    return '<div class="wp-block-hacklab-geo-information">Geo information</div>';
+
+}
\ No newline at end of file

blocks/geo-information/index.js

+/**
+ * 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';
+
+/**
+ * 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. All other files
+ * get applied to the editor only.
+ *
+ * @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( 'hacklab-blocks/geo-information', {
+	/**
+	 * Used to construct a preview for the block to be shown in the block inserter.
+	 */
+	example: {
+		attributes: {
+			message: 'Gutenpride',
+		},
+	},
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

blocks/geo-information/save.js

+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
+ *
+ * @param {Object} props            Properties passed to the function.
+ * @param {Object} props.attributes Available block attributes.
+ * @return {WPElement} Element to render.
+ */
+export default function save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	return <div { ...blockProps }>{ attributes.message }</div>;
+}

blocks/geo-information/style.scss

+/**
+ * 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.
+ */

hacklab-blocks.php

@@ -33,7 +33,10 @@ function hacklab_blocks_init() {
 		),
 		'featured-color' => array(
 			'render_callback' => 'hacklabBlocks\\featured_color_callback'
-		)
+		),
+		'geo-information' => array(
+			'render_callback' => 'hacklabBlocks\\geo_information_callback'
+		),
 	);
 	$blocos_ativos = apply_filters('hacklab_blocos_ativos',$blocos_ativos);
 	foreach ($blocos_ativos as $block_name => $block_args ) {