tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #686 from tainacan/feature/674 

New Block: Item Gallery, using the gallery Document and Attachments component #674
This commit is contained in:
Mateus Machado Luna 2022-03-10 17:30:39 -03:00 committed by GitHub
parent d0d4d96364 d0d77184a7
commit cd22aa372e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 1049 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/assets/css/tainacan-gutenberg-block-item-gallery.css
View File

@ -609,34 +609,49 @@ a.pswp__share--download:hover {
.pswp--minimal--dark .pswp__top-bar { .pswp--minimal--dark .pswp__top-bar {
background: none; } background: none; }
.item-gallery-edit-container .tainacan-media-component .swiper-slide,
.item-gallery-edit-container .tainacan-media-component .swiper-button-prev,
.item-gallery-edit-container .tainacan-media-component .swiper-button-next {
cursor: not-allowed !important; }
.item-gallery-edit-container .preview-warning {
width: 100%;
font-size: 0.875rem;
font-style: italic;
color: inherit;
text-align: center;
margin: 0 auto;
padding: 8px 2px 2px 2px; }
.tainacan-media-component { .tainacan-media-component {
--swiper-theme-color: var(--tainacan-secondary, #298596); --swiper-theme-color: var(--tainacan-secondary, #298596);
--swiper-navigation-size: 44px; --swiper-navigation-size: 44px;
--tainacan-media-metadata-color: var(--tainacan-label-color, #454647);
--tainacan-media-background: var(--tainacan-background-color, transparent); --tainacan-media-background: var(--tainacan-background-color, transparent);
--tainacan-media-main-carousel-height: 60vh; --tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%; --tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%; --tainacan-media-thumbs-carousel-width: 100%;
--tainacan-media-thumbs-carousel-item-size: 136px; --tainacan-media-thumbs-carousel-item-size: 136px;
width: 100%;
height: auto; height: auto;
display: block; display: block;
background-color: var(--tainacan-media-background, transparent); background-color: var(--tainacan-media-background, transparent);
box-sizing: border-box; } box-sizing: border-box; }
.tainacan-media-component:not(.alignfull):not(.alignwide) {
width: 100%; }
.tainacan-media-component .swiper-slide, .tainacan-media-component .swiper-slide,
.tainacan-media-component .swiper-slide::after, .tainacan-media-component .swiper-slide::after,
.tainacan-media-component .swiper-slide::before { .tainacan-media-component .swiper-slide::before {
box-sizing: border-box; } box-sizing: border-box; }
/* Style valid for both cases of carousel, main and thumbs */ /* Style valid for both cases of carousel, main and thumbs */
.tainacan-media-component__swiper-main .swiper-button-prev::after, .tainacan-media-component__swiper-main .swiper-button-prev:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-main .swiper-container-rtl .swiper-button-next::after, .tainacan-media-component__swiper-main .swiper-container-rtl .swiper-button-next:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-thumbs .swiper-button-prev::after, .tainacan-media-component__swiper-thumbs .swiper-button-prev:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-thumbs .swiper-container-rtl .swiper-button-next::after { .tainacan-media-component__swiper-thumbs .swiper-container-rtl .swiper-button-next:not(.swiper-button-has-svg)::after {
content: 'previous'; } content: 'previous'; }
.tainacan-media-component__swiper-main .swiper-button-next::after, .tainacan-media-component__swiper-main .swiper-button-next:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-main .swiper-button-prev::after, .tainacan-media-component__swiper-main .swiper-button-prev:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-thumbs .swiper-button-next::after, .tainacan-media-component__swiper-thumbs .swiper-button-next:not(.swiper-button-has-svg)::after,
.tainacan-media-component__swiper-thumbs .swiper-button-prev::after { .tainacan-media-component__swiper-thumbs .swiper-button-prev:not(.swiper-button-has-svg)::after {
font-family: "TainacanIcons"; font-family: "TainacanIcons";
opacity: 0.7; opacity: 0.7;
transition: opacity ease 0.2s; } transition: opacity ease 0.2s; }
@ -645,6 +660,18 @@ a.pswp__share--download:hover {
.tainacan-media-component__swiper-thumbs:hover .swiper-button-next::after, .tainacan-media-component__swiper-thumbs:hover .swiper-button-next::after,
.tainacan-media-component__swiper-thumbs:hover .swiper-button-prev::after { .tainacan-media-component__swiper-thumbs:hover .swiper-button-prev::after {
opacity: 1; } opacity: 1; }
.tainacan-media-component__swiper-main .swiper-button-next.swiper-button-has-svg::after,
.tainacan-media-component__swiper-main .swiper-button-prev.swiper-button-has-svg::after,
.tainacan-media-component__swiper-thumbs .swiper-button-next.swiper-button-has-svg::after,
.tainacan-media-component__swiper-thumbs .swiper-button-prev.swiper-button-has-svg::after {
display: none; }
.tainacan-media-component__swiper-main .swiper-button-next.swiper-button-has-svg svg,
.tainacan-media-component__swiper-main .swiper-button-prev.swiper-button-has-svg svg,
.tainacan-media-component__swiper-thumbs .swiper-button-next.swiper-button-has-svg svg,
.tainacan-media-component__swiper-thumbs .swiper-button-prev.swiper-button-has-svg svg {
min-width: calc(var(--swiper-navigation-size) * 1.35);
min-height: calc(var(--swiper-navigation-size) * 1.35);
fill: currentColor; }
.tainacan-media-component__swiper-main ul.swiper-wrapper, .tainacan-media-component__swiper-main ul.swiper-wrapper,
.tainacan-media-component__swiper-thumbs ul.swiper-wrapper { .tainacan-media-component__swiper-thumbs ul.swiper-wrapper {
list-style: none; list-style: none;
@ -689,16 +716,21 @@ a.pswp__share--download:hover {
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name.hide-description.hide-caption br { .tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name.hide-description.hide-caption br {
display: none; display: none;
visibility: hidden; } visibility: hidden; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name.hide-description.hide-caption {
display: none;
visibility: hidden; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__name { .tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__name {
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
color: var(--tainacan-label-color, #454647); } color: var(--tainacan-media-metadata-color, #454647);
opacity: 0.75; }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__caption { .tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__caption {
font-size: 0.9375em; font-size: 0.9375em;
color: var(--tainacan-input-color, #1d1d1d); } color: var(--tainacan-media-metadata-color, #454647); }
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__caption { .tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__caption {
font-size: 0.875em; font-size: 0.875em;
color: var(--tainacan-info-color, #555758); } color: var(--tainacan-media-metadata-color, #454647);
opacity: 0.85; }
.tainacan-media-component__swiper-main .swiper-slide-content { .tainacan-media-component__swiper-main .swiper-slide-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -760,7 +792,9 @@ a.pswp__share--download:hover {
max-height: var(--tainacan-media-main-carousel-height, 60vh); } max-height: var(--tainacan-media-main-carousel-height, 60vh); }
.tainacan-media-component__swiper-main .swiper-slide-content img { .tainacan-media-component__swiper-main .swiper-slide-content img {
width: auto; width: auto;
max-height: var(--tainacan-media-main-carousel-height, 60vh); } max-height: var(--tainacan-media-main-carousel-height, 60vh);
max-width: 100%;
height: auto; }
.tainacan-media-component__swiper-main .swiper-slide-content .twitter-tweet { .tainacan-media-component__swiper-main .swiper-slide-content .twitter-tweet {
margin-left: auto; margin-left: auto;
margin-right: auto; } margin-right: auto; }
@ -806,13 +840,15 @@ a.pswp__share--download:hover {
border-bottom-color: var(--swiper-theme-color, #298596); } border-bottom-color: var(--swiper-theme-color, #298596); }
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__name { .tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__name {
font-size: 1em; font-size: 1em;
color: var(--tainacan-label-color, #454647); } color: var(--tainacan-media-metadata-color, #454647);
opacity: 0.75; }
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__caption { .tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__caption {
font-size: 0.9375em; font-size: 0.9375em;
color: var(--tainacan-input-color, #1d1d1d); } color: var(--tainacan-media-metadata-color, #454647); }
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__caption { .tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__caption {
font-size: 0.875em; font-size: 0.875em;
color: var(--tainacan-info-color, #555758); } color: var(---tainacan-media-metadata-color, #454647);
opacity: 0.85; }
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata { .tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata {
text-align: center; text-align: center;
display: block; display: block;
@ -829,6 +865,9 @@ a.pswp__share--download:hover {
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata.hide-name.hide-description.hide-caption br { .tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata.hide-name.hide-description.hide-caption br {
display: none; display: none;
visibility: hidden; } visibility: hidden; }
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata.hide-name.hide-description.hide-caption {
display: none;
visibility: hidden; }
.tainacan-media-component__swiper-thumbs li.swiper-slide a { .tainacan-media-component__swiper-thumbs li.swiper-slide a {
width: 100%; width: 100%;
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px); max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);

2
src/assets/css/tainacan-gutenberg-block-item-gallery.css.map
View File

File diff suppressed because one or more lines are too long

231
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -1104,5 +1104,236 @@ class Theme_Helper {
$args = wp_parse_args($args, [ 'items_list_layout' => 'carousel' ]); $args = wp_parse_args($args, [ 'items_list_layout' => 'carousel' ]);
return $this->get_tainacan_related_items_list($args); return $this->get_tainacan_related_items_list($args);
} }
/**
* Returns an item gallery, containing document,
* attachments and other information in a slider, carousel and lightbox
*
* @param array $args {
* Optional. Array of arguments.
* @type string $item_id The Item ID
* @type string $blockId A unique identifier for the gallery, will be generated automatically if not provided,
* @type array $layoutElements Array of elements present in the gallery. Possible values are 'main' and 'carousel'
* @type array $mediaSources Array of sources for the gallery. Possible values are 'document' and 'attachments'
* @type bool $hideFileNameMain Hides the Main slider file name
* @type bool $hideFileCaptionMain Hides the Main slider file caption
* @type bool $hideFileDescriptionMain Hides the Main slider file description
* @type bool $hideFileNameThumbnails Hides the Thumbnails carousel file name
* @type bool $hideFileCaptionThumbnails Hides the Thumbnails carousel file caption
* @type bool $hideFileDescriptionThumbnails Hides the Thumbnails carousel file description
* @type bool $openLightboxOnClick Enables the behaviour of opening a lightbox with zoom when clicking on the media item
* @type bool $showDownloadButtonMain Displays a download button bellow the Main slider
* @return string The HTML div to be used for rendering the item galery component
*/
public function get_tainacan_item_gallery($args = []) {
$defaults = array(
'blockId' => uniqid(),
'layoutElements' => array( 'main' => true, 'thumbnails' => true ),
'mediaSources' => array( 'document' => true, 'attachments' => true, 'metadata' => false),
'hideFileNameMain' => true,
'hideFileCaptionMain' => false,
'hideFileDescriptionMain' => true,
'hideFileNameThumbnails' => true,
'hideFileCaptionThumbnails' => true,
'hideFileDescriptionThumbnails' => true,
'openLightboxOnClick' => true,
'showDownloadButtonMain' => true
);
$args = wp_parse_args($args, $defaults);
// Gets the current Item. This way, the function can be used in the loop without needing to pass it
$item = isset($args['itemId']) ? $this->tainacan_get_item($args['itemId']) : $this->tainacan_get_item();
if (!$item)
return;
// Gets options from block attributes
$item_id = $item->get_id();
$block_id = $args['blockId'];
$layout_elements = $args['layoutElements'];
$media_sources = $args['mediaSources'];
$hide_file_name_main = $args['hideFileNameMain'];
$hide_file_caption_main = $args['hideFileCaptionMain'];
$hide_file_description_main = $args['hideFileDescriptionMain'];
$hide_file_name_thumbnails = $args['hideFileNameThumbnails'];
$hide_file_caption_thumbnails = $args['hideFileCaptionThumbnails'];
$hide_file_description_thumbnails = $args['hideFileDescriptionThumbnails'];
$open_lightbox_on_click = $args['openLightboxOnClick'];
$show_download_button_main = $args['showDownloadButtonMain'];
// Prefils arrays with proper values to avoid messsy IFs
$layout_elements = array(
'main' => (isset($layout_elements['main']) && ($layout_elements['main'] === true || $layout_elements['main'] == 'true')) ? true : false,
'thumbnails' => (isset($layout_elements['thumbnails']) && ($layout_elements['thumbnails'] === true || $layout_elements['thumbnails'] == 'true')) ? true : false
);
$media_sources = array(
'document' => (isset($media_sources['document']) && ($media_sources['document'] === true || $media_sources['document'] == 'true')) ? true : false,
'attachments' => (isset($media_sources['attachments']) && ($media_sources['attachments'] === true || $media_sources['attachments'] == 'true')) ? true : false,
'metadata' => (isset($media_sources['metadata']) && ($media_sources['metadata'] === true || $media_sources['metadata'] == 'true')) ? true : false
);
$media_items_main = array();
$media_items_thumbnails = array();
if ( $media_sources['attachments'] )
$attachments = tainacan_get_the_attachments(null, $item_id);
if ( $layout_elements['main'] ) {
$class_slide_metadata = '';
if ($hide_file_name_main)
$class_slide_metadata .= ' hide-name';
if ($hide_file_description_main)
$class_slide_metadata .= ' hide-description';
if ($hide_file_caption_main)
$class_slide_metadata .= ' hide-caption';
if ( $media_sources['document'] && !empty(tainacan_get_the_document($item_id)) ) {
$is_document_type_attachment = tainacan_get_the_document_type($item_id) === 'attachment';
// Document description is a bit more tricky
if ($is_document_type_attachment) {
$attachment = get_post(tainacan_get_the_document_raw($item_id));
$document_description = ($attachment instanceof WP_Post) ? $attachment->post_content : '';
}
$media_items_main[] =
tainacan_get_the_media_component_slide(array(
'after_slide_metadata' => (( $show_download_button_main && tainacan_the_item_document_download_link($item_id) != '' ) ?
sprintf('<span class="tainacan-item-file-download">%s</span>', tainacan_the_item_document_download_link($item_id))
: ''),
'media_content' => tainacan_get_the_document($item_id),
'media_content_full' => $open_lightbox_on_click ? ( $is_document_type_attachment ? tainacan_get_the_document($item_id, 'full') : sprintf('<div class="attachment-without-image">%s</div>', tainacan_get_the_document($item_id, 'full')) ) : '',
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw($item_id)) : '',
'media_description' => $is_document_type_attachment ? $document_description : '',
'media_caption' => $is_document_type_attachment ? wp_get_attachment_caption(tainacan_get_the_document_raw($item_id)) : '',
'media_type' => tainacan_get_the_document_type($item_id),
'class_slide_metadata' => $class_slide_metadata
));
}
if ( $media_sources['attachments'] ) {
foreach ( $attachments as $attachment ) {
$media_items_main[] =
tainacan_get_the_media_component_slide(array(
'after_slide_metadata' => (( $show_download_button_main && tainacan_the_item_attachment_download_link($attachment->ID) != '' ) ?
sprintf('<span class="tainacan-item-file-download">%s</span>', tainacan_the_item_attachment_download_link($attachment->ID))
: ''),
'media_content' => tainacan_get_attachment_as_html($attachment->ID, $item_id),
'media_content_full' => $open_lightbox_on_click ? ( wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : sprintf('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe--%s" src="%s"></iframe></div>', $block_id, tainacan_get_attachment_html_url($attachment->ID)) ) : '',
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
'media_caption' => $attachment->post_excerpt,
'media_type' => $attachment->post_mime_type,
'class_slide_metadata' => $class_slide_metadata
));
}
}
}
if ( $layout_elements['thumbnails'] ) {
$class_slide_metadata = '';
if ($hide_file_name_thumbnails)
$class_slide_metadata .= ' hide-name';
if ($hide_file_description_thumbnails)
$class_slide_metadata .= ' hide-description';
if ($hide_file_caption_thumbnails)
$class_slide_metadata .= ' hide-caption';
if ( $media_sources['document'] && !empty(tainacan_get_the_document($item_id)) ) {
$is_document_type_attachment = tainacan_get_the_document_type($item_id) === 'attachment';
$media_items_thumbnails[] =
tainacan_get_the_media_component_slide(array(
'media_content' => get_the_post_thumbnail(null, 'tainacan-medium'),
'media_content_full' => $open_lightbox_on_click ? ($is_document_type_attachment ? tainacan_get_the_document($item_id, 'full') : sprintf('<div class="attachment-without-image">%s</div>', tainacan_get_the_document($item_id, 'full')) ) : '',
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw($item_id)) : '',
'media_description' => $is_document_type_attachment ? get_the_content(null, false, tainacan_get_the_document_raw($item_id)) : '',
'media_caption' => $is_document_type_attachment ? wp_get_attachment_caption(tainacan_get_the_document_raw($item_id)) : '',
'media_type' => tainacan_get_the_document_type($item_id),
'class_slide_metadata' => $class_slide_metadata
));
}
if ( $media_sources['attachments'] ) {
foreach ( $attachments as $attachment ) {
$media_items_thumbnails[] =
tainacan_get_the_media_component_slide(array(
'media_content' => wp_get_attachment_image( $attachment->ID, 'tainacan-medium', false ),
'media_content_full' => ( $open_lightbox_on_click && !$layout_elements['main'] ) ? ( wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : sprintf('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe--%s" src="%s"></iframe></div>', $block_id, tainacan_get_attachment_html_url($attachment->ID)) ) : '',
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
'media_caption' => $attachment->post_excerpt,
'media_type' => $attachment->post_mime_type,
'class_slide_metadata' => $class_slide_metadata
));
}
}
}
$block_custom_css = '';
// Text color. First we check for custom preset colors, then actual values
$block_custom_css .= isset($args['textColor']) ? sprintf('--tainacan-media-metadata-color: var(--wp--preset--color--%s);', $args['textColor']) : '';
$block_custom_css .= isset($args['style']['color']['text']) ? sprintf('--tainacan-media-metadata-color: %s;', $args['style']['color']['text']) : '';
// Background color. First we check for custom preset colors, then actual values
$block_custom_css .= isset($args['backgroundColor']) ? sprintf('--tainacan-media-background: var(--wp--preset--color--%s);', $args['backgroundColor']) : '';
$block_custom_css .= isset($args['style']['color']['background']) ? sprintf('--tainacan-media-background: %s;', $args['style']['color']['background']) : '';
// Link color, if enabled. Firts we check for custom preset colors, then actual values.
$block_custom_css .= isset($args['linkColor']) ? sprintf('--swiper-theme-color: var(--wp--preset--color--%s);', $args['linkColor']) : '';
if ( isset($args['style']['elements']['link']['color']['text']) ) {
$link_color = $args['style']['elements']['link']['color']['text'];
if ( strpos( $link_color, 'var:' ) !== false ) {
$link_color = str_replace('|', '--', $link_color);
$link_color = str_replace('var:', 'var(--wp--', $link_color) . ')';
}
$block_custom_css .= sprintf('--swiper-theme-color: %s;', $link_color);
}
// Other values are obtained directly from the attributes
$block_custom_css .= (isset($args['arrowsSize']) && is_numeric($args['arrowsSize'])) ? sprintf('--swiper-navigation-size: %spx;', $args['arrowsSize']) : '';
$block_custom_css .= (isset($args['mainSliderHeight']) && is_numeric($args['mainSliderHeight'])) ? sprintf('--tainacan-media-main-carousel-height: %svh;', $args['mainSliderHeight']) : '';
$block_custom_css .= (isset($args['mainSliderWidth']) && is_numeric($args['mainSliderWidth'])) ? sprintf('--tainacan-media-main-carousel-width: %s%%;', $args['mainSliderWidth']) : '';
$block_custom_css .= (isset($args['thumbnailsCarouselWidth']) && is_numeric($args['thumbnailsCarouselWidth'])) ? sprintf('--tainacan-media-thumbs-carousel-width: %s%%;', $args['thumbnailsCarouselWidth']) : '';
$block_custom_css .= (isset($args['thumbnailsCarouselItemSize']) && is_numeric($args['thumbnailsCarouselItemSize'])) ? sprintf('--tainacan-media-thumbs-carousel-item-size: %spx;', $args['thumbnailsCarouselItemSize']) : '';
$wrapper_attributes = get_block_wrapper_attributes(
array(
'style' => $block_custom_css,
'class' => 'tainacan-media-component'
)
);
return tainacan_get_the_media_component(
'tainacan-item-gallery-block_id-' . $block_id,
$layout_elements['thumbnails'] ? $media_items_thumbnails : null,
$layout_elements['main'] ? $media_items_main : null,
array(
'wrapper_attributes' => $wrapper_attributes,
'class_main_div' => '',
'class_thumbs_div' => '',
'swiper_main_options' => $layout_elements['main'] ? array(
'navigation' => array(
'nextEl' => sprintf('.swiper-navigation-next_tainacan-item-gallery-block_id-%s-main', $block_id),
'prevEl' => sprintf('.swiper-navigation-prev_tainacan-item-gallery-block_id-%s-main', $block_id),
'preloadImages' => false,
'lazy' => true
)
) : '',
'swiper_thumbs_options' => ( $layout_elements['thumbnails'] && !$layout_elements['main'] ) ? array(
'navigation' => array(
'nextEl' => sprintf('.swiper-navigation-next_tainacan-item-gallery-block_id-%s-thumbs', $block_id),
'prevEl' => sprintf('.swiper-navigation-prev_tainacan-item-gallery-block_id-%s-thumbs', $block_id),
'preloadImages' => false,
'lazy' => true
)
) : '',
'swiper_arrows_as_svg' => true,
'disable_lightbox' => !$open_lightbox_on_click,
)
);
}
} }

147
src/classes/theme-helper/template-tags.php
View File

@ -278,23 +278,28 @@ function tainacan_the_media_component($media_id, $media_items_thumbs, $media_ite
* @param array $media_items_main Array of media items to be rendered inside main, bigger the carousel. Default to empty array * @param array $media_items_main Array of media items to be rendered inside main, bigger the carousel. Default to empty array
* @param array|string $args { * @param array|string $args {
* Optional. Array of arguments. * Optional. Array of arguments.
* @type string before_main_div String to be added before the main gallery div * @type string wrapper_attributes String containing attrs (style, class) for the wrapper div. If used, remember to pass class="tainacan-media-component"
* @type string after_main_div String to be added after the main gallery div * @type string before_main_div String to be added before the main gallery div
* @type string before_thumbs_div String to be added before the thumbs gallery div * @type string after_main_div String to be added after the main gallery div
* @type string after_thumbs_div String to be added after the thumbs gallery div * @type string before_thumbs_div String to be added before the thumbs gallery div
* @type string before_main_ul String to be added before the main gallery ul * @type string after_thumbs_div String to be added after the thumbs gallery div
* @type string after_main_ul String to be added after the main gallery ul * @type string before_main_ul String to be added before the main gallery ul
* @type string before_thumbs_ul String to be added before the thumbs gallery ul * @type string after_main_ul String to be added after the main gallery ul
* @type string after_thumbs_ul String to be added after the thumbs gallery ul * @type string before_thumbs_ul String to be added before the thumbs gallery ul
* @type string class_main_div Class to be added to the main gallery div * @type string after_thumbs_ul String to be added after the thumbs gallery ul
* @type string class_main_ul Class to be added to the main gallery ul * @type string class_main_div Class to be added to the main gallery div
* @type string class_main_li Class to be added to the main gallery li * @type string class_main_ul Class to be added to the main gallery ul
* @type string class_thumbs_div Class to be added to the thumbs gallery div * @type string class_main_li Class to be added to the main gallery li
* @type string class_thumbs_ul Class to be added to the thumbs gallery ul * @type string class_thumbs_div Class to be added to the thumbs gallery div
* @type string class_thumbs_li Class to be added to the thumbs gallery li * @type string class_thumbs_ul Class to be added to the thumbs gallery ul
* @type array swiper_main_options Object with SwiperJS options for the main gallery * @type string class_thumbs_li Class to be added to the thumbs gallery li
* @type array swiper_thumbs_options Object with SwiperJS options for the thumb gallery * @type array swiper_main_options Object with SwiperJS options for the main gallery
* @type bool show_share_button Shows share button on lightbox * @type array swiper_thumbs_options Object with SwiperJS options for the thumb gallery
* @type bool swiper_arrows_as_svg Uses SVG icons insetead of Tainacan Icon font for navigation arrows
* @type string swiper_arrow_next_custom_svg Custom SVG icon to render next navigation arrow
* @type string swiper_arrow_prev_custom_svg Custom SVG icon to render previous navigation arrow
* @type bool disable_lightbox Do not open Photoswiper layer on click
* @type bool show_share_button Shows share button on lightbox
* } * }
* @return string * @return string
*/ */
@ -308,6 +313,7 @@ function tainacan_get_the_media_component(
global $TAINACAN_BASE_URL; global $TAINACAN_BASE_URL;
$args = array_merge(array( $args = array_merge(array(
'wrapper_attributes' => 'class="tainacan-media-component"',
'before_main_div' => '', 'before_main_div' => '',
'after_main_div' => '', 'after_main_div' => '',
'before_thumbs_div' => '', 'before_thumbs_div' => '',
@ -324,6 +330,10 @@ function tainacan_get_the_media_component(
'class_thumbs_li' => '', 'class_thumbs_li' => '',
'swiper_main_options' => [], 'swiper_main_options' => [],
'swiper_thumbs_options' => [], 'swiper_thumbs_options' => [],
'swiper_arrows_as_svg' => false,
'swiper_arrow_next_custom_svg' => '',
'swiper_arrow_prev_custom_svg' => '',
'disable_lightbox' => false,
'show_share_button' => false 'show_share_button' => false
), $args); ), $args);
@ -333,11 +343,16 @@ function tainacan_get_the_media_component(
$args['media_thumbs_id'] = $media_id . '-thumbs'; $args['media_thumbs_id'] = $media_id . '-thumbs';
$args['media_id'] = $media_id; $args['media_id'] = $media_id;
ob_start();
if ( $args['has_media_main'] || $args['has_media_thumbs'] ) : if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
// Modal lightbox layer for rendering photoswipe // Modal lightbox layer for rendering photoswipe
add_action('wp_footer', 'tainacan_get_the_media_modal_layer'); if (!$args['disable_lightbox'])
add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-gallery.css', array(), TAINACAN_VERSION); wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-gallery.css', array(), TAINACAN_VERSION);
?> ?>
<script> <script>
@ -350,7 +365,7 @@ function tainacan_get_the_media_component(
tainacan_plugin.tainacan_media_components['<?php echo $args['media_id'] ?>'] = <?php echo json_encode($args) ?>; tainacan_plugin.tainacan_media_components['<?php echo $args['media_id'] ?>'] = <?php echo json_encode($args) ?>;
</script> </script>
<div id="<?php echo $media_id ?>" class="tainacan-media-component" data-module='item-gallery'> <div id="<?php echo $media_id ?>" <?php echo $args['wrapper_attributes']; ?> data-module='item-gallery'>
<?php if ( $args['has_media_main'] ) : ?> <?php if ( $args['has_media_main'] ) : ?>
@ -376,8 +391,30 @@ function tainacan_get_the_media_component(
<?php if ( $args['swiper_main_options'] && isset($args['swiper_main_options']['navigation']) ) : ?> <?php if ( $args['swiper_main_options'] && isset($args['swiper_main_options']['navigation']) ) : ?>
<!-- If we need navigation buttons --> <!-- If we need navigation buttons -->
<div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_main_id'] ?>"></div> <div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_main_id'] ?> <?php echo ($args['swiper_arrows_as_svg'] ? 'swiper-button-has-svg' : '' ) ?>">
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_main_id'] ?>"></div> <?php if ( $args['swiper_arrows_as_svg'] ): ?>
<?php if ( $args['swiper_arrow_prev_custom_svg'] ): ?>
<?php echo $args['swiper_arrow_prev_custom_svg']; ?>
<?php else: ?>
<svg width="var(--swiper-navigation-size)" height="var(--swiper-navigation-size)" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_main_id'] ?> <?php echo ($args['swiper_arrows_as_svg'] ? 'swiper-button-has-svg' : '' ) ?>">
<?php if ( $args['swiper_arrows_as_svg'] ): ?>
<?php if ( $args['swiper_arrow_next_custom_svg'] ): ?>
<?php echo $args['swiper_arrow_next_custom_svg']; ?>
<?php else: ?>
<svg width="42" height="42" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php echo $args['after_main_div'] ?> <?php echo $args['after_main_div'] ?>
@ -407,8 +444,30 @@ function tainacan_get_the_media_component(
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['navigation']) ) : ?> <?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['navigation']) ) : ?>
<!-- If we need navigation buttons --> <!-- If we need navigation buttons -->
<div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_thumbs_id'] ?>"></div> <div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_thumbs_id'] ?> <?php echo ($args['swiper_arrows_as_svg'] ? 'swiper-button-has-svg' : '' ) ?>">
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_thumbs_id'] ?>"></div> <?php if ( $args['swiper_arrows_as_svg'] ): ?>
<?php if ( $args['swiper_arrow_prev_custom_svg'] ): ?>
<?php echo $args['swiper_arrow_prev_custom_svg']; ?>
<?php else: ?>
<svg width="var(--swiper-navigation-size)" height="var(--swiper-navigation-size)" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_thumbs_id'] ?> <?php echo ($args['swiper_arrows_as_svg'] ? 'swiper-button-has-svg' : '' ) ?>">
<?php if ( $args['swiper_arrows_as_svg'] ): ?>
<?php if ( $args['swiper_arrow_next_custom_svg'] ): ?>
<?php echo $args['swiper_arrow_next_custom_svg']; ?>
<?php else: ?>
<svg width="42" height="42" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?> <?php endif; ?>
<!-- These elements will create a gradient on the side of the carousel --> <!-- These elements will create a gradient on the side of the carousel -->
@ -422,7 +481,12 @@ function tainacan_get_the_media_component(
<?php endif; ?> <!-- End of if ($args['has_media_main'] || $args['has_media_thumbs'] ) --> <?php endif; ?> <!-- End of if ($args['has_media_main'] || $args['has_media_thumbs'] ) -->
<?php <?php
$content = ob_get_contents();
ob_end_clean();
return $content;
} }
@ -1005,8 +1069,8 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
* @param array $args { * @param array $args {
* Optional. Array of arguments. * Optional. Array of arguments.
* @type string $collection_id The Collection ID * @type string $collection_id The Collection ID
* @type string $search_URL A query string to fetch items from, if load strategy is 'search' * @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 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 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_items_number Maximum number of items to be fetch
* @type integer $max_tems_per_screen Maximum columns of items to be displayed on a row of the carousel * @type integer $max_tems_per_screen Maximum columns of items to be displayed on a row of the carousel
@ -1015,9 +1079,9 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
* @type bool $auto_play Should the Caroulsel start automatically to slide? * @type bool $auto_play Should the Caroulsel start automatically to slide?
* @type integer $auto_play_speed The time in s to translate to the next slide automatically * @type integer $auto_play_speed The time in s to translate to the next slide automatically
* @type bool $loop_slides Should slides loop when reached the end of the Carousel? * @type bool $loop_slides Should slides loop when reached the end of the Carousel?
* @type bool $hide_title Should the title of the items be displayed? * @type bool $hide_title Should the title of the items be displayed?
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`? * @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`?
* @type bool $show_collection_header Should it display a small version of the collection header? * @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 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_background_color Color of the collection header background
* @type string $collection_text_color Color of the collection header text * @type string $collection_text_color Color of the collection header text
@ -1079,3 +1143,30 @@ function tainacan_has_related_items($item_id = false) {
} }
return false; return false;
} }
/**
* Renders the content of the item gallery block
* using Tainacan template functions that create
* a Swiper.js carousel and slider, with a PhotoSwipe.js
* lightbox
*
* @param array $args {
* Optional. Array of arguments.
* @type string $item_id The Item ID
* @type string $blockId A unique identifier for the gallery, will be generated automatically if not provided,
* @type array $layoutElements Array of elements present in the gallery. Possible values are 'main' and 'carousel'
* @type array $mediaSources Array of sources for the gallery. Possible values are 'document' and 'attachments'
* @type bool $hideFileNameMain Hides the Main slider file name
* @type bool $hideFileCaptionMain Hides the Main slider file caption
* @type bool $hideFileDescriptionMain Hides the Main slider file description
* @type bool $hideFileNameThumbnails Hides the Thumbnails carousel file name
* @type bool $hideFileCaptionThumbnails Hides the Thumbnails carousel file caption
* @type bool $hideFileDescriptionThumbnails Hides the Thumbnails carousel file description
* @type bool $openLightboxOnClick Enables the behaviour of opening a lightbox with zoom when clicking on the media item
* @type bool $showDownloadButtonMain Displays a download button bellow the Main slider
* @return void
*/
function tainacan_the_item_gallery($args = []) {
echo \Tainacan\Theme_Helper::get_instance()->get_tainacan_item_gallery($args);
}

2
src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js
View File

@ -9,7 +9,7 @@ import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import 'swiper/css/swiper.min.css'; import 'swiper/css/swiper.min.css';
export default function ({ attributes, setAttributes, className, isSelected, clientId }) { export default function ({ attributes, setAttributes, className, isSelected, clientId }) {

2
src/views/gutenberg-blocks/blocks/carousel-collections-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

4
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -9,8 +9,8 @@ import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js'; import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
import 'swiper/css/swiper.min.css'; import 'swiper/css/swiper.min.css';
export default function({ attributes, setAttributes, className, isSelected, clientId }){ export default function({ attributes, setAttributes, className, isSelected, clientId }){

2
src/views/gutenberg-blocks/blocks/carousel-items-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

2
src/views/gutenberg-blocks/blocks/carousel-terms-list/edit.js
View File

@ -9,7 +9,7 @@ import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import 'swiper/css/swiper.min.css'; import 'swiper/css/swiper.min.css';
export default function({ attributes, setAttributes, className, isSelected, clientId }){ export default function({ attributes, setAttributes, className, isSelected, clientId }){

2
src/views/gutenberg-blocks/blocks/carousel-terms-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

2
src/views/gutenberg-blocks/blocks/collections-list/edit.js
View File

@ -4,7 +4,7 @@ const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import CollectionsModal from './collections-modal.js'; import CollectionsModal from './collections-modal.js';
export default function({ attributes, setAttributes, className, isSelected }) { export default function({ attributes, setAttributes, className, isSelected }) {

2
src/views/gutenberg-blocks/blocks/collections-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

4
src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
View File

@ -9,8 +9,8 @@ import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js'; import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
export default function({ attributes, setAttributes, className, isSelected, clientId }){ export default function({ attributes, setAttributes, className, isSelected, clientId }){
let { let {

2
src/views/gutenberg-blocks/blocks/dynamic-items-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

2
src/views/gutenberg-blocks/blocks/faceted-search/edit.js
View File

@ -24,7 +24,7 @@ const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2'
import CollectionModal from './collection-modal.js'; import CollectionModal from './collection-modal.js';
import TermModal from './term-modal.js'; import TermModal from './term-modal.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js'; import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
export default function({ attributes, setAttributes, className, isSelected, clientId }) { export default function({ attributes, setAttributes, className, isSelected, clientId }) {
let { let {

2
src/views/gutenberg-blocks/blocks/faceted-search/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

2
src/views/gutenberg-blocks/blocks/facets-list/edit.js
View File

@ -9,7 +9,7 @@ import ParentTermModal from './parent-term-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
export default function({ attributes, setAttributes, className, isSelected, clientId }) { export default function({ attributes, setAttributes, className, isSelected, clientId }) {
let { let {

2
src/views/gutenberg-blocks/blocks/facets-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

120
src/views/gutenberg-blocks/blocks/item-gallery/block.json Normal file
View File

@ -0,0 +1,120 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"name": "tainacan/item-gallery",
"title": "Tainacan Item Media Gallery",
"apiVersion": 2,
"category": "tainacan-blocks",
"keywords": [ "item", "document", "carousel", "attachments", "zoom" ],
"description": "The media gallery of the item, displaying document, attachments and more.",
"textdomain": "tainacan",
"example": {
"attributes": {
"content": "preview"
}
},
"attributes": {
"blockId": {
"type": "string",
"default": ""
},
"content": {
"type": "array",
"source": "query",
"selector": "div"
},
"collectionId": {
"type": "string",
"default": ""
},
"itemId": {
"type": "string",
"default": ""
},
"isModalOpen": {
"type": "boolean",
"default": false
},
"layoutElements": {
"type": "object",
"default": {
"main": true,
"thumbnails": true
}
},
"mediaSources": {
"type": "object",
"default": {
"document": true,
"attachments": true,
"metadata": false
}
},
"hideFileNameMain": {
"type": "boolean",
"default": true
},
"hideFileCaptionMain": {
"type": "boolean",
"default": false
},
"hideFileDescriptionMain": {
"type": "boolean",
"default": true
},
"hideFileNameThumbnails": {
"type": "boolean",
"default": true
},
"hideFileCaptionThumbnails": {
"type": "boolean",
"default": true
},
"hideFileDescriptionThumbnails": {
"type": "boolean",
"default": true
},
"openLightboxOnClick": {
"type": "boolean",
"default": true
},
"arrowsSize": {
"type": "integer",
"default": 44
},
"mainSliderHeight": {
"type": "integer",
"default": 60
},
"mainSliderWidth": {
"type": "integer",
"default": 100
},
"thumbnailsCarouselWidth": {
"type": "integer",
"default": 100
},
"thumbnailsCarouselItemSize": {
"type": "integer",
"default": 136
},
"showDownloadButtonMain": {
"type": "boolean",
"default": false
}
},
"supports": {
"align": ["full", "wide"],
"multiple": true,
"color": {
"text": true,
"background": true,
"gradients": true,
"link": true
},
"spacing": {
"padding": true
}
},
"editorScript": "item-gallery",
"editorStyle": "item-gallery"
}

1
src/views/gutenberg-blocks/blocks/item-gallery/deprecated.js Normal file
View File

@ -0,0 +1 @@
export default [];

329
src/views/gutenberg-blocks/blocks/item-gallery/edit.js Normal file
View File

@ -0,0 +1,329 @@
const { __ } = wp.i18n;
const { Button, Placeholder, RangeControl, ToggleControl, PanelBody } = wp.components;
const ServerSideRender = wp.serverSideRender;
const { InspectorControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import SingleItemModal from '../../js/selection/single-item-modal.js';
export default function ({ attributes, setAttributes, className, isSelected, clientId }) {
let {
content,
collectionId,
itemId,
isModalOpen,
layoutElements,
mediaSources,
hideFileNameMain,
hideFileCaptionMain,
hideFileDescriptionMain,
hideFileNameThumbnails,
hideFileCaptionThumbnails,
hideFileDescriptionThumbnails,
openLightboxOnClick,
arrowsSize,
mainSliderHeight,
mainSliderWidth,
thumbnailsCarouselWidth,
thumbnailsCarouselItemSize,
showDownloadButtonMain
} = attributes;
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
return content == 'preview' ?
<div className={className}>
<img
width="100%"
src={ `${tainacan_blocks.base_url}/assets/images/related-carousel-items.png` } />
</div>
: (
<div { ...blockProps }>
<InspectorControls>
<PanelBody
title={__('Media item sources', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Document', 'tainacan')}
checked={ mediaSources['document'] === true }
onChange={ ( isChecked ) => {
let updatedSources = Object.assign({},mediaSources);
updatedSources['document'] = isChecked;
setAttributes({ mediaSources: updatedSources });
}
}
/>
<ToggleControl
label={__('Attachments', 'tainacan')}
checked={ mediaSources['attachments'] === true }
onChange={ ( isChecked ) => {
let updatedSources = Object.assign({},mediaSources);
updatedSources['attachments'] = isChecked;
setAttributes({ mediaSources: updatedSources });
}
}
/>
{/* <ToggleControl
label={__('Metadata', 'tainacan')}
checked={ mediaSources['metadata'] === true }
onChange={ ( isChecked ) => {
let updatedSources = Object.assign({},mediaSources);
updatedSources['metadata'] = isChecked;
setAttributes({ mediaSources: updatedSources });
}
}
/> */}
</PanelBody>
<PanelBody
title={__('Layout elements', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Main slider', 'tainacan')}
checked={ layoutElements['main'] === true }
onChange={ ( isChecked ) => {
let updatedElements = Object.assign({},layoutElements);
updatedElements['main'] = isChecked;
setAttributes({ layoutElements: updatedElements });
}
}
/>
<ToggleControl
label={__('Thumbnails carousel', 'tainacan')}
checked={ layoutElements['thumbnails'] === true }
onChange={ (isChecked) => {
let updatedElements = Object.assign({},layoutElements);
updatedElements['thumbnails'] = isChecked;
setAttributes({ layoutElements: updatedElements });
}
}
/>
<ToggleControl
label={__('Open lightbox on click', 'tainacan')}
checked={ openLightboxOnClick }
onChange={ ( isChecked ) => {
openLightboxOnClick = isChecked;
setAttributes({ openLightboxOnClick: openLightboxOnClick });
}
}
/>
</PanelBody>
{ layoutElements['main'] === true ?
<PanelBody
title={__('Main slider settings', 'tainacan')}
initialOpen={ true }
>
<RangeControl
label={ __('Arrows size (px)', 'tainacan') }
value={ arrowsSize }
onChange={ ( updatedArrowsSize ) => {
arrowsSize = updatedArrowsSize;
setAttributes({ arrowsSize: updatedArrowsSize });
}}
min={ 8 }
max={ 64 }
/>
<RangeControl
label={ __('Slider height (vh)', 'tainacan') }
value={ mainSliderHeight }
onChange={ ( updatedMainSliderHeight ) => {
mainSliderHeight = updatedMainSliderHeight;
setAttributes({ mainSliderHeight: updatedMainSliderHeight });
}}
min={ 10 }
max={ 150 }
/>
<RangeControl
label={ __('Slider width (%)', 'tainacan') }
value={ mainSliderWidth }
onChange={ ( updatedMainSliderWidth ) => {
mainSliderWidth = updatedMainSliderWidth;
setAttributes({ mainSliderWidth: updatedMainSliderWidth });
}}
min={ 10 }
max={ 150 }
/>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameMain }
onChange={ ( isChecked ) => {
hideFileNameMain = isChecked;
setAttributes({ hideFileNameMain: hideFileNameMain });
}
}
/>
<ToggleControl
label={__('Hide file caption', 'tainacan')}
checked={ hideFileCaptionMain }
onChange={ ( isChecked ) => {
hideFileCaptionMain = isChecked;
setAttributes({ hideFileCaptionMain: hideFileCaptionMain });
}
}
/>
<ToggleControl
label={__('Hide file description', 'tainacan')}
checked={ hideFileDescriptionMain }
onChange={ ( isChecked ) => {
hideFileDescriptionMain = isChecked;
setAttributes({ hideFileDescriptionMain: hideFileDescriptionMain });
}
}
/>
<ToggleControl
label={__('Show download button', 'tainacan')}
checked={ showDownloadButtonMain }
onChange={ ( isChecked ) => {
showDownloadButtonMain = isChecked;
setAttributes({ showDownloadButtonMain: showDownloadButtonMain });
}
}
/>
</PanelBody>
: null }
{ layoutElements['thumbnails'] === true ?
<PanelBody
title={__('Thumbnails carousel settings', 'tainacan')}
initialOpen={ true }
>
<RangeControl
label={ __('Carousel width (%)', 'tainacan') }
value={ thumbnailsCarouselWidth }
onChange={ ( updatedThumbnailsCarouselWidth ) => {
thumbnailsCarouselWidth = updatedThumbnailsCarouselWidth;
setAttributes({ thumbnailsCarouselWidth: updatedThumbnailsCarouselWidth });
}}
min={ 10 }
max={ 150 }
/>
<RangeControl
label={ __('Carousel item size (px)', 'tainacan') }
value={ thumbnailsCarouselItemSize }
onChange={ ( updatedThumbnailsCarouselItemSize ) => {
thumbnailsCarouselItemSize = updatedThumbnailsCarouselItemSize;
setAttributes({ thumbnailsCarouselItemSize: updatedThumbnailsCarouselItemSize });
}}
min={ 32 }
max={ 400 }
/>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameThumbnails }
onChange={ ( isChecked ) => {
hideFileNameThumbnails = isChecked;
setAttributes({ hideFileNameThumbnails: hideFileNameThumbnails });
}
}
/>
<ToggleControl
label={__('Hide file caption', 'tainacan')}
checked={ hideFileCaptionThumbnails }
onChange={ ( isChecked ) => {
hideFileCaptionThumbnails = isChecked;
setAttributes({ hideFileCaptionThumbnails: hideFileCaptionThumbnails });
}
}
/>
<ToggleControl
label={__('Hide file description', 'tainacan')}
checked={ hideFileDescriptionThumbnails }
onChange={ ( isChecked ) => {
hideFileDescriptionThumbnails = isChecked;
setAttributes({ hideFileDescriptionThumbnails: hideFileDescriptionThumbnails });
}
}
/>
</PanelBody>
: null }
</InspectorControls>
{ isSelected ?
(
<div>
{ isModalOpen ?
<SingleItemModal
modalTitle={ __('Select one item to create its media gallery', 'tainacan') }
applyButtonLabel={ __('Create gallery from this item', 'tainacan') }
existingCollectionId={ collectionId }
existingItemId={ itemId }
onSelectCollection={ (selectedCollectionId) => {
collectionId = selectedCollectionId;
setAttributes({
collectionId: collectionId
});
}}
onApplySelectedItem={ (selectedItemId) => {
itemId = selectedItemId;
setAttributes({
itemId: itemId,
isModalOpen: false
});
}}
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
: null
}
</div>
) : null
}
{ !itemId ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(
<img
width={148}
src={ `${tainacan_blocks.base_url}/assets/images/tainacan_logo_header.svg` }
alt="Tainacan Logo"/>
)}>
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
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 display its media gallery, including Document and Attachments.', 'tainacan')}
</p>
<Button
isPrimary
type="button"
onClick={ () => {
isModalOpen = true;
setAttributes( {
isModalOpen: isModalOpen
});
}
}>
{__('Select Item', 'tainacan')}
</Button>
</Placeholder>
) : null
}
{ itemId ? (
<div className={ 'item-gallery-edit-container' }>
<div class="preview-warning">{__('Warning: this is just a demonstration. To see the gallery in action, either preview or publish your post.', 'tainacan') }</div>
<ServerSideRender
block="tainacan/item-gallery"
attributes={ attributes }
httpMethod={ currentWPVersion >= '5.5' ? 'POST' : 'GET' }
/>
</div>
) : null
}
</div>
);
};

14
src/views/gutenberg-blocks/blocks/item-gallery/icon.js Normal file
View File

@ -0,0 +1,14 @@
const { SVG, Path } = wp.components;
export default (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="-1 -1 26 26"
height="24px"
width="24px">
<Path
d="M 7.5947245,4.2973622 H 16.405277 V 19.702638 H 7.5947245 Z M 18.594724,7.5947241 H 23 V 16.405276 H 18.594724 Z M 1.0000002,16.405276 V 7.5947241 H 5.405276 v 8.8105519 z"
/>
</SVG>
);

15
src/views/gutenberg-blocks/blocks/item-gallery/index.js Normal file
View File

@ -0,0 +1,15 @@
import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json';
import icon from './icon.js';
import edit from './edit.js';
import save from './save.js';
import deprecated from './deprecated.js';
tainacanRegisterBlockType({
metadata,
icon,
edit,
save,
deprecated
});

3
src/views/gutenberg-blocks/blocks/item-gallery/save.js Normal file
View File

@ -0,0 +1,3 @@
export default function() {
return null
};

11
src/views/gutenberg-blocks/blocks/item-gallery/save.php Normal file
View File

@ -0,0 +1,11 @@
<?php
/**
* Renders the content of the item gallery block
* using Tainacan template functions that create
* a Swiper.js carousel and slider, with a PhotoSwipe.js
* lightbox
*/
function tainacan_blocks_render_items_gallery( $block_attributes, $content ) {
return \Tainacan\Theme_Helper::get_instance()->get_tainacan_item_gallery($block_attributes);
}

69
src/views/gutenberg-blocks/blocks/item-gallery/style.scss
View File

@ -11,21 +11,43 @@ $pswp__include-minimal-style: true !default;
@import '../../../../../node_modules/photoswipe/src/css/main.scss'; @import '../../../../../node_modules/photoswipe/src/css/main.scss';
@import '../../../../../node_modules/photoswipe/src/css/default-skin/default-skin.scss'; @import '../../../../../node_modules/photoswipe/src/css/default-skin/default-skin.scss';
.item-gallery-edit-container {
.tainacan-media-component {
.swiper-slide,
.swiper-button-prev,
.swiper-button-next {
cursor: not-allowed !important;
}
}
.preview-warning {
width: 100%;
font-size: 0.875rem;
font-style: italic;
color: inherit;
text-align: center;
margin: 0 auto;
padding: 8px 2px 2px 2px;
}
}
.tainacan-media-component { .tainacan-media-component {
--swiper-theme-color: var(--tainacan-secondary, #298596); --swiper-theme-color: var(--tainacan-secondary, #298596);
--swiper-navigation-size: 44px; --swiper-navigation-size: 44px;
--tainacan-media-metadata-color: var(--tainacan-label-color, #454647);
--tainacan-media-background: var(--tainacan-background-color, transparent); --tainacan-media-background: var(--tainacan-background-color, transparent);
--tainacan-media-main-carousel-height: 60vh; --tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%; --tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%; --tainacan-media-thumbs-carousel-width: 100%;
--tainacan-media-thumbs-carousel-item-size: 136px; --tainacan-media-thumbs-carousel-item-size: 136px;
width: 100%;
height: auto; height: auto;
display: block; display: block;
background-color: var(--tainacan-media-background, transparent); background-color: var(--tainacan-media-background, transparent);
box-sizing: border-box; box-sizing: border-box;
&:not(.alignfull):not(.alignwide) {
width: 100%;
}
.swiper-slide, .swiper-slide,
.swiper-slide::after, .swiper-slide::after,
.swiper-slide::before { .swiper-slide::before {
@ -36,13 +58,12 @@ $pswp__include-minimal-style: true !default;
/* Style valid for both cases of carousel, main and thumbs */ /* Style valid for both cases of carousel, main and thumbs */
.tainacan-media-component__swiper-main, .tainacan-media-component__swiper-main,
.tainacan-media-component__swiper-thumbs { .tainacan-media-component__swiper-thumbs {
.swiper-button-prev::after, .swiper-button-prev:not(.swiper-button-has-svg)::after,
.swiper-container-rtl .swiper-button-next::after { .swiper-container-rtl .swiper-button-next:not(.swiper-button-has-svg)::after {
content: 'previous'; content: 'previous';
} }
.swiper-button-next:not(.swiper-button-has-svg)::after,
.swiper-button-next::after, .swiper-button-prev:not(.swiper-button-has-svg)::after {
.swiper-button-prev::after {
font-family: "TainacanIcons"; font-family: "TainacanIcons";
opacity: 0.7; opacity: 0.7;
transition: opacity ease 0.2s; transition: opacity ease 0.2s;
@ -53,6 +74,16 @@ $pswp__include-minimal-style: true !default;
opacity: 1; opacity: 1;
} }
} }
.swiper-button-next.swiper-button-has-svg::after,
.swiper-button-prev.swiper-button-has-svg::after {
display: none;
}
.swiper-button-next.swiper-button-has-svg svg,
.swiper-button-prev.swiper-button-has-svg svg {
min-width: calc(var(--swiper-navigation-size) * 1.35);
min-height: calc(var(--swiper-navigation-size) * 1.35);
fill: currentColor;
}
ul.swiper-wrapper { ul.swiper-wrapper {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -113,20 +144,26 @@ $pswp__include-minimal-style: true !default;
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
&.hide-name.hide-description.hide-caption {
display: none;
visibility: hidden;
}
} }
.swiper-slide-metadata__name { .swiper-slide-metadata__name {
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
color: var(--tainacan-label-color, #454647); color: var(--tainacan-media-metadata-color, #454647);
opacity: 0.75;
} }
.swiper-slide-metadata__caption { .swiper-slide-metadata__caption {
font-size: 0.9375em; font-size: 0.9375em;
color: var(--tainacan-input-color, #1d1d1d); color: var(--tainacan-media-metadata-color, #454647);
} }
.swiper-slide-metadata__caption { .swiper-slide-metadata__caption {
font-size: 0.875em; font-size: 0.875em;
color: var(--tainacan-info-color, #555758); color: var(--tainacan-media-metadata-color, #454647);
opacity: 0.85;
} }
} }
@ -207,6 +244,8 @@ $pswp__include-minimal-style: true !default;
img { img {
width: auto; width: auto;
max-height: var(--tainacan-media-main-carousel-height, 60vh); max-height: var(--tainacan-media-main-carousel-height, 60vh);
max-width: 100%;
height: auto;
} }
.twitter-tweet { .twitter-tweet {
margin-left: auto; margin-left: auto;
@ -270,15 +309,17 @@ $pswp__include-minimal-style: true !default;
} }
.swiper-slide-metadata__name { .swiper-slide-metadata__name {
font-size: 1em; font-size: 1em;
color: var(--tainacan-label-color, #454647); color: var(--tainacan-media-metadata-color, #454647);
opacity: 0.75;
} }
.swiper-slide-metadata__caption { .swiper-slide-metadata__caption {
font-size: 0.9375em; font-size: 0.9375em;
color: var(--tainacan-input-color, #1d1d1d); color: var(--tainacan-media-metadata-color, #454647);
} }
.swiper-slide-metadata__caption { .swiper-slide-metadata__caption {
font-size: 0.875em; font-size: 0.875em;
color: var(--tainacan-info-color, #555758); color: var(---tainacan-media-metadata-color, #454647);
opacity: 0.85;
} }
.swiper-slide-metadata { .swiper-slide-metadata {
text-align: center; text-align: center;
@ -301,6 +342,10 @@ $pswp__include-minimal-style: true !default;
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
&.hide-name.hide-description.hide-caption {
display: none;
visibility: hidden;
}
} }
a { a {
width: 100%; width: 100%;

4
src/views/gutenberg-blocks/blocks/item-submission-form/edit.js
View File

@ -18,8 +18,8 @@ const { InspectorControls, BlockControls, RichText, useBlockProps } = (tainacan_
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import CollectionModal from '../faceted-search/collection-modal.js'; import CollectionModal from '../faceted-search/collection-modal.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js'; import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
export default function ({ attributes, setAttributes, className }) { export default function ({ attributes, setAttributes, className }) {
let { let {

2
src/views/gutenberg-blocks/blocks/item-submission-form/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

2
src/views/gutenberg-blocks/blocks/items-list/edit.js
View File

@ -4,7 +4,7 @@ const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import ItemsModal from './items-modal.js'; import ItemsModal from './items-modal.js';
export default function({ attributes, setAttributes, className, isSelected }) { export default function({ attributes, setAttributes, className, isSelected }) {

2
src/views/gutenberg-blocks/blocks/items-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

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

@ -4,7 +4,7 @@ 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 RelatedItemsModal from './related-items-modal.js'; import SingleItemModal from '../../js/selection/single-item-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -50,7 +50,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
}); });
} }
function openRelatedItemsModal() { function openSingleItemModal() {
isModalOpen = true; isModalOpen = true;
setAttributes( { setAttributes( {
isModalOpen: isModalOpen isModalOpen: isModalOpen
@ -144,7 +144,9 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
( (
<div> <div>
{ isModalOpen ? { isModalOpen ?
<RelatedItemsModal <SingleItemModal
modalTitle={ __('Select one item that has relations', 'tainacan') }
applyButtonLabel={ __('Get relations of this item', 'tainacan') }
existingCollectionId={ collectionId } existingCollectionId={ collectionId }
existingItemId={ itemId } existingItemId={ itemId }
onSelectCollection={ (selectedCollectionId) => { onSelectCollection={ (selectedCollectionId) => {
@ -157,7 +159,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
relatedItems: relatedItems relatedItems: relatedItems
}); });
}} }}
onApplyRelatedItem={ (selectedItemId) => { onApplySelectedItem={ (selectedItemId) => {
if (itemId != selectedItemId) { if (itemId != selectedItemId) {
relatedItems = []; relatedItems = [];
relatedItemsTemplate = []; relatedItemsTemplate = [];
@ -202,7 +204,7 @@ export default function ({ attributes, setAttributes, className, isSelected }) {
<Button <Button
isPrimary isPrimary
type="button" type="button"
onClick={ () => openRelatedItemsModal() }> onClick={ () => openSingleItemModal() }>
{__('Select Item', 'tainacan')} {__('Select Item', 'tainacan')}
</Button> </Button>
</Placeholder> </Placeholder>

2
src/views/gutenberg-blocks/blocks/related-items-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

4
src/views/gutenberg-blocks/blocks/search-bar/edit.js
View File

@ -4,8 +4,8 @@ const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeho
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import TainacanBlocksCompatColorPicker from '../../js/tainacan-blocks-compat-colorpicker.js'; import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
import SearchBarModal from './search-bar-modal.js'; import SearchBarModal from './search-bar-modal.js';
export default function({ attributes, setAttributes, className, isSelected }) { export default function({ attributes, setAttributes, className, isSelected }) {

2
src/views/gutenberg-blocks/blocks/search-bar/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

2
src/views/gutenberg-blocks/blocks/terms-list/edit.js
View File

@ -4,7 +4,7 @@ const { IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.compone
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js'; import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
import TermsModal from './terms-modal.js'; import TermsModal from './terms-modal.js';
export default function({ attributes, setAttributes, className, isSelected }){ export default function({ attributes, setAttributes, className, isSelected }){

2
src/views/gutenberg-blocks/blocks/terms-list/index.js
View File

@ -1,4 +1,4 @@
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js'; import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js';
import metadata from './block.json'; import metadata from './block.json';
import icon from './icon.js'; import icon from './icon.js';

36
src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php
View File

@ -15,7 +15,8 @@ const TAINACAN_BLOCKS = [
'related-items-list' => [], 'related-items-list' => [],
'terms-list' => [], 'terms-list' => [],
'faceted-search' => [], 'faceted-search' => [],
'item-submission-form' => [] 'item-submission-form' => [],
'item-gallery' => ['render_callback' => 'tainacan_blocks_render_items_gallery']
]; ];
// Lets do this! // Lets do this!
@ -41,9 +42,12 @@ function tainacan_blocks_initialize() {
if ( !is_admin() ) { if ( !is_admin() ) {
add_action( 'init', 'tainacan_blocks_add_common_theme_scripts', 90 ); add_action( 'init', 'tainacan_blocks_add_common_theme_scripts', 90 );
add_action( 'init', 'tainacan_blocks_get_common_theme_styles', 90 ); add_action( 'init', 'tainacan_blocks_get_common_theme_styles', 90 );
// On the admin side, we need the blocks registered and their assets (editor-side)
} }
add_action('admin_init', 'tainacan_blocks_register_and_enqueue_all_blocks');
// On the admin side, we need the blocks registered and their assets (editor-side)
// The reason why we don't use admin_init here is because server side blocks
// need to be registered whithin the init
add_action('init', 'tainacan_blocks_register_and_enqueue_all_blocks');
} }
} }
@ -67,9 +71,12 @@ function tainacan_blocks_register_categories($categories, $editor_context) {
* both 'generic' and 'special' blocks * both 'generic' and 'special' blocks
*/ */
function tainacan_blocks_register_and_enqueue_all_blocks() { function tainacan_blocks_register_and_enqueue_all_blocks() {
tainacan_blocks_get_category_icon_script(); // Only needed inside the editor
tainacan_blocks_get_common_editor_styles(); if ( is_admin() ) {
tainacan_blocks_get_category_icon_script();
tainacan_blocks_get_common_editor_styles();
}
// May be needed outside the editor, if server side render is used
foreach(TAINACAN_BLOCKS as $block_slug => $block_options) { foreach(TAINACAN_BLOCKS as $block_slug => $block_options) {
tainacan_blocks_register_block($block_slug, $block_options); tainacan_blocks_register_block($block_slug, $block_options);
} }
@ -91,8 +98,21 @@ function tainacan_blocks_register_block($block_slug, $options = []) {
// Creates Register params based on registered scripts and styles // Creates Register params based on registered scripts and styles
$register_params = []; $register_params = [];
// If there is a server side render callback, we add its render function
if ( isset($options['render_callback']) ) {
require_once( __DIR__ . '/blocks/' . $block_slug . '/save.php' );
$register_params['render_callback'] = $options['render_callback'];
$register_params['skip_inner_blocks'] = true;
// Also, none of the rest is necessary regarding
// blocks that are non server side, their content
// is independent of editor side scripts and styles.
} else if ( !is_admin() ) {
return;
}
// Defines dependencies for editor script // Defines dependencies for editor script
$editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components'); $editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-server-side-render');
if ( version_compare( $wp_version, '5.2', '<') ) if ( version_compare( $wp_version, '5.2', '<') )
$editor_script_deps[] = 'wp-editor'; $editor_script_deps[] = 'wp-editor';
else else
@ -128,7 +148,7 @@ function tainacan_blocks_register_block($block_slug, $options = []) {
// Registers the new block // Registers the new block
if (function_exists('register_block_type')) { if (function_exists('register_block_type')) {
if ( version_compare( $wp_version, '5.8-RC', '>=') ) if ( version_compare( $wp_version, '5.8-RC', '>=') )
register_block_type( __DIR__ . '/blocks/' . $block_slug ); register_block_type( __DIR__ . '/blocks/' . $block_slug, $register_params );
else else
register_block_type( 'tainacan/' . $block_slug, $register_params ); register_block_type( 'tainacan/' . $block_slug, $register_params );
} }

0
src/views/gutenberg-blocks/js/tainacan-blocks-compat-colorpicker.js → src/views/gutenberg-blocks/js/compatibility/tainacan-blocks-compat-colorpicker.js
View File

32
src/views/gutenberg-blocks/js/tainacan-blocks-compat-register.js → src/views/gutenberg-blocks/js/compatibility/tainacan-blocks-compat-register.js
View File

@ -24,33 +24,29 @@ function tainacanBlocksLocalizeMetadata(metadata) {
export default function({ metadata, icon, edit, save, deprecated, transforms }) { export default function({ metadata, icon, edit, save, deprecated, transforms }) {
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
let attributes = {
icon: {
src: icon,
foreground: '#298596',
},
edit,
deprecated,
transforms
}
if (save)
attributes['save'] = save;
if (currentWPVersion >= '5.8-RC') { if (currentWPVersion >= '5.8-RC') {
// Registers block type using new strategy from WP 5.8 // Registers block type using new strategy from WP 5.8
registerBlockType( metadata, { registerBlockType( metadata, attributes);
icon: {
src: icon,
foreground: '#298596',
},
edit,
save,
deprecated,
transforms
});
} else { } else {
// Converts this array to a valid array previous to WP 5.8 // Converts this array to a valid array previous to WP 5.8
registerBlockType( metadata.name, { registerBlockType( metadata.name, {
...tainacanBlocksLocalizeMetadata(metadata), ...tainacanBlocksLocalizeMetadata(metadata),
icon: { ...attributes
src: icon,
foreground: '#298596',
},
edit,
save,
deprecated,
transforms
}); });
} }
}; };

0
src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js → src/views/gutenberg-blocks/js/compatibility/tainacan-blocks-compat-toolbar.js
View File

18
src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js → src/views/gutenberg-blocks/js/selection/single-item-modal.js
View File

@ -1,4 +1,4 @@
import tainacan from '../../js/axios.js'; import tainacan from '../axios.js';
import axios from 'axios'; import axios from 'axios';
const { __ } = wp.i18n; const { __ } = wp.i18n;
@ -6,7 +6,7 @@ const { __ } = wp.i18n;
const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components; const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components;
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
export default class RelatedItemsModal extends React.Component { export default class SingleItemModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -36,7 +36,7 @@ export default class RelatedItemsModal extends React.Component {
this.fetchCollections = this.fetchCollections.bind(this); this.fetchCollections = this.fetchCollections.bind(this);
this.fetchModalCollections = this.fetchModalCollections.bind(this); this.fetchModalCollections = this.fetchModalCollections.bind(this);
this.fetchCollection = this.fetchCollection.bind(this); this.fetchCollection = this.fetchCollection.bind(this);
this.applyRelatedItem = this.applyRelatedItem.bind(this); this.applySelectedItem = this.applySelectedItem.bind(this);
} }
componentWillMount() { componentWillMount() {
@ -167,13 +167,13 @@ export default class RelatedItemsModal extends React.Component {
}); });
} }
applyRelatedItem() { applySelectedItem() {
let iframe = document.getElementById("itemsFrame"); let iframe = document.getElementById("itemsFrame");
if (iframe) { if (iframe) {
let params = new URLSearchParams(iframe.contentWindow.location.search); let params = new URLSearchParams(iframe.contentWindow.location.search);
let selectedItems = params.getAll('selecteditems'); let selectedItems = params.getAll('selecteditems');
params.delete('selecteditems') params.delete('selecteditems')
this.props.onApplyRelatedItem(selectedItems[0]); this.props.onApplySelectedItem(selectedItems[0]);
} }
} }
@ -201,10 +201,10 @@ export default class RelatedItemsModal extends React.Component {
// Items modal // Items modal
<Modal <Modal
className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < 5.9 ? 'wp-version-smaller-than-5-9' : '') } className={ 'wp-block-tainacan-modal dynamic-modal ' + (currentWPVersion < 5.9 ? 'wp-version-smaller-than-5-9' : '') }
title={ __('Select one item that has relations', 'tainacan') } title={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }
onRequestClose={ () => this.cancelSelection() } onRequestClose={ () => this.cancelSelection() }
shouldCloseOnClickOutside={ false } shouldCloseOnClickOutside={ false }
contentLabel={ __('Select one item that has relations', 'tainacan') }> contentLabel={ this.props.modalTitle ? this.props.modalTitle : __('Select one item for the block', 'tainacan') }>
<iframe <iframe
id="itemsFrame" id="itemsFrame"
src={ this.state.searchURL } /> src={ this.state.searchURL } />
@ -217,8 +217,8 @@ export default class RelatedItemsModal extends React.Component {
<Button <Button
style={{ marginLeft: 'auto' }} style={{ marginLeft: 'auto' }}
isPrimary isPrimary
onClick={ () => this.applyRelatedItem() }> onClick={ () => this.applySelectedItem() }>
{__('Get relations of this item', 'tainacan')} { this.props.applyButtonLabel ? this.props.applyButtonLabel : __('Use this item', 'tainacan') }
</Button> </Button>
</div> </div>
</Modal> </Modal>

6
src/views/gutenberg-blocks/tainacan-blocks-common-scripts.js
View File

@ -23,7 +23,8 @@ const addDataModuleToOldBlocks = () => {
'carousel-items-list', 'carousel-items-list',
'carousel-terms-list', 'carousel-terms-list',
'related-items-list', 'related-items-list',
'carousel-collections-list' 'carousel-collections-list',
'item-gallery'
]; ];
// Looks for Tainacan Blocks based on their classes. // Looks for Tainacan Blocks based on their classes.
@ -35,7 +36,7 @@ const addDataModuleToOldBlocks = () => {
}); });
}); });
// Extra case for the items list and item submission, as their // Extra case for the items list, item gallery and item submission, as their
// theme wrapper does not uses gutenberg classes, but the div ID // theme wrapper does not uses gutenberg classes, but the div ID
let existingItemListOnPage = document.getElementById('tainacan-items-page'); let existingItemListOnPage = document.getElementById('tainacan-items-page');
if ( existingItemListOnPage && !existingItemListOnPage.getAttribute('data-module') ) if ( existingItemListOnPage && !existingItemListOnPage.getAttribute('data-module') )
@ -44,6 +45,7 @@ const addDataModuleToOldBlocks = () => {
let existingItemSubmissionFormOnPage = document.getElementById('tainacan-item-submission-form'); let existingItemSubmissionFormOnPage = document.getElementById('tainacan-item-submission-form');
if ( existingItemSubmissionFormOnPage && !existingItemSubmissionFormOnPage.getAttribute('data-module') ) if ( existingItemSubmissionFormOnPage && !existingItemSubmissionFormOnPage.getAttribute('data-module') )
existingItemSubmissionFormOnPage.setAttribute('data-module', 'item-submission-form'); existingItemSubmissionFormOnPage.setAttribute('data-module', 'item-submission-form');
} }
performWhenDocumentIsLoaded(() => { performWhenDocumentIsLoaded(() => {

3
webpack.common.js
View File

@ -19,7 +19,8 @@ module.exports = {
block_facets_list: './src/views/gutenberg-blocks/blocks/facets-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_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', block_faceted_search: './src/views/gutenberg-blocks/blocks/faceted-search/index.js',
block_carousel_terms_list: './src/views/gutenberg-blocks/blocks/carousel-terms-list/index.js' block_carousel_terms_list: './src/views/gutenberg-blocks/blocks/carousel-terms-list/index.js',
block_item_gallery: './src/views/gutenberg-blocks/blocks/item-gallery/index.js'
}, },
output: { output: {
path: path.resolve(__dirname, './src/assets/js/'), path: path.resolve(__dirname, './src/assets/js/'),