Adds query loop block variations. #764.

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

@@ -82,6 +82,7 @@ function tainacan_blocks_register_and_enqueue_all_blocks() {
 	if ( is_admin() ) {
 		tainacan_blocks_get_category_icon_script();
 		tainacan_blocks_get_common_editor_styles();
+		tainacan_blocks_get_variations_script();
 	}
 	// May be needed outside the editor, if server side render is used
 	foreach(TAINACAN_BLOCKS as $block_slug => $block_options) {
@@ -199,6 +200,12 @@ function tainacan_blocks_get_plugin_js_settings(){
 	global $TAINACAN_BASE_URL;
 	global $wp_version;
 
+	$Tainacan_Collections = \Tainacan\Repositories\Collections::get_instance();
+	$collections = $Tainacan_Collections->fetch( [], 'OBJECT' );
+	foreach ( $collections as $col ) {
+		$cpts[$col->get_db_identifier()] = $col->get_name();
+	}
+
 	$settings = [
 		'wp_version' => $wp_version,
 		'root'     	 => esc_url_raw( rest_url() ) . 'tainacan/v2',
@@ -206,7 +213,8 @@ function tainacan_blocks_get_plugin_js_settings(){
 		'base_url' 	 => $TAINACAN_BASE_URL,
 		'admin_url'  => admin_url(),
 		'site_url'	 => site_url(),
-		'theme_items_list_url' => esc_url_raw( get_site_url() ) . '/' . \Tainacan\Theme_Helper::get_instance()->get_items_list_slug()
+		'theme_items_list_url' => esc_url_raw( get_site_url() ) . '/' . \Tainacan\Theme_Helper::get_instance()->get_items_list_slug(),
+		'collections_post_types' => $cpts
 	];
 	
 	return $settings;
@@ -271,3 +279,22 @@ function tainacan_blocks_get_category_icon_script() {
 		$TAINACAN_VERSION
 	);
 }
+
+/** 
+ * Registers the script that inserts the Query Loop Block variations
+ */
+function tainacan_blocks_get_variations_script() {
+	global $TAINACAN_BASE_URL;
+	global $TAINACAN_VERSION;
+
+	wp_enqueue_script(
+		'tainacan-blocks-query-variations',
+		$TAINACAN_BASE_URL . '/assets/js/tainacan_blocks_query_variations.js',
+		array('wp-blocks', 'wp-components'),
+		$TAINACAN_VERSION
+	);
+
+	$block_settings = tainacan_blocks_get_plugin_js_settings();
+	wp_localize_script( 'tainacan-blocks-query-variations', 'tainacan_blocks', $block_settings );
+}
+

src/views/gutenberg-blocks/js/tainacan-blocks-query-variations.js

@@ -0,0 +1,48 @@
+const { registerBlockVariation } = wp.blocks;
+const { __ } = wp.i18n;
+import icon from '../blocks/items-list/icon';
+
+const POST_TYPES = tainacan_blocks.collections_post_types;
+
+Object.keys(POST_TYPES).forEach((postType) => {
+    const postName = POST_TYPES[postType];
+    const VARIATION_NAME = 'tainacan-items-' + postType;
+
+    registerBlockVariation( 'core/query', {
+        name: VARIATION_NAME,
+        title: postName,
+        icon: icon,
+        description: __('Displays a list of Tainacan itens', 'tainacan'),
+        isActive: ( { namespace, query } ) => {
+                return (
+                    namespace === VARIATION_NAME
+                    && query.postType === postType
+                );
+        },
+        attributes: {
+            category: 'tainacan-blocks',
+            namespace: VARIATION_NAME,
+            query: {
+                postType: postType,
+                perPage: 12,
+                offset: 0
+            },
+            align: 'wide',
+            displayLayout: {
+                type: 'flex',
+                columns: 4
+            }
+        },
+        allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ],
+        innerBlocks: [
+            [
+                'core/post-template',
+                {},
+                [
+                    [ 'core/post-featured-image' ],
+                    [ 'core/post-title' ]
+                ],
+            ]
+        ]
+    } );
+});

webpack.common.js

@@ -9,6 +9,7 @@ module.exports = {
         tainacan_pages_common_scripts: './src/views/tainacan-pages-common-scripts.js',
         tainacan_blocks_common_scripts: './src/views/gutenberg-blocks/tainacan-blocks-common-scripts.js',
         tainacan_blocks_category_icon: './src/views/gutenberg-blocks/js/tainacan-blocks-category-icon.js',
+        tainacan_blocks_query_variations: './src/views/gutenberg-blocks/js/tainacan-blocks-query-variations.js',
 
         block_terms_list: './src/views/gutenberg-blocks/blocks/terms-list/index.js',
         block_items_list: './src/views/gutenberg-blocks/blocks/items-list/index.js',