Merge pull request #630 from tainacan/feature/628
Block Transormations part 1 - #628
This commit is contained in:
commit
b27c19576e
|
@ -231,6 +231,7 @@
|
|||
grid-gap: 24px;
|
||||
gap: 24px;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
list-style-type: none; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7) {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -34,6 +34,7 @@
|
|||
grid-template-columns: repeat(auto-fill, 220px);
|
||||
grid-gap: 0px;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
list-style-type: none; }
|
||||
.wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item,
|
||||
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": ["../../views/gutenberg-blocks/blocks/items-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
|
||||
"names": [],
|
||||
"file": "tainacan-gutenberg-block-items-list.css"
|
||||
|
|
|
@ -5,11 +5,13 @@ import icon from './icon.js';
|
|||
import edit from './edit.js';
|
||||
import save from './save.js';
|
||||
import deprecated from './deprecated.js';
|
||||
import transforms from './transforms.js';
|
||||
|
||||
tainacanRegisterBlockType({
|
||||
metadata,
|
||||
icon,
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
deprecated,
|
||||
transforms
|
||||
});
|
||||
|
|
|
@ -0,0 +1,73 @@
|
|||
const { createBlock } = wp.blocks;
|
||||
|
||||
export default {
|
||||
to: [
|
||||
{
|
||||
type: 'block',
|
||||
blocks: [ 'tainacan/dynamic-items-list' ],
|
||||
transform: ( {
|
||||
items,
|
||||
collectionId,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
maxItemsPerScreen,
|
||||
spaceBetweenItems,
|
||||
selectedItems,
|
||||
loadStrategy,
|
||||
hideTitle,
|
||||
cropImagesToSquare,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collection,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
align,
|
||||
textColor,
|
||||
fontSize
|
||||
} ) => {
|
||||
return createBlock(
|
||||
'tainacan/dynamic-items-list',
|
||||
{
|
||||
items: items,
|
||||
content: [ { type: true } ],
|
||||
collection: collection,
|
||||
collectionId: collectionId,
|
||||
showImage: true,
|
||||
showName: !hideTitle,
|
||||
layout: 'grid',
|
||||
isModalOpen: false,
|
||||
gridMargin: spaceBetweenItems,
|
||||
searchURL: searchURL,
|
||||
itemsRequestSource: '',
|
||||
maxItemsNumber: maxItemsNumber,
|
||||
order: '',
|
||||
searchString: '',
|
||||
selectedItems: selectedItems,
|
||||
isLoading: false,
|
||||
loadStrategy: loadStrategy,
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: showCollectionHeader,
|
||||
showCollectionLabel: showCollectionLabel,
|
||||
isLoadingCollection: false,
|
||||
collectionBackgroundColor: collectionBackgroundColor,
|
||||
collectionTextColor: collectionTextColor,
|
||||
mosaicHeight: 280,
|
||||
mosaicGridColumns: maxItemsPerScreen,
|
||||
mosaicGridRows: 3,
|
||||
mosaicItemFocalPoint: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
},
|
||||
sampleBackgroundImage: '',
|
||||
mosaicDensity: 6,
|
||||
maxColumnsCount: 4,
|
||||
cropImagesToSquare: cropImagesToSquare,
|
||||
align: align,
|
||||
textColor: textColor,
|
||||
fontSize: fontSize
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
|
@ -1,6 +1,214 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated to fix the selection strategy on 0.18.7 */
|
||||
{
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "Array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"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
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "Number",
|
||||
"value": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "Object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "Number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "Number",
|
||||
"default": 4
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"align": ["full", "wide"],
|
||||
"html": false,
|
||||
"typography": {
|
||||
"fontSize": true
|
||||
},
|
||||
"color": {
|
||||
"text": true,
|
||||
"background": false,
|
||||
"gradients": false,
|
||||
"link": true
|
||||
}
|
||||
},
|
||||
save: function({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
layout={ layout }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated when new selection strategy was added */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
@ -490,7 +490,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
isActive: layout === 'mosaic',
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
<img
|
||||
|
|
|
@ -5,11 +5,13 @@ import icon from './icon.js';
|
|||
import edit from './edit.js';
|
||||
import save from './save.js';
|
||||
import deprecated from './deprecated.js';
|
||||
import transforms from './transforms.js';
|
||||
|
||||
tainacanRegisterBlockType({
|
||||
metadata,
|
||||
icon,
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
deprecated,
|
||||
transforms
|
||||
});
|
||||
|
|
|
@ -4,7 +4,9 @@ export default function({ attributes, className }) {
|
|||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
collectionId,
|
||||
loadStrategy,
|
||||
selectedItems,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
|
@ -25,13 +27,14 @@ export default function({ attributes, className }) {
|
|||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
|
@ -40,6 +43,7 @@ export default function({ attributes, className }) {
|
|||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
|
|
|
@ -281,6 +281,7 @@
|
|||
grid-gap: 24px;
|
||||
gap: 24px;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
list-style-type: none;
|
||||
|
||||
&:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7) {
|
||||
|
|
|
@ -131,7 +131,7 @@ export default (element) => {
|
|||
}
|
||||
|
||||
// This is rendered on the theme side.
|
||||
renderTainacanDynamicItemsBlocks()
|
||||
renderTainacanDynamicItemsBlocks();
|
||||
|
||||
// Also if a theme or plugin requested a reset...
|
||||
document.addEventListener("TainacanReloadDynamicItemsBlock", () => {
|
||||
|
|
|
@ -326,6 +326,7 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.tainacanAxios = axios.create({ baseURL: this.tainacanApiRoot });
|
||||
if (tainacan_blocks && tainacan_blocks.nonce)
|
||||
this.tainacanAxios.defaults.headers.common['X-WP-Nonce'] = tainacan_blocks.nonce;
|
||||
|
@ -368,8 +369,11 @@ export default {
|
|||
this.totalItems = this.items.length;
|
||||
|
||||
} else if (this.loadStrategy == 'selection') {
|
||||
let endpoint = '/collection/' + this.collectionId + '/items?' + qs.stringify({ postin: this.selectedItems, perpage: this.selectedItems.length }) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
this.maxItemsNumber = this.selectedItems.length;
|
||||
|
||||
let endpoint = '/collection/' + this.collectionId + '/items?' + qs.stringify({ postin: this.selectedItems, perpage: this.maxItemsNumber }) + '&fetch_only=title,url,thumbnail';
|
||||
|
||||
this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
|
||||
.then(response => {
|
||||
|
||||
|
|
|
@ -0,0 +1,66 @@
|
|||
const { createBlock } = wp.blocks;
|
||||
|
||||
export default {
|
||||
to: [
|
||||
{
|
||||
type: 'block',
|
||||
blocks: [ 'tainacan/carousel-items-list' ],
|
||||
transform: ( {
|
||||
items,
|
||||
collectionId,
|
||||
collection,
|
||||
showName,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
selectedItems,
|
||||
loadStrategy,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare,
|
||||
align,
|
||||
textColor,
|
||||
fontSize
|
||||
} ) => {
|
||||
return createBlock(
|
||||
'tainacan/carousel-items-list',
|
||||
{
|
||||
items: items,
|
||||
content: [ { type: true } ],
|
||||
collection: collection,
|
||||
collectionId: collectionId,
|
||||
hideTitle: !showName,
|
||||
isModalOpen: false,
|
||||
spaceBetweenItems: gridMargin + 16,
|
||||
searchURL: searchURL,
|
||||
itemsRequestSource: '',
|
||||
maxItemsNumber: maxItemsNumber,
|
||||
maxItemsPerScreen: maxColumnsCount,
|
||||
selectedItems: selectedItems,
|
||||
isLoading: false,
|
||||
loadStrategy: loadStrategy,
|
||||
arrowsPosition : 'around',
|
||||
spaceAroundCarousel: 50,
|
||||
largeArrows: false,
|
||||
arrowsStyle : 'type-1',
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: 3,
|
||||
loopSlides: false,
|
||||
showCollectionHeader: showCollectionHeader,
|
||||
showCollectionLabel: showCollectionLabel,
|
||||
isLoadingCollection: false,
|
||||
collectionBackgroundColor: collectionBackgroundColor,
|
||||
collectionTextColor: collectionTextColor,
|
||||
cropImagesToSquare: cropImagesToSquare,
|
||||
align: align,
|
||||
textColor: textColor,
|
||||
fontSize: fontSize
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
|
@ -97,7 +97,8 @@
|
|||
"background": false,
|
||||
"gradients": false,
|
||||
"link": true
|
||||
}
|
||||
},
|
||||
"inserter": false
|
||||
},
|
||||
"editorScript": "items-list",
|
||||
"editorStyle": "items-list"
|
||||
|
|
|
@ -5,11 +5,13 @@ import icon from './icon.js';
|
|||
import edit from './edit.js';
|
||||
import save from './save.js';
|
||||
import deprecated from './deprecated.js';
|
||||
import transforms from './transforms.js';
|
||||
|
||||
tainacanRegisterBlockType({
|
||||
metadata,
|
||||
icon,
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
deprecated,
|
||||
transforms
|
||||
});
|
||||
|
|
|
@ -44,6 +44,7 @@
|
|||
grid-template-columns: repeat(auto-fill, 220px);
|
||||
grid-gap: 0px;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
list-style-type: none;
|
||||
|
||||
li.item-list-item {
|
||||
|
|
|
@ -0,0 +1,117 @@
|
|||
const { createBlock } = wp.blocks;
|
||||
|
||||
export default {
|
||||
to: [
|
||||
{
|
||||
type: 'block',
|
||||
blocks: [ 'tainacan/dynamic-items-list' ],
|
||||
transform: ( {
|
||||
selectedItemsObject,
|
||||
selectedItemsHTML,
|
||||
content,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
align,
|
||||
textColor,
|
||||
fontSize
|
||||
} ) => {
|
||||
return createBlock(
|
||||
'tainacan/dynamic-items-list',
|
||||
{
|
||||
items: selectedItemsHTML,
|
||||
content: content,
|
||||
collection: {},
|
||||
collectionId: collectionId,
|
||||
showImage: showImage,
|
||||
showName: showName,
|
||||
layout: layout,
|
||||
isModalOpen: false,
|
||||
gridMargin: gridMargin,
|
||||
searchURL: '',
|
||||
itemsRequestSource: '',
|
||||
maxItemsNumber: 12,
|
||||
order: '',
|
||||
searchString: '',
|
||||
selectedItems: selectedItemsObject.map((anItemObject) => anItemObject.id.split('item-id-')[1]),
|
||||
isLoading: false,
|
||||
loadStrategy: 'selection',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
showCollectionLabel: true,
|
||||
isLoadingCollection: false,
|
||||
collectionBackgroundColor: '#454647',
|
||||
collectionTextColor: '#ffffff',
|
||||
mosaicHeight: 280,
|
||||
mosaicGridColumns: 3,
|
||||
mosaicGridRows: 3,
|
||||
mosaicItemFocalPoint: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
},
|
||||
sampleBackgroundImage: '',
|
||||
mosaicDensity: 6,
|
||||
maxColumnsCount: 4,
|
||||
cropImagesToSquare: true,
|
||||
align: align,
|
||||
textColor: textColor,
|
||||
fontSize: fontSize
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'block',
|
||||
blocks: [ 'tainacan/carousel-items-list' ],
|
||||
transform: ( {
|
||||
selectedItemsObject,
|
||||
selectedItemsHTML,
|
||||
collectionId,
|
||||
showName,
|
||||
gridMargin,
|
||||
align,
|
||||
textColor,
|
||||
fontSize
|
||||
} ) => {
|
||||
return createBlock(
|
||||
'tainacan/carousel-items-list',
|
||||
{
|
||||
items: selectedItemsHTML,
|
||||
content: <div></div>,
|
||||
collection: {},
|
||||
collectionId: collectionId,
|
||||
hideTitle: !showName,
|
||||
isModalOpen: false,
|
||||
gridMargin: gridMargin,
|
||||
searchURL: '',
|
||||
itemsRequestSource: '',
|
||||
maxItemsNumber: 12,
|
||||
maxItemsPerScreen: 4,
|
||||
selectedItems: selectedItemsObject.map((anItemObject) => anItemObject.id.split('item-id-')[1]),
|
||||
isLoading: false,
|
||||
loadStrategy: 'selection',
|
||||
arrowsPosition : 'around',
|
||||
spaceBetweenItems: 32,
|
||||
spaceAroundCarousel: 50,
|
||||
largeArrows: false,
|
||||
arrowsStyle : 'type-1',
|
||||
autoPlay: false,
|
||||
autoPlaySpeed: 3,
|
||||
loopSlides: false,
|
||||
showCollectionHeader: false,
|
||||
showCollectionLabel: true,
|
||||
isLoadingCollection: false,
|
||||
collectionBackgroundColor: '#454647',
|
||||
collectionTextColor: '#ffffff',
|
||||
cropImagesToSquare: true,
|
||||
align: align,
|
||||
textColor: textColor,
|
||||
fontSize: fontSize
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
|
@ -21,7 +21,7 @@ function tainacanBlocksLocalizeMetadata(metadata) {
|
|||
}
|
||||
|
||||
// Register the block type according to WP version
|
||||
export default function({ metadata, icon, edit, save, deprecated }) {
|
||||
export default function({ metadata, icon, edit, save, deprecated, transforms }) {
|
||||
|
||||
const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version;
|
||||
if (currentWPVersion >= '5.8-RC') {
|
||||
|
@ -34,7 +34,8 @@ export default function({ metadata, icon, edit, save, deprecated }) {
|
|||
},
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
deprecated,
|
||||
transforms
|
||||
});
|
||||
|
||||
} else {
|
||||
|
@ -48,7 +49,8 @@ export default function({ metadata, icon, edit, save, deprecated }) {
|
|||
},
|
||||
edit,
|
||||
save,
|
||||
deprecated
|
||||
deprecated,
|
||||
transforms
|
||||
});
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue