在guttenberg的其他css类输入框中将类显示为下拉菜单

时间:2019-03-25 作者:Botond Vajna

我在Gutenberg编辑器中为这些框设置了一些css类,我可以在额外的css输入框中键入它们,这对我来说不是问题,但对客户端来说并不方便,因为他不知道,而且忘记了它们。有没有一种方法可以使用一个包含所有自定义类的下拉列表,而不是一个简单的输入字段?

非常感谢。

2 个回复
最合适的回答,由SO网友:bueltge 整理而成

您应该添加一个自定义插件。这需要一个PHP主文件,其中包括注册一个JavaScript文件。下面的源代码应生成插件。您还可以在下面的问题中找到可用的解决方案。

PHP部件

add_action( \'enqueue_block_editor_assets\', \'my_gutenberg_scripts\' );
function my_gutenberg_scripts() {

    wp_register_script(
        \'my-editor-enhancement\',
        plugins_url( \'editor.js\', __FILE__ ),
        array( \'wp-blocks\' ), // Necessary script handles.
        filemtime( plugins_url( \'editor.js\', __FILE__ ) ),
        true
    );

    wp_enqueue_script( \'my-editor-enhancement\' );
}
在我们的示例中,这是editor.js, 我们在上面排队。该示例仅添加一个段落和两种不同的标题类型。

wp.domReady( () => {

    wp.blocks.registerBlockStyle( \'core/paragraph\', {
        name: \'blue-paragraph\',
        label: \'Blue Paragraph\'
    } );

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

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

} );
如果您添加isDefault: true, 然后,此样式将在尚未指定样式的可见块上标记为活动。

核心模块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

    • 删除块

      JavaScript部分

       wp.domReady( () => {
          wp.blocks.unregisterBlockStyle( \'core/button\', \'default\' );
          wp.blocks.unregisterBlockStyle( \'core/button\', \'outline\' );
          wp.blocks.unregisterBlockStyle( \'core/button\', \'squared\' );
      } );
      
      问题自动Block Style Examplegreat post.

    SO网友:Botond Vajna

    最后,我在这里找到了另一种解决方案:https://www.billerickson.net/block-styles-in-gutenberg/