README

一些有用的WordPress块和块选项。

composer require lambry/bloc

选项

扩展核心块以增加额外功能。

功能

• Shift：选择将块上移或下移。
• 填充：为块的任何一边添加填充。
• 最大宽度：限制块的最大宽度。
• 动画进入：当块滚动到视图中时淡入。
• 限制：仅显示特定用户角色的块。
• 可见性：隐藏特定屏幕尺寸的块。

自定义属性

: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);
}

网格

以行和列的网格显示内容的块。

功能

• 显示任何数量的项目。
• 选择在不同屏幕尺寸下显示的列数。
• 添加或删除列之间的间距。
• 选择单个单元格应跨越的列数和行数。

自定义属性

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

滑块

以滑块或旋转木马（即一次显示多个幻灯片）显示内容的块。

功能

• 显示任何数量的幻灯片。
• 选择在不同屏幕尺寸下一次显示的幻灯片数量。
• 可选地添加每个幻灯片的背景图片。
• 可选地链接整个幻灯片。
• 选择滑动或淡入效果。
• 循环幻灯片以创建无限滑块。
• 显示或隐藏导航箭头。
• 显示或隐藏分页（即点）。
• 添加或删除幻灯片之间的间距。

自定义属性

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

文章

用于获取文章、页面和自定义文章类型并将它们以网格、滑块或手风琴的形式显示的块。

功能

• 获取任何文章、页面或自定义文章类型。
• 按任何分类、术语和自定义字段筛选。
• 可选地偏移文章或包含置顶文章。
• 选择特定页面，或显示这些页面的所有子页面。
• 按ID、发布日期、修改日期、标题、slug、菜单顺序、随机或自定义字段排序。
• 选择在不同屏幕尺寸下每行显示的结果数以及显示的总结果数。
• 仅滑块选项包括：自动播放、循环、导航和分页。
• 仅手风琴选项包括：打开第一个项目并且一次打开一个。

使用文章块，您可以选择显示所有定价低于20美元的奇幻书籍，或者具有海滨景观、3个或更多卧室且按土地面积排序的房产。

模板

您可以通过在名为bloc/posts/的文件夹中添加模板文件来覆盖显示的任何方面，基本的模板层次结构如下：

• grid.php、slider.php和accordion.php将覆盖这些显示类型的主模板/包装。
• grid-item.php、slider-item.php和accordion-item.php将覆盖这些显示类型中单个文章的模板/显示。
• grid-item-{post-type}.php、slider-item-{post-type}.php和accordion-item-{post-type}.php将按文章类型覆盖模板，例如grid-item-post.php将覆盖文章的grid-item.php，而slider-item-page.php将覆盖页面的slider-item.php。

自定义属性

: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;
}

过滤器

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

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