Gutenberg积木在后端没有造型

我正在创建一个带有自定义gutenberg块的插件。

每个块都有一个样式。scss文件。如果我向该文件中添加代码，则该块在后端和前端都会按照文档的预期进行样式设置。

例如，在块“section”中，我只想在后端设置背景色样式：

.wp-block-pbdsblocks-section {
  background-color: #e0e0e0;
  padding: 10px;
}

但这会影响前端和后端。我读过的文章说，通过在块目录中创建一个“editor.scss”文件来应用这种样式。

我导入编辑器。将scss文件放入块的索引中。js。

我可以看到此文件中的代码正在编译并添加到/assets/css/blocks.style.css

我将插件的php文件设置为排队：

/**
 * Enqueue block editor only JavaScript and CSS
 */
function pbdsblocks_editor_scripts()
{

    // Make paths variables so we don\'t write em twice ;)
    $blockPath = \'/assets/js/editor.blocks.js\';
    $editorStylePath = \'/assets/css/blocks.editor.css\';

    // Enqueue the bundled block JS file
    wp_enqueue_script(
        \'pbdsblocks-blocks-js\',
        plugins_url( $blockPath, __FILE__ ),
        [ \'wp-i18n\', \'wp-element\', \'wp-blocks\', \'wp-components\', \'wp-api\', \'wp-editor\' ],
        filemtime( plugin_dir_path(__FILE__) . $blockPath )
    );

    // Enqueue optional editor only styles
    wp_enqueue_style(
        \'pbdsblocks-blocks-editor-css\',
        plugins_url( $editorStylePath, __FILE__),
        [ \'wp-blocks\' ],
        filemtime( plugin_dir_path( __FILE__ ) . $editorStylePath )
    );

}

// Hook scripts function into block editor hook
add_action( \'enqueue_block_editor_assets\', \'pbdsblocks_editor_scripts\' );

但这些风格只有在style.scss 文件这会影响前端和后端。

// Enqueue optional editor only styles wp_enqueue_style( \'pbdsblocks-blocks-editor-css\', plugins_url( $editorStylePath, __FILE__), [ ], filemtime( plugin_dir_path( __FILE__ ) . $editorStylePath ) );

/** * Enqueue Gutenberg block assets for both frontend + backend. * * @uses {wp-editor} for WP editor styles. * @since 1.0.0 */ function single_block_cgb_block_assets() { // Styles. wp_enqueue_style( \'single_block-cgb-style-css\', // Handle. plugins_url( \'dist/blocks.style.build.css\', dirname( __FILE__ ) ), // Block style CSS. array( \'wp-editor\' ) // Dependency to include the CSS after it. // filemtime( plugin_dir_path( __DIR__ ) . \'dist/blocks.style.build.css\' ) // Version: File modification time. ); } // Hook: Frontend assets. add_action( \'enqueue_block_assets\', \'single_block_cgb_block_assets\' ); /** * Enqueue Gutenberg block assets for backend editor. * * @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 single_block_cgb_editor_assets() { // Scripts. wp_enqueue_script( \'single_block-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: File modification time. ); // Styles. wp_enqueue_style( \'single_block-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. ); } // Hook: Editor assets. add_action( \'enqueue_block_editor_assets\', \'single_block_cgb_editor_assets\' );

相关推荐