Post Feed
There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-post-feed {
border-top: 1px solid $border-grey;
border-bottom: none !important;
.post-feed {
&__posts {
display: grid;
gap: var(--bs-gutter-x);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@include bp($lg){
grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
}
}
&__results{
.results-meta{
display: block;
text-align: right;
font-size: .875rem;
margin-bottom: 1rem;
color: var(--text-color);
&[data-found="1"]{
.plural{
display: none;
}
}
}
// .post-card{
// @for $i from 1 through 20 {
// &:nth-child(#{$i}) {
// transition-delay: calc((0.1s * #{$i}));
// }
// }
// }
.pagination{
transition-delay: .3s;
margin-top: rem-calc(50);
padding-bottom: 0;
@include bp($md){
margin-top: 2rem;
}
@include bp($xl){
margin-top: 4rem;
}
.pagination-pages {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
svg {
path {
stroke: var(--text-color);
}
}
.page-numbers,
.pagination-nav {
padding: 8px 13px;
color: var(--text-color);
text-decoration: none;
transition: background-color 0.3s ease;
margin: 0 5px;
&.current, &:hover {
background-color: $secondary-light-green;
color: $primary;
}
}
}
}
}
&.has-primary-background-color, .intelligence-feed {
border-top: 0;
@include bp($md) {
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
div[data-post-feed] .filters__options, div[data-post-feed] .filters__search, div[data-post-feed] .filters__mobile-toggle {
background-color: #083246;
color: $white;
}
div[data-post-feed] .filters__options select, div[data-post-feed] .filters__search select {
border-bottom: 1px solid $white;
background-image: url('/wp-content/themes/moore-global/assets/icons/select-dropdown-white.svg');
option {
color: $white;
background-color: #083246;
&:hover {
background-color: darken(#083246, 5%);
}
}
}
div[data-post-feed] .filters__search input {
background-color: $primary;
// background-image: url('/wp-content/themes/moore-global/assets/icons/search.svg');
border-color: $primary;
color: $white;
// Remove autofill styling for all browsers
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $primary inset !important;
-webkit-text-fill-color: $white !important;
transition: background-color 5000s ease-in-out 0s;
}
}
.post-card__image {
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px;
background-color: rgba(2, 33, 46, 0.4);
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, rgba(2, 33, 46, 0) 0%, #02212E 100%);
}
}
.post-card__row, .results-meta, .post-feed__posts {
color: $white;
}
div[data-post-feed] .filters__search-button svg line, div[data-post-feed] .filters__search-button svg circle,div[data-post-feed] .filters__filter-button svg line {
stroke: $white;
}
div[data-post-feed] .filters__search-button {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.post-card {
&:hover {
.post-card__title {
color: $white;
}
}
}
.pagination-nav {
&:hover {
svg {
path {
stroke: $primary;
}
}
}
}
.pagination {
svg {
path {
stroke: $white;
}
}
.page-numbers,
.pagination-nav {
color: $white;
background-color: #033042;
display: flex;
justify-content: center;
align-items: center;
&.current, &:hover {
color: $primary;
}
}
}
}
}
class PostFeed {
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');
// on scroll hint, scroll the filters horizontally by 100px
if (scrollHint) {
scrollHint.addEventListener('click', () => {
filters.scrollBy({
left: 200,
behavior: 'smooth',
});
});
}
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 - 100,
behavior: 'smooth',
});
});
feed.addEventListener('post-feed-update', (data) => {
if (!data) {
return;
}
if (!data.detail && !data.detail.results) {
if(data.detail.data){
resultsElem.innerHTML = data.detail.data;
}
return;
}
const results = data.detail.results;
resultsElem.innerHTML = '';
results.forEach(result => {
resultsElem.innerHTML += result;
});
if (resultsMeta) {
resultsMeta.dataset.found = data.detail.found_posts;
const currentPage = resultsMeta.querySelector('.current-page');
if (currentPage) {
currentPage.innerHTML = data.detail.page;
}
const totalPages = resultsMeta.querySelector('.total-pages');
if (totalPages) {
totalPages.innerHTML = data.detail.pages;
}
const total = resultsMeta.querySelector('.total');
if (total) {
total.innerHTML = data.detail.found_posts;
}
}
});
feed.addEventListener('post-feed-error', (data) => {
if(data.detail && data.detail.reason){
resultsElem.innerHTML = data.detail.reason;
}
const total = resultsMeta.querySelector('.total');
if (total) {
total.innerHTML = '0';
}
});
this.toggleFilters();
this.toggleSearch();
}
}
toggleFilters() {
const filterButton = this.block.querySelector('.filters__filter-button');
const filtersOptions = this.block.querySelector('.filters__options');
const filterClose = this.block.querySelector('.filters__title--filter span');
if(filterButton){
filterButton.addEventListener('click', (e) => {
e.preventDefault();
filtersOptions.classList.add('filters__options--open');
});
filterClose.addEventListener('click', (e) => {
e.preventDefault();
filtersOptions.classList.remove('filters__options--open');
});
}
}
toggleSearch() {
const searchButton = this.block.querySelector('.filters__search-button');
const filtersSearch = this.block.querySelector('.filters__search');
const searchClose = this.block.querySelector('.filters__title--search span');
searchButton.addEventListener('click', (e) => {
e.preventDefault();
filtersSearch.classList.add('filters__search--open');
});
searchClose.addEventListener('click', (e) => {
e.preventDefault();
filtersSearch.classList.remove('filters__search--open');
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-post-feed').forEach((block) => {
new PostFeed(block);
});
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/post-feed",
"title": "Post Feed",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-post-feed.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"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/post-feed/block-post-feed.css", "base-blog"],
"viewScript": ["post-feed"]
}
Page Title
Page Type
Page URL
There are no readme files with this component.