我为古腾堡(Gutenberg)创建了一个简单的自定义块,并上传了该块,但在古腾堡(Gutenberg)商店中看不到此自定义块。有人可以告诉我吗? 下面是代码
这是index.php文件
<?php
function price_block(){
wp_register_script(
'price_block_script',
plugins_url('block.js',__FILE__),
array('wp-block','wp-element')
);
wp_register_style(
'price_block_editor',
plugins_url('editor.css',__FILE__),
array('wp-edit-block')
//filemtime(plugin_dir_path(__FILE__).'/block/price/editor.css')
);
wp_register_style(
'price_block_style',
plugins_url('style.css',__FILE__),
array('wp-edit-block')
//filemtime(plugin_dir_path(__FILE__).'/block/price/style.css')
);
register_block_type('price/block',
array('editor_script'=>'price_block_script',
'editor_style'=>'price_block_editor',
'style'=>'price_block_style'
)
);
}
add_action('init','price_block');
?>
这是Block.js文件
var el = wp.element.createElement;
wp.blocks.registerBlockType(
'price/block',{
title: 'price Block',
icon: 'lacation',
catagory: 'common',
attributes: {
type:'array',
source: 'children',
selector:'p'
},
edit: function (props) {
return wp.element.createElement(wp.block.richtext,
{
tagName: 'p',
className: props.className,
value: props.attributes.content,
onchange: function (newContent) {
props.setAttributes({content:newContent})
}
});
},
save: function (props) {
return wp.element.createElement('p',
{
className:props.className
},props.attributes.content );
}
});
这是代码。请看一下。 预先感谢。
答案 0 :(得分:0)
演示块
// movie.php
<path class="counties" d="function e(t){return t&& ("function"==typeof o&&i.pointRadius(+o.apply(this,arguments)),_r(t,r(i))),i.result()}" fill="#ddd"></path>
block.js
function movie_block_init() {
$dir = dirname( __FILE__ );
$block_js = 'movie/block.js';
wp_register_script(
'movie-block-editor',
plugins_url( $block_js, __FILE__ ),
array(
'wp-blocks',
'wp-i18n',
'wp-element',
),
filemtime( "$dir/$block_js" )
);
$editor_css = 'movie/editor.css';
wp_register_style(
'movie-block-editor',
plugins_url( $editor_css, __FILE__ ),
array(
'wp-blocks',
),
filemtime( "$dir/$editor_css" )
);
$style_css = 'movie/style.css';
wp_register_style(
'movie-block',
plugins_url( $style_css, __FILE__ ),
array(
'wp-blocks',
),
filemtime( "$dir/$style_css" )
);
register_block_type( 'movieblock/movie', array(
'editor_script' => 'movie-block-editor',
'editor_style' => 'movie-block-editor',
'style' => 'movie-block',
) );
}
add_action( 'init', 'movie_block_init' );
,建议的文件夹和文件结构为
( function( wp ) {
var __ = wp.i18n.__;
registerBlockType( 'movieblock/movie', {
supports: {
// Removes support for an HTML mode.
html: false,
},
edit: function( props ) {
return el(
'p',
{ className: props.className },
__( 'Hello from the editor!' )
);
},
save: function() {
return el(
'p',
{},
__( 'Hello from the saved content!' )
);
}
} );
} )(
window.wp
);