From 713ff0f40b64d3fc778358ca1f3a6b88816781dd Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 13 Oct 2021 15:25:30 -0300 Subject: [PATCH] Changes carousel-related-items to related-items-list block. Updates template tags functions to use dynamic items list as well. #612 --- compile-sass.sh | 2 +- ...can-gutenberg-block-related-items-list.css | 51 +++++++ ...gutenberg-block-related-items-list.css.map | 7 + .../class-tainacan-theme-helper.php | 129 ++++++++++++++++-- src/classes/theme-helper/template-tags.php | 16 ++- .../block.json | 14 +- .../deprecated.js | 0 .../edit.js | 49 ++++--- .../icon.js | 0 .../index.js | 0 .../related-items-modal.js} | 2 +- .../save.js | 2 +- .../style.scss | 4 +- .../theme.js | 0 .../class-tainacan-gutenberg-block.php | 2 +- .../tainacan-blocks-common-scripts.js | 2 +- webpack.common.js | 2 +- 17 files changed, 237 insertions(+), 45 deletions(-) create mode 100644 src/assets/css/tainacan-gutenberg-block-related-items-list.css create mode 100644 src/assets/css/tainacan-gutenberg-block-related-items-list.css.map rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/block.json (73%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/deprecated.js (100%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/edit.js (85%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/icon.js (100%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/index.js (100%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items/carousel-related-items-modal.js => related-items-list/related-items-modal.js} (99%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/save.js (54%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/style.scss (94%) rename src/views/gutenberg-blocks/blocks/{carousel-related-items => related-items-list}/theme.js (100%) diff --git a/compile-sass.sh b/compile-sass.sh index aafc14095..664d5c52a 100644 --- a/compile-sass.sh +++ b/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 diff --git a/src/assets/css/tainacan-gutenberg-block-related-items-list.css b/src/assets/css/tainacan-gutenberg-block-related-items-list.css new file mode 100644 index 000000000..02231be9d --- /dev/null +++ b/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 */ diff --git a/src/assets/css/tainacan-gutenberg-block-related-items-list.css.map b/src/assets/css/tainacan-gutenberg-block-related-items-list.css.map new file mode 100644 index 000000000..8c7502f4a --- /dev/null +++ b/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" +} diff --git a/src/classes/theme-helper/class-tainacan-theme-helper.php b/src/classes/theme-helper/class-tainacan-theme-helper.php index 2fd5dcf2a..044ee3807 100644 --- a/src/classes/theme-helper/class-tainacan-theme-helper.php +++ b/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 "
"; + } + + /** + * 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_list_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_list_args' => [] ); $args = wp_parse_args($args, $defaults); @@ -922,8 +1002,8 @@ class Theme_Helper { if (!count($related_items)) return; - // Always pass the default class; - $output = '
'; + // 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 = '
'; 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([ - 'collection_id' => $related_group['collection_id'], - 'load_strategy' => 'parent', - 'selected_items' => json_encode($related_group['items']) - ], $args['carousel_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']); - $carousel_div = $this->get_tainacan_items_carousel($carousel_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']); + + $items_list_div = $this->get_tainacan_items_carousel($items_list_args); + } } $output .= '
' . $collection_heading . $metadata_label . - $carousel_div . + $items_list_div . ( $related_group['total_items'] > 1 ? '
@@ -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); + } } diff --git a/src/classes/theme-helper/template-tags.php b/src/classes/theme-helper/template-tags.php index fb3a9d1f9..c4ad4ed1a 100644 --- a/src/classes/theme-helper/template-tags.php +++ b/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 */ diff --git a/src/views/gutenberg-blocks/blocks/carousel-related-items/block.json b/src/views/gutenberg-blocks/blocks/related-items-list/block.json similarity index 73% rename from src/views/gutenberg-blocks/blocks/carousel-related-items/block.json rename to src/views/gutenberg-blocks/blocks/related-items-list/block.json index ef1e83f71..48de87a5b 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-related-items/block.json +++ b/src/views/gutenberg-blocks/blocks/related-items-list/block.json @@ -1,9 +1,9 @@ { - "name": "tainacan/carousel-related-items", - "title": "Tainacan Related Items Carousel", + "name": "tainacan/related-items-list", + "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", - "editorStyle": "carousel-related-items" + "editorScript": "related-items-list", + "editorStyle": "related-items-list" } \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/carousel-related-items/deprecated.js b/src/views/gutenberg-blocks/blocks/related-items-list/deprecated.js similarity index 100% rename from src/views/gutenberg-blocks/blocks/carousel-related-items/deprecated.js rename to src/views/gutenberg-blocks/blocks/related-items-list/deprecated.js diff --git a/src/views/gutenberg-blocks/blocks/carousel-related-items/edit.js b/src/views/gutenberg-blocks/blocks/related-items-list/edit.js similarity index 85% rename from src/views/gutenberg-blocks/blocks/carousel-related-items/edit.js rename to src/views/gutenberg-blocks/blocks/related-items-list/edit.js index a494db332..d90952130 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-related-items/edit.js +++ b/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 } ], - [ - 'tainacan/carousel-items-list', - { - content: [{ type: 'innerblock' }], - selectedItems: collection.items, - loadStrategy: 'parent', - collectionId: collection.collection_id - } - ], + innerItemsList, [ 'core/buttons', {}, @@ -130,7 +144,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) { (
{ isModalOpen ? - { @@ -183,7 +197,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) { width="24px"> - {__('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')}