古腾堡编辑器的块样式

2019/02/24

WordPress编辑器中的每个块类型都可以有多个样式选项。某些块类型已经具有样式选项,如按钮和引号。

我将向您展示如何从块中添加和删除样式选项。

块样式允许编写者在没有任何代码的情况下轻松更改块的外观。编辑具有可用样式的块时,单击左上角的“变换”图标以更改样式。

以下是我的主题中可用于引用块的样式选项:

这是一个标准的块引用

这里可以加一些引文


这是一个很大的引用。它有一个CSS类“is-style-large”

这里是引文

从技术上讲,它们只是添加到块中的CSS类。通过使用“块样式”UI来预览和选择不同的样式,您的客户端将不需要记住特定的类名。

您可以将块样式添加到Gutenberg中的任何块类型:核心块和插件中的自定义块。查看底部的注释,找到块名称,以便将自定义样式附加到其中。

将脚本添加到编辑器

我们需要在您的主题或插件中创建一个JavaScript文件,并在块编辑器中加载它。您可以使用enqueue_block_editor_assets钩子将资源加载到块编辑器中。它与wp_enqueue_scripts将资源加载到站点前端的工作方式相同。

editor.js在目录中创建一个空文件/your-theme/assets/js/。然后将以下内容添加到主题的functions.php文件中:

/**
 * Gutenberg scripts and styles
 */
function be_gutenberg_scripts() {

	wp_enqueue_script(
		'be-editor', 
		get_stylesheet_directory_uri() . '/assets/js/editor.js', 
		array( 'wp-blocks', 'wp-dom' ), 
		filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );

添加块样式

我正在一个有两种标题的网站上工作。

在我的editor.js文件中,我添加了“Default”和“Alternate”样式选项:

wp.domReady( () => {

	wp.blocks.registerBlockStyle( 'core/heading', {
		name: 'default',
		label: 'Default',
		isDefault: true,
	} );

	wp.blocks.registerBlockStyle( 'core/heading', {
		name: 'alt',
		label: 'Alternate',
	} );

} );

选择样式时,会将一个类.is-style-{name}应用于块。所以在我的样式表中,它h2 { }具有我的默认样式并h2.is-style-alt { }具有我的替代样式。

为什么要注册默认样式?

块样式选择,您可以选择其中你想应用的风格,但不会让你取消选择一个你选择了一个样式后。如果只注册一个样式然后为块选择它,则无法取消选择该块样式选项并返回到默认样式。

我注册了一个名为“Default”或“Regular”的额外样式选项,但不为该样式选项添加任何特定样式。当用户为h2选择“默认”样式时,它使用h2 {}样式而不是更具体h2.is-style-default{ }

如果添加,isDefault: true则此样式将在尚未指定样式的块上标记为活动。

删除块样式

当在古滕贝格块编辑器按钮的造型,我通常不希望来与WordPress的标准样式选项:圆形,方形,和大纲。

您可以使用unregisterBlockStyle从块中删除现有块样式。将以下内容添加到上面描述的editor.js文件中:

wp.domReady( () => {
	wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
	wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
	wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
} );

我经常删除默认值,然后加载我自己的按钮样式选项:

wp.domReady( () => {
	wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
	wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
	wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );

	wp.blocks.registerBlockStyle( 'core/button', {
		name: 'default',
		label: 'Default',
		isDefault: true,
	});

	wp.blocks.registerBlockStyle( 'core/button', {
		name: 'full-width',
		label: 'Full Width',
	} );

} );

块名称列表

您需要知道整个块名称才能附加或删除样式。这是所有核心块的列表(不包括所有嵌入块):

  • core/paragraph
  • core/image
  • core/heading
  • core/gallery
  • core/list
  • core/quote
  • core/audio
  • core/cover
  • core/file
  • core/video
  • core/preformatted
  • core/code
  • core/freeform
  • core/html

  • core/pullquote
  • core/table
  • core/verse
  • core/button
  • core/columns
  • core/media-text
  • core/more
  • core/nextpage
  • core/separator
  • core/spacer
  • core/shortcode
  • core/archives
  • core/categories
  • core/latest-comments
  • core/latest-posts

找到一个块的名字

查找块名称的一种简单方法是在页面中插入块,然后打印出转义版本post_content以查看存储的内容。

我在ea_pp() 下面使用  (代码在这里),但你也可以使用  print_r()

/**
 * Display Post Blocks 
 *
 */
function ea_display_post_blocks() {
	global $post;
	ea_pp( esc_html( $post->post_content ) );
}
add_action( 'wp_footer', 'ea_display_post_blocks' );

发表评论

电子邮件地址不会被公开。 必填项已用*标注