Create items grid initial structure (#136)

src/gutenberg-blocks/class-tainacan-gutenberg-block.php

@@ -23,6 +23,8 @@ class GutenbergBlock {
 
 	private function add_gutenberg_blocks_actions() {
 		add_action('init', array($this, 'register_tainacan_collections_carousel'));
+		add_action('init', array($this, 'register_tainacan_items_grid'));
+
 		add_action('init', array($this, 'add_plugin_settings'));
 
 		add_action('wp_enqueue_scripts', array($this, 'enqueue_on_theme'));
@@ -55,10 +57,30 @@ class GutenbergBlock {
 		);
 	}
 
+	public function register_tainacan_items_grid(){
+		global $TAINACAN_BASE_URL;
+
+		wp_register_script(
+			'items-grid',
+			$TAINACAN_BASE_URL . '/assets/items_grid-components.js',
+			array('wp-blocks', 'wp-element')
+		);
+
+		wp_register_style(
+			'items-grid',
+			$TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-blocks-style.css',
+			array('wp-edit-blocks')
+		);
+
+		register_block_type('tainacan/items-grid', array(
+			'editor_script' => 'items-grid',
+			'style'         => 'items-grid'
+		));
+	}
+
 	public function register_tainacan_collections_carousel(){
 		global $TAINACAN_BASE_URL;
 
-		// Collections carousel
 		wp_register_script(
 			'collections-carousel',
 			 $TAINACAN_BASE_URL . '/assets/collections_carousel-components.js',
@@ -94,5 +116,6 @@ class GutenbergBlock {
 		$settings = $this->get_plugin_js_settings();
 
 		wp_localize_script( 'collections-carousel', 'tainacan_plugin', $settings );
+		wp_localize_script( 'items-grid', 'tainacan_plugin', $settings );
 	}
 }

src/gutenberg-blocks/gutenberg-blocks-style.scss

@@ -1 +1,2 @@
-@import 'tainacan-collections/collections-carousel/collections-carousel';
+@import 'tainacan-collections/collections-carousel/collections-carousel';
+@import 'tainacan-items/items-grid/items-grid';

src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js

@@ -11,7 +11,7 @@ const { __ } = wp.i18n;
 import tainacan from '../../api-client/axios.js';
 
 registerBlockType('tainacan/collections-carousel', {
-    title: 'Tainacan Collections Carousel',
+    title: __('Tainacan Collections Carousel', 'tainacan'),
     icon: 'images-alt',
     category: 'tainacan-blocks',
     attributes: {

src/gutenberg-blocks/tainacan-items/items-grid/index.js

@@ -0,0 +1,46 @@
+const { registerBlockType } = wp.blocks;
+
+const { __ } = wp.i18n;
+
+const { Button, Modal } = wp.components;
+const { withState } = wp.compose;
+
+const MyModal = withState( {
+    isOpen: false,
+} )( ( { isOpen, setState } ) => (
+    <div>
+        <Button isDefault onClick={ () => setState( { isOpen: true } ) }>Open Modal</Button>
+        { isOpen ?
+            <Modal
+                title="This is my modal"
+                onRequestClose={ () => setState( { isOpen: false } ) }>
+                <Button isDefault onClick={ () => setState( { isOpen: false } ) }>
+                    My custom close button
+                </Button>
+            </Modal>
+            : null }
+    </div>
+) );
+
+registerBlockType('tainacan/items-grid', {
+    title: __('Tainacan Items Grid', 'tainacan'),
+    icon: 'images-alt',
+    category: 'tainacan-blocks',
+    edit({ attributes, setAttributes, className }){
+        console.log('edit', attributes);
+
+
+        return (
+            <div>
+                <MyModal />
+            </div>
+        );
+    },
+    save({ attributes }){
+        const { content } = attributes;
+
+        console.log('save', attributes);
+
+        return <div>{ content }</div>
+    }
+});

src/gutenberg-blocks/tainacan-items/items-grid/items-grid.scss

@@ -0,0 +1,3 @@
+.wp-block-tainacan-items-grid {
+
+}

webpack.config.js

@@ -8,6 +8,7 @@ module.exports = {
         user_search: './src/admin/js/theme-main.js',
         user_admin: './src/admin/js/main.js',
         collections_carousel: './src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js',
+        items_grid: './src/gutenberg-blocks/tainacan-items/items-grid/index.js',
     },
     output: {
         path: path.resolve(__dirname, './src/assets/'),