CSS for wp-components in blocks

  • Hello!

    i am experimenting with building blocks that render on the frontend using “render” and “viewScript” in block.json
    My goal is to use elements from the @wordpress/components package, such as a button for example.
    I don’t want to do anything with edit.js yet, I’m only interested in the frontend. The button displays, but without CSS.

    The documentation states that I should add wp-component dependencies to the plugin stylesheet and it works when I add this to my theme in style registering stuff :
    wp_register_style('my_theme', get_theme_file_uri('assets/css/index.css'), array('wp-components'));
    and this is where I start to get lost and confused because I need to go with styling outside the block.

    Here are my two questions:

    1. How and where can I correctly upload styles for wp-components displayed only on the frontend for blocks?
    2. What is the correct way to do custom CSS for these elements? Is it possible?

    Please help or advise!

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello!

    To correctly upload styles for wp-components displayed only on the frontend for blocks, you can enqueue your custom stylesheet in your plugin or theme’s functions.php file using the wp_enqueue_style() function. Here’s an example:

    function my_block_assets() {
    wp_enqueue_style(
        'my-block-styles',
        plugin_dir_url( __FILE__ ) . 'path/to/your/custom/styles.css',
        array( 'wp-components' ),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_block_assets' );

    This code registers and enqueues a stylesheet called “my-block-styles” that is located in the “path/to/your/custom” directory of your plugin or theme. It depends on the ‘wp-components’ style to ensure that the styles are loaded correctly. You can replace “plugin_dir_url( FILE ) . ‘path/to/your/custom/styles.css'” with the path to your custom stylesheet.

    To do custom CSS for these elements, you can add your own CSS rules to your custom stylesheet. To style a specific wp-component element, you can use its class name in your CSS rules. For example, to style a Button component, you can use the “.components-button” class in your CSS rules. Here’s an example:

    .components-button {
    background-color: #0073aa;
    color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
}

    I hope this helps! Let me know if you have any more questions.

    Thread Starter fibon

    (@fibon)

    @amyewings13 appreciate your copy-paste from chat-gpt, but if you had read my post, you would have noticed that my problem is not solved. BWT I’m using gpt4 and it doesn’t know the solution or gives misleading clues

    • This reply was modified 1 year, 10 months ago by fibon.
    • This reply was modified 1 year, 10 months ago by fibon.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS for wp-components in blocks’ is closed to new replies.