Gutenberg Block Style的CSS类不在后端应用

时间:2020-04-10 作者:Ashiquzzaman Kiron

前端的块HTML添加了“is-style-option1”类,但由于某些原因,后端的块HTML没有添加“is-style-option1”类。

以下是索引上的块样式。js公司-

 styles: [
        {
            name: "default",
            label: __("default"),
            isDefault: true,
        },
        {
            name: "option2",
            label: __("Layout 2")
        },
        {
            name: "option3",
            label: __("Layout 3")
        },
],
这是资产加载-

function noir_blocks_cgb_block_assets() { // phpcs:ignore
    // Register block styles for both frontend + backend.
    wp_register_style(
        \'noir_blocks-cgb-style-css\', // Handle.
        plugins_url( \'dist/blocks.style.build.css\', dirname( __FILE__ ) ), // Block style CSS.
        is_admin() ? array( \'wp-editor\' ) : null, // Dependency to include the CSS after it.
        null // filemtime( plugin_dir_path( __DIR__ ) . \'dist/blocks.style.build.css\' ) // Version: File modification time.
    );

    // Register block editor script for backend.
    wp_register_script(
        \'noir_blocks-cgb-block-js\', // Handle.
        plugins_url( \'/dist/blocks.build.js\', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
        array( \'wp-blocks\', \'wp-i18n\', \'wp-element\', \'wp-editor\' ), // Dependencies, defined above.
        null, // filemtime( plugin_dir_path( __DIR__ ) . \'dist/blocks.build.js\' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );



    // Register block editor styles for backend.
    wp_register_style(
        \'noir_blocks-cgb-block-editor-css\', // Handle.
        plugins_url( \'dist/blocks.editor.build.css\', dirname( __FILE__ ) ), // Block editor CSS.
        array( \'\' ), // Dependency to include the CSS after it.
        filemtime( plugin_dir_path( __DIR__ ) . \'dist/blocks.editor.build.css\' ) // Version: File modification time.
    );




    // WP Localized globals. Use dynamic PHP stuff in JavaScript via `cgbGlobal` object.
    wp_localize_script(
        \'noir_blocks-cgb-block-js\',
        \'cgbGlobal\', // Array containing dynamic data for a JS Global.
        [
            \'pluginDirPath\' => plugin_dir_path( __DIR__ ),
            \'pluginDirUrl\'  => plugin_dir_url( __DIR__ ),
            // Add more data here that you want to access from `cgbGlobal` object.
        ]
    );

    /**
     * Register Gutenberg block on server-side.
     *
     * Register the block on server-side to ensure that the block
     * scripts and styles for both frontend and backend are
     * enqueued when the editor loads.
     *
     * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
     * @since 1.16.0
     */
    register_block_type(
        \'cgb/block-noir-blocks\', array(
            // Enqueue blocks.style.build.css on both frontend & backend.
            \'style\'         => \'noir_blocks-cgb-style-css\',
            // Enqueue blocks.build.js in the editor only.
            \'editor_script\' => \'noir_blocks-cgb-block-js\',
            // Enqueue blocks.editor.build.css in the editor only.
            \'editor_style\'  => \'noir_blocks-cgb-block-editor-css\',
        )
    );
}

// Hook: Block assets.
add_action( \'init\', \'noir_blocks_cgb_block_assets\' );
编辑器样式适用于其他自定义块设置,但不适用于“块样式”

1 个回复
最合适的回答,由SO网友:Ashiquzzaman Kiron 整理而成

事实证明,您需要在edit函数中手动添加包装器类。这是消息来源-https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname

我改了这行-

 <section className={`text-section-one`} style={{ backgroundColor: `${bgColor}`}} >

  <section className= { props.className + ` text-section-one`}  style={{ backgroundColor: `${bgColor}`}} >
它解决了这个问题。

相关推荐

Testing Plugins for Multisite

我最近发布了一个WordPress插件,它在单个站点上非常有效。我被告知该插件在多站点安装上不能正常工作,我理解其中的一些原因。我已经更新了代码,现在需要一种方法来测试更新后的代码,然后才能转到实时客户的多站点安装。我有一个用于测试的WordPress安装程序的单站点安装,但需要在多站点安装上进行测试。根据我所能找到的唯一方法是在网络上至少有两个站点来安装整个多站点安装,以测试我的插件。设置WordPress的整个多站点安装是插件开发人员的唯一/首选方式,还是有更快的测试环境可用。