WordPress介绍了 块样式API 在第5.3版中,作为主题作者的功能,可以创建通过内置设计工具可以创建块自定义。但是,这通常是主题中未充分利用的功能。而且,当使用时,结果有时最好被变化或模式替换。
在本指南中,您将了解哪些块样式,何时使用它们以及如何从头开始构建它们。
什么是块样式?
从本质上讲,块风格不过是CSS课程。在引擎盖下,该类可以连接到块的输出以改变其设计。像其他任何类一样,主题作者可以将任何CSS属性和值附加到他们想要的。
开发人员可以为单个块注册任意数量的样式,WordPress将在编辑器中的块侧边栏面板中显示它们。然后,用户可以选择其所需样式,例如以下屏幕截图中显示的“圆形”设计:
总体而言,该功能仅仅是一个UI层面,可以在基于类的简单选择器上进行分层。
何时构建自定义块样式
一般的经验法则是,当您用尽其他选项并需要依靠自定义CSS时,应使用块样式。开箱即用,大多数核心块都支持一系列设计工具,这些工具通常映射到现有的CSS属性。随着时间的流逝,这导致了需要自定义块样式的情况。
如果您想给图像块一个固体边框,则无需为此一种自定义样式。WordPress已经具有边界内置选项,如以下屏幕截图所示:
主题作者也可以使用theme.json
为每个可用选项定义默认值。
如果您想给边界“手绘”外观怎么办?WordPress没有任何处理该方案的选择。它需要一些自定义CSS。这使其成为自定义块样式的好候选人。
这也是主题发展最令人兴奋的事情之一。尽管WordPress取得了长足的进步来创建标准,但在这些标准之内,创造力仍然可以蓬勃发展。
注册自定义块样式
对于本教程,您将构建一种自定义块样式,该样式为图像块提供了“手绘”边框,如前一节中的屏幕截图所示。这样做的第一步是使用 register_block_style()
PHP功能。
以下代码片段快速查看该功能及其参数:
register_block_style(
$block_name,
$style_properties
);
这$block_name
参数应为块类型的名称(例如,core/image
)。这$style_properties
参数是可以传递以配置样式的参数的关联数组:
- 姓名:((必需的)一种唯一的标识符,用于生成CSS类(例如,
is-style-{name}
) - 标签:((必需的)该风格的国际化,可读的标签
- inline_style: 使用该样式时要打印的内联CSS
- style_handle: 注册样式表的手柄以招募样式
- is_default: 是否应选择样式作为块的默认值
注意style_handle
目前有一个错误 它仅在编辑器中加入样式表,但不在前端。目前,不建议使用它的使用。
要注册自定义样式,请在主题中创建回调函数functions.php
提交并将其添加到init
动作钩。以下代码记录hand-drawn
块样式:
add_action( 'init', 'themeslug_register_block_styles' );
function themeslug_register_block_styles() {
register_block_style( 'core/image', array(
'name' => 'hand-drawn',
'label' => __( 'Hand-Drawn', 'themeslug' ),
'inline_style' => '.wp-block-image.is-style-hand-drawn img {
border: 2px solid currentColor;
overflow: hidden;
box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}'
) );
}
主题作者还可以通过JavaScript注册块样式。但是,可能几乎没有必要的情况。块编辑器手册有一个 参考页 这描述了如何做到这一点。这些参数匹配其PHP对应物,因此该技术本质上是相同的 – 它仅以不同的语言。
分别加载样式
使用inline_style
对于一次性风格而言,PHP内部的选项和编写CSS是可以的,但是从长远来看,它可能会变得混乱并成为管理的头痛。对于大多数情况,您将需要在CSS文件中管理CSS,并让WordPress自动内联。
首先,删除inline_style
来自您前面定义的函数的属性,如下所示:
add_action( 'init', 'themeslug_register_block_styles' );
function themeslug_register_block_styles() {
register_block_style( 'core/image', array(
'name' => 'hand-drawn',
'label' => __( 'Hand-Drawn', 'themeslug' )
) );
}
以上将注册块样式,但它将不再附上任何自定义CSS。
现在,您将创建一个特定于块的样式表。WordPress只有在使用该块时才加载其内容并在CSS上进行内联。有关每个块样式表的更多信息,请访问 利用主题。。
对于此练习,假设您有一个空的assets/blocks/core-image.css
该图像块容纳自定义CSS。仅在使用该块时加载它,请将以下代码添加到您的functions.php
文件:
add_action( 'init', 'themeslug_enqueue_block_styles' );
function themeslug_enqueue_block_styles() {
wp_enqueue_block_style( 'core/image', array(
'handle' => 'themeslug-block-image',
'src' => get_theme_file_uri( 'assets/blocks/core-image.css' ),
'path' => get_theme_file_path( 'assets/blocks/core-image.css' )
) );
}
然后,将以下CSS添加到core-image.css
文件:
.wp-block-image.is-style-hand-drawn img {
border: 2px solid currentColor;
overflow: hidden;
box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
}
取消注册的块样式
在某些情况下,您可能需要删除注册的块样式,例如隐藏核心选项或删除由父主题或插件注册的内容。在大多数情况下,您将使用 unregister_block_style()
为此功能。
假设您正在为注册手工画样式的主题构建一个孩子主题。您只需要知道块类型(core/image
)和样式名称(hand-drawn
)。以下PHP代码将取消注册:
add_action( 'init', 'themeslug_unregister_block_styles', 15 );
function themeslug_unregister_block_styles() {
unregister_block_style( 'core/image', 'hand-drawn' );
}
不注册块样式时有一个警告:如果通过JavaScript注册该样式,则还必须通过JavaScript进行注册。所有内置核心块样式都需要此方法。
假设自定义block-editor.js
位于主题的文件assets/js
文件夹,以下代码片段中所示插入JavaScript:
add_action( 'enqueue_block_editor_assets', 'themeslug_block_editor_assets' );
function themeslug_block_editor_assets() {
wp_enqueue_script(
'themeslug-block-editor',
get_theme_file_uri( 'assets/js/block-editor.js' ),
array(
'wp-blocks',
'wp-dom-ready',
'wp-edit-post'
)
);
}
将以下代码添加到您的block-editor.js
文件以解开核心rounded
图像块上的样式:
wp.domReady( function () {
wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );
} );
每个块多种样式
块样式功能的经常补充是允许用户选择多种样式。当前在WordPress中不支持这。在某些情况下,这是有道理的。另外,在引擎盖下,块样式不过是CSS课程,大多数开发人员都知道,您可以添加到元素的类中没有限制。
但是,实际上,多种块样式可以很容易地相互冲突。
通常,可以组合的块样式是简单的自定义,可以更好地降级到内置的设计工具。WordPress块现在支持适合这种基本需求的广泛的CSS功能。而且,当需要组合这些基础知识时,也许块变化将是一个更好的选择。
有一个 正在进行的对话 每个街区多种样式。这可能受到支持,或以某种方式扩展该功能以在将来更具灵活性。
道具 @BCWORKZ 和 @Mburridge 用于审查和反馈。照片由 @Kharisblank,@Stephendumba1,和 @Roytanck 来自 WordPress照片目录。