WordPress / WordPress教程

WordPress 古腾堡(Gutenberg)添加自定义块

温馨提示:本文最后更新于2021-08-01 20:22:59,某些文章具有时效性,若有错误或已失效,请在下方留言或提交工单提交工单
浅时光 · 5月31日 · 2021年 本文8800个字,预计阅读22分钟 6882次已读

一、创建目录及文件


在网站主题的根目录下创建JSCSS文件所需的目录和对应的文件

cd wp-content/themes/你的主题/
mkdir gradient
cd gradient

1、创建核心JS文件

[[email protected] gradient]# vim gradient.js
(function(blocks, editor, element, components, _) {
    var el = element.createElement;
    var RichText = editor.RichText;
	var AlignmentToolbar = editor.AlignmentToolbar;
    var BlockControls = editor.BlockControls;
    var Fragment = element.Fragment;
 
/*---------渐变框自定义块---------*/
    blocks.registerBlockType('aduxq/button', {
        title: '渐变框',
		category: 'layout',
        icon: {
            src: 'marker',
            foreground: '#20a0ff'
        },
		description: '八种不同的渐变框',
        attributes: {
            content: {
                type: 'array',
                source: 'children',
                selector: 'div',
            },
            alignment: {
                type: 'string',
            },
            typeClass: {
                source: 'attribute',
                selector: '.an_q',
                attribute: 'class',
            }
        },
        edit: function(props) {
            var content = props.attributes.content,
            typeClass = props.attributes.typeClass || 'gradient b1',
            alignment = props.attributes.alignment,
            isSelected = props.isSelected;
            function onChangeContent(newContent) {
                props.setAttributes({
                    content: newContent
                })
            }
            function changeType(event) {
                var type = event.target.className;
                props.setAttributes({
                    typeClass: 'an_q ' + type
                })
            }
            function onChangeAlignment(newAlignment) {
                props.setAttributes({
                    alignment: newAlignment
                })
            }
            var richText = el(RichText, {
                tagName: 'div',
                onChange: onChangeContent,
                value: content,
                isSelected: props.isSelected,
                placeholder: '按钮'
            });
            var outerHtml1 = el('div', {
                className: typeClass
            },
            richText);
            var outerHtml = (el(element.Fragment, null, el(BlockControls, null, el(AlignmentToolbar, {
                value: alignment,
                onChange: onChangeAlignment,
            })), outerHtml1));
            var selector = el('div', {
                className: 'duxq anz'
            },
            [el('button', {
                className: 'gradient b1',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b2',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b3',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b4',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b5',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b6',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b7',
                onClick: changeType
            },
            ''), el('button', {
                className: 'gradient b8',
                onClick: changeType
            },
            ''), ]);
 
			return el('div', {
                style: {
                    textAlign: alignment
                }
            },
            [outerHtml, isSelected && selector])
        },
        save: function(props) {
            var content = props.attributes.content,
            alignment = props.attributes.alignment,
            typeClass = props.attributes.typeClass || 'gradient b1';
            if (alignment) {
                var outerHtml = el('div', {
                    style: {
                        textAlign: alignment
                    }
                },
                el('div', {
                    className: typeClass
                },
                content))
            } else {
                var outerHtml = el('div', {
                    className: typeClass
                },
                content)
            }
            return outerHtml
        },
    })
})(window.wp.blocks, window.wp.editor, window.wp.element, window.wp.components, window._, );

2、创建样式CSS文件

[[email protected] gradient]# vim gradient.css
.duxq.anz button {
  margin: 10px;
  padding: .5em 1em;
  min-width: 33px;
  min-height: 33px;
  cursor: pointer
}
 
.duxq.anz button:hover {
  box-shadow: 0 0 10px #ddd;
  opacity: .8
}
 
.gradient {
  display: inline-block;
  margin: .5em;
  padding: .6em .8em;
  min-width: 80px;
  border: none;
  border-radius: 8px;
  box-shadow: -1px 4px 10px rgba(0,0,0,.2);
  color: #fff;
  text-align: center;
  transition: all .2s ease
}
 
.qe_fxan a,.qe_fxan a:hover {
  color: #fff
}
 
.gradient.b1 {
  color:#555555;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(190,196,252),-6px 0 12px -5px rgb(189,196,252);background-color:#8EC5FC;background-image:linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);background-image:-webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%)
}
.gradient.b2 {
  color:#555555;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(255,176,172),-6px 0 12px -5px rgb(255,161,174);background-color:#ff9a8b66;background-image:linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);background-image:-webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%)
}
.gradient.b3 {
  color:#555555;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(253,223,234),-6px 0 12px -5px rgb(215,240,243);background-color:#FFDEE9;background-image:linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);background-image:-webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%)
}
.gradient.b4 {
  color:#eeeeee;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(12,85,141),-6px 0 12px -5px rgba(10,58,93,0);background-image:radial-gradient( circle 263px at 100.2% 3%,rgba(12,85,141,1) 31.1%,rgba(205,181,93,1) 36.4%,rgba(244,102,90,1) 50.9%,rgba(199,206,187,1) 60.7%,rgba(249,140,69,1) 72.5%,rgba(12,73,116,1) 72.6% )
}
 
.gradient.b5 {
  color:#eeeeee;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(68,110,92),-6px 0 12px -5px rgb(204,212,163);background-image:linear-gradient( 102deg,rgba(68,110,92,1) 17.4%,rgba(107,156,120,1) 49.3%,rgba(154,183,130,1) 83.4%,rgba(247,237,191,1) 110.3% )
}
.gradient.b6 {
  color:#ffffff;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(253,223,234),-6px 0 12px -5px rgb(215,240,243);background-image:radial-gradient( circle farthest-corner at -8.9% 51.2%,rgba(255,124,0,1) 0%,rgba(255,124,0,1) 15.9%,rgba(255,163,77,1) 15.9%,rgba(255,163,77,1) 24.4%,rgba(19,30,37,1) 24.5%,rgba(19,30,37,1) 66% )
}
.gradient.b7 {
  color:#ffffff;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(175,160,208),-6px 0 12px -5px rgba(177,161,207,0);background-image:radial-gradient( circle farthest-corner at 10% 20%,rgba(95,117,227,1) 0%,rgba(188,167,205,1) 90% )
}
.gradient.b8 {
  color:#c7c7c7;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(155,170,185),-6px 0 12px -5px rgba(177,161,207,0);background-image:radial-gradient( circle farthest-corner at 10% 20%,rgba(0,0,0,1) 0%,rgba(64,64,64,1) 90.2% )
}

3、添加到主题样式表

将上面的CSS文件复制添加到主题的样式表 style.css 中;这个根据自己使用的主题添加

.duxq.anz button {
  margin: 10px;
  padding: .5em 1em;
  min-width: 33px;
  min-height: 33px;
  cursor: pointer
}
 
.duxq.anz button:hover {
  box-shadow: 0 0 10px #ddd;
  opacity: .8
}
 
.gradient {
  display: inline-block;
  margin: .5em;
  padding: .6em .8em;
  min-width: 80px;
  border: none;
  border-radius: 8px;
  box-shadow: -1px 4px 10px rgba(0,0,0,.2);
  color: #fff;
  text-align: center;
  transition: all .2s ease
}
 
.qe_fxan a,.qe_fxan a:hover {
  color: #fff
}
 
.gradient.b1 {
  color:#555555;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(190,196,252),-6px 0 12px -5px rgb(189,196,252);background-color:#8EC5FC;background-image:linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);background-image:-webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%)
}
.gradient.b2 {
  color:#555555;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(255,176,172),-6px 0 12px -5px rgb(255,161,174);background-color:#ff9a8b66;background-image:linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);background-image:-webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%)
}
.gradient.b3 {
  color:#555555;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(253,223,234),-6px 0 12px -5px rgb(215,240,243);background-color:#FFDEE9;background-image:linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);background-image:-webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%)
}
.gradient.b4 {
  color:#eeeeee;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(12,85,141),-6px 0 12px -5px rgba(10,58,93,0);background-image:radial-gradient( circle 263px at 100.2% 3%,rgba(12,85,141,1) 31.1%,rgba(205,181,93,1) 36.4%,rgba(244,102,90,1) 50.9%,rgba(199,206,187,1) 60.7%,rgba(249,140,69,1) 72.5%,rgba(12,73,116,1) 72.6% )
}
 
.gradient.b5 {
  color:#eeeeee;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(68,110,92),-6px 0 12px -5px rgb(204,212,163);background-image:linear-gradient( 102deg,rgba(68,110,92,1) 17.4%,rgba(107,156,120,1) 49.3%,rgba(154,183,130,1) 83.4%,rgba(247,237,191,1) 110.3% )
}
.gradient.b6 {
  color:#ffffff;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(253,223,234),-6px 0 12px -5px rgb(215,240,243);background-image:radial-gradient( circle farthest-corner at -8.9% 51.2%,rgba(255,124,0,1) 0%,rgba(255,124,0,1) 15.9%,rgba(255,163,77,1) 15.9%,rgba(255,163,77,1) 24.4%,rgba(19,30,37,1) 24.5%,rgba(19,30,37,1) 66% )
}
.gradient.b7 {
  color:#ffffff;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(175,160,208),-6px 0 12px -5px rgba(177,161,207,0);background-image:radial-gradient( circle farthest-corner at 10% 20%,rgba(95,117,227,1) 0%,rgba(188,167,205,1) 90% )
}
.gradient.b8 {
  color:#c7c7c7;overflow:hidden;margin:10px 0;padding:15px 15px 15px 15px;box-shadow:6px 0 12px -5px rgb(155,170,185),-6px 0 12px -5px rgba(177,161,207,0);background-image:radial-gradient( circle farthest-corner at 10% 20%,rgba(0,0,0,1) 0%,rgba(64,64,64,1) 90.2% )
}

二、注册GutenbergBlock块


找到你主题的 function.php 文件,在最下方添加以下代码:

// 古腾堡编辑器扩展
function duxq_block() {
    wp_register_script( //引入核心js文件
        'duxq_block',
        get_stylesheet_directory_uri().'/gradient/gradient.js',
        array( 'wp-blocks', 'wp-element' )
    );
 
    wp_register_style(  //引入css外观样式文件
        'duxq_block',
        get_stylesheet_directory_uri().'/gradient/gradient.css',
        array( 'wp-edit-blocks' )
    );
 
    register_block_type( 'duxq/block', array(
        'editor_script' => 'duxq_block',
        'editor_style'  => 'duxq_block',
    ) );
}
if (function_exists('register_block_type')) { //判断是否使用古腾堡编辑器
    add_action( 'init', 'duxq_block' );
}

三、编辑文章效果演示


WordPress 古腾堡(Gutenberg)添加自定义块-浅时光博客



关注本站官方微信公众号『精彩程序人生』

扫描左侧二维码关注我们的微信公众帐号,在微信公众帐号中回复【加群】即可加入到我们的技术讨论群里面共同学习。
关注博主不迷路~


本文作者:浅时光
原文链接:https://www.dqzboy.com/6772.html
版权声明:知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可
转载时请以超链接形式标明文章原始出处和作者信息

1 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!

  1. 好運黏黏上海2021-6-1 · 21:14

    不错,借鉴了

本站已稳定运行: | 耗时 0.478 秒 | 查询 28 次 | 内存 41.03 MB