first commit
This commit is contained in:
CHIEFSOFT\ameye
+151
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar {
|
||||
--cnvs-posts-sidebar-thumbnail-width: 80px;
|
||||
--cnvs-posts-sidebar-thumbnail-gutter: 2rem;
|
||||
--cnvs-posts-sidebar-number-top: 0;
|
||||
--cnvs-posts-sidebar-number-right: 0;
|
||||
--cnvs-posts-sidebar-number-left: initial;
|
||||
--cnvs-posts-sidebar-number-bottom: initial;
|
||||
--cnvs-posts-sidebar-number-width: 30px;
|
||||
--cnvs-posts-sidebar-number-height: 30px;
|
||||
--cnvs-posts-sidebar-number-line-height: 30px;
|
||||
--cnvs-posts-sidebar-number-background: #000;
|
||||
--cnvs-posts-sidebar-number-color: white;
|
||||
--cnvs-posts-sidebar-number-font-size: 80%;
|
||||
--cnvs-posts-sidebar-number-border-radius: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar .cnvs-posts-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail {
|
||||
position: relative;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
margin-left: var(--cnvs-posts-sidebar-thumbnail-gutter);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail img {
|
||||
width: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
height: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-number {
|
||||
background: var(--cnvs-posts-sidebar-number-background);
|
||||
position: absolute;
|
||||
top: var(--cnvs-posts-sidebar-number-top);
|
||||
right: var(--cnvs-posts-sidebar-number-left);
|
||||
left: var(--cnvs-posts-sidebar-number-right);
|
||||
bottom: var(--cnvs-posts-sidebar-number-bottom);
|
||||
width: var(--cnvs-posts-sidebar-number-width);
|
||||
height: var(--cnvs-posts-sidebar-number-height);
|
||||
line-height: var(--cnvs-posts-sidebar-number-line-height);
|
||||
color: var(--cnvs-posts-sidebar-number-color);
|
||||
text-align: center;
|
||||
font-size: var(--cnvs-posts-sidebar-number-font-size);
|
||||
border-radius: var(--cnvs-posts-sidebar-number-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .meta-category {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .entry-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .avatar {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + * {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + *:before {
|
||||
content: "\b7";
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .published + .updated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-outer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
+151
@@ -0,0 +1,151 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar {
|
||||
--cnvs-posts-sidebar-thumbnail-width: 80px;
|
||||
--cnvs-posts-sidebar-thumbnail-gutter: 2rem;
|
||||
--cnvs-posts-sidebar-number-top: 0;
|
||||
--cnvs-posts-sidebar-number-left: 0;
|
||||
--cnvs-posts-sidebar-number-right: initial;
|
||||
--cnvs-posts-sidebar-number-bottom: initial;
|
||||
--cnvs-posts-sidebar-number-width: 30px;
|
||||
--cnvs-posts-sidebar-number-height: 30px;
|
||||
--cnvs-posts-sidebar-number-line-height: 30px;
|
||||
--cnvs-posts-sidebar-number-background: #000;
|
||||
--cnvs-posts-sidebar-number-color: white;
|
||||
--cnvs-posts-sidebar-number-font-size: 80%;
|
||||
--cnvs-posts-sidebar-number-border-radius: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar .cnvs-posts-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail {
|
||||
position: relative;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
margin-right: var(--cnvs-posts-sidebar-thumbnail-gutter);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail img {
|
||||
width: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
height: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-number {
|
||||
background: var(--cnvs-posts-sidebar-number-background);
|
||||
position: absolute;
|
||||
top: var(--cnvs-posts-sidebar-number-top);
|
||||
left: var(--cnvs-posts-sidebar-number-left);
|
||||
right: var(--cnvs-posts-sidebar-number-right);
|
||||
bottom: var(--cnvs-posts-sidebar-number-bottom);
|
||||
width: var(--cnvs-posts-sidebar-number-width);
|
||||
height: var(--cnvs-posts-sidebar-number-height);
|
||||
line-height: var(--cnvs-posts-sidebar-number-line-height);
|
||||
color: var(--cnvs-posts-sidebar-number-color);
|
||||
text-align: center;
|
||||
font-size: var(--cnvs-posts-sidebar-number-font-size);
|
||||
border-radius: var(--cnvs-posts-sidebar-number-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .meta-category {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .entry-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .avatar {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + * {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + *:before {
|
||||
content: "\b7";
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .published + .updated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-outer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
+145
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar {
|
||||
--cnvs-posts-sidebar-thumbnail-width: 80px;
|
||||
--cnvs-posts-sidebar-thumbnail-gutter: 2rem;
|
||||
--cnvs-posts-sidebar-number-top: 0;
|
||||
--cnvs-posts-sidebar-number-right: 0;
|
||||
--cnvs-posts-sidebar-number-left: initial;
|
||||
--cnvs-posts-sidebar-number-bottom: initial;
|
||||
--cnvs-posts-sidebar-number-width: 30px;
|
||||
--cnvs-posts-sidebar-number-height: 30px;
|
||||
--cnvs-posts-sidebar-number-line-height: 30px;
|
||||
--cnvs-posts-sidebar-number-background: #000;
|
||||
--cnvs-posts-sidebar-number-color: white;
|
||||
--cnvs-posts-sidebar-number-font-size: 80%;
|
||||
--cnvs-posts-sidebar-number-border-radius: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar .cnvs-posts-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail {
|
||||
position: relative;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
margin-left: var(--cnvs-posts-sidebar-thumbnail-gutter);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail img {
|
||||
width: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
height: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-number {
|
||||
background: var(--cnvs-posts-sidebar-number-background);
|
||||
position: absolute;
|
||||
top: var(--cnvs-posts-sidebar-number-top);
|
||||
right: var(--cnvs-posts-sidebar-number-left);
|
||||
left: var(--cnvs-posts-sidebar-number-right);
|
||||
bottom: var(--cnvs-posts-sidebar-number-bottom);
|
||||
width: var(--cnvs-posts-sidebar-number-width);
|
||||
height: var(--cnvs-posts-sidebar-number-height);
|
||||
line-height: var(--cnvs-posts-sidebar-number-line-height);
|
||||
color: var(--cnvs-posts-sidebar-number-color);
|
||||
text-align: center;
|
||||
font-size: var(--cnvs-posts-sidebar-number-font-size);
|
||||
border-radius: var(--cnvs-posts-sidebar-number-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .meta-category {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .entry-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .avatar {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + * {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + *:before {
|
||||
content: "\b7";
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .published + .updated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-outer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
+145
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar {
|
||||
--cnvs-posts-sidebar-thumbnail-width: 80px;
|
||||
--cnvs-posts-sidebar-thumbnail-gutter: 2rem;
|
||||
--cnvs-posts-sidebar-number-top: 0;
|
||||
--cnvs-posts-sidebar-number-left: 0;
|
||||
--cnvs-posts-sidebar-number-right: initial;
|
||||
--cnvs-posts-sidebar-number-bottom: initial;
|
||||
--cnvs-posts-sidebar-number-width: 30px;
|
||||
--cnvs-posts-sidebar-number-height: 30px;
|
||||
--cnvs-posts-sidebar-number-line-height: 30px;
|
||||
--cnvs-posts-sidebar-number-background: #000;
|
||||
--cnvs-posts-sidebar-number-color: white;
|
||||
--cnvs-posts-sidebar-number-font-size: 80%;
|
||||
--cnvs-posts-sidebar-number-border-radius: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts-sidebar .cnvs-posts-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail {
|
||||
position: relative;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
flex: 0 0 var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
margin-right: var(--cnvs-posts-sidebar-thumbnail-gutter);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-thumbnail img {
|
||||
width: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
height: var(--cnvs-posts-sidebar-thumbnail-width);
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-number {
|
||||
background: var(--cnvs-posts-sidebar-number-background);
|
||||
position: absolute;
|
||||
top: var(--cnvs-posts-sidebar-number-top);
|
||||
left: var(--cnvs-posts-sidebar-number-left);
|
||||
right: var(--cnvs-posts-sidebar-number-right);
|
||||
bottom: var(--cnvs-posts-sidebar-number-bottom);
|
||||
width: var(--cnvs-posts-sidebar-number-width);
|
||||
height: var(--cnvs-posts-sidebar-number-height);
|
||||
line-height: var(--cnvs-posts-sidebar-number-line-height);
|
||||
color: var(--cnvs-posts-sidebar-number-color);
|
||||
text-align: center;
|
||||
font-size: var(--cnvs-posts-sidebar-number-font-size);
|
||||
border-radius: var(--cnvs-posts-sidebar-number-border-radius);
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .meta-category {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-data .entry-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .avatar {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + * {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta > * + *:before {
|
||||
content: "\b7";
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta .published + .updated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar .cnvs-post-meta-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-item:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-outer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-sidebar-large .cnvs-post-thumbnail img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
<?php
|
||||
/**
|
||||
* Posts Sidebar
|
||||
*
|
||||
* @link https://codesupply.co
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @package PowerKit
|
||||
* @subpackage PowerKit/templates
|
||||
*/
|
||||
|
||||
// when layout is not selected, used list.php
|
||||
// but we don't need to print any html in this situation.
|
||||
if ( ! isset( $attributes['layout'] ) || ! $attributes['layout'] ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$class_name = $attributes['canvasClassName'];
|
||||
|
||||
$class_name .= sprintf( ' cnvs-block-posts-%s', $attributes['layout'] );
|
||||
?>
|
||||
<div class="cnvs-block-posts-sidebar <?php echo esc_attr( $class_name ); ?>">
|
||||
<div class="cnvs-block-posts-sidebar-inner">
|
||||
<ul class="cnvs-posts-list">
|
||||
<?php
|
||||
while ( $posts->have_posts() ) {
|
||||
$posts->the_post();
|
||||
?>
|
||||
<li class="cnvs-post-item">
|
||||
<article <?php post_class(); ?>>
|
||||
|
||||
<div class="cnvs-post-outer">
|
||||
|
||||
<?php if ( has_post_thumbnail() ) { ?>
|
||||
<div class="cnvs-post-inner cnvs-post-thumbnail">
|
||||
<a href="<?php the_permalink(); ?>" class="post-thumbnail">
|
||||
<?php the_post_thumbnail( $attributes['imageSize'] ); ?>
|
||||
|
||||
<?php if ( 'sidebar-numbered' === $attributes['layout'] ) : ?>
|
||||
<span class="cnvs-post-number">
|
||||
<?php echo esc_html( $posts->current_post + 1 ); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="cnvs-post-inner cnvs-post-data">
|
||||
<?php
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, 'category' );
|
||||
?>
|
||||
|
||||
<?php
|
||||
// Post Title.
|
||||
$tag = ( 'sidebar-large' === $attributes['layout'] ) ? 'h5' : 'h6';
|
||||
|
||||
the_title( '<' . $tag . ' class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></' . $tag . '>' );
|
||||
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, cnvs_allowed_post_meta( true, 'category' ) );
|
||||
?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
@@ -0,0 +1,321 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,321 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
!function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=108)}({1:function(t,e,n){var o;
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/!function(){"use strict";var n={}.hasOwnProperty;function i(){for(var t=[],e=0;e<arguments.length;e++){var o=arguments[e];if(o){var r=typeof o;if("string"===r||"number"===r)t.push(o);else if(Array.isArray(o)){if(o.length){var s=i.apply(null,o);s&&t.push(s)}}else if("object"===r)if(o.toString===Object.prototype.toString)for(var a in o)n.call(o,a)&&o[a]&&t.push(a);else t.push(o.toString())}}return t.join(" ")}t.exports?(i.default=i,t.exports=i):void 0===(o=function(){return i}.apply(e,[]))||(t.exports=o)}()},108:function(t,e,n){t.exports=n(109)},109:function(t,e,n){"use strict";n.r(e);var o=n(1),i=n.n(o),r=n(48),s=n.n(r),a=wp.hooks.addAction;function c(t){if("canvas/posts"!==t.block)return!1;if("masonry"!==t.attributes.layout)return!1;var e=t.blockProps.clientId;return e||!1}a("canvas.components.serverSideRender.onChange","canvas/posts.masonry.init",(function(t){var e=c(t);if(e){var n=document.querySelector('[data-block="'.concat(e,'"] .cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)'));n&&function(t){t.className=i()(t.className,"cnvs-block-posts-layout-masonry-colcade-ready"),t.colcadeObj=new s.a(t,{columns:".cnvs-block-post-grid-col",items:".cnvs-block-post-grid-item"})}(n)}})),a("canvas.components.serverSideRender.onBeforeChange","canvas-posts.masonry.destroy",(function(t){var e=c(t);if(e){var n=document.querySelector('[data-block="'.concat(e,'"] .cnvs-block-posts-layout-masonry-colcade-ready'));n&&function(t){t.colcadeObj&&(t.colcadeObj.destroy(),t.colcadeObj=null)}(n)}}))},48:function(t,e,n){var o,i;
|
||||
/*!
|
||||
* Colcade v0.2.0
|
||||
* Lightweight masonry layout
|
||||
* by David DeSandro
|
||||
* MIT license
|
||||
*/window,void 0===(i="function"==typeof(o=function(){function t(t,e){if((t=c(t))&&t.colcadeGUID){var n=i[t.colcadeGUID];return n.option(e),n}this.element=t,this.options={},this.option(e),this.create()}var e=t.prototype;e.option=function(t){this.options=function(t,e){for(var n in e)t[n]=e[n];return t}(this.options,t)};var n,o=0,i={};function r(e){var n=e.getAttribute("data-colcade").split(","),o={};n.forEach((function(t){var e=t.split(":"),n=e[0].trim(),i=e[1].trim();o[n]=i})),new t(e,o)}function s(t){var e=[];if(Array.isArray(t))e=t;else if(t&&"number"==typeof t.length)for(var n=0;n<t.length;n++)e.push(t[n]);else e.push(t);return e}function a(t,e){return s((e=e||document).querySelectorAll(t))}function c(t){return"string"==typeof t&&(t=document.querySelector(t)),t}return e.create=function(){this.errorCheck();var t=this.guid=++o;this.element.colcadeGUID=t,i[t]=this,this.reload(),this._windowResizeHandler=this.onWindowResize.bind(this),this._loadHandler=this.onLoad.bind(this),window.addEventListener("resize",this._windowResizeHandler),this.element.addEventListener("load",this._loadHandler,!0)},e.errorCheck=function(){var t=[];if(this.element||t.push("Bad element: "+this.element),this.options.columns||t.push("columns option required: "+this.options.columns),this.options.items||t.push("items option required: "+this.options.items),t.length)throw new Error("[Colcade error] "+t.join(". "))},e.reload=function(){this.updateColumns(),this.updateItems(),this.layout()},e.updateColumns=function(){this.columns=a(this.options.columns,this.element)},e.updateItems=function(){this.items=a(this.options.items,this.element)},e.getActiveColumns=function(){return this.columns.filter((function(t){return"none"!=getComputedStyle(t).display}))},e.layout=function(){this.activeColumns=this.getActiveColumns(),this._layout()},e._layout=function(){this.columnHeights=this.activeColumns.map((function(){return 0})),this.layoutItems(this.items)},e.layoutItems=function(t){t.forEach(this.layoutItem,this)},e.layoutItem=function(t){var e=Math.min.apply(Math,this.columnHeights),n=this.columnHeights.indexOf(e);this.activeColumns[n].appendChild(t),this.columnHeights[n]+=t.offsetHeight||1},e.append=function(t){var e=this.getQueryItems(t);this.items=this.items.concat(e),this.layoutItems(e)},e.prepend=function(t){var e=this.getQueryItems(t);this.items=e.concat(this.items),this._layout()},e.getQueryItems=function(t){t=s(t);var e=document.createDocumentFragment();return t.forEach((function(t){e.appendChild(t)})),a(this.options.items,e)},e.measureColumnHeight=function(t){var e=this.element.getBoundingClientRect();this.activeColumns.forEach((function(n,o){if(!t||n.contains(t)){var i=n.lastElementChild.getBoundingClientRect();this.columnHeights[o]=i.bottom-e.top}}),this)},e.onWindowResize=function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(function(){this.onDebouncedResize()}.bind(this),100)},e.onDebouncedResize=function(){var t=this.getActiveColumns(),e=t.length==this.activeColumns.length,n=!0;this.activeColumns.forEach((function(e,o){n=n&&e==t[o]})),e&&n||(this.activeColumns=t,this._layout())},e.onLoad=function(t){this.measureColumnHeight(t.target)},e.destroy=function(){this.items.forEach((function(t){this.element.appendChild(t)}),this),window.removeEventListener("resize",this._windowResizeHandler),this.element.removeEventListener("load",this._loadHandler,!0),delete this.element.colcadeGUID,delete i[this.guid]},n=function(){a("[data-colcade]").forEach(r)},"complete"!=document.readyState?document.addEventListener("DOMContentLoaded",n):n(),t.data=function(t){var e=(t=c(t))&&t.colcadeGUID;return e&&i[e]},t.makeJQueryPlugin=function(e){function n(t,n,o){var i;return t.each((function(t,r){var s=e.data(r,"colcade");if(s){var a=s[n].apply(s,o);i=void 0===i?a:i}})),void 0!==i?i:t}function o(n,o){n.each((function(n,i){var r=e.data(i,"colcade");r?(r.option(o),r.layout()):(r=new t(i,o),e.data(i,"colcade",r))}))}(e=e||window.jQuery)&&(e.fn.colcade=function(t){if("string"==typeof t){var e=Array.prototype.slice.call(arguments,1);return n(this,t,e)}return o(this,t),this})},t.makeJQueryPlugin(),t})?o.call(e,n,e,t):o)||(t.exports=i)}});
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
import Colcade from 'colcade';
|
||||
|
||||
const {
|
||||
addAction,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Prepare Masonry layout with Colcade script.
|
||||
*/
|
||||
function maybePrepareMasonryLayout(element) {
|
||||
element.className = classnames(
|
||||
element.className,
|
||||
'cnvs-block-posts-layout-masonry-colcade-ready'
|
||||
);
|
||||
|
||||
element.colcadeObj = new Colcade(element, {
|
||||
columns: '.cnvs-block-post-grid-col',
|
||||
items: '.cnvs-block-post-grid-item'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy Masonry layout with Colcade script.
|
||||
*/
|
||||
function maybeDestroyMasonryLayout(element) {
|
||||
if (element.colcadeObj) {
|
||||
element.colcadeObj.destroy();
|
||||
element.colcadeObj = null;
|
||||
}
|
||||
}
|
||||
|
||||
function getMasonryBlockId(props) {
|
||||
if ('canvas/posts' !== props.block) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('masonry' !== props.attributes.layout) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const clientId = props.blockProps.clientId;
|
||||
|
||||
if (!clientId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return clientId;
|
||||
}
|
||||
|
||||
addAction('canvas.components.serverSideRender.onChange', 'canvas/posts.masonry.init', function (props) {
|
||||
const clientId = getMasonryBlockId(props);
|
||||
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)`);
|
||||
|
||||
if (element) {
|
||||
maybePrepareMasonryLayout(element);
|
||||
}
|
||||
});
|
||||
|
||||
addAction('canvas.components.serverSideRender.onBeforeChange', 'canvas-posts.masonry.destroy', function (props) {
|
||||
const clientId = getMasonryBlockId(props);
|
||||
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry-colcade-ready`);
|
||||
|
||||
if (element) {
|
||||
maybeDestroyMasonryLayout(element);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,366 @@
|
||||
/*!
|
||||
* Colcade v0.2.0
|
||||
* Lightweight masonry layout
|
||||
* by David DeSandro
|
||||
* MIT license
|
||||
*/
|
||||
|
||||
/*jshint browser: true, undef: true, unused: true */
|
||||
|
||||
( function( window, factory ) {
|
||||
// universal module definition
|
||||
/*jshint strict: false */
|
||||
/*global define: false, module: false */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( factory );
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// browser global
|
||||
window.Colcade = factory();
|
||||
}
|
||||
|
||||
}( window, function factory() {
|
||||
|
||||
// -------------------------- Colcade -------------------------- //
|
||||
|
||||
function Colcade( element, options ) {
|
||||
element = getQueryElement( element );
|
||||
|
||||
// do not initialize twice on same element
|
||||
if ( element && element.colcadeGUID ) {
|
||||
var instance = instances[ element.colcadeGUID ];
|
||||
instance.option( options );
|
||||
return instance;
|
||||
}
|
||||
|
||||
this.element = element;
|
||||
// options
|
||||
this.options = {};
|
||||
this.option( options );
|
||||
// kick things off
|
||||
this.create();
|
||||
}
|
||||
|
||||
var proto = Colcade.prototype;
|
||||
|
||||
proto.option = function( options ) {
|
||||
this.options = extend( this.options, options );
|
||||
};
|
||||
|
||||
// globally unique identifiers
|
||||
var GUID = 0;
|
||||
// internal store of all Colcade intances
|
||||
var instances = {};
|
||||
|
||||
proto.create = function() {
|
||||
this.errorCheck();
|
||||
// add guid for Colcade.data
|
||||
var guid = this.guid = ++GUID;
|
||||
this.element.colcadeGUID = guid;
|
||||
instances[ guid ] = this; // associate via id
|
||||
// update initial properties & layout
|
||||
this.reload();
|
||||
// events
|
||||
this._windowResizeHandler = this.onWindowResize.bind( this );
|
||||
this._loadHandler = this.onLoad.bind( this );
|
||||
window.addEventListener( 'resize', this._windowResizeHandler );
|
||||
this.element.addEventListener( 'load', this._loadHandler, true );
|
||||
};
|
||||
|
||||
proto.errorCheck = function() {
|
||||
var errors = [];
|
||||
if ( !this.element ) {
|
||||
errors.push( 'Bad element: ' + this.element );
|
||||
}
|
||||
if ( !this.options.columns ) {
|
||||
errors.push( 'columns option required: ' + this.options.columns );
|
||||
}
|
||||
if ( !this.options.items ) {
|
||||
errors.push( 'items option required: ' + this.options.items );
|
||||
}
|
||||
|
||||
if ( errors.length ) {
|
||||
throw new Error( '[Colcade error] ' + errors.join('. ') );
|
||||
}
|
||||
};
|
||||
|
||||
// update properties and do layout
|
||||
proto.reload = function() {
|
||||
this.updateColumns();
|
||||
this.updateItems();
|
||||
this.layout();
|
||||
};
|
||||
|
||||
proto.updateColumns = function() {
|
||||
this.columns = querySelect( this.options.columns, this.element );
|
||||
};
|
||||
|
||||
proto.updateItems = function() {
|
||||
this.items = querySelect( this.options.items, this.element );
|
||||
};
|
||||
|
||||
proto.getActiveColumns = function() {
|
||||
return this.columns.filter( function( column ) {
|
||||
var style = getComputedStyle( column );
|
||||
return style.display != 'none';
|
||||
});
|
||||
};
|
||||
|
||||
// ----- layout ----- //
|
||||
|
||||
// public, updates activeColumns
|
||||
proto.layout = function() {
|
||||
this.activeColumns = this.getActiveColumns();
|
||||
this._layout();
|
||||
};
|
||||
|
||||
// private, does not update activeColumns
|
||||
proto._layout = function() {
|
||||
// reset column heights
|
||||
this.columnHeights = this.activeColumns.map( function() {
|
||||
return 0;
|
||||
});
|
||||
// layout all items
|
||||
this.layoutItems( this.items );
|
||||
};
|
||||
|
||||
proto.layoutItems = function( items ) {
|
||||
items.forEach( this.layoutItem, this );
|
||||
};
|
||||
|
||||
proto.layoutItem = function( item ) {
|
||||
// layout item by appending to column
|
||||
var minHeight = Math.min.apply( Math, this.columnHeights );
|
||||
var index = this.columnHeights.indexOf( minHeight );
|
||||
this.activeColumns[ index ].appendChild( item );
|
||||
// at least 1px, if item hasn't loaded
|
||||
// Not exactly accurate, but it's cool
|
||||
this.columnHeights[ index ] += item.offsetHeight || 1;
|
||||
};
|
||||
|
||||
// ----- adding items ----- //
|
||||
|
||||
proto.append = function( elems ) {
|
||||
var items = this.getQueryItems( elems );
|
||||
// add items to collection
|
||||
this.items = this.items.concat( items );
|
||||
// lay them out
|
||||
this.layoutItems( items );
|
||||
};
|
||||
|
||||
proto.prepend = function( elems ) {
|
||||
var items = this.getQueryItems( elems );
|
||||
// add items to collection
|
||||
this.items = items.concat( this.items );
|
||||
// lay out everything
|
||||
this._layout();
|
||||
};
|
||||
|
||||
proto.getQueryItems = function( elems ) {
|
||||
elems = makeArray( elems );
|
||||
var fragment = document.createDocumentFragment();
|
||||
elems.forEach( function( elem ) {
|
||||
fragment.appendChild( elem );
|
||||
});
|
||||
return querySelect( this.options.items, fragment );
|
||||
};
|
||||
|
||||
// ----- measure column height ----- //
|
||||
|
||||
proto.measureColumnHeight = function( elem ) {
|
||||
var boundingRect = this.element.getBoundingClientRect();
|
||||
this.activeColumns.forEach( function( column, i ) {
|
||||
// if elem, measure only that column
|
||||
// if no elem, measure all columns
|
||||
if ( !elem || column.contains( elem ) ) {
|
||||
var lastChildRect = column.lastElementChild.getBoundingClientRect();
|
||||
// not an exact calculation as it includes top border, and excludes item bottom margin
|
||||
this.columnHeights[ i ] = lastChildRect.bottom - boundingRect.top;
|
||||
}
|
||||
}, this );
|
||||
};
|
||||
|
||||
// ----- events ----- //
|
||||
|
||||
proto.onWindowResize = function() {
|
||||
clearTimeout( this.resizeTimeout );
|
||||
this.resizeTimeout = setTimeout( function() {
|
||||
this.onDebouncedResize();
|
||||
}.bind( this ), 100 );
|
||||
};
|
||||
|
||||
proto.onDebouncedResize = function() {
|
||||
var activeColumns = this.getActiveColumns();
|
||||
// check if columns changed
|
||||
var isSameLength = activeColumns.length == this.activeColumns.length;
|
||||
var isSameColumns = true;
|
||||
this.activeColumns.forEach( function( column, i ) {
|
||||
isSameColumns = isSameColumns && column == activeColumns[i];
|
||||
});
|
||||
if ( isSameLength && isSameColumns ) {
|
||||
return;
|
||||
}
|
||||
// activeColumns changed
|
||||
this.activeColumns = activeColumns;
|
||||
this._layout();
|
||||
};
|
||||
|
||||
proto.onLoad = function( event ) {
|
||||
this.measureColumnHeight( event.target );
|
||||
};
|
||||
|
||||
// ----- destroy ----- //
|
||||
|
||||
proto.destroy = function() {
|
||||
// move items back to container
|
||||
this.items.forEach( function( item ) {
|
||||
this.element.appendChild( item );
|
||||
}, this );
|
||||
// remove events
|
||||
window.removeEventListener( 'resize', this._windowResizeHandler );
|
||||
this.element.removeEventListener( 'load', this._loadHandler, true );
|
||||
// remove data
|
||||
delete this.element.colcadeGUID;
|
||||
delete instances[ this.guid ];
|
||||
};
|
||||
|
||||
// -------------------------- HTML init -------------------------- //
|
||||
|
||||
docReady( function() {
|
||||
var dataElems = querySelect('[data-colcade]');
|
||||
dataElems.forEach( htmlInit );
|
||||
});
|
||||
|
||||
function htmlInit( elem ) {
|
||||
// convert attribute "foo: bar, qux: baz" into object
|
||||
var attr = elem.getAttribute('data-colcade');
|
||||
var attrParts = attr.split(',');
|
||||
var options = {};
|
||||
attrParts.forEach( function( part ) {
|
||||
var pair = part.split(':');
|
||||
var key = pair[0].trim();
|
||||
var value = pair[1].trim();
|
||||
options[ key ] = value;
|
||||
});
|
||||
|
||||
new Colcade( elem, options );
|
||||
}
|
||||
|
||||
Colcade.data = function( elem ) {
|
||||
elem = getQueryElement( elem );
|
||||
var id = elem && elem.colcadeGUID;
|
||||
return id && instances[ id ];
|
||||
};
|
||||
|
||||
// -------------------------- jQuery -------------------------- //
|
||||
|
||||
Colcade.makeJQueryPlugin = function( $ ) {
|
||||
$ = $ || window.jQuery;
|
||||
if ( !$ ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.fn.colcade = function( arg0 /*, arg1 */) {
|
||||
// method call $().colcade( 'method', { options } )
|
||||
if ( typeof arg0 == 'string' ) {
|
||||
// shift arguments by 1
|
||||
var args = Array.prototype.slice.call( arguments, 1 );
|
||||
return methodCall( this, arg0, args );
|
||||
}
|
||||
// just $().colcade({ options })
|
||||
plainCall( this, arg0 );
|
||||
return this;
|
||||
};
|
||||
|
||||
function methodCall( $elems, methodName, args ) {
|
||||
var returnValue;
|
||||
$elems.each( function( i, elem ) {
|
||||
// get instance
|
||||
var colcade = $.data( elem, 'colcade' );
|
||||
if ( !colcade ) {
|
||||
return;
|
||||
}
|
||||
// apply method, get return value
|
||||
var value = colcade[ methodName ].apply( colcade, args );
|
||||
// set return value if value is returned, use only first value
|
||||
returnValue = returnValue === undefined ? value : returnValue;
|
||||
});
|
||||
return returnValue !== undefined ? returnValue : $elems;
|
||||
}
|
||||
|
||||
function plainCall( $elems, options ) {
|
||||
$elems.each( function( i, elem ) {
|
||||
var colcade = $.data( elem, 'colcade' );
|
||||
if ( colcade ) {
|
||||
// set options & init
|
||||
colcade.option( options );
|
||||
colcade.layout();
|
||||
} else {
|
||||
// initialize new instance
|
||||
colcade = new Colcade( elem, options );
|
||||
$.data( elem, 'colcade', colcade );
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// try making plugin
|
||||
Colcade.makeJQueryPlugin();
|
||||
|
||||
// -------------------------- utils -------------------------- //
|
||||
|
||||
function extend( a, b ) {
|
||||
for ( var prop in b ) {
|
||||
a[ prop ] = b[ prop ];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) {
|
||||
var ary = [];
|
||||
if ( Array.isArray( obj ) ) {
|
||||
// use object if already an array
|
||||
ary = obj;
|
||||
} else if ( obj && typeof obj.length == 'number' ) {
|
||||
// convert nodeList to array
|
||||
for ( var i=0; i < obj.length; i++ ) {
|
||||
ary.push( obj[i] );
|
||||
}
|
||||
} else {
|
||||
// array of single index
|
||||
ary.push( obj );
|
||||
}
|
||||
return ary;
|
||||
}
|
||||
|
||||
// get array of elements
|
||||
function querySelect( selector, elem ) {
|
||||
elem = elem || document;
|
||||
var elems = elem.querySelectorAll( selector );
|
||||
return makeArray( elems );
|
||||
}
|
||||
|
||||
function getQueryElement( elem ) {
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelector( elem );
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
function docReady( onReady ) {
|
||||
if ( document.readyState == 'complete' ) {
|
||||
onReady();
|
||||
return;
|
||||
}
|
||||
document.addEventListener( 'DOMContentLoaded', onReady );
|
||||
}
|
||||
|
||||
// -------------------------- end -------------------------- //
|
||||
|
||||
return Colcade;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,134 @@
|
||||
<?php
|
||||
/**
|
||||
* Grid and Masonry layout template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
* @var $posts - all available posts
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$columns = isset( $options['columns'] ) ? $options['columns'] : false;
|
||||
|
||||
$class_name = $attributes['className'];
|
||||
|
||||
if ( $columns ) {
|
||||
$class_name .= ' cnvs-block-posts-columns-' . $columns;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $class_name ); ?>">
|
||||
<div class="cnvs-block-posts-inner">
|
||||
<?php
|
||||
while ( $posts->have_posts() ) {
|
||||
$posts->the_post();
|
||||
?>
|
||||
<article <?php post_class( 'masonry' === $attributes['layout'] ? 'cnvs-block-post-grid-item' : '' ); ?>>
|
||||
<div class="cnvs-block-post-single-outer">
|
||||
<?php if ( has_post_thumbnail() ) { ?>
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<div class="entry-thumbnail">
|
||||
<div class="cnvs-overlay cnvs-overlay-ratio cnvs-ratio-landscape">
|
||||
<div class="cnvs-overlay-background">
|
||||
<a href="<?php the_permalink(); ?>" class="cnvs-overlay-link">
|
||||
<?php the_post_thumbnail( $attributes['imageSize'] ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<header>
|
||||
<?php
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, 'category' );
|
||||
|
||||
// Post Title.
|
||||
$tag = apply_filters( 'canvas_block_posts_title_tag', 'h3', $attributes, $options );
|
||||
the_title( '<' . $tag . ' class="cnvs-block-posts-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></' . $tag . '>' );
|
||||
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, cnvs_allowed_post_meta( true, 'category' ) );
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showExcerpt'] ) && $attributes['showExcerpt'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-excerpt">
|
||||
<?php
|
||||
the_excerpt();
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showViewPostButton'] ) && $attributes['showViewPostButton'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-view-post-button">
|
||||
<?php cnvs_print_gutenberg_blocks_button( $attributes['buttonLabel'], get_permalink(), '', 'button', $attributes ); ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( function_exists( 'powerkit_share_buttons_exists' ) && powerkit_share_buttons_exists( 'block-posts' ) ) {
|
||||
powerkit_share_buttons_location( 'block-posts' );
|
||||
}
|
||||
?>
|
||||
</header><!-- .entry-header -->
|
||||
</div><!-- .post-inner -->
|
||||
|
||||
</div><!-- .post-outer -->
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
|
||||
// Prepare Masonry columns for Colcade.
|
||||
if ( 'masonry' === $attributes['layout'] ) {
|
||||
for ( $i = 1; $i <= $columns; $i++ ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-grid-col cnvs-block-post-grid-col--<?php echo esc_attr( $i ); ?>"></div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showPagination'] ) && $attributes['showPagination'] ) {
|
||||
$total_pages = $posts->max_num_pages;
|
||||
|
||||
if ( $total_pages > 1 ) {
|
||||
$current_page = max( 1, get_query_var( 'paged' ) );
|
||||
|
||||
$base_url = cnvs_get_block_posts_page_url( $attributes );
|
||||
|
||||
if ( $base_url ) {
|
||||
echo '<nav class="navigation pagination" role="navigation">';
|
||||
echo '<h2 class="screen-reader-text">' . esc_html__( 'Posts navigation', 'canvas' ) . '</h2>';
|
||||
echo '<div class="nav-links">';
|
||||
echo cnvs_paginate_links(
|
||||
array(
|
||||
'base' => $base_url,
|
||||
'format' => '%#%',
|
||||
'current' => $current_page,
|
||||
'total' => $total_pages,
|
||||
'merge_query_vars' => false,
|
||||
)
|
||||
); // XSS.
|
||||
echo '</div>';
|
||||
echo '</nav>';
|
||||
} else {
|
||||
cnvs_alert_warning( esc_html__( 'Please select a page for your blog posts in Settings → Reading to display pagination.', 'canvas' ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
/**
|
||||
* List layout template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
* @var $posts - all available posts
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
// when layout is not selected, used list.php
|
||||
// but we don't need to print any html in this situation.
|
||||
if ( ! isset( $attributes['layout'] ) || ! $attributes['layout'] ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>">
|
||||
<div class="cnvs-block-posts-inner">
|
||||
<?php
|
||||
|
||||
while ( $posts->have_posts() ) {
|
||||
$posts->the_post();
|
||||
?>
|
||||
<article <?php post_class( 'masonry' === $attributes['layout'] ? 'cnvs-block-post-grid-item' : '' ); ?>>
|
||||
<div class="cnvs-block-post-single-outer">
|
||||
<?php if ( has_post_thumbnail() ) { ?>
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<div class="entry-thumbnail">
|
||||
<div class="cnvs-overlay cnvs-overlay-ratio cnvs-ratio-landscape">
|
||||
<div class="cnvs-overlay-background">
|
||||
<a href="<?php the_permalink(); ?>" class="cnvs-overlay-link">
|
||||
<?php the_post_thumbnail( $attributes['imageSize'] ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<header>
|
||||
<?php
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, 'category' );
|
||||
|
||||
// Post Title.
|
||||
$tag = apply_filters( 'canvas_block_posts_title_tag', 'h3', $attributes, $options );
|
||||
the_title( '<' . $tag . ' class="cnvs-block-posts-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></' . $tag . '>' );
|
||||
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, cnvs_allowed_post_meta( true, 'category' ) );
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showExcerpt'] ) && $attributes['showExcerpt'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-excerpt">
|
||||
<?php
|
||||
the_excerpt();
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showViewPostButton'] ) && $attributes['showViewPostButton'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-view-post-button">
|
||||
<?php cnvs_print_gutenberg_blocks_button( $attributes['buttonLabel'], get_permalink(), '', 'button', $attributes ); ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( function_exists( 'powerkit_share_buttons_exists' ) && powerkit_share_buttons_exists( 'block-posts' ) ) {
|
||||
powerkit_share_buttons_location( 'block-posts' );
|
||||
}
|
||||
?>
|
||||
</header><!-- .entry-header -->
|
||||
</div><!-- .post-inner -->
|
||||
|
||||
</div><!-- .post-outer -->
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showPagination'] ) && $attributes['showPagination'] ) {
|
||||
$total_pages = $posts->max_num_pages;
|
||||
|
||||
if ( $total_pages > 1 ) {
|
||||
$current_page = max( 1, get_query_var( 'paged' ) );
|
||||
|
||||
$base_url = cnvs_get_block_posts_page_url( $attributes );
|
||||
|
||||
if ( $base_url ) {
|
||||
echo '<nav class="navigation pagination" role="navigation">';
|
||||
echo '<h2 class="screen-reader-text">' . esc_html__( 'Posts navigation', 'canvas' ) . '</h2>';
|
||||
echo '<div class="nav-links">';
|
||||
echo cnvs_paginate_links(
|
||||
array(
|
||||
'base' => $base_url,
|
||||
'format' => '%#%',
|
||||
'current' => $current_page,
|
||||
'total' => $total_pages,
|
||||
'merge_query_vars' => false,
|
||||
)
|
||||
); // XSS.
|
||||
echo '</div>';
|
||||
echo '</nav>';
|
||||
} else {
|
||||
cnvs_alert_warning( esc_html__( 'Please select a page for your blog posts in Settings → Reading to display pagination.', 'canvas' ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
/**
|
||||
* Masonry layout template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
* @var $posts - all available posts
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
// As Masonry layout is almost the same like Grid, we can use HTML from Grid.
|
||||
require dirname( __FILE__ ) . '/grid.php';
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Posts
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
function canvasInitPostsMasonry() {
|
||||
$( '.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)' )
|
||||
.addClass( 'cnvs-block-posts-layout-masonry-colcade-ready' )
|
||||
.each( function() {
|
||||
new Colcade( this, {
|
||||
columns: '.cnvs-block-post-grid-col',
|
||||
items: '.cnvs-block-post-grid-item'
|
||||
});
|
||||
} );
|
||||
}
|
||||
|
||||
$( document ).ready( function() {
|
||||
canvasInitPostsMasonry();
|
||||
$( document.body ).on( 'post-load', function() {
|
||||
canvasInitPostsMasonry();
|
||||
} );
|
||||
} );
|
||||
|
||||
} )( jQuery );
|
||||
@@ -0,0 +1,248 @@
|
||||
<?php
|
||||
/**
|
||||
* Posts Block Sidebar.
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
/**
|
||||
* Initialize Featured Posts block sidebar.
|
||||
*/
|
||||
class CNVS_Block_Posts_Sidebar {
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'enqueue_block_assets', array( $this, 'enqueue_block_assets' ) );
|
||||
add_filter( 'canvas_block_layouts_canvas/posts', array( $this, 'register_layout' ), 99 );
|
||||
add_filter( 'canvas_block_posts_query_args', array( $this, 'change_query_args' ), 10, 3 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue the block's assets for the editor.
|
||||
*/
|
||||
public function enqueue_block_assets() {
|
||||
|
||||
wp_register_style(
|
||||
'canvas-block-posts-sidebar',
|
||||
plugins_url( 'block-posts-sidebar/block-posts-sidebar.css', __FILE__ ),
|
||||
array(),
|
||||
filemtime( plugin_dir_path( __FILE__ ) . 'block-posts-sidebar/block-posts-sidebar.css' )
|
||||
);
|
||||
|
||||
wp_style_add_data( 'canvas-block-posts-sidebar', 'rtl', 'replace' );
|
||||
|
||||
wp_enqueue_style( 'canvas-block-posts-sidebar' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get types of layout.
|
||||
*/
|
||||
public function get_types_of_layouts() {
|
||||
$types = array(
|
||||
'sidebar-list' => 'sidebar-list',
|
||||
'sidebar-numbered' => 'sidebar-numbered',
|
||||
'sidebar-large' => 'sidebar-large',
|
||||
);
|
||||
|
||||
return $types;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get name of layout by key.
|
||||
*
|
||||
* @param mixed $key The key.
|
||||
*/
|
||||
public function get_name_of_layout_by( $key ) {
|
||||
|
||||
switch ( $key ) {
|
||||
case 'sidebar-list':
|
||||
return esc_html__( 'Widget 1', 'canvas' );
|
||||
case 'sidebar-numbered':
|
||||
return esc_html__( 'Widget 2', 'canvas' );
|
||||
case 'sidebar-large':
|
||||
return esc_html__( 'Widget 3', 'canvas' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get icon of layout by key.
|
||||
*
|
||||
* @param mixed $key The key.
|
||||
*/
|
||||
public function get_icon_of_layout_by( $key ) {
|
||||
|
||||
switch ( $key ) {
|
||||
case 'sidebar-list':
|
||||
return '<svg width="52" height="44" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke="#2D2D2D" fill="none" fill-rule="evenodd"><rect stroke-width="1.5" width="50" height="42" rx="3"/><rect stroke-width="1.5" x="5" y="5" width="8" height="8" rx="1"/><rect stroke-width="1.5" x="5" y="17" width="8" height="8" rx="1"/><rect stroke-width="1.5" x="5" y="29" width="8" height="8" rx="1"/><path d="M16.833 5.5h23.334m-23.334 3h28.334m-28.32 3h20.307M16.833 17.5h23.334m-23.334 3h28.334m-28.32 3h20.307M16.833 29.5h23.334m-23.334 3h28.334m-28.32 3h20.307" stroke-linecap="round" stroke-linejoin="round"/></g></svg>';
|
||||
case 'sidebar-numbered':
|
||||
return '<svg width="52" height="44" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><rect stroke="#2D2D2D" stroke-width="1.5" width="50" height="42" rx="3"/><g transform="translate(5 5)" stroke="#2D2D2D"><rect stroke-width="1.5" width="8" height="8" rx="1"/><path d="M11.833.5h23.334m-23.334 3h28.334m-28.32 3h20.307" stroke-linecap="round" stroke-linejoin="round"/></g><text font-family="FuturaPT-Bold, Futura PT" font-size="6" font-weight="bold" fill="#2D2D2D"><tspan x="7.2" y="11">1</tspan></text><text font-family="FuturaPT-Bold, Futura PT" font-size="6" font-weight="bold" fill="#2D2D2D"><tspan x="7.2" y="23">2</tspan></text><text font-family="FuturaPT-Bold, Futura PT" font-size="6" font-weight="bold" fill="#2D2D2D"><tspan x="7.2" y="35">3</tspan></text><rect stroke="#2D2D2D" stroke-width="1.5" x="5" y="17" width="8" height="8" rx="1"/><rect stroke="#2D2D2D" stroke-width="1.5" x="5" y="29" width="8" height="8" rx="1"/><path d="M16.833 17.5h23.334m-23.334 3h28.334m-28.32 3h20.307M16.833 29.5h23.334m-23.334 3h28.334m-28.32 3h20.307" stroke="#2D2D2D" stroke-linecap="round" stroke-linejoin="round"/></g></svg>';
|
||||
case 'sidebar-large':
|
||||
return '<svg width="52" height="44" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke="#2D2D2D" fill="none" fill-rule="evenodd"><rect stroke-width="1.5" width="50" height="42" rx="3"/><g transform="translate(16 8)"><rect stroke-width="1.5" width="18" height="22" rx="1"/><path d="M.5 24.5h17M.5 27h13" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register layout.
|
||||
*
|
||||
* @param array $layouts List of layouts.
|
||||
*/
|
||||
public function register_layout( $layouts = array() ) {
|
||||
|
||||
$types = $this->get_types_of_layouts();
|
||||
|
||||
foreach ( $types as $type ) {
|
||||
|
||||
$layouts[ $type ] = array(
|
||||
'location' => array( 'section-sidebar' ),
|
||||
'name' => $this->get_name_of_layout_by( $type ),
|
||||
'template' => dirname( __FILE__ ) . '/block-posts-sidebar/layouts/posts-sidebar.php',
|
||||
'icon' => $this->get_icon_of_layout_by( $type ),
|
||||
'sections' => array(
|
||||
'general' => array(
|
||||
'title' => esc_html__( 'Block Settings', 'canvas' ),
|
||||
'priority' => 5,
|
||||
'open' => true,
|
||||
),
|
||||
),
|
||||
'hide_fields' => array(
|
||||
'postsCount',
|
||||
'showExcerpt',
|
||||
'showViewPostButton',
|
||||
'showPagination',
|
||||
'colorText',
|
||||
'colorHeading',
|
||||
'colorHeadingHover',
|
||||
'colorText',
|
||||
'colorMeta',
|
||||
'colorMetaHover',
|
||||
'colorMetaLinks',
|
||||
'colorMetaLinksHover',
|
||||
),
|
||||
'fields' => array(
|
||||
array(
|
||||
'key' => 'widgetPostsCount',
|
||||
'label' => esc_html__( 'Posts Count', 'canvas' ),
|
||||
'section' => 'pagination',
|
||||
'type' => 'number',
|
||||
'default' => 5,
|
||||
'min' => 1,
|
||||
'max' => 100,
|
||||
),
|
||||
// Color Settings.
|
||||
array(
|
||||
'key' => 'colorHeading',
|
||||
'label' => esc_html__( 'Heading', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'default' => '#000',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$.cnvs-block-posts-sidebar .entry-title a',
|
||||
'property' => 'color',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'colorHeadingHover',
|
||||
'label' => esc_html__( 'Heading Hover', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'default' => '#5a5a5a',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$.cnvs-block-posts-sidebar .entry-title a:hover, $.cnvs-block-posts-sidebar .entry-title a:focus',
|
||||
'property' => 'color',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'colorMetaLinks',
|
||||
'label' => esc_html__( 'Post Meta Links', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'default' => '',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$.cnvs-block-posts-sidebar .cnvs-post-meta a, $.cnvs-block-posts-sidebar .post-categories a',
|
||||
'property' => 'color',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'colorMetaLinksHover',
|
||||
'label' => esc_html__( 'Post Meta Links Hover', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'default' => '',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$.cnvs-block-posts-sidebar .cnvs-post-meta a:hover, $.cnvs-block-posts-sidebar .cnvs-post-meta a:focus, $.cnvs-block-posts-sidebar .post-categories a:hover, $.cnvs-block-posts-sidebar .post-categories a:focus',
|
||||
'property' => 'color',
|
||||
),
|
||||
),
|
||||
),
|
||||
array(
|
||||
'key' => 'colorMeta',
|
||||
'label' => esc_html__( 'Post Meta', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'default' => '',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$.cnvs-block-posts-sidebar .cnvs-post-meta span, $.cnvs-block-posts-sidebar .post-categories span',
|
||||
'property' => 'color',
|
||||
),
|
||||
),
|
||||
),
|
||||
'sidebar-numbered' === $type ? array(
|
||||
'key' => 'bgCounter',
|
||||
'label' => esc_html__( 'Background Counter', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$ .cnvs-post-item .cnvs-post-number',
|
||||
'property' => 'background-color',
|
||||
),
|
||||
),
|
||||
) : array(),
|
||||
'sidebar-numbered' === $type ? array(
|
||||
'key' => 'colorCounter',
|
||||
'label' => esc_html__( 'Color Counter', 'canvas' ),
|
||||
'section' => 'color',
|
||||
'type' => 'color',
|
||||
'output' => array(
|
||||
array(
|
||||
'element' => '$ .cnvs-post-item .cnvs-post-number',
|
||||
'property' => 'color',
|
||||
),
|
||||
),
|
||||
) : array(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return $layouts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change post query attributes
|
||||
*
|
||||
* @param array $args Args for post query.
|
||||
* @param array $attributes Block attributes.
|
||||
* @param array $options Block options.
|
||||
*/
|
||||
public function change_query_args( $args, $attributes, $options ) {
|
||||
|
||||
// Posts count.
|
||||
if ( isset( $options['widgetPostsCount'] ) && $options['widgetPostsCount'] ) {
|
||||
$args['posts_per_page'] = $options['widgetPostsCount'];
|
||||
}
|
||||
|
||||
return $args;
|
||||
}
|
||||
}
|
||||
|
||||
new CNVS_Block_Posts_Sidebar();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,578 @@
|
||||
<?php
|
||||
/**
|
||||
* Related Posts Snippet
|
||||
*
|
||||
* @package Powerkit
|
||||
* @subpackage Modules
|
||||
*/
|
||||
|
||||
/**
|
||||
* Related Posts Class
|
||||
*/
|
||||
class CNVS_Related_Posts_Snippet {
|
||||
|
||||
/**
|
||||
* Post ID
|
||||
*
|
||||
* @var int
|
||||
*/
|
||||
public $post_id = null;
|
||||
|
||||
/**
|
||||
* Options
|
||||
*
|
||||
* @var int
|
||||
*/
|
||||
public $args = array();
|
||||
|
||||
/**
|
||||
* Need Posts Count
|
||||
*
|
||||
* @var int
|
||||
*/
|
||||
public $need_posts_count = 0;
|
||||
|
||||
/**
|
||||
* Posts Offset
|
||||
*
|
||||
* @var int|bool
|
||||
*/
|
||||
public $founded_posts = false;
|
||||
|
||||
/**
|
||||
* Parent Terms
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
public $parent_terms = array();
|
||||
|
||||
/**
|
||||
* Posts List
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private $posts_list = array();
|
||||
|
||||
/**
|
||||
* Exclude Posts
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private $exclude_posts = array();
|
||||
|
||||
/**
|
||||
* Exclude Cats
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private $exclude_cats = array();
|
||||
|
||||
/**
|
||||
* Constructor. Set up cacheable values and settings.
|
||||
*
|
||||
* @param array $args Related posts options.
|
||||
*/
|
||||
public function __construct( $args = array() ) {
|
||||
global $post;
|
||||
|
||||
// Set Post ID.
|
||||
if ( is_object( $post ) ) {
|
||||
$this->args['post_id'] = intval( $post->ID );
|
||||
}
|
||||
|
||||
$this->args = array_merge( array(
|
||||
'ids' => null,
|
||||
'category' => null,
|
||||
'tag' => null,
|
||||
'time_frame' => null,
|
||||
'orderby' => 'date',
|
||||
'order' => 'DESC',
|
||||
'count' => 1,
|
||||
'offset' => 0,
|
||||
'exclude_posts' => array(),
|
||||
'exclude_cats' => array(),
|
||||
'output_type' => 'term, parent_term', // Variables: all, posts, tags, term, parent_term, post_type.
|
||||
'post_id' => $this->args['post_id'],
|
||||
), $args );
|
||||
|
||||
// Check Post ID.
|
||||
if ( (int) $this->args['post_id'] <= 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set Options.
|
||||
$this->ids = $this->args['ids'];
|
||||
$this->cats = $this->args['category'];
|
||||
$this->tags = $this->args['tag'];
|
||||
$this->time_frame = $this->args['time_frame'];
|
||||
$this->orderby = $this->args['orderby'];
|
||||
$this->order = $this->args['order'];
|
||||
$this->need_posts_count = $this->args['count'] + $this->args['offset'];
|
||||
$this->offset = $this->args['offset'];
|
||||
$this->post_terms = $this->get_post_terms( $this->args['post_id'] );
|
||||
$this->post_type = get_post_type( $this->args['post_id'] );
|
||||
|
||||
// Exclude Options.
|
||||
$this->exclude_cats = is_array( $this->args['exclude_cats'] ) ? array_map( 'intval', $this->args['exclude_cats'] ) : array();
|
||||
$this->exclude_posts = is_array( $this->args['exclude_posts'] ) ? array_map( 'intval', $this->args['exclude_posts'] ) : array();
|
||||
$this->exclude_posts[] = (int) $this->args['post_id'];
|
||||
|
||||
// Check Output Type.
|
||||
if ( is_string( $this->args['output_type'] ) ) {
|
||||
$output_type = explode( ',', $this->args['output_type'] );
|
||||
} elseif ( is_array( $this->args['output_type'] ) ) {
|
||||
$output_type = $this->args['output_type'];
|
||||
} else {
|
||||
$output_type = array();
|
||||
}
|
||||
|
||||
// Set Output Type.
|
||||
if ( trim( $this->ids ) ) {
|
||||
$output_type = array( 'posts' );
|
||||
|
||||
} elseif ( trim( $this->cats ) ) {
|
||||
|
||||
$output_type = array( 'posts' );
|
||||
|
||||
} elseif ( trim( $this->tags ) ) {
|
||||
|
||||
$output_type = array( 'posts' );
|
||||
|
||||
} elseif ( in_array( 'all', $output_type, true ) ) {
|
||||
|
||||
$output_type = array( 'tags', 'term', 'parent_term', 'post_type' );
|
||||
}
|
||||
|
||||
$this->args['output_type'] = array_map( 'trim', $output_type );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Posts
|
||||
*
|
||||
* @param array $args Query args.
|
||||
*/
|
||||
private function query_get_posts( $args ) {
|
||||
|
||||
// Set Query Params.
|
||||
$args['no_found_rows'] = true;
|
||||
$args['ignore_sticky_posts'] = 1;
|
||||
$args['post__not_in'] = $this->exclude_posts;
|
||||
$args['category__not_in'] = $this->exclude_cats;
|
||||
|
||||
$args = $this->query_filter_args( $args );
|
||||
|
||||
// Result.
|
||||
$new_posts_list = new WP_Query( $args );
|
||||
|
||||
if ( isset( $new_posts_list->posts ) && is_array( $new_posts_list->posts ) ) {
|
||||
$this->posts_list = array_merge( $this->posts_list, $new_posts_list->posts );
|
||||
|
||||
// Exclude posts list.
|
||||
foreach ( $new_posts_list->posts as $obj_post ) {
|
||||
$this->exclude_posts[] = $obj_post->ID;
|
||||
|
||||
// Needed count posts.
|
||||
$this->need_posts_count--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre posts process.
|
||||
*/
|
||||
public function posts_process() {
|
||||
if ( count( $this->args['output_type'] ) <= 1 ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Process.
|
||||
if ( $this->posts_list ) {
|
||||
$ids = array();
|
||||
foreach ( $this->posts_list as $post ) {
|
||||
$ids[] = $post->ID;
|
||||
}
|
||||
|
||||
// Set new args.
|
||||
$args = array(
|
||||
'post__in' => $ids,
|
||||
);
|
||||
|
||||
// Filter args.
|
||||
$args = $this->query_filter_args( $args );
|
||||
|
||||
$the_query = new WP_Query( $args );
|
||||
|
||||
// Rewrite posts.
|
||||
$this->posts_list = $the_query->posts;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set custom args.
|
||||
*
|
||||
* @param array $args The query args.
|
||||
*/
|
||||
public function query_filter_args( $args = array() ) {
|
||||
// Post offset.
|
||||
$args['offset'] = $this->offset;
|
||||
|
||||
// Post order.
|
||||
$args['order'] = $this->order;
|
||||
$args['orderby'] = $this->orderby;
|
||||
|
||||
$type_post_views = cnvs_post_views_enabled();
|
||||
|
||||
// Post Views.
|
||||
if ( $type_post_views && ( 'views' === $this->orderby || 'post_views' === $this->orderby ) ) {
|
||||
$args['orderby'] = $type_post_views;
|
||||
// Don't hide posts without views.
|
||||
$args['views_query']['hide_empty'] = false;
|
||||
}
|
||||
|
||||
// Time Frame.
|
||||
if ( $this->time_frame ) {
|
||||
$args['date_query'] = array(
|
||||
array(
|
||||
'column' => 'post_date_gmt',
|
||||
'after' => $this->time_frame . ' ago',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return $args;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Posts by filters
|
||||
*/
|
||||
public function get_posts_by_filters() {
|
||||
|
||||
$args = array();
|
||||
|
||||
// Count.
|
||||
$args['posts_per_page'] = $this->args['count'];
|
||||
|
||||
// Filter by posts.
|
||||
if ( $this->ids ) {
|
||||
$ids = explode( ',', $this->ids );
|
||||
|
||||
$args['post__in'] = array_map( 'trim', $ids );
|
||||
}
|
||||
|
||||
// Filter by categories.
|
||||
if ( $this->cats ) {
|
||||
$cats = str_replace( ' ', '', $this->cats );
|
||||
|
||||
$args['category_name'] = $cats;
|
||||
}
|
||||
|
||||
// Filter by tags.
|
||||
if ( $this->tags ) {
|
||||
$tags = str_replace( ' ', '', $this->tags );
|
||||
|
||||
$args['tag'] = $tags;
|
||||
}
|
||||
|
||||
// Result.
|
||||
$this->query_get_posts( $args );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Related By Tags
|
||||
*/
|
||||
public function get_output_type_tags() {
|
||||
if ( $this->need_posts_count <= 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get Tags.
|
||||
$tags = get_the_terms( $this->args['post_id'], 'post_tag' );
|
||||
|
||||
if ( ! is_wp_error( $tags ) && ! empty( $tags ) ) {
|
||||
|
||||
if ( 'video' === get_post_type( $this->args['post_id'] ) ) {
|
||||
$terms_array = array();
|
||||
$tax_data = array();
|
||||
|
||||
// Terms array.
|
||||
foreach ( $tags as $post_term ) {
|
||||
$terms_array[ $post_term->taxonomy ][] = $post_term->term_id;
|
||||
}
|
||||
|
||||
// Tax data.
|
||||
foreach ( $terms_array as $p_tax => $p_terms ) {
|
||||
|
||||
if ( is_array( $p_terms ) ) {
|
||||
$terms_array[ $p_tax ] = array_unique( $terms_array[ $p_tax ] );
|
||||
}
|
||||
|
||||
$tax_data[] = array(
|
||||
'taxonomy' => $p_tax,
|
||||
'field' => 'id',
|
||||
'terms' => $terms_array[ $p_tax ],
|
||||
);
|
||||
}
|
||||
|
||||
// Query.
|
||||
if ( ! empty( $tax_data ) ) {
|
||||
$args = array(
|
||||
'post__not_in' => $this->exclude_posts,
|
||||
'posts_per_page' => $this->need_posts_count,
|
||||
'post_type' => $this->post_type,
|
||||
'tax_query' => array(
|
||||
'relation' => 'OR',
|
||||
),
|
||||
);
|
||||
|
||||
$args['tax_query'] = array_merge( $args['tax_query'], $tax_data );
|
||||
|
||||
// Result.
|
||||
$this->query_get_posts( $args );
|
||||
}
|
||||
} else {
|
||||
// Tags ID's.
|
||||
$tag_ids = array();
|
||||
foreach ( $tags as $individual_tag ) {
|
||||
$tag_ids[] = $individual_tag->term_id;
|
||||
}
|
||||
|
||||
// Query.
|
||||
$args = array(
|
||||
'tag__in' => $tag_ids,
|
||||
'post__not_in' => $this->exclude_posts,
|
||||
'posts_per_page' => $this->need_posts_count,
|
||||
'post_type' => $this->post_type,
|
||||
);
|
||||
|
||||
// Result.
|
||||
$this->query_get_posts( $args );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Related By Current Term
|
||||
*/
|
||||
public function get_output_type_current_term() {
|
||||
if ( $this->need_posts_count <= 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Post terms.
|
||||
if ( ! empty( $this->post_terms ) ) {
|
||||
$terms_array = array();
|
||||
$tax_data = array();
|
||||
$exclude_parent = array();
|
||||
|
||||
// Terms array.
|
||||
foreach ( $this->post_terms as $post_term ) {
|
||||
if ( $post_term->parent ) {
|
||||
$exclude_parent[ $post_term->taxonomy ][] = $post_term->parent;
|
||||
}
|
||||
}
|
||||
|
||||
foreach ( $this->post_terms as $post_term ) {
|
||||
$exclude = isset( $exclude_parent[ $post_term->taxonomy ] ) ? $exclude_parent[ $post_term->taxonomy ] : array();
|
||||
|
||||
if ( ! in_array( $post_term->term_id, (array) $exclude, true ) ) {
|
||||
$terms_array[ $post_term->taxonomy ][] = $post_term->term_id;
|
||||
}
|
||||
}
|
||||
|
||||
// Tax data.
|
||||
foreach ( $terms_array as $p_tax => $p_terms ) {
|
||||
|
||||
if ( is_array( $p_terms ) ) {
|
||||
$terms_array[ $p_tax ] = array_unique( $terms_array[ $p_tax ] );
|
||||
}
|
||||
|
||||
$tax_data[] = array(
|
||||
'taxonomy' => $p_tax,
|
||||
'field' => 'id',
|
||||
'terms' => $terms_array[ $p_tax ],
|
||||
);
|
||||
}
|
||||
|
||||
// Query.
|
||||
if ( ! empty( $tax_data ) ) {
|
||||
$args = array(
|
||||
'post__not_in' => $this->exclude_posts,
|
||||
'posts_per_page' => $this->need_posts_count,
|
||||
'post_type' => $this->post_type,
|
||||
'tax_query' => array(
|
||||
'relation' => 'OR',
|
||||
),
|
||||
);
|
||||
|
||||
$args['tax_query'] = array_merge( $args['tax_query'], $tax_data );
|
||||
|
||||
// Result.
|
||||
$this->query_get_posts( $args );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get Related By Parent Term
|
||||
*/
|
||||
public function get_output_type_parent_term() {
|
||||
|
||||
if ( $this->need_posts_count <= 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Parent terms.
|
||||
if ( ! empty( $this->post_terms ) ) {
|
||||
$terms_array = array();
|
||||
$tax_data = array();
|
||||
|
||||
// Terms array.
|
||||
foreach ( $this->post_terms as $post_term ) {
|
||||
if ( 0 !== $post_term->parent ) {
|
||||
$terms_array[ $post_term->taxonomy ][] = $post_term->parent;
|
||||
}
|
||||
}
|
||||
|
||||
// Tax data.
|
||||
foreach ( $terms_array as $p_tax => $p_terms ) {
|
||||
if ( is_array( $p_terms ) ) {
|
||||
$terms_array[ $p_tax ] = array_unique( $terms_array[ $p_tax ] );
|
||||
}
|
||||
|
||||
$tax_data[] = array(
|
||||
'taxonomy' => $p_tax,
|
||||
'field' => 'id',
|
||||
'terms' => $terms_array[ $p_tax ],
|
||||
);
|
||||
}
|
||||
|
||||
// Query.
|
||||
if ( ! empty( $tax_data ) ) {
|
||||
$args = array(
|
||||
'post__not_in' => $this->exclude_posts,
|
||||
'posts_per_page' => $this->need_posts_count,
|
||||
'post_type' => $this->post_type,
|
||||
'tax_query' => array(
|
||||
'relation' => 'OR',
|
||||
),
|
||||
);
|
||||
|
||||
$args['tax_query'] = array_merge( $args['tax_query'], $tax_data );
|
||||
|
||||
// Result.
|
||||
$this->query_get_posts( $args );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Related By Post Type
|
||||
*/
|
||||
public function get_output_type_post_type() {
|
||||
if ( $this->need_posts_count <= 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Posts by Post type.
|
||||
$args = array(
|
||||
'post__not_in' => $this->exclude_posts,
|
||||
'posts_per_page' => $this->need_posts_count,
|
||||
'post_type' => $this->post_type,
|
||||
);
|
||||
|
||||
// Result.
|
||||
$this->query_get_posts( $args );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Post terms
|
||||
*
|
||||
* @param array $post_id Post ID.
|
||||
* @param array $exclude_tags Exclude post tags taxonomy. Optional.
|
||||
* @return array Post Terms.
|
||||
*/
|
||||
public function get_post_terms( $post_id, $exclude_tags = true ) {
|
||||
|
||||
// Get Taxonomies.
|
||||
$taxonomies = get_taxonomies( array(
|
||||
'public' => true,
|
||||
), 'names' );
|
||||
|
||||
if ( ! is_array( $taxonomies ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Exclude post tags.
|
||||
if ( $exclude_tags ) {
|
||||
if ( isset( $taxonomies['post_tag'] ) ) {
|
||||
unset( $taxonomies['post_tag'] );
|
||||
}
|
||||
}
|
||||
|
||||
// Add Post Terms.
|
||||
$post_terms = array();
|
||||
foreach ( $taxonomies as $tax_name => $tax_data ) {
|
||||
$tax_terms = get_the_terms( $post_id, $tax_name );
|
||||
|
||||
if ( is_array( $tax_terms ) && ! is_wp_error( $tax_terms ) ) {
|
||||
$post_terms = array_merge( $post_terms, $tax_terms );
|
||||
}
|
||||
}
|
||||
|
||||
return $post_terms;
|
||||
}
|
||||
|
||||
/**
|
||||
* Output posts
|
||||
*
|
||||
* @return array Related posts
|
||||
*/
|
||||
public function output() {
|
||||
|
||||
// Check Post ID.
|
||||
if ( intval( $this->args['post_id'] ) <= 0 ) {
|
||||
return array();
|
||||
}
|
||||
|
||||
// Get Related Posts.
|
||||
foreach ( $this->args['output_type'] as $related ) {
|
||||
switch ( $related ) {
|
||||
case 'posts':
|
||||
$this->get_posts_by_filters();
|
||||
break;
|
||||
case 'tags':
|
||||
$this->get_output_type_tags();
|
||||
break;
|
||||
case 'term':
|
||||
$this->get_output_type_current_term();
|
||||
break;
|
||||
case 'parent_term':
|
||||
$this->get_output_type_parent_term();
|
||||
break;
|
||||
case 'post_type':
|
||||
$this->get_output_type_post_type();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Posts process.
|
||||
$this->posts_process();
|
||||
|
||||
// Return posts.
|
||||
return $this->posts_list;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Related Posts
|
||||
*
|
||||
* @param array $args Related posts settings.
|
||||
*/
|
||||
function cnvs_get_related_posts( $args = array() ) {
|
||||
|
||||
// Create Related Posts Object.
|
||||
$related = new CNVS_Related_Posts_Snippet( $args );
|
||||
|
||||
return $related->output();
|
||||
}
|
||||
Reference in New Issue
Block a user