前端的块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\' );
编辑器样式适用于其他自定义块设置,但不适用于“块样式”