Adds related items section options to the customizer

src/assets/scss/editor-style.scss

@@ -355,13 +355,13 @@
     }
 
     /* Modal container */
-    .components-modal__content {
+    .wp-block-tainacan-modal .components-modal__content {
         padding: 32px;
         overflow: hidden;
     }
 
     /* Modal Header */
-    .components-modal__header {
+    .wp-block-tainacan-modal .components-modal__header {
         height: 32px;
         margin: 0 12px 32px 12px;
         padding: 0;

src/functions/customizer.php

@@ -768,6 +768,17 @@ function tainacan_customize_register( $wp_customize ) {
 			'choices'	  => tainacan_get_single_item_layout_sections_order_options()
 			) );
 
+		/**
+		 * Adds section to control single item related items settings.
+		 */
+		$wp_customize->add_section( 'tainacan_single_item_page_related_items', array(
+			'title' 	  => __( 'Items related to this', 'tainacan-interface' ),
+			'description' => __( 'Settings for the section that displays items related to the current item.', 'tainacan-interface' ),
+			'panel'		  => 'tainacan_single_item_page',
+			'priority' 	  => 170,
+			'capability'  => 'edit_theme_options'
+			) );
+
 		/**
 		 * Adds option to configure Document section label.
 		 */
@@ -860,6 +871,70 @@ function tainacan_customize_register( $wp_customize ) {
 			'fallback_refresh' => true
 			) );
 
+		/**
+		 * Adds option to configure Related Items section label.
+		 */
+		$wp_customize->add_setting( 'tainacan_single_item_related_items_section_label', array(
+			'type' 		 => 'theme_mod',
+			'capability' => 'edit_theme_options',
+			'default' 	 => __( 'Related items', 'tainacan-interface' ),
+			'transport'  => 'postMessage',
+			'sanitize_callback'  => 'sanitize_text_field'
+			) );
+		$wp_customize->add_control( 'tainacan_single_item_related_items_section_label', array(
+			'type' 	   	  => 'text',
+			'priority' 	  => 0, // Within the section.
+			'section'  	  => 'tainacan_single_item_page_related_items',
+			'label'    	  => __( 'Label for the "Items related to this" section', 'tainacan-interface' ),
+			'description' => __( 'Leave blank it for not displaying any label.', 'tainacan-interface' )
+			) );
+		$wp_customize->selective_refresh->add_partial( 'tainacan_single_item_related_items_section_label', array(
+			'selector' => '#single-item-related-items-label',
+			'render_callback' => '__return_false',
+			'fallback_refresh' => true
+			) );
+
+		/**
+		 * Adds options to enable related items section.
+		 */
+		$wp_customize->add_setting( 'tainacan_single_item_enable_related_items_section', array(
+			'type' 		 => 'theme_mod',
+			'capability' => 'edit_theme_options',
+			'default' 	 => true,
+			'transport'  => 'refresh',
+			'sanitize_callback' => 'tainacan_callback_sanitize_checkbox'
+			) );
+		$wp_customize->add_control( 'tainacan_single_item_enable_related_items_section', array(
+			'type' 	   	  => 'checkbox',
+			'priority' 	  => 9, // Within the section.
+			'section'  	  => 'tainacan_single_item_page_related_items',
+			'label'    	  => __( 'Enable the "Items related to this" section', 'tainacan-interface' ),
+			'description' => __( 'Toggle to display or not the "Items related to this" section. This also depends on the collection settings and existence of items related to the current one.', 'tainacan-interface' )
+			) );
+
+		/**
+			 * Allows setting max heigth for the document ---------------------------------------------------------
+			 */
+			$wp_customize->add_setting( 'tainacan_single_item_related_items_max_items_per_screen', array(
+				'type' 		 => 'theme_mod',
+				'capability' => 'edit_theme_options',
+				'default' 	 => 6,
+				'transport'  => 'refresh',
+				'sanitize_callback'  => 'sanitize_text_field'
+			) );
+			$wp_customize->add_control( 'tainacan_single_item_related_items_max_items_per_screen', array(
+				'type' => 'number',
+				'priority' 	  => 0, // Within the section.
+				'section' => 'tainacan_single_item_page_related_items',
+				'label' => __( 'Maximum number of slides per screen', 'tainacan-interface' ),
+				'description' => __( 'Sets how many slides per row of the carousel will appear (on a large screen). The smaller this number is, the greater the item thumbnail will be and depending of the size, there might not exist a cropped version of the image.', 'tainacan-interface' ),
+				'input_attrs' => array(
+					'min' => 1,
+					'max' => 10,
+					'step' => 1
+				),
+			) );
+
 		/**
 		 * Adds option to configure Item Navigation section label.
 		 */

src/tainacan/single-items.php

@@ -51,9 +51,13 @@
 								break;
 									
 							}
+
 							echo '</div>';
 						?>
 
+						<?php get_template_part( 'template-parts/single-items-related-items' );
+							  do_action( 'tainacan-interface-single-item-after-reated-items' ); ?>
+
 						<?php get_template_part( 'template-parts/single-items-navigation' ); ?>
 
 						<?php get_template_part( 'template-parts/single-items-comments' ); ?>

src/template-parts/single-items-related-items.php

@@ -0,0 +1,30 @@
+<?php
+
+if ( function_exists('tainacan_the_related_items_carousel') && get_theme_mod('tainacan_single_item_enable_related_items_section', true) && tainacan_has_related_items() ) : ?>
+
+<div class="mt-3 tainacan-single-post">
+
+    <?php if ( get_theme_mod('tainacan_single_item_related_items_section_label', __( 'Items related to this', 'tainacan-interface' )) != '') : ?>
+        <h2 class="title-content-items" id="single-item-related-items-label">
+            <?php echo esc_html( get_theme_mod('tainacan_single_item_related_items_section_label', __( 'Items related to this', 'tainacan-interface' )) ); ?>
+        </h2>
+    <?php endif; ?>
+    <section class="tainacan-content single-item-collection margin-two-column">
+        <div class="single-item-collection--related-items justify-content-center">
+            <div class="row">
+            <?php 
+                tainacan_the_related_items_carousel([
+                    // 'class_name' => 'mt-2 tainacan-single-post',
+                    // 'collection_heading_class_name' => 'title-content-items',
+                    'collection_heading_tag' => 'h3',
+                    'carousel_args' => [
+                        'max_items_per_screen' => get_theme_mod('tainacan_single_item_related_items_max_items_per_screen', 6)
+                    ]
+                ]);
+            ?>
+            </div>
+        <div>
+    </section>
+</div>
+
+<?php endif; ?>