diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css b/src/assets/css/tainacan-gutenberg-blocks-style.css index 96ea96e22..ff60a144b 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css @@ -454,7 +454,7 @@ flex-shrink: 0; position: relative; margin-left: -155px; - left: 84px; + left: 82px; background-color: #dbdbdb; } .wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image { width: auto; diff --git a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js index 62b08394d..37fd29b8b 100644 --- a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js +++ b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js @@ -17,6 +17,8 @@ document.addEventListener("DOMContentLoaded", () => { order: 'asc', showSearchBar: false, showCollectionHeader: false, + collectionBackgroundColor: '#454647', + collectionTextColor: '#ffffff', tainacanApiRoot: '', tainacanBaseUrl: '', className: '' @@ -34,6 +36,8 @@ document.addEventListener("DOMContentLoaded", () => { order: this.order, showSearchBar: this.showSearchBar, showCollectionHeader: this.showCollectionHeader, + collectionBackgroundColor: this.collectionBackgroundColor, + collectionTextColor: this.collectionTextColor, tainacanApiRoot: this.tainacanApiRoot, tainacanBaseUrl: this.tainacanBaseUrl, className: this.className @@ -52,6 +56,8 @@ document.addEventListener("DOMContentLoaded", () => { this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined; this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false; this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false; + this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined; + 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; }, diff --git a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue index 2a2b91dc6..8e825f19e 100644 --- a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue +++ b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue @@ -12,7 +12,8 @@ :href="collection.url ? collection.url : ''" class="dynamic-items-collection-header">
-

+

{{ $root.__('Collection', 'tainacan') }}
{{ collection && collection.name ? collection.name : '' }}

@@ -224,6 +225,8 @@ export default { order: String, showSearchBar: Boolean, showCollectionHeader: Boolean, + collectionBackgroundColor: String, + collectionTextColor: String, tainacanApiRoot: String, tainacanBaseUrl: String, className: String diff --git a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js index 125931463..0d34f80b9 100644 --- a/src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js +++ b/src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js @@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks; const { __ } = wp.i18n; -const { RangeControl, Spinner, Button, ToggleControl, Placeholder, Toolbar } = wp.components; +const { RangeControl, Spinner, Button, ToggleControl, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl } = wp.components; const { InspectorControls, BlockControls } = wp.editor; @@ -100,6 +100,14 @@ registerBlockType('tainacan/dynamic-items-list', { blockId: { type: String, default: undefined + }, + collectionBackgroundColor: { + type: String, + default: "#454647" + }, + collectionTextColor: { + type: String, + default: "#ffffff" } }, supports: { @@ -125,7 +133,9 @@ registerBlockType('tainacan/dynamic-items-list', { showSearchBar, showCollectionHeader, isLoadingCollection, - collection + collection, + collectionBackgroundColor, + collectionTextColor } = attributes; // Obtains block's client id to render it on save function @@ -245,10 +255,18 @@ registerBlockType('tainacan/dynamic-items-list', { collection = response.data; isLoadingCollection = false; + if (collection.tainacan_theme_collection_background_color) + collectionBackgroundColor = collection.tainacan_theme_collection_background_color; + + if (collection.tainacan_theme_collection_color) + collectionTextColor = collection.tainacan_theme_collection_color; + setAttributes({ content:
, collection: collection, isLoadingCollection: isLoadingCollection, + collectionBackgroundColor: collectionBackgroundColor, + collectionTextColor: collectionTextColor }); }); } @@ -376,9 +394,10 @@ registerBlockType('tainacan/dynamic-items-list', { />
+
{ showCollectionHeader = isChecked; @@ -387,8 +406,39 @@ registerBlockType('tainacan/dynamic-items-list', { } } /> + { showCollectionHeader ? +
+ + { + collectionBackgroundColor = value.hex; + setAttributes({ collectionBackgroundColor: collectionBackgroundColor }) + }} + disableAlpha + /> + + + + { + collectionTextColor = color; + setAttributes({ collectionTextColor: collectionTextColor }) + }} + /> + +
+ : null + }
+
-

+

{ __('Collection', 'tainacan') }
{ collection && collection.name ? collection.name : '' }

@@ -613,7 +664,9 @@ registerBlockType('tainacan/dynamic-items-list', { maxItemsNumber, order, showSearchBar, - showCollectionHeader + showCollectionHeader, + collectionBackgroundColor, + collectionTextColor } = attributes; return