为引导创建自定义块

时间:2019-12-03 作者:sialfa

我在读tutorial 介绍如何为Gutenberg编辑器创建块。我想实现bootstrap 4网格,但我对如何继续有点困惑。谁能告诉我做这件事的正确方法是什么?我想我需要注册引导css和js文件,通常我会将它们集成到我的自定义主题中,所以我不确定如何继续这一部分。而且我对方块类型感到困惑。我是否需要为每个列大小以及bootstrap提供的行和容器注册单个块?请举例说明。

目前,在我的插件文件中,我只有几行代码:

<?php
/**
 * Plugin Name: BlockStrap
 * Version: 1.0
 */

class BlockStrap {

  public function __construct()
  {
    add_action( \'enqueue_block_editor_assets\', [$this, \'init\'] );
  }

  public function init()
  {
    wp_enqueue_script(
      \'bootstrap-blocks\',
      plugins_url( \'main.js\', __FILE__ ),
      [\'wp-blocks\']
    );
  }

}

new BlockStrap;

?>

1 个回复
最合适的回答,由SO网友:Anthony D 整理而成

而不是创建新的块来表示引导类。您应该像您通常所说的那样,将引导js和css文件排列在主题中。

一旦将引导添加到主题中,就可以简单地将引导css类分配给已经存在的Gutenberg块。如以下文章所示https://www.boldgrid.com/support/wordpress-tutorials/how-to-add-additional-css-classes-to-a-block-using-the-gutenberg-editor/

Wordpress v5.3引入了新的“组块”,它非常适合引导式页面布局。https://wordpress.org/support/wordpress-version/version-5-3/#expanded-design-flexibility

创建一个组块并为其提供一个引导类,例如(container、container fluid、row),您可以嵌套它们,这没有问题。然后给出组内的块,css类,如(col-sm-4等)。

一旦设置了基本布局,就可以将其保存到可重用的块中https://www.wpbeginner.com/beginners-guide/how-to-create-a-reusable-block-in-wordpress/

希望这有帮助!

相关推荐

将css附加到unction.php时出现白屏

当我附加下线代码时,我会看到白色屏幕,在控制台日志中,它会出现下线错误,我的浏览器是最新的密码body:not(.no-transition) #wrapper, .animsition-overlay { position: relative; opacity: 0; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 控制台日志错误JQMIGRATE:安装了Migrate,版本为1.4.