tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/gutenberg-mosaic-view-mode' into develop

This commit is contained in:
Mateus Machado Luna 2019-11-12 11:26:44 -03:00
parent 178dcda376 8d6c2ce0fe
commit 41049ee2d9
6 changed files with 1257 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

398
src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
View File

@ -353,6 +353,35 @@
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-list-without-margin li img {
height: 185px !important;
margin-bottom: 0px !important; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
display: flex;
align-items: flex-start; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: #454647;
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button {
visibility: visible;
background-color: white !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid #cbcbcb;
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button:hover {
background-color: white !important;
border: 1px solid #cbcbcb !important; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid {
padding: 0;
@ -391,35 +420,6 @@
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item:hover a {
color: #454647;
text-decoration: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
display: flex;
align-items: flex-start; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: #454647;
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button {
visibility: visible;
background-color: white !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid #cbcbcb;
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s; }
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button:hover {
background-color: white !important;
border: 1px solid #cbcbcb !important; }
@media only screen and (max-width: 498px) {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid {
@ -487,5 +487,345 @@
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item {
min-width: calc(100% - 24px);
width: calc(100% - 24px); } }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic {
width: auto;
display: flex;
list-style: none;
min-height: 40vh; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container {
padding: 0;
justify-content: stretch;
flex-wrap: wrap;
display: flex;
display: -ms-grid;
display: grid;
-ms-grid-columns: 20vh 20vh 20vh;
grid-template-columns: repeat(3, 20vh);
grid-auto-flow: dense;
width: 100%;
list-style-type: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container:not(:first-of-type),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container:not(:first-of-type) {
margin-left: 0 !important; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item {
flex-grow: 1;
justify-self: stretch;
position: relative;
background-size: cover;
background-position: center;
min-width: 100%; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a {
width: 100%;
height: 100%;
display: block;
color: #454647;
font-weight: bold;
line-height: normal; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item img {
display: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a span,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a span {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.75);
bottom: 0;
opacity: 0;
padding: 8px 12px;
word-break: break-word;
transition: opacity 0.5s ease; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item:hover a span,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item:hover a span {
opacity: 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title span,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title span {
display: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item:hover a,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item:hover a {
color: #454647;
text-decoration: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-3x3 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-3x3 li.item-list-item {
grid-row: span 3;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:first-of-type,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:first-of-type {
grid-row: span 1;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:last-of-type,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:last-of-type {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x3 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-3x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x3 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-3x3 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x3 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-3x3 li.item-list-item:nth-of-type(1) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x3 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-3x3 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 li.item-list-item:nth-of-type(4), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 li.item-list-item:nth-of-type(6),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 li.item-list-item:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-3x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-3x4 li.item-list-item {
grid-row: span 3;
grid-column: span 4; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-3x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-3x4 li.item-list-item {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-3x4 li.item-list-item:nth-of-type(1) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-3x4 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-3x4 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 li.item-list-item:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(6),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-4x3 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-4x3 li.item-list-item {
grid-row: span 4;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-4x3 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-4x3 li.item-list-item {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 li.item-list-item:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(3), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(6),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 li.item-list-item:nth-of-type(5) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-4x5 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-4x5 li.item-list-item {
grid-row: span 4;
grid-column: span 5; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-4x5 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-4x5 li.item-list-item {
grid-row: span 2;
grid-column: span 5; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 5; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 li.item-list-item:nth-of-type(3), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 li.item-list-item:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(6),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 li.item-list-item:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-5x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-5x4 li.item-list-item {
grid-row: span 5;
grid-column: span 4; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-5x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-5x4 li.item-list-item {
grid-row: span 5;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 li.item-list-item:nth-of-type(1) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 li.item-list-item:nth-of-type(2) {
grid-row: span 5;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(3), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(2) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(4), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(6),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic {
overflow-x: auto; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container {
min-width: 240px; } }
/*# sourceMappingURL=tainacan-gutenberg-block-dynamic-items-list.css.map */

2
src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css.map
View File

File diff suppressed because one or more lines are too long

9
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js
View File

@ -14,6 +14,9 @@ document.addEventListener("DOMContentLoaded", () => {
gridMargin: 0,
searchURL: '',
maxItemsNumber: 12,
mosaicHeight: 40,
mosaicGridRows: 3,
mosaicGridColumns: 3,
order: 'asc',
showSearchBar: false,
showCollectionHeader: false,
@ -32,6 +35,9 @@ document.addEventListener("DOMContentLoaded", () => {
showName: this.showName,
layout: this.layout,
gridMargin: this.gridMargin,
mosaicHeight: this.mosaicHeight,
mosaicGridRows: this.mosaicGridRows,
mosaicGridColumns: this.mosaicGridColumns,
searchURL: this.searchURL,
maxItemsNumber: this.maxItemsNumber,
order: this.order,
@ -54,6 +60,9 @@ document.addEventListener("DOMContentLoaded", () => {
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
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;

138
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue
View File

@ -147,26 +147,47 @@
</span>
</button>
</div>
<ul
v-if="isLoading"
:style="{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
marginTop: showSearchBar || showCollectionHeader ? '1.34rem' : '0px'
}"
class="items-list"
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
<li
:key="item"
v-for="item in Number(maxItemsNumber)"
class="item-list-item skeleton"
<template v-if="isLoading">
<ul
v-if="layout !== 'mosaic'"
:style="{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
marginTop: showSearchBar || showCollectionHeader ? '1.34rem' : '0px'
}"
class="items-list"
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
<li
:key="item"
v-for="item in Number(maxItemsNumber)"
class="item-list-item skeleton"
:style="{
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
height: layout == 'grid' ? '230px' : '54px'
}" />
</ul>
<ul
v-if="layout === 'mosaic'"
:style="{
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
padding: '0 ' + (Number(gridMargin)/4) + 'px',
minHeight: layout === 'mosaic' ? mosaicHeight + 'vh' : ''
}"
class="items-list"
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
<div
:style="{
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
height: layout == 'grid' ? '230px' : '54px'
}" />
</ul>
width: 'calc((100% / ' + mosaicPartition(items, 5).length + ') - ' + gridMargin + 'px)',
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
margin: gridMargin + 'px'
}"
class="mosaic-container skeleton"
:key="mosaicIndex"
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items, 5)" />
</ul>
</template>
<div v-else>
<ul
v-if="items.length > 0"
v-if="items.length > 0 && layout !== 'mosaic'"
:style="{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
marginTop: showSearchBar || showCollectionHeader ? '1.35rem' : '0px'
@ -177,31 +198,61 @@
:key="index"
v-for="(item, index) of items"
class="item-list-item"
:style="{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : ''}">
:style="{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '' }">
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"
target="_blank"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<img
:src="
item.thumbnail && item.thumbnail['tainacan-medium'][0] && item.thumbnail['tainacan-medium'][0]
?
item.thumbnail['tainacan-medium'][0]
:
(item.thumbnail && item.thumbnail['thumbnail'][0] && item.thumbnail['thumbnail'][0]
?
item.thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/admin/images/placeholder_square.png`)
"
:src="getItemThumbnail(item, 'tainacan-medium')"
:alt="item.title ? item.title : $root.__('Thumbnail', 'tainacan')">
<span>{{ item.title ? item.title : '' }}</span>
</a>
</li>
</ul>
<ul
v-if="items.length > 0 && layout === 'mosaic'"
:style="{
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
padding: '0 ' + (Number(gridMargin)/4) + 'px',
minHeight: layout === 'mosaic' ? mosaicHeight + 'vh' : ''
}"
class="items-list"
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
<div
:style="{
width: 'calc((100% / ' + mosaicPartition(items, 5).length + ') - ' + gridMargin + 'px)',
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
margin: gridMargin + 'px',
gridGap: gridMargin + 'px',
}"
class="mosaic-container"
:class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
:key="mosaicIndex"
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items, 5)">
<li
:key="index"
v-for="(item, index) of mosaicGroup"
class="item-list-item"
:style="{ backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, 'medium_large')})` : 'none' }">
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"
target="_blank"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<img
:src="getItemThumbnail(item, 'tainacan-medium')"
:alt="item.title ? item.title : $root.__('Thumbnail', 'tainacan')">
<span>{{ item.title ? item.title : '' }}</span>
</a>
</li>
</div>
</ul>
<div
v-else
v-else-if="!isLoading && items.length <= 0"
class="spinner-container">
{{ $root.__(errorMessage, 'tainacan') }}
</div>
@ -240,6 +291,9 @@ export default {
gridMargin: Number,
searchURL: String,
maxItemsNumber: Number,
mosaicHeight: Number,
mosaicGridRows: Number,
mosaicGridColumns: Number,
order: String,
showSearchBar: Boolean,
showCollectionHeader: Boolean,
@ -348,6 +402,28 @@ export default {
this.isLoadingCollection = false;
});
}
},
getItemThumbnail(item, size) {
return (
item.thumbnail && item.thumbnail[size][0] && item.thumbnail[size][0]
?
item.thumbnail[size][0]
:
(item.thumbnail && item.thumbnail['large'][0] && item.thumbnail['large'][0]
?
item.thumbnail['large'][0]
:
`${this.tainacanBaseUrl}/admin/images/placeholder_square.png`)
)
},
mosaicPartition(items, size) {
const partition = _.groupBy(items, (item, i) => {
if (i % 2 == 0)
return Math.floor(i/size)
else
return Math.floor(i/(size + 1))
});
return _.values(partition);
}
},
created() {
@ -356,7 +432,7 @@ export default {
if (this.showCollectionHeader)
this.fetchCollectionForHeader();
this.fetchItems();
},
}

516
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss
View File

@ -215,7 +215,7 @@
}
}
// Grid View Mode ----------------------------------------------------
// Style for all View Modes ----------------------------------------------------
ul.items-list.items-list-without-margin,
ul.items-list-edit.items-list-without-margin {
grid-template-columns: repeat(auto-fill, 185px);
@ -235,6 +235,43 @@
}
}
}
ul.items-list-edit li.item-list-item {
display: flex;
align-items: flex-start;
button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: #454647;
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999;
}
&:hover button {
visibility: visible;
background-color: rgba(255, 255, 255, 1) !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid #cbcbcb;
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s;
}
&:hover button:hover {
background-color: rgba(255, 255, 255, 1) !important;
border: 1px solid #cbcbcb !important;
}
}
// Grid View Mode ----------------------------------------------------
ul.items-list.items-layout-grid,
ul.items-list-edit.items-layout-grid {
padding: 0;
@ -276,41 +313,6 @@
}
}
}
ul.items-list-edit li.item-list-item {
display: flex;
align-items: flex-start;
button {
position: absolute !important;
background-color: rgba(255, 255, 255, 0.75);
color: #454647;
padding: 2px;
margin-left: 5px;
min-width: 14px;
visibility: hidden;
position: relative;
opacity: 0;
right: -14px;
top: 0px;
justify-content: center;
z-index: 999;
}
&:hover button {
visibility: visible;
background-color: rgba(255, 255, 255, 1) !important;
opacity: 1;
right: -8px;
top: -8px;
border: 1px solid #cbcbcb;
border-radius: 12px;
transition: opacity linear 0.15s, right linear 0.15s;
}
&:hover button:hover {
background-color: rgba(255, 255, 255, 1) !important;
border: 1px solid #cbcbcb !important;
}
}
@media only screen and (max-width: 498px) {
ul.items-list.items-layout-grid,
@ -386,6 +388,446 @@
min-width: calc(100% - 24px);
width: calc(100% - 24px);
}
}
}
}
// Mosaic View Mode ----------------------------------------------------
ul.items-list.items-layout-mosaic,
ul.items-list-edit.items-layout-mosaic {
width: auto;
display: flex;
list-style: none;
min-height: 40vh;
.mosaic-container {
padding: 0;
justify-content: stretch; // For flex fallback compatibility
@include display-grid;
-ms-grid-columns: 20vh 20vh 20vh;
grid-template-columns: repeat(3, 20vh);
grid-auto-flow: dense;
width: 100%;
list-style-type: none;
&:not(:first-of-type) {
margin-left: 0 !important;
}
li.item-list-item {
flex-grow: 1; // For flex fallback compatibility
justify-self: stretch;
position: relative;
background-size: cover;
background-position: center;
min-width: 100%;
a {
width: 100%;
height: 100%;
display: block;
color: #454647;
font-weight: bold;
line-height: normal;
}
img {
display: none;
}
a span {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.75);
bottom: 0;
opacity: 0;
padding: 8px 12px;
word-break: break-word;
transition: opacity 0.5s ease;
}
&:hover a span {
opacity: 1;
}
a.item-without-title span {
display: none;
}
&:hover a {
color: #454647;
text-decoration: none;
}
}
// 3 x 3 MOSAIC GRID ------------------------
&.mosaic-container--1-3x3 {
li.item-list-item {
grid-row: span 3;
grid-column: span 3;
}
}
&.mosaic-container--2-3x3 {
li.item-list-item:first-of-type {
grid-row: span 1;
grid-column: span 3;
}
li.item-list-item:last-of-type {
grid-row: span 2;
grid-column: span 3;
}
}
&.mosaic-container--3-3x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--4-3x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--5-3x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--6-3x3 li.item-list-item {
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(4),
&:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2;
}
}
// 3 x 4 MOSAIC GRID ------------------------
&.mosaic-container--1-3x4 {
li.item-list-item {
grid-row: span 3;
grid-column: span 4;
}
}
&.mosaic-container--2-3x4 {
li.item-list-item {
grid-row: span 3;
grid-column: span 2;
}
}
&.mosaic-container--3-3x4 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--4-3x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2),
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--5-3x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--6-3x4 li.item-list-item {
&:nth-of-type(2),
&:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
// 4 x 3 MOSAIC GRID ------------------------
&.mosaic-container--1-4x3 {
li.item-list-item {
grid-row: span 4;
grid-column: span 3;
}
}
&.mosaic-container--2-4x3 {
li.item-list-item {
grid-row: span 2;
grid-column: span 3;
}
}
&.mosaic-container--3-4x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--4-4x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--5-4x3 li.item-list-item {
&:nth-of-type(2),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 1;
}
}
&.mosaic-container--6-4x3 li.item-list-item {
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3),
&:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(5) {
grid-row: span 1;
grid-column: span 2;
}
}
// 4 x 5 MOSAIC GRID ------------------------
&.mosaic-container--1-4x5 {
li.item-list-item {
grid-row: span 4;
grid-column: span 5;
}
}
&.mosaic-container--2-4x5 {
li.item-list-item {
grid-row: span 2;
grid-column: span 5;
}
}
&.mosaic-container--3-4x5 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 5;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--4-4x5 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(2),
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--5-4x5 li.item-list-item {
&:nth-of-type(3),
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2;
}
}
&.mosaic-container--6-4x5 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2;
}
}
// 5 x 4 MOSAIC GRID ------------------------
&.mosaic-container--1-5x4 {
li.item-list-item {
grid-row: span 5;
grid-column: span 4;
}
}
&.mosaic-container--2-5x4 {
li.item-list-item {
grid-row: span 5;
grid-column: span 2;
}
}
&.mosaic-container--3-5x4 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 5;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--4-5x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(2),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--5-5x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3),
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2;
}
}
&.mosaic-container--6-5x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4),
&:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1;
}
}
}
}
@media only screen and (max-width: 1024px) {
ul.items-list.items-layout-mosaic,
ul.items-list-edit.items-layout-mosaic {
overflow-x: auto;
.mosaic-container {
min-width: 240px;
}
}
}
}

319
src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
View File

@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = wp.editor;
@ -115,6 +115,18 @@ registerBlockType('tainacan/dynamic-items-list', {
collectionTextColor: {
type: String,
default: "#ffffff"
},
mosaicHeight: {
type: Number,
value: 40
},
mosaicGridColumns: {
type: Number,
value: 3
},
mosaicGridRows: {
type: Number,
value: 3
}
},
supports: {
@ -125,6 +137,7 @@ registerBlockType('tainacan/dynamic-items-list', {
let {
items,
content,
collection,
collectionId,
showImage,
showName,
@ -142,7 +155,10 @@ registerBlockType('tainacan/dynamic-items-list', {
showCollectionLabel,
isLoadingCollection,
collectionBackgroundColor,
collectionTextColor
collectionTextColor,
mosaicHeight,
mosaicGridColumns,
mosaicGridRows
} = attributes;
// Obtains block's client id to render it on save function
@ -153,24 +169,19 @@ registerBlockType('tainacan/dynamic-items-list', {
<li
key={ item.id }
className="item-list-item"
style={{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : ''}}>
style={
{
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, layout === 'mosaic' ? 'medium_large' : 'tainacan-medium')})` : 'none'
}
}>
<a
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url }
target="_blank"
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img
src={
item.thumbnail && item.thumbnail['tainacan-medium'][0] && item.thumbnail['tainacan-medium'][0]
?
item.thumbnail['tainacan-medium'][0]
:
(item.thumbnail && item.thumbnail['thumbnail'][0] && item.thumbnail['thumbnail'][0]
?
item.thumbnail['thumbnail'][0]
:
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}
src={ getItemThumbnail(item, 'tainacan-medium') }
alt={ item.title ? item.title : __( 'Thumbnail', 'tainacan' ) }/>
<span>{ item.title ? item.title : '' }</span>
</a>
@ -178,6 +189,25 @@ registerBlockType('tainacan/dynamic-items-list', {
);
}
function prepareMosaicItem(mosaicGroup, mosaicGroupsLength) {
return (
<div
style={
{
width: 'calc((100% / ' + mosaicGroupsLength + ') - ' + gridMargin + 'px)',
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
margin: gridMargin + 'px',
gridGap: gridMargin + 'px',
}
}
className={ 'mosaic-container mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns }>
{ buildMosaic(mosaicGroup) }
</div>
)
}
function setContent(){
items = [];
@ -236,15 +266,29 @@ registerBlockType('tainacan/dynamic-items-list', {
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
.then(response => {
// Initializes some variables
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
mosaicHeight = mosaicHeight ? mosaicHeight : 40;
for (let item of response.data.items)
items.push(prepareItem(item));
if (layout !== 'mosaic') {
for (let item of response.data.items)
items.push(prepareItem(item));
} else {
const mosaicGroups = mosaicPartition(response.data.items, 5);
for (let mosaicGroup of mosaicGroups)
items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
}
setAttributes({
content: <div></div>,
items: items,
isLoading: false,
itemsRequestSource: itemsRequestSource
itemsRequestSource: itemsRequestSource,
mosaicHeight: mosaicHeight,
mosaicGridRows: mosaicGridRows,
mosaicGridColumns: mosaicGridColumns
});
});
}
@ -283,6 +327,20 @@ registerBlockType('tainacan/dynamic-items-list', {
}
}
function getItemThumbnail(item, size) {
return (
item.thumbnail && item.thumbnail[size][0] && item.thumbnail[size][0]
?
item.thumbnail[size][0]
:
(item.thumbnail && item.thumbnail['thumbnail'][0] && item.thumbnail['thumbnail'][0]
?
item.thumbnail['thumbnail'][0]
:
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
)
}
function openDynamicItemsModal() {
isModalOpen = true;
setAttributes( {
@ -293,7 +351,7 @@ registerBlockType('tainacan/dynamic-items-list', {
function updateLayout(newLayout) {
layout = newLayout;
if (layout == 'grid' && showImage == false)
if ((layout == 'grid' || layout == 'mosaic') && showImage == false)
showImage = true;
if (layout == 'list' && showName == false)
@ -318,6 +376,23 @@ registerBlockType('tainacan/dynamic-items-list', {
}
}
function mosaicPartition(items, size) {
const partition = _.groupBy(items, (item, i) => {
if (i % 2 == 0)
return Math.floor(i/size)
else
return Math.floor(i/(size + 1))
});
return _.values(partition);
}
function buildMosaic(mosaicGroup) {
let mosaic = []
for (let item of mosaicGroup)
mosaic.push(prepareItem(item))
return mosaic;
}
// Executed only on the first load of page
if(content && content.length && content[0].type)
setContent();
@ -334,6 +409,12 @@ registerBlockType('tainacan/dynamic-items-list', {
title: __( 'List View' ),
onClick: () => updateLayout('list'),
isActive: layout === 'list',
},
{
icon: 'layout',
title: __( 'Mosaic View' ),
onClick: () => updateLayout('mosaic'),
isActive: layout === 'mosaic',
}
];
@ -454,7 +535,7 @@ registerBlockType('tainacan/dynamic-items-list', {
}
/>
: null }
{ layout == 'grid' ?
{ layout == 'grid' || layout == 'mosaic' ?
<div>
<ToggleControl
label={__("Item's title", 'tainacan')}
@ -470,10 +551,10 @@ registerBlockType('tainacan/dynamic-items-list', {
<div style={{ marginTop: '16px'}}>
<RangeControl
label={__('Margin between items in pixels', 'tainacan')}
value={ gridMargin }
value={ gridMargin ? gridMargin : 0 }
onChange={ ( margin ) => {
gridMargin = margin;
setAttributes( { gridMargin: margin } )
setAttributes( { gridMargin: margin } );
setContent();
}}
min={ 0 }
@ -484,6 +565,48 @@ registerBlockType('tainacan/dynamic-items-list', {
: null }
</div>
</PanelBody>
{ layout == 'mosaic' ?
<PanelBody
title={__('Mosaic', 'tainacan')}
initialOpen={ true }
>
<div>
<RangeControl
label={__('Mosaic container height', 'tainacan')}
value={ mosaicHeight ? mosaicHeight : 40 }
onChange={ ( height ) => {
mosaicHeight = height;
setAttributes( { mosaicHeight: height } );
setContent();
}}
min={ 10 }
max={ 100 }
/>
</div>
<div>
<SelectControl
label={__('Mosaic Grid', 'tainacan')}
value={ mosaicGridRows + 'x' + mosaicGridColumns }
options={ [
{ label: '3 x 3', value: '3x3' },
{ label: '3 x 4', value: '3x4' },
{ label: '4 x 3', value: '4x3' },
{ label: '4 x 5', value: '4x5' },
{ label: '5 x 4', value: '5x4' },
] }
onChange={ ( aGrid ) => {
mosaicGridRows = aGrid.split('x')[0];
mosaicGridColumns = aGrid.split('x')[1];
setAttributes({
mosaicGridRows: mosaicGridRows,
mosaicGridColumns: mosaicGridColumns
});
setContent();
}}/>
</div>
</PanelBody>
: null}
</InspectorControls>
</div>
@ -701,7 +824,7 @@ registerBlockType('tainacan/dynamic-items-list', {
isPrimary
type="submit"
onClick={ () => openDynamicItemsModal() }>
{__('Select items', 'tainacan')}
{__('Configure search', 'tainacan')}
</Button>
</Placeholder>
) : null
@ -713,9 +836,10 @@ registerBlockType('tainacan/dynamic-items-list', {
</div> :
<div>
<ul
style={{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
marginTop: showSearchBar || showCollectionHeader ? '1.5rem' : '0px'
style={{
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
padding: (Number(gridMargin)/4) + 'px',
minHeight: layout === 'mosaic' ? mosaicHeight + 'vh' : ''
}}
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
{ items }
@ -741,9 +865,12 @@ registerBlockType('tainacan/dynamic-items-list', {
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
collectionTextColor,
mosaicHeight,
mosaicGridRows,
mosaicGridColumns
} = attributes;
return <div
search-url={ searchURL }
className={ className }
@ -754,6 +881,9 @@ registerBlockType('tainacan/dynamic-items-list', {
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
layout={ layout }
mosaic-height={ mosaicHeight }
mosaic-grid-rows={ mosaicGridRows }
mosaic-grid-columns={ mosaicGridColumns }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
grid-margin={ gridMargin }
@ -764,5 +894,140 @@ registerBlockType('tainacan/dynamic-items-list', {
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
{ content }
</div>
},
deprecated: [
{
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'div'
},
collectionId: {
type: String,
default: undefined
},
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: undefined
},
itemsRequestSource: {
type: String,
default: undefined
},
maxItemsNumber: {
type: Number,
value: undefined
},
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: undefined
},
searchString: {
type: String,
default: undefined
},
order: {
type: String,
default: undefined
},
blockId: {
type: String,
default: undefined
},
collectionBackgroundColor: {
type: String,
default: "#454647"
},
collectionTextColor: {
type: String,
default: "#ffffff"
}
},
save({ attributes, className }){
const {
content,
blockId,
collectionId,
showImage,
showName,
layout,
gridMargin,
searchURL,
maxItemsNumber,
order,
showSearchBar,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
} = attributes;
return <div
search-url={ searchURL }
className={ className }
collection-id={ collectionId }
show-image={ '' + showImage }
show-name={ '' + showName }
show-search-bar={ '' + showSearchBar }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
layout={ layout }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
grid-margin={ gridMargin }
max-items-number={ maxItemsNumber }
order={ order }
tainacan-api-root={ tainacan_plugin.root }
tainacan-base-url={ tainacan_plugin.base_url }
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
{ content }
</div>
}
}
]
});