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

Adds template mode to the Item Gallery Block.

This commit is contained in:
mateuswetah 2022-10-25 11:43:14 -03:00
parent 6dee6f980c
commit e6365914a4
12 changed files with 242 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,28 @@
text-align: center;
margin: 0 auto;
padding: 8px 2px 2px 2px; }
.item-gallery-edit-container .tainacan-gallery-main-placeholder {
position: relative;
min-height: var(--tainacan-media-main-carousel-height, 60vh);
max-width: var(--tainacan-media-main-carousel-width, 100%);
margin: 0 auto 1em auto; }
.item-gallery-edit-container .tainacan-gallery-thumbnails-placeholder {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 20px;
list-style: none !important;
margin: 0px auto !important;
padding: 0px !important;
max-width: var(--tainacan-media-thumbs-carousel-width, 100%);
width: var(--tainacan-media-thumbs-carousel-width, 100%);
overflow-x: auto;
overflow-y: hidden; }
.item-gallery-edit-container .tainacan-gallery-thumbnails-placeholder li {
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
min-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
flex-basis: var(--tainacan-media-thumbs-carousel-item-size, 136px);
position: relative; }
.tainacan-media-component {
--swiper-theme-color: var(--tainacan-secondary, #298596);

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

File diff suppressed because one or more lines are too long

4
src/classes/entities/class-tainacan-item.php
View File

@ -599,7 +599,7 @@ class Item extends Entity {
// A metadatum ID was passed
} elseif ( is_int($metadatum) ) {
$metadatum_object = $Tainacan_Metadata->fetch($metadatum);
// A metadatum slug was passed
} elseif ( is_string($metadatum) ) {
$query = $Tainacan_Metadata->fetch(['slug' => $metadatum], 'OBJECT');
@ -667,7 +667,7 @@ class Item extends Entity {
// Get the item metadata objects from the item repository
$item_metadata = $this->get_metadata($query_args);
}
// Loop item metadata to print their "values" as html
$metadatum_index = 0;
foreach ( $item_metadata as $item_metadatum ) {

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

@ -1251,7 +1251,6 @@ class Theme_Helper {
return;
// Gets options from block attributes
$item_id = $item->get_id();
$block_id = $args['blockId'];
$layout_elements = $args['layoutElements'];
$media_sources = $args['mediaSources'];
@ -1899,4 +1898,148 @@ class Theme_Helper {
// Returns the html content created by the function
return $return;
}
/**
* Returns a placeholder for the item gallery, to be
* used in the block editor.
*
* @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 bool $isBlock An identifier if we're comming from a block renderer, to avois using functions not available outside of the gutenberg scope;
* @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 $hideFileNameLightbox Hides the Lightbox file name
* @type bool $hideFileCaptionLightbox Hides the Lightbox file caption
* @type bool $hideFileDescriptionLightbox Hides the Lightbox 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 below the Main slider
* @type bool $lightboxHasLightBackground Show a light background instead of dark in the lightbox
* @type bool $showArrowsAsSVG Decides if the swiper carousel arrows will be an SVG icon or font icon
* @return string The HTML div to be used for rendering the item galery component
*/
public function get_tainacan_item_gallery_template($args = []) {
$defaults = array(
'blockId' => uniqid(),
'layoutElements' => array( 'main' => true, 'thumbnails' => true ),
'isBlock' => false,
'mediaSources' => array( 'document' => true, 'attachments' => true, 'metadata' => false),
'hideFileNameMain' => true,
'hideFileCaptionMain' => false,
'hideFileDescriptionMain' => true,
'hideFileNameThumbnails' => true,
'hideFileCaptionThumbnails' => true,
'hideFileDescriptionThumbnails' => true,
'hideFileNameLightbox' => false,
'hideFileCaptionLightbox' => false,
'hideFileDescriptionLightbox' => false,
'openLightboxOnClick' => true,
'showDownloadButtonMain' => true,
'lightboxHasLightBackground' => false,
'showArrowsAsSVG' => true
);
$args = wp_parse_args($args, $defaults);
// Gets options from block attributes
$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'];
$hide_file_name_lightbox = $args['hideFileNameLightbox'];
$hide_file_caption_lightbox = $args['hideFileCaptionLightbox'];
$hide_file_description_lightbox = $args['hideFileDescriptionLightbox'];
$open_lightbox_on_click = $args['openLightboxOnClick'];
$show_download_button_main = $args['showDownloadButtonMain'];
$lightbox_has_light_background = $args['lightboxHasLightBackground'];
$show_arrows_as_svg = $args['showArrowsAsSVG'];
// 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
);
$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']) : '';
// Checks if we're inside a block, otherwise we have to build this manually.
if ( isset($args['isBlock']) && $args['isBlock'] ) {
$wrapper_attributes = get_block_wrapper_attributes(
array(
'style' => $block_custom_css,
'class' => 'tainacan-media-component'
)
);
} else {
$wrapper_attributes = '';
if ( !empty($block_custom_css) )
$wrapper_attributes .= 'style="' . $block_custom_css . '" ';
$wrapper_attributes .= 'class="tainacan-media-component"';
}
$placeholder_content = '';
if ($layout_elements['main'])
$placeholder_content .= '<div class="tainacan-gallery-main-placeholder wp-block-post-featured-image wp-block-post-featured-image"><div class="wp-block-post-featured-image__placeholder"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" preserveAspectRatio="none" class="components-placeholder__illustration" aria-hidden="true" focusable="false"><path vector-effect="non-scaling-stroke" d="M60 60 0 0"></path></svg></div></div>';
if ($layout_elements['thumbnails'])
$placeholder_content .= '<ul class="tainacan-gallery-thumbnails-placeholder">
<li class="wp-block-post-featured-image wp-block-post-featured-image">
<div class="wp-block-post-featured-image__placeholder"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" preserveAspectRatio="none" class="components-placeholder__illustration" aria-hidden="true" focusable="false"><path vector-effect="non-scaling-stroke" d="M60 60 0 0"></path></svg></div>
</li>
<li class="wp-block-post-featured-image wp-block-post-featured-image">
<div class="wp-block-post-featured-image__placeholder"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" preserveAspectRatio="none" class="components-placeholder__illustration" aria-hidden="true" focusable="false"><path vector-effect="non-scaling-stroke" d="M60 60 0 0"></path></svg></div>
</li>
<li class="wp-block-post-featured-image wp-block-post-featured-image">
<div class="wp-block-post-featured-image__placeholder"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" preserveAspectRatio="none" class="components-placeholder__illustration" aria-hidden="true" focusable="false"><path vector-effect="non-scaling-stroke" d="M60 60 0 0"></path></svg></div>
</li>
<li class="wp-block-post-featured-image wp-block-post-featured-image">
<div class="wp-block-post-featured-image__placeholder"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" preserveAspectRatio="none" class="components-placeholder__illustration" aria-hidden="true" focusable="false"><path vector-effect="non-scaling-stroke" d="M60 60 0 0"></path></svg></div>
</li>
<li class="wp-block-post-featured-image wp-block-post-featured-image">
<div class="wp-block-post-featured-image__placeholder"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" preserveAspectRatio="none" class="components-placeholder__illustration" aria-hidden="true" focusable="false"><path vector-effect="non-scaling-stroke" d="M60 60 0 0"></path></svg></div>
</li>
</ul>';
return '<div ' . $wrapper_attributes . '>' . $placeholder_content . '</div>';
}
}

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

@ -46,7 +46,7 @@ use \Tainacan\Repositories;
* @return string The HTML output
*/
function tainacan_get_the_metadata($args = array(), $item_id = 0) {
$item = tainacan_get_item( $item_id );
if ($item instanceof \Tainacan\Entities\Item) {

4
src/views/gutenberg-blocks/blocks/item-gallery/block.json
View File

@ -116,6 +116,10 @@
"lightboxHasLightBackground": {
"type": "boolean",
"default": false
},
"templateMode": {
"type": "boolean",
"default": false
}
},
"supports": {

21
src/views/gutenberg-blocks/blocks/item-gallery/edit.js
View File

@ -6,6 +6,7 @@ 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';
import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js';
export default function ({ attributes, setAttributes, className, isSelected, clientId }) {
@ -32,7 +33,8 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
thumbnailsCarouselWidth,
thumbnailsCarouselItemSize,
showDownloadButtonMain,
lightboxHasLightBackground
lightboxHasLightBackground,
templateMode
} = attributes;
// Gets blocks props from hook
@ -42,6 +44,19 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
// Checks if we are in template mode, if so, gets the collection Id from URL.
if ( !templateMode ) {
const possibleCollectionId = getCollectionIdFromPossibleTemplateEdition();
if (possibleCollectionId) {
collectionId = String(possibleCollectionId);
templateMode = true;
setAttributes({
collectionId: collectionId,
templateMode: templateMode
});
}
}
return content == 'preview' ?
<div className={className}>
<img
@ -339,7 +354,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
) : null
}
{ !itemId ? (
{ !itemId && !templateMode ? (
<Placeholder
className="tainacan-block-placeholder"
icon={(
@ -374,7 +389,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
) : null
}
{ itemId ? (
{ itemId || templateMode ? (
<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

18
src/views/gutenberg-blocks/blocks/item-gallery/save.php
View File

@ -8,5 +8,21 @@
*/
function tainacan_blocks_render_items_gallery( $block_attributes, $content ) {
$block_attributes['isBlock'] = true;
return \Tainacan\Theme_Helper::get_instance()->get_tainacan_item_gallery($block_attributes);
$template_mode = isset($block_attributes['templateMode']) ? $block_attributes['templateMode'] : false;
$collection_id = isset($block_attributes['collectionId']) ? $block_attributes['collectionId'] : false;
if ( $template_mode && $collection_id ) {
// Checks if we are in the edit page or in the published
$current_post = get_post();
$collection_pt_pattern = '/' . \Tainacan\Entities\Collection::$db_identifier_prefix . '\d+' . \Tainacan\Entities\Collection::$db_identifier_sufix . '/';
if ( $current_post === NULL ) {
return \Tainacan\Theme_Helper::get_instance()->get_tainacan_item_gallery_template($block_attributes);
} else if ( $current_post->post_type !== false && preg_match($collection_pt_pattern, $current_post->post_type) ) {
$block_attributes['item_id'] = $current_post->ID;
return \Tainacan\Theme_Helper::get_instance()->get_tainacan_item_gallery($block_attributes);
}
} else {
return \Tainacan\Theme_Helper::get_instance()->get_tainacan_item_gallery($block_attributes);
}
}

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

@ -15,6 +15,32 @@
margin: 0 auto;
padding: 8px 2px 2px 2px;
}
.tainacan-gallery-main-placeholder {
position: relative;
min-height: var(--tainacan-media-main-carousel-height, 60vh);
max-width: var(--tainacan-media-main-carousel-width, 100%);
margin: 0 auto 1em auto;
}
.tainacan-gallery-thumbnails-placeholder {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 20px;
list-style: none !important;
margin: 0px auto !important;
padding: 0px !important;
max-width: var(--tainacan-media-thumbs-carousel-width, 100%);
width: var(--tainacan-media-thumbs-carousel-width, 100%);
overflow-x: auto;
overflow-y: hidden;
li {
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
min-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
flex-basis: var(--tainacan-media-thumbs-carousel-item-size, 136px);
position: relative;
}
}
}
.tainacan-media-component {
--swiper-theme-color: var(--tainacan-secondary, #298596);

5
src/views/gutenberg-blocks/blocks/item-metadata-section/save.php
View File

@ -21,10 +21,9 @@ function tainacan_blocks_render_metadata_section( $block_attributes, $content, $
'metadata_section' => $section_id
];
// Checks if we are in the edit page or in the published
$current_post = get_post();
if ( $template_mode && $collection_id ) {
// Checks if we are in the edit page or in the published
$current_post = get_post();
$collection_pt_pattern = '/' . \Tainacan\Entities\Collection::$db_identifier_prefix . '\d+' . \Tainacan\Entities\Collection::$db_identifier_sufix . '/';
if ( $current_post === NULL )

7
src/views/gutenberg-blocks/blocks/item-metadata/save.php
View File

@ -18,13 +18,12 @@ function tainacan_blocks_render_item_metadata( $block_attributes, $content, $blo
// Builds args from backend query
$args = [
'metadata' => array_map(function($metadatum) { return $metadatum['id']; }, $metadata)
'metadata_in' => array_map(function($metadatum) { return $metadatum['id']; }, $metadata)
];
// Checks if we are in the edit page or in the published
$current_post = get_post();
if ( $template_mode && $collection_id ) {
// Checks if we are in the edit page or in the published
$current_post = get_post();
$collection_pt_pattern = '/' . \Tainacan\Entities\Collection::$db_identifier_prefix . '\d+' . \Tainacan\Entities\Collection::$db_identifier_sufix . '/';
if ( $current_post === NULL )

5
src/views/gutenberg-blocks/blocks/item-metadatum/save.php
View File

@ -40,11 +40,10 @@ function tainacan_blocks_render_item_metadatum( $block_attributes, $content, $bl
);
$args['before'] = '<div ' . $wrapper_attributes . '>';
$args['after'] = '</div>';
// Checks if we are in the edit page or in the published
$current_post = get_post();
if ( $template_mode && $collection_id ) {
// Checks if we are in the edit page or in the published
$current_post = get_post();
$collection_pt_pattern = '/' . \Tainacan\Entities\Collection::$db_identifier_prefix . '\d+' . \Tainacan\Entities\Collection::$db_identifier_sufix . '/';
if ( $current_post === NULL )