Gutenberg块样式CSS类未在后端应用

Question

前端的块HTML正在添加"is-style-option1"类，但由于某种原因，后端块HTML没有添加"is-tyle-option_"类。

这是index.js文件中的编辑函数-

<section className={`text-section-one`} style={{ backgroundColor: `${bgColor}`}} >
<div className={`wrapper order-${elOrder} wrapper-${sectionHeight}`}>
<MediaUpload
onSelect={ onSelectImage }
type="image"
value={ imgID }
render={ ( { open } ) => (
<Button className={ imgID ? 'image-button' : 'button button-large' } onClick={ open }>
{ ! imgID ? __( 'Upload Image', 'test' ) :  <img src={ imgURL } alt={ __( 'text-section-one-image', 'test' ) } /> }
</Button>
) }
/>
</div>
<div className={`textDiv text-${alignment}`}>
<RichText
tagName="h3"
placeholder={ __( 'Geo Discovery', 'test' ) }
value={ text }
onChange={onChangeContent}
className={`title title-size-${textSize}`}
style={{  color: titleColor  }}
/>
<RichText
tagName="p"
placeholder={ __( 'Aenean vel justo nulla, at gravida elit. In hac habitasse platea dictumst. Quisque gravida commodo volutpat. Vivamus blandit risus in urna venenatis accumsan', 'test' ) }
value={ textP }
className={`text text-size-${textSizeP}`}
onChange={onChangeContentP}
style={{ color: textColor  }}
/>
</div>
</section>
]
}

这是资产加载-

<?php
/**
* Blocks Initializer
*
* Enqueue CSS/JS of all the blocks.
*
* @since   1.0.0
* @package CGB
*/
// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Enqueue Gutenberg block assets for both frontend + backend.
*
* Assets enqueued:
* 1. blocks.style.build.css - Frontend + Backend.
* 2. blocks.build.js - Backend.
* 3. blocks.editor.build.css - Backend.
*
* @uses {wp-blocks} for block type registration & related functions.
* @uses {wp-element} for WP Element abstraction — structure of blocks.
* @uses {wp-i18n} to internationalize the block's text.
* @uses {wp-editor} for WP editor styles.
* @since 1.0.0
*/
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.
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( 'wp-edit-blocks' ), // 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' );

editor.scss文件-

.is-style-option3 {
background-color: red !important;
}

编辑器样式适用于其他自定义块设置，但不适用于"块样式">

Answer 1

事实证明，您需要在编辑函数中手动添加包装器类。这是消息来源-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}`}} >

它解决了这个问题。