PHPackages                             lambry/bloc - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. lambry/bloc

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

lambry/bloc
===========

A few useful WordPress blocks and block options.

0.1.0(3y ago)11GPL-2.0-or-laterJavaScriptPHP 8.0

Since May 29Pushed 3y ago1 watchersCompare

[ Source](https://github.com/lambry/bloc)[ Packagist](https://packagist.org/packages/lambry/bloc)[ Docs](https://github.com/lambry/bloc)[ RSS](/packages/lambry-bloc/feed)WikiDiscussions master Synced 1w ago

READMEChangelogDependencies (1)Versions (2)Used By (0)

Bloc
====

[](#bloc)

A few useful WordPress blocks and block options.

`composer require lambry/bloc`

Options
-------

[](#options)

Extensions to core blocks for a little extra functionality.

### Features

[](#features)

- Shift: Choose to shift the block up or down.
- Padding: Add padding to any and all sides of a block.
- Max width: Limit the block to maximum width.
- Animate in: Fade in a block when it's scrolled into view.
- Retrict to: Only show blocks for certain user roles.
- Visibility: Hide blocks for certain screen sizes.

[![options](images/options.jpg)](images/options.jpg)

### Custom properties

[](#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
----

[](#grid)

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

### Features

[](#features-1)

- Display any number of items.
- Choose the number columns to show at different screen sizes.
- Add or remove spacing between columns.
- Choose the number of columns and rows any individual cell should span.

[![grid](images/grid.png)](images/grid.png)

### Custom properties

[](#custom-properties-1)

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

Slider
------

[](#slider)

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

### Features

[](#features-2)

- Display any number of slides.
- Choose the number slides to show a once at different screen sizes.
- Optionally add a background image to each slide.
- Optionally link the entire slide.
- Choose between slide and fade effects.
- Loop slides for an inifitnte slider.
- Show or hide the navigation arrows.
- Show or hide the pagination i.e. bullets.
- Add or remove spacing between slides.

[![slider](images/slider.jpg)](images/slider.jpg)

### Custom properties

[](#custom-properties-2)

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

Posts
-----

[](#posts)

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

### Features

[](#features-3)

- Fetch any posts, pages or custom post types.
- Filter by any taxonomies, terms and custom fields.
- Optionally offset posts or include sticky posts.
- Choose specific pages, or show all subpages for said pages.
- Order by ID, published date, modified date, title, slug, menu order, random or even a custom field.
- Choose the number of results to display per row at different screen sizes, as well the total number of results to show.
- Slider only options include: autoplay, loop, navigation and pagination.
- Accordion only options include: open first item and open one at a time.

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](images/posts.jpg)](images/posts.jpg)

### Templates

[](#templates)

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

- `grid.php`, `slider.php` and `accordion.php` will override the main template/wrapper for those display types.
- `grid-item.php`, `slider-item.php` and `accordion-item.php` will override the template/display for individual posts within those display types.
- `grid-item-{post-type}.php`, `slider-item-{post-type}.php` and `accordion-item-{post-type}.php` will override the template by post type, for example `grid-item-post.php` will override `grid-item.php` for posts and `slider-item-page.php` would override `slider-item.php` for pages.

### Custom properties

[](#custom-properties-3)

```
: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

[](#filters)

```