Adds new block api version to terms, items and search bar blocks.

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/dynamic-items-list",
     "title": "Tainacan Collection's Items List",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "items", "search", "collection" ],
     "description": "Dynamically list items from a Tainacan items search",

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js

@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
 
 const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, 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 DynamicItemsModal from './dynamic-items-modal.js';
 import tainacan from '../../js/axios.js';
@@ -44,6 +44,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         cropImagesToSquare
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
     
@@ -350,7 +353,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     src={ `${tainacan_blocks.base_url}/assets/images/dynamic-items-list.png` } />
         </div>
         : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             <div>
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js

@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }) {
     const {
         content, 
@@ -24,10 +26,12 @@ export default function({ attributes, className }) {
         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 }
-                className={ className }
                 collection-id={ collectionId }
                 show-image={ '' + showImage }
                 show-name={ '' + showName }

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js

@@ -49,7 +49,8 @@ export default (element) => {
                         collectionTextColor: '#ffffff',
                         tainacanApiRoot: '',
                         tainacanBaseUrl: '',
-                        className: ''
+                        className: '',
+                        style: ''
                     },
                     render(h){ 
                         return h(DynamicItemsListTheme, {
@@ -77,7 +78,8 @@ export default (element) => {
                                 collectionTextColor: this.collectionTextColor,
                                 tainacanApiRoot: this.tainacanApiRoot,
                                 tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className    
+                                className: this.className,
+                                style: this.style    
                             }
                         });
                     },
@@ -106,6 +108,7 @@ export default (element) => {
                         this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
                         this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
                         this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+                        this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
                     },
                     methods: {
                         __(text, domain) {

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="className + ' has-mounted'">
+    <div 
+            :style="style"
+            :class="className + ' has-mounted'">
         <div v-if="showCollectionHeader">
             <div
                     v-if="isLoadingCollection"
@@ -305,7 +307,8 @@ export default {
         collectionTextColor: String,
         tainacanApiRoot: String,
         tainacanBaseUrl: String,
-        className: String
+        className: String,
+        style: String
     },    
     data() {
         return {

src/views/gutenberg-blocks/tainacan-blocks/items-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/items-list",
     "title": "Tainacan Items List",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "items", "collection" ],
     "description": "Expose items from your Tainacan collections",

src/views/gutenberg-blocks/tainacan-blocks/items-list/edit.js

@@ -2,7 +2,7 @@ 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 );
+const { InspectorControls, BlockControls, useBlockProps } = (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';
@@ -20,6 +20,9 @@ export default function({ attributes, setAttributes, className, isSelected }) {
         gridMargin
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     function prepareItem(item) {
         return (
             <li 
@@ -131,7 +134,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
                     src={ `${tainacan_blocks.base_url}/assets/images/items-list.png` } />
         </div>
         :  (
-        <div className={className}>
+        <div { ...blockProps }>
 
             <div>
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/items-list/save.js

@@ -1,4 +1,9 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }) {
     const { content } = attributes;
-    return <div data-module="items-list" className={className}>{ content }</div>
+    
+    // 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="items-list">{ content }</div>
 };

src/views/gutenberg-blocks/tainacan-blocks/search-bar/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/search-bar",
     "title": "Tainacan Search Bar",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "items", "search", "bar" ],
     "description": "Set up a custom search bar to redirect to an item's list",

src/views/gutenberg-blocks/tainacan-blocks/search-bar/edit.js

@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
 
 const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, 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 TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import SearchBarModal from './search-bar-modal.js';
@@ -27,6 +27,9 @@ export default function({ attributes, setAttributes, className, isSelected }) {
         collectionName
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     function setContent(){
 
         setAttributes({
@@ -195,7 +198,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
                     src={ `${tainacan_blocks.base_url}/assets/images/search-bar.png` } />
         </div>
     : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             <div>
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/search-bar/save.js

@@ -1,4 +1,9 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }) {
     const { content } = attributes;
-    return <div data-module="search-bar" className={ className }>{ content }</div>
+    
+    // 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="search-bar" className={ className }>{ content }</div>
 }

src/views/gutenberg-blocks/tainacan-blocks/terms-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/terms-list",
     "title": "Tainacan Terms List",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "terms", "taxonomy" ],
     "description": "Expose terms from your Tainacan taxonomies",

src/views/gutenberg-blocks/tainacan-blocks/terms-list/edit.js

@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
 
 const { IconButton, 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 TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import TermsModal from './terms-modal.js';
@@ -19,6 +19,9 @@ export default function({ attributes, setAttributes, className, isSelected }){
         taxonomyId,
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     function prepareTerm(term) {
         return (
             <li 
@@ -126,7 +129,7 @@ export default function({ attributes, setAttributes, className, isSelected }){
                     src={ `${tainacan_blocks.base_url}/assets/images/terms-list.png` } />
         </div>
     : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             <div>
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/terms-list/save.js

@@ -1,4 +1,9 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }){
     const { content } = attributes;
-    return <div data-module="terms-list" className={className}>{ content }</div>
+    
+    // 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="terms-list">{ content }</div>
 };