如何在Gutemberg编辑器中允许您的自定义小部件作为块

时间:2019-06-12 作者:J.BizMai

我想在Gutenberg中添加一个小部件作为块,如下所示:

enter image description here

有没有一种方法可以代替使用短代码?

1 个回复
SO网友:J.BizMai

我找到了解决方案herehere.

我的OOP代码:

Block_Type

abstract Class Block_Type
{
    public $handle;
    public $handle_editor;
    public $handle_block;
    private $editor_js_file;
    public $editor_js_file_path;
    private $editor_css_file;
    public $editor_css_file_path;
    private $css_file;
    public $css_file_path;

    public function __construct( $handle, $editor_js_file_path = null, $editor_css_file_path = null, $css_file_path = null ) {
        $this->handle = "h4a-" . $handle;
        $this->handle_editor = $this->handle . "-editor";
        $this->handle_block = $this->handle . "-block";
        $this->editor_js_file_path  = ( !empty( $editor_js_file_path ) )  ?  $editor_js_file_path : $this->getDir() . "/js/index.js";
        $this->editor_js_file       = basename( $this->editor_js_file_path, ".js");
        $this->editor_css_file_path = ( !empty( $editor_css_file_path ) ) ? $editor_css_file_path : $this->getDir() . "/css/editor.css";
        $this->editor_css_file      = basename( $this->editor_css_file_path, ".css");
        $this->css_file_path        = ( !empty( $css_file_path ) )        ? $css_file_path        : $this->getDir() . "/css/style.css";
        $this->css_file             = basename( $this->css_file_path, ".css");
        $this->register_script_editor();
        $this->register_style_editor();
        $this->register_style();
        $this->register_block_type();
    }

    protected function register_script_editor()
    {
        wp_register_script(
            $this->handle_editor,
            plugins_url( $this->editor_js_file, __FILE__ ),
            array(
                \'wp-blocks\',
                \'wp-i18n\',
                \'wp-element\',
            ),
            filemtime( $this->editor_js_file_path )
        );
    }

    protected function register_style_editor()
    {
        wp_register_style(
            $this->handle_editor,
            plugins_url( $this->editor_css_file, __FILE__ ),
            array(),
            filemtime( $this->editor_css_file_path )
        );
    }

    protected function register_style()
    {
        wp_register_style(
            $this->handle_block,
            plugins_url( $this->css_file, __FILE__ ),
            array(),
            filemtime( $this->css_file_path )
        );
    }

    protected function register_block_type()
    {
        register_block_type( \'h4a/\' . $this->handle, array(
            \'editor_script\' => $this->handle_editor,
            \'editor_style\'  => $this->handle_editor,
            \'style\'         => $this->handle_block,
        ) );
    }

    private function getDir() {
        return dirname((new ReflectionClass(static::class))->getFileName());
    }
} 
My_Block_Type

class My_Block_Type extends Block_Type
{
    public function __construct()
    {
        $handle = "my-block-type";
        parent::__construct( $handle );
    }
}

php to init

include_once "Block_Type.php";
include_once "My_Block_Type.php";
public function create_block_types(){
    new My_Block_Type();
}
add_action( "init", "create_block_types", 1 );

相关推荐

My widgets do not save

每次我保存我的小部件并离开页面时,我的小部件都会消失。侧边栏已完全清空,不会保存任何更改。控制台或PHP日志中没有任何错误。如果我将小部件直接复制并保存在数据库中widgets_text, 它们将被显示,但我仍然无法在侧边栏中添加或删除任何内容。这只发生在我的右侧边栏上,左侧边栏工作正常,但它们都以相同的方式注册。这是我注册侧边栏的方式:function my_widgets_init() { register_sidebar( array ( \'name\'