Experiments with apiversion 2 of gutenberg blocks;
This commit is contained in:
mateuswetah
parent
383b8f9262
commit
14a03dd608
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "tainacan/facets-list",
|
||||
"title": "Tainacan Facets List",
|
||||
"apiVersion": 2,
|
||||
"category": "tainacan-blocks",
|
||||
"keywords": [ "facets", "search", "terms" ],
|
||||
"description": "List facets from a Tainacan Collection or Repository",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export default [
|
||||
/* Deprecated on Tainacan 0.18.5 due to itemsCountStyle */
|
||||
/* Deprecated on Tainacan 0.18.6 due to itemsCountStyle */
|
||||
{
|
||||
"attributes": {
|
||||
"content": {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
const { __ } = wp.i18n;
|
||||
|
||||
const { BaseControl, RangeControl, Spinner, SelectControl, Button, ToggleControl, Tooltip, Placeholder, PanelBody } = wp.components;
|
||||
const { BaseControl, RangeControl, Spinner, SelectControl, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
import MetadataModal from './metadata-modal.js';
|
||||
import ParentTermModal from './parent-term-modal.js';
|
||||
|
|
@ -17,7 +17,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
facetsObject,
|
||||
content,
|
||||
collectionId,
|
||||
collectionSlug,
|
||||
collectionSlug,
|
||||
showImage,
|
||||
nameInsideImage,
|
||||
showItemsCount,
|
||||
|
|
@ -43,6 +43,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
itemsCountStyle
|
||||
} = attributes;
|
||||
|
||||
// Gets blocks props from hook
|
||||
const blockProps = useBlockProps();
|
||||
|
||||
// Obtains block's client id to render it on save function
|
||||
setAttributes({ blockId: clientId });
|
||||
|
||||
|
|
@ -442,7 +445,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
src={ `${tainacan_blocks.base_url}/assets/images/facets-list.png` } />
|
||||
</div>
|
||||
: (
|
||||
<div className={className}>
|
||||
<div { ...blockProps }>
|
||||
|
||||
<div>
|
||||
<BlockControls>
|
||||
|
|
@ -859,26 +862,24 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
}
|
||||
|
||||
{ showLoadMore && facets.length > 0 && !isLoading ?
|
||||
<Tooltip text={__('If necessary, the show more button will be available on post or page.', 'tainacan')}>
|
||||
<button
|
||||
class="show-more-button"
|
||||
disabled
|
||||
label={__('Show more', 'tainacan')}>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="4 5 24 24">
|
||||
<path d="M 7.41,8.295 6,9.705 l 6,6 6,-6 -1.41,-1.41 -4.59,4.58 z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<button
|
||||
class="show-more-button"
|
||||
disabled
|
||||
label={__('Show more', 'tainacan')}>
|
||||
<span class="icon">
|
||||
<i>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="4 5 24 24">
|
||||
<path d="M 7.41,8.295 6,9.705 l 6,6 6,-6 -1.41,-1.41 -4.59,4.58 z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default function({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
|
|
@ -21,7 +23,11 @@ export default function({ attributes, className }) {
|
|||
appendChildTerms,
|
||||
itemsCountStyle
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = useBlockProps.save();
|
||||
return <div
|
||||
{...blockProps}
|
||||
data-module="facets-list"
|
||||
className={ className }
|
||||
metadatum-id={ metadatumId }
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default (element) => {
|
|||
tainacanBaseUrl: '',
|
||||
tainacanSiteUrl: '',
|
||||
className: '',
|
||||
blockId
|
||||
style: ''
|
||||
},
|
||||
render(h){
|
||||
return h(FacetsListTheme, {
|
||||
|
|
@ -75,7 +75,7 @@ export default (element) => {
|
|||
tainacanBaseUrl: this.tainacanBaseUrl,
|
||||
tainacanSiteUrl: this.tainacanSiteUrl,
|
||||
className: this.className,
|
||||
blockId: this.blockId
|
||||
style: this.style
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -102,7 +102,8 @@ export default (element) => {
|
|||
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
|
||||
this.tainacanSiteUrl = this.$el.attributes['tainacan-site-url'] != undefined ? this.$el.attributes['tainacan-site-url'].value : undefined;
|
||||
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
|
||||
this.blockId = this.$el.attributes.id != undefined ? this.$el.attributes.id.value : undefined;
|
||||
this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
|
||||
|
||||
},
|
||||
methods: {
|
||||
__(text, domain) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
:id="blockId"
|
||||
:style="style"
|
||||
:class="className + ' has-mounted'">
|
||||
<div
|
||||
v-if="showSearchBar"
|
||||
|
|
@ -194,7 +194,7 @@ export default {
|
|||
tainacanBaseUrl: String,
|
||||
tainacanSiteUrl: String,
|
||||
className: String,
|
||||
blockId: String
|
||||
style: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue