Question

我为古腾堡（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 );
        }

    });

这是代码。请看一下。预先感谢。

Answer 1

演示块

// movie.php

<path class="counties" d="function e(t){return t&amp;&amp; (&quot;function&quot;==typeof o&amp;&amp;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
);

自定义块不显示在古腾堡块存储中

1 个答案: