让代码更简单

将 CSS 添加到 Gutenberg 编辑器和块

重要:本文最后更新于2022-11-03 16:25:39,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

自从用上Gutenberg 编辑器后就再也回不去了,使用确实方便,而且对代码复制粘贴非常友好,不过Gutenberg 编辑器使用的是默认的样式,如果你的前端也是使用的 Gutenberg 编辑器样式,那么你前端显示的内容就是你编辑的内容,所见即所得。可惜我的不是,为了让Gutenberg 编辑器实现所见即所得的功能,我将自己的css添加到了Gutenberg 编辑器中。

如果你的wordpress主题是极简主题,那么你的网站和 Gutenberg 中的内容样式可能匹配 90%。但如果不是,Gutenberg 编辑器中显示的样式可能会与你网站前端的样式有所区别,本文将教大家将前端的样式添加到 Gutenberg 编辑器中,实现所见即所得。

如何将自定义 CSS 添加到古腾堡 

将下面的代码添加到当前的主题functions.php文件中。

add_action( 'after_setup_theme', 'misha_gutenberg_css' );
function misha_gutenberg_css(){
	add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
	add_editor_style( 'style-editor.css' ); // tries to include style-editor.css directly from your theme folder
}

在这种情况下,style-editor.css必须位于当前主题目录中。但也可以将此文件放在任何主题子文件夹中,例如gutenberg/style-editor.css ,在这种情况下,你的add_editor_style()函数将如下所示:

add_editor_style( 'gutenberg/style-editor.css' );

如果你的样式表已添加到网站,你可以通过添加类似的内容进行快速测试body{ background: #000 }

更改古腾堡内容宽度 

将 CSS 文件添加到 Gutenberg 后,我们可以进行一些自定义。比如让前端内容宽度与Gutenberg 编辑器的内容宽度一致。

实际上,你要做的就是更改max-width块的 CSS 属性:

.wp-block{
    max-width: 800px;
}
.wp-block[data-align=wide] { /* it can be "data-align=full" and also "right", "left" and "center" */
    max-width: 1228px;
}

你可能已经注意到,块可能具有不同的data-align属性。以下是完整列表:centerrightleft和。下面的例子:widefull

将 CSS 添加到 Gutenberg 编辑器和块
将 CSS 添加到 Gutenberg 编辑器和块

当我单击按钮时,data-align="wide"属性被添加到块中。我们可以为这个块状态添加特定的 CSS。

如何包含谷歌字体? 

好了,这里没什么特别的,首先可以在我们之前添加@import的样式表中使用。

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

但也可以以这种方式使用它。但是在这种情况下不要忘记add_theme_support( 'editor-styles' );,你不必添加两次,只要确保这条命令存在。

add_editor_style( 'https://fonts.googleapis.com/css?family=Roboto+Slab' );

用于帖子标题和 H2、H3 等的 CSS 

对于帖子标题,你可以使用此选择器:

.editor-post-title__block .editor-post-title__input{
	font-family: 'Roboto Slab';
	font-size: 40px;
}

如果您想在 h2、h3、h4 等标题中添加一些 CSS,可以使用以下规则:

h2, h3, h4{
	font-family: 'Roboto Slab'; /* easy breezy ;D */
}

默认块的样式 

您可以为某些块添加 CSS,.wp-block-{name}例如使用此选择器用于图像块,选择器将为.wp-block-image,但请注意,具有此选择器的元素将在.wp-block元素内部!

.wp-block .wp-block-image{
	/* some CSS rules here */
}

但你也可以使用:

.wp-block[data-type="core/image"]{
	/* some CSS rules here */
}

自定义块的样式 

当你在 Gutenberg 中注册自定义块时,还可以选择包含专门针对该特定块的 CSS 样式。

除非你正在创建自定义插件,否则此步骤不是必需的,因为你可以将所有样式放入style-editor.css文件中。

插件中使用如下

add_action( 'enqueue_block_editor_assets', 'misha_custom_block' );
function misha_custom_block(){
	// wp_enqueue_script() with your block JS goes first...
	
	// block css
	wp_enqueue_style(
		'misha-block-css',
		get_stylesheet_directory_uri() . '/inc/block-misha.css',
		array( 'wp-edit-blocks' ),
		time()
	);
}

请看第 4 个函数参数time()——我们需要这个参数,因为在我们的开发工作中,我们不希望 CSS 被缓存。但是有一个更好的解决方案,用filetime()函数替换时间,它不会每秒更新缓存,但前提是文件已更改。

filemtime( dirname( __FILE__ ) . '/inc/block-misha.css' )

选定块的 CSS 

一旦你编辑了任何 Gutenberg 块,一个特定的 CSS 类将被添加到它  .is-selected ,你可以使用此选择器为块添加选中样式,如下图所示

将 CSS 添加到 Gutenberg 编辑器和块
将 CSS 添加到 Gutenberg 编辑器和块

感觉很棒!可以赞赏支持我哟~

0 打赏

评论 (0)

登录后评论
QQ咨询 邮件咨询 狗哥推荐