WP Gridbuilder Facets for BB Posts module (custom)

Filter a BB Posts module with WP Gridbuilder facets in a regular page (custom query)

BB Posts module set to custom query can be filtered by WPGB Facets as specified in this WPGB doc page (see Page Builders section), but it requires a bit of custom code to ensure compatibility between WPGB Facets and BB Posts module.

See custom code below (thanks to WP GridBuilder support for providing most of it).
WPGB Facets can also filter a BB Posts module set to main query in an Archive: demo here.
In an Archive with a BB Posts module and no WPGB facet, the grid layout is disturbed by WPGB and requires a JS fix: see below.

This method is obsolete since the new BB Add-on by WPGB (April 2022): see demo here

Test article 12

3 août 2019
Categories: Non classé FR
Event Date: 2022-01-01

Test article 11

3 août 2019
Categories: Test
Event Date: 2022-03-10

Test article 10

3 août 2019
Categories: Test, Test Child
Event Date: 2022-02-20

Test article 9

3 août 2019
Categories: Non classé FR

Test article 8

3 août 2019
Categories: Grid

Test article 7

3 août 2019
Categories: Grid, Test

Custom Code

Manually insert WPGB query shortcode (custom query only)
In an HTML module in the layout.

[wpgb_query id="wpgb-content"]

Force WPGB query shortcode to execute at the right time (PHP / custom query only)
Before BB Posts module renders.

add_action(
	'fl_builder_before_render_module',
	function( $module ) {

		if (
			! empty( $module->settings->html ) &&
			false !== strpos( $module->settings->html, '[wpgb_query' )
		) {
			$module->settings->html = do_shortcode( $module->settings->html );
		}
	}
);

Refresh BB grid after WPGB filtering (JS)
To fix equal heights… issues.

window.addEventListener( 'wpgb.loaded', onLoad );

function onLoad() {
    WP_Grid_Builder.on( 'init', onInit );
}

function onInit( wpgb ) {

    if ( ! wpgb.options.customContent || ! wpgb.facets ) {
        return;
    }

    if ( ! wpgb.element.closest( '.fl-post-grid, .fl-post-gallery' ) ) {
        return;
    }

    const { element } = wpgb;
    let equalHeights = false;

    wpgb.facets.on( 'refresh', () => equalHeights = element.querySelector( '.fl-post-grid-post[style*=height]' ) );
    wpgb.facets.on( 'appended', posts => {

        const children = equalHeights && element.querySelectorAll( '.fl-post-grid-post' );
        const masonry = window.Masonry && Masonry.data( element );

        posts.forEach( el => el.style.visibility = 'visible' );
        masonry && masonry.appended( posts );

        if ( window.imagesLoaded ) {
            imagesLoaded( element, () => reLayout( children, masonry ) );
        } else {
            reLayout( children, masonry );
        }

        requestAnimationFrame( () => window.jQuery && jQuery( window ).trigger( 'resize' ) );

    } );
}

function reLayout( elements, instance ) {

    elements && setHeights( elements );

    if ( ! instance ) {
        return;
    }

    instance.reloadItems();
    instance.layout();

}

function setHeights( elements ) {

    const heights = [];
    let maxHeight = '';

    elements.forEach( element => heights.push( element.offsetHeight ) );
    maxHeight = `${Math.max( ...heights )}px`;
    elements.forEach( element => element.style.height = maxHeight );

}

Display a loader (CSS)
Fade the grid during filtering and display a loader.

/* CSS Fade & Loader */

.wpgb-enabled.wpgb-loading {
    position: relative;
    display: flow-root;
}
.wpgb-enabled::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255, 0.8);
    opacity: 0;
    transition: all .3s ease-out;
    pointer-events: none;
}
.wpgb-enabled.wpgb-loading::before {
    opacity: 1;
}
.wpgb-enabled.wpgb-loading::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background: rgba(227,7,18, 1);
    border-radius: 50%;
    transition: box-shadow 200ms ease;
    -webkit-animation: rotateLoader infinite 1s linear;
                    animation: rotateLoader infinite 1s linear;
    box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.925), 0 -20px rgba(227,7,18, 0.8), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.675), 20px 0 rgba(227,7,18, 0.55), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.425), 0 20px rgba(227,7,18, 0.3), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.175), -20px 0 rgba(227,7,18, 0.05);
}

@-webkit-keyframes rotateLoader {
    0% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.925), 0 -20px rgba(227,7,18, 0.8), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.675), 20px 0 rgba(227,7,18, 0.55), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.425), 0 20px rgba(227,7,18, 0.3), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.175), -20px 0 rgba(227,7,18, 0.05);
    }
    12.5% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.05), 0 -20px rgba(227,7,18, 0.925), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.8), 20px 0 rgba(227,7,18, 0.675), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.55), 0 20px rgba(227,7,18, 0.425), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.3), -20px 0 rgba(227,7,18, 0.175);
    }
    25% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.175), 0 -20px rgba(227,7,18, 0.05), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.925), 20px 0 rgba(227,7,18, 0.8), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.675), 0 20px rgba(227,7,18, 0.55), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.425), -20px 0 rgba(227,7,18, 0.3);
    }
    37.5% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.3), 0 -20px rgba(227,7,18, 0.175), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.05), 20px 0 rgba(227,7,18, 0.925), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.8), 0 20px rgba(227,7,18, 0.675), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.55), -20px 0 rgba(227,7,18, 0.425);
    }
    50% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.425), 0 -20px rgba(227,7,18, 0.3), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.175), 20px 0 rgba(227,7,18, 0.05), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.925), 0 20px rgba(227,7,18, 0.8), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.675), -20px 0 rgba(227,7,18, 0.55);
    }
    62.5% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.55), 0 -20px rgba(227,7,18, 0.425), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.3), 20px 0 rgba(227,7,18, 0.175), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.05), 0 20px rgba(227,7,18, 0.925), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.8), -20px 0 rgba(227,7,18, 0.675);
    }
    75% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.675), 0 -20px rgba(227,7,18, 0.55), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.425), 20px 0 rgba(227,7,18, 0.3), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.175), 0 20px rgba(227,7,18, 0.05), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.925), -20px 0 rgba(227,7,18, 0.8);
    }
    87.5% {
        box-shadow: -14.1422712488px -14.1422712488px rgba(227,7,18, 0.8), 0 -20px rgba(227,7,18, 0.675), 14.1422712488px -14.1422712488px rgba(227,7,18, 0.55), 20px 0 rgba(227,7,18, 0.425), 14.1422712488px 14.1422712488px rgba(227,7,18, 0.3), 0 20px rgba(227,7,18, 0.175), -14.1422712488px 14.1422712488px rgba(227,7,18, 0.05), -20px 0 rgba(227,7,18, 0.925);
    }
}

/* Pagination */

.wpgb-pagination-facet {
    display: flex;
    justify-content: center;
}

Archive with a BB Posts module and no WPGB Facet: grid geometry fix (JS)
The grid layout is disturbed by WPGB and requires a JS fix on page load, and for Search & Filter if used on the grid.

// Fix on page load

window.addEventListener( 'DOMContentLoaded', () => document.querySelectorAll( '.wpgb-content[hidden]' ).forEach( el => el.remove() ) );

// Fix after S&F Ajax filter

jQuery(document).ready(function($) {
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    	console.log("ajax complete");
    	$('.wpgb-content[hidden]').remove();
    	return;
    });
});

WP Gridbuilder Facets for BB Posts module (custom)

Filter a BB Posts module with WP Gridbuilder facets in a regular page (custom query)

Test article 12

Test article 11

Test article 10

Test article 9

Test article 8

Test article 7

Custom Code

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box