Merge pull request #615 from tainacan/feature/612

Feature/612 - Different layouts for related items templates.

compile-sass.sh

@@ -40,7 +40,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/b
 
 sass -E 'UTF-8' --cache-location .tmp/sass-cache-16 src/views/gutenberg-blocks/blocks/item-submission-form/style.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
 
-sass -E 'UTF-8' --cache-location .tmp/sass-cache-17 src/views/gutenberg-blocks/blocks/carousel-related-items/style.scss:src/assets/css/tainacan-gutenberg-block-carousel-related-items.css
+sass -E 'UTF-8' --cache-location .tmp/sass-cache-17 src/views/gutenberg-blocks/blocks/related-items-list/style.scss:src/assets/css/tainacan-gutenberg-block-related-items-list.css
 
 sass -E 'UTF-8' --cache-location .tmp/sass-cache-18 src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss:src/assets/css/tainacan-gutenberg-block-common-editor-styles.css
 

src/assets/css/tainacan-gutenberg-block-related-items-list.css

@@ -0,0 +1,51 @@
+.wp-block-tainacan-related-items {
+  margin: 0.5em auto;
+  width: 100%; }
+  .wp-block-tainacan-related-items .spinner-container {
+    min-height: 56px;
+    padding: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--tainacan-block-gray4, #555758); }
+@-webkit-keyframes skeleton-animation {
+  0% {
+    opacity: 1.0; }
+  50% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1.0; } }
+@-moz-keyframes skeleton-animation {
+  0% {
+    opacity: 1.0; }
+  50% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1.0; } }
+@-o-keyframes skeleton-animation {
+  0% {
+    opacity: 1.0; }
+  50% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1.0; } }
+@keyframes skeleton-animation {
+  0% {
+    opacity: 1.0; }
+  50% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1.0; } }
+  .wp-block-tainacan-related-items .skeleton {
+    border-radius: 2px;
+    background: var(--tainacan-block-gray1, #f2f2f2);
+    -webkit-animation: skeleton-animation 1.8s ease infinite;
+    -moz-animation: skeleton-animation 1.8s ease infinite;
+    -o-animation: skeleton-animation 1.8s ease infinite;
+    animation: skeleton-animation 1.8s ease infinite; }
+  .wp-block-tainacan-related-items .related-items-edit-container {
+    position: relative; }
+    .wp-block-tainacan-related-items .related-items-edit-container .skeleton {
+      min-height: 150px; }
+
+/*# sourceMappingURL=tainacan-gutenberg-block-related-items-list.css.map */

src/assets/css/tainacan-gutenberg-block-related-items-list.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEA,gCAAiC;EAC7B,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,mDAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,0CAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,8DAA8B;IAC1B,QAAQ,EAAE,QAAQ;IAElB,wEAAY;MACR,UAAU,EAAE,KAAK",
+"sources": ["../../views/gutenberg-blocks/blocks/related-items-list/style.scss"],
+"names": [],
+"file": "tainacan-gutenberg-block-related-items-list.css"
+}

src/classes/theme-helper/class-tainacan-theme-helper.php

@@ -49,6 +49,7 @@ class Theme_Helper {
 		add_shortcode( 'tainacan-search', array($this, 'search_shortcode'));
 		add_shortcode( 'tainacan-item-submission', array($this, 'item_submission_shortcode'));
 		add_shortcode( 'tainacan-items-carousel', array($this, 'get_tainacan_items_carousel'));
+		add_shortcode( 'tainacan-dynamic-items-list', array($this, 'get_tainacan_dynamic_items_list'));
 		add_shortcode( 'tainacan-related-items-carousel', array($this, 'get_tainacan_related_items_carousel'));
 
 		add_action( 'generate_rewrite_rules', array( &$this, 'rewrite_rules' ), 10, 1 );
@@ -883,22 +884,100 @@ class Theme_Helper {
 	} 
 
 	/**
-	 * Returns a group of related items carousels
+	 * Returns the div used by Vue to render the Dynamic List of Related Items
+	 *
+	 * @param array $args {
+		 *     Optional. Array of arguments.
+		 *     @type string  $collection_id					The Collection ID
+		 *     @type string  $search_URL					A query string to fetch items from, if load strategy is 'search'
+         *     @type array   $selected_items				An array of item IDs to fetch items from, if load strategy is 'selection' and an array of items, if the load strategy is 'parent'
+         *     @type string  $load_strategy					Either 'search' or 'selection', to determine how items will be fetch
+         *     @type integer $max_items_number				Maximum number of items to be fetch
+         *     @type integer $max_columns_count				Maximum columns cound (used by grid and list layouts)
+         *     @type integer $grid_margin					Margin around items in every layout
+         *     @type string  $show_name						Show the item title
+         *     @type string  $show_image					Show the item thumbnail
+         *     @type string  $layout						Either 'grid', 'list' or 'mosaic'
+         *     @type string  $crop_images_to_square			Force images shape to be squared
+         *     @type bool    $show_collection_header		Should it display a small version of the collection header?
+         *     @type bool    $show_collection_label			Should it displar a 'Collection' label before the collection name on the collection header?
+         *     @type string  $collection_background_color	Color of the collection header background
+         *     @type string  $collection_text_color			Color of the collection header text
+         *     @type string  $tainacan_api_root				Path of the Tainacan api root (to make the items request)
+         *     @type string  $tainacan_base_url				Path of the Tainacan base URL (to make the links to the items)
+         *     @type string  $class_name					Extra class to add to the wrapper, besides the default wp-block-tainacan-carousel-items-list
+         *     @type string  $mosaic_height					Height of the panel in the 'mosaic' layout
+         *     @type string  $mosaic_density				
+         *     @type string  $mosaic_grid_rows				
+         *     @type string  $mosaic_grid_columns			
+         *     @type string  $mosaic_item_focal_point_x		
+         *     @type string  $mosaic_item_focal_point_y		
+	 * @return string  The HTML div to be used for rendering the items carousel vue component
+	 */
+	public function get_tainacan_dynamic_items_list($args = []) {
+		if (!is_array($args))
+			return __('There are missing parameters for Tainacan Items Block/shortcode', 'tainacan');
+
+		$defaults = array(
+			'max_items_number' => 12,
+			'max_columns_count' => 6,
+			'grid_margin' => 12,
+			'show_name' => true,
+			'show_image' => true,
+			'layout' => 'grid',
+			'crop_images_to_square' => true,
+			'show_collection_header' => false,
+			'show_collection_label' => false,
+			'collection_background_color' => '#454647',
+			'collection_text_color' => '#ffffff',
+			'tainacan_api_root' => '',
+			'tainacan_base_url' => '',
+			'class_name' => '',
+			'mosaic_height' => 280,
+			'mosaic_density' => 5,
+			'mosaic_grid_rows' => 3,
+			'mosaic_grid_columns' => 4,
+			'mosaic_item_focal_point_x' => 0.5,
+			'mosaic_item_focal_point_y' => 0.5
+		);
+		$args = wp_parse_args($args, $defaults);
+
+		$props = ' ';
+
+		// Always pass the class needed by Vue to mount the component;
+		$args['class'] = $args['class_name'] . ' wp-block-tainacan-dynamic-items-list';
+		unset($args['class_name']);
+		
+		// Builds parameters to the html div rendered by Vue
+		foreach ($args as $key => $value) {
+			if (is_bool($value))
+				$value = $value ? 'true' : 'false';
+			// Changes from PHP '_' notation to HTML '-' notation
+			$props .= (str_replace('_', '-', $key) . "='" . $value . "' ");
+		}
+		
+		return "<div data-module='dynamic-items-list' id='tainacan-dynamic-items-list-shortcode' $props ></div>";
+	} 
+
+	/**
+	 * Returns a group of related items list
 	 * For each metatada, the collection name, the metadata name and a button linking
 	 * the items list filtered is presented
 	 *
 	 * @param array $args {
 		 *     Optional. Array of arguments.
 		 *     @type string  $item_id							The Item ID
+		 *     @type string  $items_list_layout					The type of list to be rendered. Accepts 'grid', 'list', 'mosaic' and 'carousel'. 
 		 *     @type string  $class_name						Extra class to add to the wrapper, besides the default wp-block-tainacan-carousel-related-items
 		 *     @type string  $collection_heading_class_name		Extra class to add to the collection name wrapper. Defaults to ''
 		 * 	   @type string  $collection_heading_tag			Tag to be used as wrapper of the collection name. Defaults to h2
 		 *     @type string  $metadata_label_class_name			Extra class to add to the metadata label wrapper. Defaults to ''
 		 * 	   @type string  $metadata_label_tag				Tag to be used as wrapper of the metadata label. Defaults to p
-		 *     @type array   $carousel_args					Array of arguments to be passed to the get_tainacan_items_carousel function
+		 *     @type array   $carousel_args						Array of arguments to be passed to the get_tainacan_items_carousel function if $items_list_layout == carousel
+		 *     @type array   $dynamic_items_args				Array of arguments to be passed to the get_tainacan_dynamic_items function if $items_list_layout != carousel
 		 * @return string  The HTML div to be used for rendering the related items vue component
 	 */
-	public function get_tainacan_related_items_carousel($args = []) {
+	public function get_tainacan_related_items_list($args = []) {
 		global $TAINACAN_BASE_URL;
 		global $TAINACAN_VERSION;
 		
@@ -908,7 +987,8 @@ class Theme_Helper {
 			'collection_heading_tag' => 'h2', 
 			'metadata_label_class_name' => '',
 			'metadata_label_tag' => 'p',
-			'carousel_args' => []
+			'carousel_args' => [],
+			'dynamic_items_args' => []
 		);
 		$args = wp_parse_args($args, $defaults);
 		
@@ -922,8 +1002,8 @@ class Theme_Helper {
 		if (!count($related_items))
 			return;
 
-		// Always pass the default class;
+		// Always pass the default class. We force passing the wp-block-tainacan-carousel-related-items because themes might have used it to style before the other layouts exist;
-		$output = '<div data-module="carousel-related-items" class="' . $args['class_name'] . ' wp-block-tainacan-carousel-related-items' . '">';
+		$output = '<div data-module="related-items-list" class="' . $args['class_name'] . ' wp-block-tainacan-carousel-related-items wp-block-tainacan-related-items' . '">';
 		
 		foreach($related_items as $collection_id => $related_group) {
 			
@@ -942,23 +1022,34 @@ class Theme_Helper {
 				}
 				
 				// Sets the carousel, from the items carousel template tag.
-				$carousel_div = '';
+				$items_list_div = '';
 				if ( isset($related_group['collection_id']) ) {
 					
-					$carousel_args = wp_parse_args([
+					if ( isset($args['items_list_layout']) && $args['items_list_layout'] !== 'carousel' ) {
+						$items_list_args = wp_parse_args([
+							'collection_id' => $related_group['collection_id'],
+							'load_strategy' => 'parent',
+							'selected_items' => json_encode($related_group['items']),
+							'layout' => $args['items_list_layout']
+						], $args['dynamic_items_args']);
+
+						$items_list_div = $this->get_tainacan_dynamic_items_list($items_list_args);
+					} else {
+						$items_list_args = wp_parse_args([
 							'collection_id' => $related_group['collection_id'],
 							'load_strategy' => 'parent',
 							'selected_items' => json_encode($related_group['items'])
 						], $args['carousel_args']);
 
-					$carousel_div = $this->get_tainacan_items_carousel($carousel_args);
+						$items_list_div = $this->get_tainacan_items_carousel($items_list_args);
+					}	
 				}
 				
 				$output .= '<div class="wp-block-group">
 					<div class="wp-block-group__inner-container">' .
 						$collection_heading .
 						$metadata_label .
-						$carousel_div .
+						$items_list_div .
 							( 
 							$related_group['total_items'] > 1 ?
 								'<div class="wp-block-buttons">
@@ -981,5 +1072,15 @@ class Theme_Helper {
 		
 		return $output;
 	}
+
+	/**
+	 * Returns a group of related items list carousel
+	 * This is just a pre-set version of the get_tainacan_related_items function kept for
+	 * compatibility with previous versions.
+	 */	
+	public function get_tainacan_related_items_carousel($args = []) {
+		$args = wp_parse_args($args, [ 'items_list_layout' => 'carousel' ]);
+		return $this->get_tainacan_related_items_list($args);
+	}
 }
 

src/classes/theme-helper/template-tags.php

@@ -1030,7 +1030,7 @@ function tainacan_the_items_carousel($args = []) {
 }
 
 /**
- * Displays a group of related items carousels
+ * Displays a group of related items lists
  * For each metatada, the collection name, the metadata name and a button linking
  * the items list filtered is presented
  *
@@ -1039,10 +1039,24 @@ function tainacan_the_items_carousel($args = []) {
 	 *     @type string  $item_id					The Item ID
  * @return void
  */
+function tainacan_the_related_items($args = []) {
+	echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_related_items_list($args);
+}
+
+/**
+ * Displays a group of related items carousels
+ * This is a preset version of tainacan_the_related_items, to keep compatibility with previous versions
+ *
+ * @param array $args {
+	 *     Optional. Array of arguments.
+	 *     @type string  $item_id					The Item ID
+ * @return void
+ */
 function tainacan_the_related_items_carousel($args = []) {
 	echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_related_items_carousel($args);
 }
 
+
 /**
  * Checks if the current item has or not related items
  */

src/views/gutenberg-blocks/blocks/related-items-list/block.json

@@ -1,9 +1,9 @@
 {
-    "name": "tainacan/carousel-related-items",
+    "name": "tainacan/related-items-list",
-    "title": "Tainacan Related Items Carousel",
+    "title": "Tainacan Related Items List",
     "category": "tainacan-blocks",
     "keywords": [ "items", "carousel", "slider", "relationship" ],
-    "description": "A set of carousels to list items related to a certain item via relationship metadata.",
+    "description": "A set of lists to display items related to a certain item via relationship metadata.",
     "textdomain": "tainacan",
     "example": {
         "attributes": {
@@ -40,6 +40,10 @@
         "itemRequestSource": {
             "type": "String",
             "default": ""
+        },
+        "itemsListlayout": {
+            "type": "String",
+            "default": "carousel"
         }
     },
     "supports": {
@@ -47,6 +51,6 @@
         "html": false,
         "multiple": true
     },
-    "editorScript": "carousel-related-items",
+    "editorScript": "related-items-list",
-	"editorStyle": "carousel-related-items"
+	"editorStyle": "related-items-list"
 }

src/views/gutenberg-blocks/blocks/related-items-list/edit.js

@@ -2,9 +2,9 @@ const { __ } = wp.i18n;
 
 const { Spinner, Button, Placeholder } = wp.components;
 
-const { InnerBlocks} = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InnerBlocks } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
-import CarouselRelatedItemsModal from './carousel-related-items-modal.js';
+import RelatedItemsModal from './related-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 
@@ -18,10 +18,10 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
         relatedItems,
         isLoading,
         itemRequestSource,
-        relatedItemsTemplate
+        relatedItemsTemplate,
+        itemsListlayout
     } = attributes;
 
-
     function setContent(){
         isLoading = true;
 
@@ -59,6 +59,28 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
 
     function getRelatedItemsTemplates() {
         relatedItemsTemplate = [];
+
+        innerItemsList = itemsListlayout !== 'carousel' ?
+        [
+            'tainacan/dynamic-items-list',
+            { 
+                content: [{ type: 'innerblock' }],
+                selectedItems: collection.items,
+                loadStrategy: 'parent',
+                collectionId: collection.collection_id,
+                layout: itemsListlayout
+            }
+        ] :
+        [
+            'tainacan/carousel-items-list',
+            { 
+                content: [{ type: 'innerblock' }],
+                selectedItems: collection.items,
+                loadStrategy: 'parent',
+                collectionId: collection.collection_id
+            }
+        ],
+
         relatedItems.forEach((collection) => {
             
             if (collection.total_items) {
@@ -76,19 +98,11 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
                         [
                             'core/paragraph',
                             {
-                                placeholder: __( 'Relationship metadadum name', 'tainacan' ),
+                                placeholder: __( 'Relationship metadatum name', 'tainacan' ),
                                 content: collection.metadata_name
                             }
                         ],
-                        [
+                        innerItemsList,
-                            'tainacan/carousel-items-list',
-                            { 
-                                content: [{ type: 'innerblock' }],
-                                selectedItems: collection.items,
-                                loadStrategy: 'parent',
-                                collectionId: collection.collection_id
-                            }
-                        ],
                         [
                             'core/buttons',
                             {},
@@ -130,7 +144,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
                 ( 
                 <div>
                     { isModalOpen ?   
-                        <CarouselRelatedItemsModal
+                        <RelatedItemsModal
                             existingCollectionId={ collectionId }
                             existingItemId={ itemId }
                             onSelectCollection={ (selectedCollectionId) => {
@@ -183,7 +197,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
                                 width="24px">
                             <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
                         </svg>
-                        {__('Select an item to create a set of carousels with items related to it via relationship metadata.', 'tainacan')}
+                        {__('Select an item to create a set of lists with items related to it via relationship metadata.', 'tainacan')}
                     </p>
                     <Button
                         isPrimary
@@ -202,12 +216,13 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
                 <div>
                     {  relatedItems.length ? (
 
-                        <div className={ 'carousel-related-items-edit-container' }>
+                        <div className={ 'related-items-edit-container' }>
                             <InnerBlocks
                                     allowedBlocks={[ 
                                         'core/heading',
                                         'core/paragraph',
                                         'tainacan/carousel-items-list',
+                                        'tainacan/dynamic-items-list',
                                         'core/buttons'
                                     ]}
                                     template={ relatedItemsTemplate } />

src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js

@@ -5,7 +5,7 @@ const { __ } = wp.i18n;
 
 const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
 
-export default class CarouselRelatedItemsModal extends React.Component {
+export default class RelatedItemsModal extends React.Component {
     constructor(props) {
         super(props);
 

src/views/gutenberg-blocks/blocks/related-items-list/save.js

@@ -1,5 +1,5 @@
 const { InnerBlocks} = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 export default function({ className }) {
-    return <div data-module="carousel-related-items" className={ className }><InnerBlocks.Content /></div>
+    return <div data-module="related-items-list" className={ className }><InnerBlocks.Content /></div>
 };

src/views/gutenberg-blocks/blocks/related-items-list/style.scss

@@ -1,6 +1,6 @@
 @import '../../scss/gutenberg-blocks-variables.scss';
 
-.wp-block-tainacan-carousel-related-items {
+.wp-block-tainacan-related-items {
     margin: 0.5em auto;
     width: 100%;
 
@@ -46,7 +46,7 @@
     }
 
     // Placeholder on editor side  ----------------------------------------------------
-    .carousel-related-items-edit-container {
+    .related-items-edit-container {
         position: relative;
         
         & .skeleton {

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

@@ -12,7 +12,7 @@ const TAINACAN_BLOCKS = [
 	'carousel-items-list' => [],
 	'carousel-terms-list' => [],
 	'carousel-collections-list' => [],
-	'carousel-related-items' => [],
+	'related-items-list' => [],
 	'terms-list' => [],
 	'faceted-search' => [],
 	'item-submission-form' => []

src/views/gutenberg-blocks/tainacan-blocks-common-scripts.js

@@ -22,7 +22,7 @@ const addDataModuleToOldBlocks = () => {
         'dynamic-items-list',
         'carousel-items-list',
         'carousel-terms-list',
-        'carousel-related-items',
+        'related-items-list',
         'carousel-collections-list'
     ];
     

webpack.common.js

@@ -15,7 +15,7 @@ module.exports = {
         block_search_bar: './src/views/gutenberg-blocks/blocks/search-bar/index.js',
         block_collections_list: './src/views/gutenberg-blocks/blocks/collections-list/index.js',
         block_carousel_collections_list: './src/views/gutenberg-blocks/blocks/carousel-collections-list/index.js',
-        block_carousel_related_items: './src/views/gutenberg-blocks/blocks/carousel-related-items/index.js',
+        block_related_items_list: './src/views/gutenberg-blocks/blocks/related-items-list/index.js',
         block_facets_list: './src/views/gutenberg-blocks/blocks/facets-list/index.js',
         block_item_submission_form: './src/views/gutenberg-blocks/blocks/item-submission-form/index.js',
         block_faceted_search: './src/views/gutenberg-blocks/blocks/faceted-search/index.js',