Skip to the content.

Bloc

A few useful WordPress blocks and block options.

composer require lambry/bloc

Options

Extensions to core blocks for a little extra functionality.

Features

options

Custom properties

:root {
	--bloc-shift-up: -5rem;
	--bloc-shift-down: -5rem;
	--bloc-padding-sm: 1rem;
	--bloc-padding-md: 2.5rem;
	--bloc-padding-lg: 5rem;
	--bloc-max-width-sm: 30rem;
	--bloc-max-width-md: 40rem;
	--bloc-max-width-lg: 50rem;
	--bloc-animation-duration: 1s;
	--bloc-animation-distance: 1rem;
	--bloc-animation-easing: cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

Grid

Block to display content in a grid of rows and columns.

Features

grid

Custom properties

:root {
	--bloc-grid-gap: 2rem;
}

Slider

Block to display content in a slider, or carousel (i.e. a slider with multiple slides shown at once).

Features

slider

Custom properties

:root {
	--bloc-slider-gap: 2rem;
	--bloc-slider-speed: 250ms;
	--bloc-slider-theme: currentColor;
}

Posts

Block for fetching posts, pages and custom post types and displaying them in a grid, slider or accordion.

Features

With the posts block you could choose to show all fantasy books sorted by price that are less than $20, or properties that feature waterfront views, have 3 or more bedroom and are sorted by land size.

posts

Templates

You can override any aspect of the display by adding template files in a folder called bloc/posts/, the basic template heirarchy is:

Custom properties

:root {
	--bloc-posts-gap: 2rem;
	--bloc-posts-slider-speed: 500ms;
	--bloc-posts-slider-theme: currentColor;
	--bloc-posts-accordion-easing: cubic-bezier(0.46, 0.03, 0.52, 0.96);
	--bloc-posts-accordion-duration: 250ms;
}

Filters

<?php
// Filter to modify the main posts query arguments.
add_filter('postie/query', fn(array $args) => array_merge($args, ['author_name' => 'admin']));

// Filter to set the no results i.e empty message.
add_filter('postie/empty', function(string $message, string $display) {
    return __('Sorry, there were no matching results.');
}, 10, 2);