Gutenberg块样式CSS类不应用于后端

Question

前端的块HTML正在得到添加的"is-style-option1“类，但是由于某种原因，后端块HTML没有得到添加的”is-风格的option1“类。

以下是index.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' );

编辑器样式适用于其他自定义块设置，但不适用于“块样式”。

Answer 1

结果，您需要在编辑函数中手动添加包装类。这是源代码- https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname

我改变了这句话-

 至  解决了问题。