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

2021-08-20 16:19:35 -03:00 · 2021-08-20 16:19:35 -03:00 · cdd54083d7
parent cf8c4b1598
commit cdd54083d7
14 changed files with 67 additions and 26 deletions
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json
+++ b/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",
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js
+++ b/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 });
    
@ -344,13 +347,13 @@ export default function({ attributes, setAttributes, className, isSelected, clie
    ];

    return content == 'preview' ? 
-            <div className={className}>
-                <img
-                        width="100%"
-                        src={ `${tainacan_blocks.base_url}/assets/images/dynamic-items-list.png` } />
-            </div>
-        : (
        <div className={className}>
+            <img
+                    width="100%"
+                    src={ `${tainacan_blocks.base_url}/assets/images/dynamic-items-list.png` } />
+        </div>
+        : (
+        <div { ...blockProps }>

            <div>
                <BlockControls>
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js
+++ b/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 }
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js
+++ b/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) {
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue
+++ b/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 {
--- a/src/views/gutenberg-blocks/tainacan-blocks/items-list/block.json
+++ b/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",
--- a/src/views/gutenberg-blocks/tainacan-blocks/items-list/edit.js
+++ b/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 
@ -125,13 +128,13 @@ export default function({ attributes, setAttributes, className, isSelected }) {
    ];

    return content == 'preview' ? 
-            <div className={className}>
-                <img
-                        width="100%"
-                        src={ `${tainacan_blocks.base_url}/assets/images/items-list.png` } />
-            </div>
-        :  (
        <div className={className}>
+            <img
+                    width="100%"
+                    src={ `${tainacan_blocks.base_url}/assets/images/items-list.png` } />
+        </div>
+        :  (
+        <div { ...blockProps }>

            <div>
                <BlockControls>
--- a/src/views/gutenberg-blocks/tainacan-blocks/items-list/save.js
+++ b/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>
 };
--- a/src/views/gutenberg-blocks/tainacan-blocks/search-bar/block.json
+++ b/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",
--- a/src/views/gutenberg-blocks/tainacan-blocks/search-bar/edit.js
+++ b/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>
--- a/src/views/gutenberg-blocks/tainacan-blocks/search-bar/save.js
+++ b/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>
 }
--- a/src/views/gutenberg-blocks/tainacan-blocks/terms-list/block.json
+++ b/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",
--- a/src/views/gutenberg-blocks/tainacan-blocks/terms-list/edit.js
+++ b/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>
--- a/src/views/gutenberg-blocks/tainacan-blocks/terms-list/save.js
+++ b/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>
 };