There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-case-studies-feed {
padding-top: clamp(40px, 4vw, 60px);
padding-bottom: clamp(40px, 4vw, 60px);
.filters {
&__inner {
background-color: var(--background-color, var(--white)) !important;
}
}
.post-feed {
&__posts {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@include bp($xl) {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
.post-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@include bp($xl) {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
&__results {
.results-meta {
display: block;
text-align: right;
font-size: .875rem;
margin-bottom: 1rem;
}
.pagination {
transition-delay: .3s;
margin-top: 1rem;
@include bp($md) {
margin-top: 2rem;
}
@include bp($xl) {
margin-top: 4rem;
}
}
}
}
.nice-select {
border: none;
width: 100%;
background-color: var(--white);
display: flex;
align-items: center;
font-family: 'Source Sans 3';
font-size: 22px;
&-dropdown {
border-radius: 15px;
border: 2px solid var(--secondary);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width:100%;
z-index: 500;
}
}
.card-post {
&.d-flex {
flex-direction: column;
justify-content: center;
align-items: flex-start;
@include bp($md, true) {
min-height: rem-calc(150);
}
}
&__title {
padding-right: 3rem;
}
}
.is-page-one {
@include bp($md) {
& > * {
&:nth-child(1) {
grid-column: span 2;
}
}
}
@include bp($lg) {
& > * {
&:nth-child(1),
&:last-child {
grid-column: span 2;
}
}
}
@include bp($xl) {
& > * {
&:nth-child(1),
&:nth-child(10),
&:last-child {
grid-column: span 2;
}
}
}
}
.results:not(.is-page-one) {
@include bp($xl) {
& > * {
&:nth-child(1),
&:last-child {
grid-column: span 2;
}
}
}
}
}
class CaseStudiesFeed {
constructor(block) {
this.block = block;
this.init();
}
init() {
const feed = this.block.querySelector('[data-post-feed]');
const resultsElem = feed.querySelector('.results');
const resultsMeta = feed.querySelector('.results-meta');
const scrollHint = feed.querySelector('.filters__scroll-hint');
const filters = feed.querySelector('.filters__inner');
const totalPostsElem = feed.querySelector('.total-posts');
const niceSelects = this.block.querySelectorAll('select');
// console.log(niceSelects);
// on scroll hint, scroll the filters horizontally by 100px
if (scrollHint) {
scrollHint.addEventListener('click', () => {
filters.scrollBy({
left: 200,
behavior: 'smooth',
});
});
}
// if(typeof NiceSelect === 'undefined') {
niceSelects.forEach((select) => {
NiceSelect.bind(select);
});
// }
if (feed) {
feed.addEventListener('post-feed-pre-update', (data) => {
// scroll to top of block, but add offset of 100
const blockTop = this.block.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: blockTop - 350,
behavior: 'smooth',
});
// get dropdown
const dropdown = feed.querySelector('.btn--dropdown');
if (dropdown) {
dropdown.classList.remove('open');
}
});
feed.addEventListener('post-feed-update', (data) => {
// console.log(data.detail);
if (!data) {
return;
}
if (!data.detail && !data.detail.results) {
console.log('return early');
if(data.results){
resultsElem.innerHTML = data.results;
}
return;
}
console.log('return late');
const results = data.detail.results;
resultsElem.innerHTML = '';
results.forEach(result => {
resultsElem.innerHTML += result;
});
resultsElem.classList.remove('is-page-one');
totalPostsElem.innerHTML = data.detail.found_posts;
});
feed.addEventListener('post-feed-error', (data) => {
if(data.detail && data.detail.reason){
resultsElem.innerHTML = data.detail.reason;
}
});
}
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-case-studies-feed').forEach((block) => {
new CaseStudiesFeed(block);
});
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/case-studies-feed",
"title": "Case Studies Feed",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-case-studies-feed.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Post Feed",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/case-studies-feed/block-case-studies-feed.css", "nice-select"],
"viewScript": ["nice-select","case-studies-feed"]
}
This component is not currently used on any pages.
There are is no readme file with this component.