怎么給古騰堡編輯器添加自定義區塊？ - WordPress開發

作為目前WordPress主推的新版本編輯器，古騰堡編輯器前途無量，但默認的一些古騰堡編輯器的區塊不夠我們日常編輯文章，這個時候，我們就可以開發一些自己的古騰堡編輯器區塊，方便我們日常編輯文章。

通過這篇wordpress開發教程，你就能開發自己的古騰堡編輯器區塊了，當然。能夠有效的自定義模塊，才是古騰堡編輯器最有優勢的地方。

• 官方文檔：塊編輯器手冊

關于古騰堡編輯器，官方之前給了一個初步的文檔，但是那個文檔是以插件化為教程進行的，對于主題設計者而言，更希望在自己的主題里直接加入古騰堡自定義模塊比較方便，因此本文的方向是在主題里直接往古騰堡編輯器里插入自定義模塊。

今天我們來了解下如何給古騰堡編輯器添加自定義模塊。

加載古騰堡自定義模板

//加載古騰堡自定義模板
function my_gutenberg_block(){
	//注冊古騰堡編輯器
	wp_register_script( 'block-js', get_template_directory_uri() . '/extends/src/blocks.js', array('wp-blocks', 'wp-element', 'wp-editor', 'wp-i18n'), '1.0.0' );
	//插入模塊
	//fishtheme/block可自定義, 比如: demo/block
	register_block_type( 'fishtheme/block', array(
		'editor_script' => 'block-js'
	) );
}
add_action( 'init', 'my_gutenberg_block' );

新建blocks.js

在目前使用的WordPress主題目錄下，新建一個src的文件夾，并新建blocks.js。

blocks.js文件路徑可以自定義，注意把上面代碼里的對應路徑也改一下就行。

編輯blocks.js

這個是古騰堡核心文件，基本所有的功能都在這里。

//js代碼
//引入對應方法, 需要注意的是這里引用了4個方法, 那么在底部也需要window.wp.回調這4個方法
//這4個方法的來源是functions.php里的wp_register_script時array()里傳入, 需要注意一一對應
(function (blocks, element, editor, i18n) {
    var el = element.createElement; //用于輸出HTML
    var RichText = editor.RichText; //用于獲取文本輸入塊

    blocks.registerBlockType('gutenberg-examples/example-03-editable', {
        title: '測試模塊', //標題
        icon: 'universal-access-alt', //圖標
        category: 'layout', //對應欄目
        attributes: { //模塊的屬性
            content: {
                type: 'array',
                source: 'children',
                selector: 'p',
            },
        },
        //編輯時
        edit: function (props) {
            //獲取模塊輸入的值
            var content = props.attributes.content;
            //點擊輸入框時用的方法
            function onChangeContent(newContent) {
                //將輸入框里的內容輸出到模塊屬性里
                props.setAttributes({ content: newContent });
            }
            //返回HTML
            //el的方法格式為: el( 對象, 屬性, 值 ); 可以相互嵌套
            //例如:
            // el(
            //     'div',
            //     {
            //         className: 'demo-class',
            //     },
            //     'DEMO數據'
            // );
            // 輸出為: <div class="demo-class">DEMO數據</div>
            return el(
                RichText,
                {
                    tagName: 'p',
                    className: props.className,
                    onChange: onChangeContent,
                    value: content,
                }
            );
        },
        //保存時
        save: function (props) {
            //保存時返回的HTML
            return el(RichText.Content, {
                tagName: 'p', value: props.attributes.content,
            });
        },
    });
}(
    window.wp.blocks,
    window.wp.element,
    window.wp.editor,
    window.wp.i18n
));

查看效果

以上步驟完成后，在編輯器頁面刷新，然后添加區塊，看看是不是添加成功了。

此為官網提供的demo。

相關推薦

XinTheme Block - 為網站增加古藤堡區塊的WordPress插件

Muze

• 20年2月8日
• 喜歡：0
• 瀏覽：572

古騰堡編輯器的Pro圖標 - WordPress插件

Muze

• 20年4月3日
• 喜歡：0
• 瀏覽：364