Adds more blocks to the block.json strategy #580
This commit is contained in:
mateuswetah
parent
1563c69898
commit
a9bfb9e691
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,yCAA0C;EACtC,MAAM,EAAE,UAAU;EAClB,KAAK,EAAE,IAAI;EAGX,4DAAmB;IACf,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,oCAAmC;AAI9C,qCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,kCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,gCAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;AAErB,6BAIC;EAHG,EAAE;IAAC,OAAO,EAAE,GAAG;EACf,GAAG;IAAC,OAAO,EAAE,GAAG;EAChB,IAAI;IAAC,OAAO,EAAE,GAAG;EAErB,mDAAU;IACN,aAAa,EAAE,GAAG;IAClB,UAAU,EAAE,oCAAmC;IAE/C,iBAAiB,EAAE,qCAAqC;IACxD,cAAc,EAAE,qCAAqC;IACrD,YAAY,EAAE,qCAAqC;IACnD,SAAS,EAAE,qCAAqC;EAIpD,gFAAuC;IACnC,QAAQ,EAAE,QAAQ;IAElB,0FAAY;MACR,UAAU,EAAE,KAAK",
|
||||
"sources": ["../../views/gutenberg-blocks/tainacan-items/carousel-related-items/carousel-related-items.scss"],
|
||||
"sources": ["../../views/gutenberg-blocks/tainacan-blocks/carousel-related-items/style.scss"],
|
||||
"names": [],
|
||||
"file": "tainacan-gutenberg-block-carousel-related-items.css"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,9 +127,6 @@
|
|||
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control {
|
||||
overflow: hidden;
|
||||
padding-left: 1px; }
|
||||
.wp-block-tainacan-modal .modal-checkbox-list svg.components-checkbox-control__checked,
|
||||
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field svg.components-checkbox-control__checked {
|
||||
fill: black; }
|
||||
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item,
|
||||
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option,
|
||||
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": ["../../views/gutenberg-blocks/gutenberg-blocks-style.scss","../../views/gutenberg-blocks/gutenberg-blocks-variables.scss"],
|
||||
"names": [],
|
||||
"file": "tainacan-gutenberg-block-common-styles.css"
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@ function tainacan_blocks_register_block($block_slug, $options = []) {
|
|||
if (function_exists('register_block_type')) {
|
||||
if (
|
||||
version_compare( $wp_version, '5.8-RC', '>=') &&
|
||||
($block_slug == 'carousel-collections-list' || $block_slug == 'collections-list' || $block_slug == 'carousel-items-list' || $block_slug == 'carousel-terms-list' || $block_slug == 'dynamic-items-list')
|
||||
($block_slug == 'carousel-collections-list' || $block_slug == 'collections-list' || $block_slug == 'carousel-items-list' || $block_slug == 'carousel-terms-list' || $block_slug == 'dynamic-items-list' || $block_slug == 'items-list' || $block_slug == 'terms-list')
|
||||
)
|
||||
register_block_type( __DIR__ . '/tainacan-blocks/' . $block_slug );
|
||||
else
|
||||
|
|
|
|||
|
|
@ -164,10 +164,6 @@
|
|||
overflow: hidden;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
svg.components-checkbox-control__checked {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.modal-checkbox-list-item,
|
||||
.components-radio-control__option {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"category": "tainacan-blocks",
|
||||
"keywords": [ "carousel", "slider", "taxonomy" ],
|
||||
"description": "List terms on a Carousel, showing their thumbnails or a preview of items.",
|
||||
"textdomain": "tainacan",
|
||||
"example": {
|
||||
"attributes": {
|
||||
"content": "preview"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"category": "tainacan-blocks",
|
||||
"keywords": [ "items", "search", "collection" ],
|
||||
"description": "Dynamically list items from a Tainacan items search",
|
||||
"textdomain": "tainacan",
|
||||
"example": {
|
||||
"attributes": {
|
||||
"content": "preview"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
{
|
||||
"name": "tainacan/items-list",
|
||||
"title": "Tainacan Items List",
|
||||
"category": "tainacan-blocks",
|
||||
"keywords": [ "items", "collection" ],
|
||||
"description": "Expose items from your Tainacan collections",
|
||||
"textdomain": "tainacan",
|
||||
"example": {
|
||||
"attributes": {
|
||||
"content": "preview"
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"selectedItemsObject": {
|
||||
"type": "array",
|
||||
"source": "query",
|
||||
"selector": "a",
|
||||
"query": {
|
||||
"id": {
|
||||
"type": "String",
|
||||
"source": "attribute",
|
||||
"attribute": "id"
|
||||
},
|
||||
"url": {
|
||||
"type": "String",
|
||||
"source": "attribute",
|
||||
"attribute": "href"
|
||||
},
|
||||
"title": {
|
||||
"type": "String",
|
||||
"source": "text"
|
||||
},
|
||||
"thumbnail": {
|
||||
"source": "query",
|
||||
"selector": "img",
|
||||
"query": {
|
||||
"src": {
|
||||
"source": "attribute",
|
||||
"attribute": "src"
|
||||
},
|
||||
"alt": {
|
||||
"source": "attribute",
|
||||
"attribute": "alt"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"default": []
|
||||
},
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"query": {
|
||||
"type": "Object",
|
||||
"default": {}
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItemsHTML": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "Number",
|
||||
"default": 0
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"align": ["full", "wide"],
|
||||
"html": false,
|
||||
"typography": {
|
||||
"fontSize": true
|
||||
}
|
||||
},
|
||||
"editorScript": "items-list",
|
||||
"editorStyle": "items-list",
|
||||
"style": "items-list"
|
||||
}
|
||||
|
|
@ -1,4 +1,91 @@
|
|||
export default [
|
||||
/* Deprecated on Tainacan 0.18.4, due to new block.json strategy */
|
||||
{
|
||||
attributes: {
|
||||
selectedItemsObject: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
id: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'id'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
source: 'text'
|
||||
},
|
||||
thumbnail: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
default: []
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
collectionId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
selectedItemsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'grid'
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gridMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
fontSize: true
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.17.2, due to the introduction of support: fontSize */
|
||||
{
|
||||
attributes: {
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
const { __ } = wp.i18n;
|
||||
|
||||
const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
|
||||
import ItemsModal from './items-modal.js';
|
||||
|
||||
export default function({ attributes, setAttributes, className, isSelected }) {
|
||||
let {
|
||||
selectedItemsObject,
|
||||
selectedItemsHTML,
|
||||
content,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
isModalOpen,
|
||||
gridMargin
|
||||
} = attributes;
|
||||
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
<li
|
||||
key={ item.id }
|
||||
className="item-list-item"
|
||||
style={{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : ''}}>
|
||||
{ tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
:
|
||||
<Button
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
showTooltip={false}
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
}
|
||||
<a
|
||||
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
|
||||
href={ item.url }
|
||||
target="_blank"
|
||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||
<img
|
||||
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}
|
||||
alt={ item.thumbnail && item.thumbnail[0] ? item.thumbnail[0].alt : item.title }/>
|
||||
<span>{ item.title ? item.title : '' }</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
|
||||
selectedItemsHTML = [];
|
||||
|
||||
for (let i = 0; i < selectedItemsObject.length; i++)
|
||||
selectedItemsHTML.push(prepareItem(selectedItemsObject[i]));
|
||||
|
||||
setAttributes({
|
||||
content: (
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
{ selectedItemsHTML }
|
||||
</ul>
|
||||
),
|
||||
selectedItemsHTML: selectedItemsHTML
|
||||
});
|
||||
}
|
||||
|
||||
function openItemsModal() {
|
||||
isModalOpen = true;
|
||||
setAttributes( {
|
||||
isModalOpen: isModalOpen
|
||||
} );
|
||||
}
|
||||
|
||||
function removeItemOfId(itemId) {
|
||||
|
||||
let existingItemIndex = selectedItemsObject.findIndex((existingItem) => ((existingItem.id == 'item-id-' + itemId) || (existingItem.id == itemId)));
|
||||
|
||||
if (existingItemIndex >= 0)
|
||||
selectedItemsObject.splice(existingItemIndex, 1);
|
||||
|
||||
setContent();
|
||||
}
|
||||
|
||||
function updateLayout(newLayout) {
|
||||
layout = newLayout;
|
||||
|
||||
if (layout == 'grid' && showImage == false)
|
||||
showImage = true;
|
||||
|
||||
if (layout == 'list' && showName == false)
|
||||
showName = true;
|
||||
|
||||
setAttributes({
|
||||
layout: layout,
|
||||
showImage: showImage,
|
||||
showName: showName
|
||||
});
|
||||
setContent();
|
||||
}
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
}
|
||||
];
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
<img
|
||||
width="100%"
|
||||
src={ `${tainacan_blocks.base_url}/assets/images/items-list.png` } />
|
||||
</div>
|
||||
: (
|
||||
<div className={className}>
|
||||
|
||||
<div>
|
||||
<BlockControls>
|
||||
{ TainacanBlocksCompatToolbar({ controls: layoutControls }) }
|
||||
{ selectedItemsHTML.length ?
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __( 'Add more items', 'tainacan' ),
|
||||
icon: <svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>,
|
||||
onClick: openItemsModal
|
||||
})
|
||||
: null }
|
||||
</BlockControls>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __('List settings', 'tainacan') }
|
||||
initialOpen={ true }
|
||||
>
|
||||
{ layout == 'list' ?
|
||||
<ToggleControl
|
||||
label={__('Image', 'tainacan')}
|
||||
help={ showImage ? __('Toggle to show item\'s image', 'tainacan') : __('Do not show item\'s image', 'tainacan')}
|
||||
checked={ showImage }
|
||||
onChange={ ( isChecked ) => {
|
||||
showImage = isChecked;
|
||||
setAttributes({ showImage: showImage });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
{ layout == 'grid' ?
|
||||
<div>
|
||||
<ToggleControl
|
||||
label={__('Name', 'tainacan')}
|
||||
help={ showName ? __('Toggle to show item\'s title', 'tainacan') : __('Do not show item\'s title', 'tainacan')}
|
||||
checked={ showName }
|
||||
onChange={ ( isChecked ) => {
|
||||
showName = isChecked;
|
||||
setAttributes({ showName: showName });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div style={{ marginTop: '16px'}}>
|
||||
<RangeControl
|
||||
label={__('Margin between items', 'tainacan')}
|
||||
value={ gridMargin }
|
||||
onChange={ ( margin ) => {
|
||||
setAttributes( { gridMargin: margin } )
|
||||
setContent();
|
||||
}}
|
||||
min={ 0 }
|
||||
max={ 48 }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
: null }
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</div>
|
||||
|
||||
{ isSelected ?
|
||||
(
|
||||
<div>
|
||||
{ isModalOpen ?
|
||||
<ItemsModal
|
||||
existingCollectionId={ collectionId }
|
||||
onSelectCollection={ (selectedCollectionId) => {
|
||||
collectionId = selectedCollectionId;
|
||||
setAttributes({ collectionId: collectionId });
|
||||
}}
|
||||
onApplySelection={ (aSelectedItemsObject) =>{
|
||||
selectedItemsObject = selectedItemsObject.concat(aSelectedItemsObject);
|
||||
setAttributes({
|
||||
selectedItemsObject: selectedItemsObject,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ !selectedItemsHTML.length ? (
|
||||
<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 width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>
|
||||
{__('Expose items from your Tainacan collections', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openItemsModal() }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
{ selectedItemsHTML }
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const { SVG, Path } = wp.components;
|
||||
|
||||
export default (
|
||||
<SVG width="24" height="24" viewBox="0 -2 12 16">
|
||||
<Path
|
||||
fill="#298596"
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</SVG>
|
||||
);
|
||||
|
|
@ -1,369 +1,15 @@
|
|||
const { registerBlockType } = wp.blocks;
|
||||
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
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';
|
||||
|
||||
const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
|
||||
import ItemsModal from './items-modal.js';
|
||||
import DeprecatedBlocks from './items-list-deprecated.js';
|
||||
|
||||
registerBlockType('tainacan/items-list', {
|
||||
title: __('Tainacan Items List', 'tainacan'),
|
||||
icon:
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
fill="#298596"
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>,
|
||||
category: 'tainacan-blocks',
|
||||
keywords: [ __( 'Tainacan', 'tainacan' ), __( 'items', 'tainacan' ), __( 'collection', 'tainacan' ) ],
|
||||
description: __('Expose items from your Tainacan collections', 'tainacan'),
|
||||
example: {
|
||||
attributes: {
|
||||
content: 'preview'
|
||||
}
|
||||
},
|
||||
attributes: {
|
||||
selectedItemsObject: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
id: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'id'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
title: {
|
||||
type: 'string',
|
||||
source: 'text'
|
||||
},
|
||||
thumbnail: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
default: []
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
collectionId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
selectedItemsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'grid'
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gridMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
fontSize: true
|
||||
},
|
||||
edit({ attributes, setAttributes, className, isSelected }){
|
||||
let {
|
||||
selectedItemsObject,
|
||||
selectedItemsHTML,
|
||||
content,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
isModalOpen,
|
||||
gridMargin
|
||||
} = attributes;
|
||||
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
<li
|
||||
key={ item.id }
|
||||
className="item-list-item"
|
||||
style={{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : ''}}>
|
||||
{ tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
:
|
||||
<Button
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
showTooltip={false}
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
}
|
||||
<a
|
||||
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
|
||||
href={ item.url }
|
||||
target="_blank"
|
||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||
<img
|
||||
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}
|
||||
alt={ item.thumbnail && item.thumbnail[0] ? item.thumbnail[0].alt : item.title }/>
|
||||
<span>{ item.title ? item.title : '' }</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
|
||||
selectedItemsHTML = [];
|
||||
|
||||
for (let i = 0; i < selectedItemsObject.length; i++)
|
||||
selectedItemsHTML.push(prepareItem(selectedItemsObject[i]));
|
||||
|
||||
setAttributes({
|
||||
content: (
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
{ selectedItemsHTML }
|
||||
</ul>
|
||||
),
|
||||
selectedItemsHTML: selectedItemsHTML
|
||||
});
|
||||
}
|
||||
|
||||
function openItemsModal() {
|
||||
isModalOpen = true;
|
||||
setAttributes( {
|
||||
isModalOpen: isModalOpen
|
||||
} );
|
||||
}
|
||||
|
||||
function removeItemOfId(itemId) {
|
||||
|
||||
let existingItemIndex = selectedItemsObject.findIndex((existingItem) => ((existingItem.id == 'item-id-' + itemId) || (existingItem.id == itemId)));
|
||||
|
||||
if (existingItemIndex >= 0)
|
||||
selectedItemsObject.splice(existingItemIndex, 1);
|
||||
|
||||
setContent();
|
||||
}
|
||||
|
||||
function updateLayout(newLayout) {
|
||||
layout = newLayout;
|
||||
|
||||
if (layout == 'grid' && showImage == false)
|
||||
showImage = true;
|
||||
|
||||
if (layout == 'list' && showName == false)
|
||||
showName = true;
|
||||
|
||||
setAttributes({
|
||||
layout: layout,
|
||||
showImage: showImage,
|
||||
showName: showName
|
||||
});
|
||||
setContent();
|
||||
}
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
}
|
||||
];
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
<img
|
||||
width="100%"
|
||||
src={ `${tainacan_blocks.base_url}/assets/images/items-list.png` } />
|
||||
</div>
|
||||
: (
|
||||
<div className={className}>
|
||||
|
||||
<div>
|
||||
<BlockControls>
|
||||
{ TainacanBlocksCompatToolbar({ controls: layoutControls }) }
|
||||
{ selectedItemsHTML.length ?
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __( 'Add more items', 'tainacan' ),
|
||||
icon: <svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>,
|
||||
onClick: openItemsModal
|
||||
})
|
||||
: null }
|
||||
</BlockControls>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __('List settings', 'tainacan') }
|
||||
initialOpen={ true }
|
||||
>
|
||||
{ layout == 'list' ?
|
||||
<ToggleControl
|
||||
label={__('Image', 'tainacan')}
|
||||
help={ showImage ? __('Toggle to show item\'s image', 'tainacan') : __('Do not show item\'s image', 'tainacan')}
|
||||
checked={ showImage }
|
||||
onChange={ ( isChecked ) => {
|
||||
showImage = isChecked;
|
||||
setAttributes({ showImage: showImage });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
{ layout == 'grid' ?
|
||||
<div>
|
||||
<ToggleControl
|
||||
label={__('Name', 'tainacan')}
|
||||
help={ showName ? __('Toggle to show item\'s title', 'tainacan') : __('Do not show item\'s title', 'tainacan')}
|
||||
checked={ showName }
|
||||
onChange={ ( isChecked ) => {
|
||||
showName = isChecked;
|
||||
setAttributes({ showName: showName });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div style={{ marginTop: '16px'}}>
|
||||
<RangeControl
|
||||
label={__('Margin between items', 'tainacan')}
|
||||
value={ gridMargin }
|
||||
onChange={ ( margin ) => {
|
||||
setAttributes( { gridMargin: margin } )
|
||||
setContent();
|
||||
}}
|
||||
min={ 0 }
|
||||
max={ 48 }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
: null }
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</div>
|
||||
|
||||
{ isSelected ?
|
||||
(
|
||||
<div>
|
||||
{ isModalOpen ?
|
||||
<ItemsModal
|
||||
existingCollectionId={ collectionId }
|
||||
onSelectCollection={ (selectedCollectionId) => {
|
||||
collectionId = selectedCollectionId;
|
||||
setAttributes({ collectionId: collectionId });
|
||||
}}
|
||||
onApplySelection={ (aSelectedItemsObject) =>{
|
||||
selectedItemsObject = selectedItemsObject.concat(aSelectedItemsObject);
|
||||
setAttributes({
|
||||
selectedItemsObject: selectedItemsObject,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ !selectedItemsHTML.length ? (
|
||||
<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 width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
|
||||
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
|
||||
</svg>
|
||||
{__('Expose items from your Tainacan collections', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openItemsModal() }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
{ selectedItemsHTML }
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
},
|
||||
deprecated: DeprecatedBlocks
|
||||
});
|
||||
tainacanRegisterBlockType({
|
||||
metadata,
|
||||
icon,
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
});
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default class ItemsModal extends React.Component {
|
|||
collectionId: this.props.existingCollectionId,
|
||||
});
|
||||
|
||||
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
|
||||
if (this.props.existingCollectionId) {
|
||||
this.fetchCollection(this.props.existingCollectionId);
|
||||
this.setState({
|
||||
searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?iframemode=true&status=publish' });
|
||||
|
|
@ -235,7 +235,7 @@ export default class ItemsModal extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return this.state.collectionId != null && this.state.collectionId != undefined ? (
|
||||
return this.state.collectionId ? (
|
||||
// Items modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal dynamic-modal"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export default function({ attributes, className }) {
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
};
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
{
|
||||
"name": "tainacan/terms-list",
|
||||
"title": "Tainacan Terms List",
|
||||
"category": "tainacan-blocks",
|
||||
"keywords": [ "terms", "taxonomy" ],
|
||||
"description": "Expose terms from your Tainacan taxonomies",
|
||||
"textdomain": "tainacan",
|
||||
"example": {
|
||||
"attributes": {
|
||||
"content": "preview"
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"selectedTermsObject": {
|
||||
"type": "array",
|
||||
"source": "query",
|
||||
"selector": "a",
|
||||
"query": {
|
||||
"id": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"attribute": "id"
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"attribute": "href"
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"source": "text"
|
||||
},
|
||||
"header_image": {
|
||||
"source": "query",
|
||||
"selector": "img",
|
||||
"query": {
|
||||
"src": {
|
||||
"source": "attribute",
|
||||
"attribute": "src"
|
||||
},
|
||||
"alt": {
|
||||
"source": "attribute",
|
||||
"attribute": "alt"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"default": []
|
||||
},
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"query": {
|
||||
"type": "Object",
|
||||
"default": {}
|
||||
},
|
||||
"selectedTermsHTML": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"taxonomyId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"align": ["full", "wide"],
|
||||
"html": false,
|
||||
"typography": {
|
||||
"fontSize": true
|
||||
}
|
||||
},
|
||||
"editorScript": "terms-list",
|
||||
"editorStyle": "terms-list",
|
||||
"style": "terms-list"
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
export default [
|
||||
/* Deprecated on Tainacan 0.18.4, due to the new block.json strategy */
|
||||
{
|
||||
attributes: {
|
||||
selectedTermsObject: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
id: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'id'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
source: 'text'
|
||||
},
|
||||
header_image: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
default: []
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
selectedTermsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'grid'
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
taxonomyId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
fontSize: true
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
},
|
||||
},
|
||||
/* Deprecated on Tainacan 0.17.2, due to the introduction of support: fontSize */
|
||||
{
|
||||
attributes: {
|
||||
selectedTermsObject: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
id: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'id'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
source: 'text'
|
||||
},
|
||||
header_image: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
default: []
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
selectedTermsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'grid'
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
taxonomyId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
const { __ } = wp.i18n;
|
||||
|
||||
const { IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
|
||||
import TermsModal from './terms-modal.js';
|
||||
|
||||
export default function({ attributes, setAttributes, className, isSelected }){
|
||||
let {
|
||||
selectedTermsObject,
|
||||
selectedTermsHTML,
|
||||
content,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
isModalOpen,
|
||||
taxonomyId,
|
||||
} = attributes;
|
||||
|
||||
function prepareTerm(term) {
|
||||
return (
|
||||
<li
|
||||
key={ term.id }
|
||||
className="term-list-item">
|
||||
{ tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
onClick={ () => removeTermOfId(term.id) }
|
||||
icon="no-alt"
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
:
|
||||
<Button
|
||||
onClick={ () => removeTermOfId(term.id) }
|
||||
icon="no-alt"
|
||||
showTooltip={false}
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
}
|
||||
<a
|
||||
id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }
|
||||
href={ term.url }
|
||||
target="_blank"
|
||||
className={ (!showName ? 'term-without-name' : '') + ' ' + (!showImage ? 'term-without-image' : '') }>
|
||||
<img
|
||||
src={ term.header_image && term.header_image[0] && term.header_image[0].src ? term.header_image[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}
|
||||
alt={ term.header_image && term.header_image[0] ? term.header_image[0].alt : term.name }/>
|
||||
<span>{ term.name ? term.name : '' }</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
|
||||
selectedTermsHTML = [];
|
||||
|
||||
for (let i = 0; i < selectedTermsObject.length; i++)
|
||||
selectedTermsHTML.push(prepareTerm(selectedTermsObject[i]));
|
||||
|
||||
setAttributes({
|
||||
content: (
|
||||
<ul className={'terms-list terms-layout-' + layout}>{ selectedTermsHTML }</ul>
|
||||
),
|
||||
selectedTermsHTML: selectedTermsHTML
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function openTermsModal() {
|
||||
isModalOpen = true;
|
||||
setAttributes( {
|
||||
isModalOpen: isModalOpen,
|
||||
} );
|
||||
}
|
||||
|
||||
function removeTermOfId(termId) {
|
||||
|
||||
let existingTermIndex = selectedTermsObject.findIndex((existingTerm) => ((existingTerm.id == 'term-id-' + termId) || (existingTerm.id == termId)));
|
||||
|
||||
if (existingTermIndex >= 0)
|
||||
selectedTermsObject.splice(existingTermIndex, 1);
|
||||
|
||||
setContent();
|
||||
}
|
||||
|
||||
function updateLayout(newLayout) {
|
||||
layout = newLayout;
|
||||
|
||||
if (layout == 'grid' && showImage == false)
|
||||
showImage = true;
|
||||
|
||||
if (layout == 'list' && showName == false)
|
||||
showName = true;
|
||||
|
||||
setAttributes({
|
||||
layout: layout,
|
||||
showImage: showImage,
|
||||
showName: showName
|
||||
});
|
||||
setContent();
|
||||
}
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
}
|
||||
];
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
<img
|
||||
width="100%"
|
||||
src={ `${tainacan_blocks.base_url}/assets/images/terms-list.png` } />
|
||||
</div>
|
||||
: (
|
||||
<div className={className}>
|
||||
|
||||
<div>
|
||||
<BlockControls>
|
||||
{ TainacanBlocksCompatToolbar({ controls: layoutControls }) }
|
||||
{ selectedTermsHTML.length ?
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __( 'Select terms', 'tainacan' ),
|
||||
icon: <svg width="24" height="24" viewBox="0 -3 12 17">
|
||||
<path
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>,
|
||||
onClick: openTermsModal
|
||||
})
|
||||
: null }
|
||||
</BlockControls>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __('List settings', 'tainacan') }
|
||||
initialOpen={ true }
|
||||
>
|
||||
{ layout == 'list' ?
|
||||
<ToggleControl
|
||||
label={__('Image', 'tainacan')}
|
||||
help={ showImage ? __('Toggle to show term\'s image', 'tainacan') : __('Do not show term\'s image', 'tainacan')}
|
||||
checked={ showImage }
|
||||
onChange={ ( isChecked ) => {
|
||||
showImage = isChecked;
|
||||
setAttributes({ showImage: showImage });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
{ layout == 'grid' ?
|
||||
<ToggleControl
|
||||
label={__('Name', 'tainacan')}
|
||||
help={ showName ? __('Toggle to show term\'s name', 'tainacan') : __('Do not show term\'s name', 'tainacan')}
|
||||
checked={ showName }
|
||||
onChange={ ( isChecked ) => {
|
||||
showName = isChecked;
|
||||
setAttributes({ showName: showName });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</div>
|
||||
|
||||
{ isSelected ?
|
||||
(
|
||||
<div>
|
||||
{ isModalOpen ?
|
||||
<TermsModal
|
||||
replaceTermId={ true }
|
||||
existingTaxonomyId={ taxonomyId }
|
||||
selectedTermsObject={ selectedTermsObject }
|
||||
onSelectTaxonomy={ (selectedTaxonomyId) => {
|
||||
taxonomyId = selectedTaxonomyId;
|
||||
setAttributes({ taxonomyId: taxonomyId });
|
||||
}}
|
||||
onApplySelection={ (aSelectedTermsObject) =>{
|
||||
selectedTermsObject = aSelectedTermsObject
|
||||
setAttributes({
|
||||
selectedTermsObject: selectedTermsObject,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ !selectedTermsHTML.length ? (
|
||||
<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 width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>
|
||||
{__('Expose terms from your Tainacan taxonomies', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openTermsModal() }>
|
||||
{__('Select terms', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul className={'terms-list-edit terms-layout-' + layout}>{ selectedTermsHTML }</ul>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const { SVG, Path } = wp.components;
|
||||
|
||||
export default (
|
||||
<SVG width="24" height="24" viewBox="0 -2 12 16">
|
||||
<Path
|
||||
fill="#298596"
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</SVG>
|
||||
);
|
||||
|
|
@ -1,341 +1,15 @@
|
|||
const { registerBlockType } = wp.blocks;
|
||||
import tainacanRegisterBlockType from '../../js/tainacan-blocks-compat-register.js';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
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';
|
||||
|
||||
const { IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
|
||||
import TermsModal from './terms-modal.js';
|
||||
import DeprecatedBlocks from './terms-list-deprecated.js';
|
||||
|
||||
registerBlockType('tainacan/terms-list', {
|
||||
title: __('Tainacan Terms List', 'tainacan'),
|
||||
icon:
|
||||
<svg width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
fill="#298596"
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>,
|
||||
category: 'tainacan-blocks',
|
||||
keywords: [ __( 'Tainacan', 'tainacan' ), __( 'terms', 'tainacan' ), __( 'taxonomy', 'tainacan' ) ],
|
||||
description: __('Expose terms from your Tainacan taxonomies', 'tainacan'),
|
||||
example: {
|
||||
attributes: {
|
||||
content: 'preview'
|
||||
}
|
||||
},
|
||||
attributes: {
|
||||
selectedTermsObject: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
id: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'id'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
source: 'text'
|
||||
},
|
||||
header_image: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
default: []
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
selectedTermsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'grid'
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
taxonomyId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
fontSize: true
|
||||
},
|
||||
edit({ attributes, setAttributes, className, isSelected }){
|
||||
let {
|
||||
selectedTermsObject,
|
||||
selectedTermsHTML,
|
||||
content,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
isModalOpen,
|
||||
taxonomyId,
|
||||
} = attributes;
|
||||
|
||||
function prepareTerm(term) {
|
||||
return (
|
||||
<li
|
||||
key={ term.id }
|
||||
className="term-list-item">
|
||||
{ tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
onClick={ () => removeTermOfId(term.id) }
|
||||
icon="no-alt"
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
:
|
||||
<Button
|
||||
onClick={ () => removeTermOfId(term.id) }
|
||||
icon="no-alt"
|
||||
showTooltip={false}
|
||||
label={__('Remove', 'tainacan')}/>
|
||||
}
|
||||
<a
|
||||
id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }
|
||||
href={ term.url }
|
||||
target="_blank"
|
||||
className={ (!showName ? 'term-without-name' : '') + ' ' + (!showImage ? 'term-without-image' : '') }>
|
||||
<img
|
||||
src={ term.header_image && term.header_image[0] && term.header_image[0].src ? term.header_image[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}
|
||||
alt={ term.header_image && term.header_image[0] ? term.header_image[0].alt : term.name }/>
|
||||
<span>{ term.name ? term.name : '' }</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function setContent(){
|
||||
|
||||
selectedTermsHTML = [];
|
||||
|
||||
for (let i = 0; i < selectedTermsObject.length; i++)
|
||||
selectedTermsHTML.push(prepareTerm(selectedTermsObject[i]));
|
||||
|
||||
setAttributes({
|
||||
content: (
|
||||
<ul className={'terms-list terms-layout-' + layout}>{ selectedTermsHTML }</ul>
|
||||
),
|
||||
selectedTermsHTML: selectedTermsHTML
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function openTermsModal() {
|
||||
isModalOpen = true;
|
||||
setAttributes( {
|
||||
isModalOpen: isModalOpen,
|
||||
} );
|
||||
}
|
||||
|
||||
function removeTermOfId(termId) {
|
||||
|
||||
let existingTermIndex = selectedTermsObject.findIndex((existingTerm) => ((existingTerm.id == 'term-id-' + termId) || (existingTerm.id == termId)));
|
||||
|
||||
if (existingTermIndex >= 0)
|
||||
selectedTermsObject.splice(existingTermIndex, 1);
|
||||
|
||||
setContent();
|
||||
}
|
||||
|
||||
function updateLayout(newLayout) {
|
||||
layout = newLayout;
|
||||
|
||||
if (layout == 'grid' && showImage == false)
|
||||
showImage = true;
|
||||
|
||||
if (layout == 'list' && showName == false)
|
||||
showName = true;
|
||||
|
||||
setAttributes({
|
||||
layout: layout,
|
||||
showImage: showImage,
|
||||
showName: showName
|
||||
});
|
||||
setContent();
|
||||
}
|
||||
|
||||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
}
|
||||
];
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
<img
|
||||
width="100%"
|
||||
src={ `${tainacan_blocks.base_url}/assets/images/terms-list.png` } />
|
||||
</div>
|
||||
: (
|
||||
<div className={className}>
|
||||
|
||||
<div>
|
||||
<BlockControls>
|
||||
{ TainacanBlocksCompatToolbar({ controls: layoutControls }) }
|
||||
{ selectedTermsHTML.length ?
|
||||
TainacanBlocksCompatToolbar({
|
||||
label: __( 'Select terms', 'tainacan' ),
|
||||
icon: <svg width="24" height="24" viewBox="0 -3 12 17">
|
||||
<path
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>,
|
||||
onClick: openTermsModal
|
||||
})
|
||||
: null }
|
||||
</BlockControls>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InspectorControls>
|
||||
<PanelBody
|
||||
title={ __('List settings', 'tainacan') }
|
||||
initialOpen={ true }
|
||||
>
|
||||
{ layout == 'list' ?
|
||||
<ToggleControl
|
||||
label={__('Image', 'tainacan')}
|
||||
help={ showImage ? __('Toggle to show term\'s image', 'tainacan') : __('Do not show term\'s image', 'tainacan')}
|
||||
checked={ showImage }
|
||||
onChange={ ( isChecked ) => {
|
||||
showImage = isChecked;
|
||||
setAttributes({ showImage: showImage });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
{ layout == 'grid' ?
|
||||
<ToggleControl
|
||||
label={__('Name', 'tainacan')}
|
||||
help={ showName ? __('Toggle to show term\'s name', 'tainacan') : __('Do not show term\'s name', 'tainacan')}
|
||||
checked={ showName }
|
||||
onChange={ ( isChecked ) => {
|
||||
showName = isChecked;
|
||||
setAttributes({ showName: showName });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</div>
|
||||
|
||||
{ isSelected ?
|
||||
(
|
||||
<div>
|
||||
{ isModalOpen ?
|
||||
<TermsModal
|
||||
replaceTermId={ true }
|
||||
existingTaxonomyId={ taxonomyId }
|
||||
selectedTermsObject={ selectedTermsObject }
|
||||
onSelectTaxonomy={ (selectedTaxonomyId) => {
|
||||
taxonomyId = selectedTaxonomyId;
|
||||
setAttributes({ taxonomyId: taxonomyId });
|
||||
}}
|
||||
onApplySelection={ (aSelectedTermsObject) =>{
|
||||
selectedTermsObject = aSelectedTermsObject
|
||||
setAttributes({
|
||||
selectedTermsObject: selectedTermsObject,
|
||||
isModalOpen: false
|
||||
});
|
||||
setContent();
|
||||
}}
|
||||
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
{ !selectedTermsHTML.length ? (
|
||||
<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 width="24" height="24" viewBox="0 -2 12 16">
|
||||
<path
|
||||
d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>
|
||||
</svg>
|
||||
{__('Expose terms from your Tainacan taxonomies', 'tainacan')}
|
||||
</p>
|
||||
<Button
|
||||
isPrimary
|
||||
type="button"
|
||||
onClick={ () => openTermsModal() }>
|
||||
{__('Select terms', 'tainacan')}
|
||||
</Button>
|
||||
</Placeholder>
|
||||
) : null
|
||||
}
|
||||
|
||||
<ul className={'terms-list-edit terms-layout-' + layout}>{ selectedTermsHTML }</ul>
|
||||
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
},
|
||||
deprecated: DeprecatedBlocks
|
||||
});
|
||||
tainacanRegisterBlockType({
|
||||
metadata,
|
||||
icon,
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export default function({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
};
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
export default [
|
||||
/* Deprecated on Tainacan 0.17.2, due to the introduction of support: fontSize */
|
||||
{
|
||||
attributes: {
|
||||
selectedTermsObject: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
id: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'id'
|
||||
},
|
||||
url: {
|
||||
type: 'string',
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
source: 'text'
|
||||
},
|
||||
header_image: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
default: []
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
query: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
selectedTermsHTML: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
showImage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showName: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'grid'
|
||||
},
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
taxonomyId: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
},
|
||||
save({ attributes, className }){
|
||||
const { content } = attributes;
|
||||
return <div className={className}>{ content }</div>
|
||||
}
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue