Best practices to add custom CSS code to Block Theme

  • Hi everybody, new here, sorry if I’m doing something wrong.

    First thing, search functionality in www.remarpro.com seems to be broken to me so I couldn’t search if the topics has been solved already.

    I’m creating my first Block Theme and I need to add some custom CSS to certain blocks. I’m struggling to understand the best way to do it. Inline CSS seems to me like creating a lot of noise in the component since I need to add several rules.

    Here is the example I’m trying to figure out:

        <!-- wp:columns -->
    <div class="wp-block-columns">
       <!-- wp:video -->
       <figure class="wp-block-video">
       </figure>
       <!-- /wp:video -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:heading {"level": 1, "align":"wide"} -->
            <h1 class="alignwide">Un taller digital para tus proyectos</h1>
            <!-- /wp:heading -->
            <!-- wp:heading {"level": 2, "align":"wide"} -->
            <h2 class="alignwide">Infraestructura digital Comunitaria</h2>
            <!-- /wp:heading -->
            <!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
            <div class="wp-block-group">
                <!-- wp:paragraph --><p>?Tienes un proyecto digital y no sabes por dónde empezar?</p><!-- /wp:paragraph -->
                <!-- wp:buttons -->
                <div class="wp-block-buttons">
                    <!-- wp:button -->
                    <div class="wp-block-button"><a class="wp-block-button__link">??</img> Cuéntanoslo</a></div>
                    <!-- /wp:button -->
                </div>
                <!-- /wp:buttons -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
        <!-- wp:column -->
        <div class="wp-block-column">
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->

    What I want to do is add a video as background adding this CSS class to the generated video HTML element when adding the video file from the visual editor, in Settings/Advanced/CSS class:

    .awt-bg-video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    object-position: center;
}

    ?Any hint on how to manage this properly?

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

  • Try looking at the theme.json file for adding block styles and css presets. It the direction that wordpress is currently pushing toward. In the theme editor you can also look at the global style button. It the one that is half black and half white. It will allow you to set default values for your theme. You also have an option under the global to set default values for blocks. If you elect to use enqueue css keep in mind that the enqueue will add rules to the front end but you might not see them on the back end. You would have to enqueue the editor styles with the function add_editor_style or your changes will only show on the front end.

    function add_block_styles(){

        add_editor_style(‘style.css’);

    }

    add_action(‘after_setup_theme’,’add_block_styles’);

    Thread Starter luishporras

    (@luishporras)

    Thanks a lot for your reply @mrtom414, so far I’ve been able to add styles to the video element in the frontend following your advice and the guide from the documentation: Including CSS & JS

    Unfortunately I can’t figure out what I’m doing wrong to add styles to the backend (editor) because it’s not working right know:

    <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
    
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">

   <!-- wp:group -->
   <secti class="wp-block-group">
   
    <!-- wp:columns -->
    <div class="wp-block-columns awt-positioned-cols">
       <!-- wp:video -->
       <figure class="wp-block-video awt-bg-video">
       </figure>
...

    functions.php

    <?php
if ( ! function_exists( 'awt_theme_setup' ) ) :

function awt_theme_setup() {
	// Add support for block styles.
	add_theme_support( 'wp-block-styles' );

	/*
	 * Load additional block styles.
	 */
	$styled_blocks = ['columns', 'video'];
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "awt-$block_name",
			'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
			$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
		);
		wp_enqueue_block_style( "core/$block_name", $args );
		add_editor_style( get_theme_file_uri( "assets/css/blocks/$block_name.css" ) );
	}
}
endif; // awt_theme_setup
add_action( 'after_setup_theme', 'awt_theme_setup' );

?>

    assets/css/blocks/columns.css

    .awt-positioned-cols {
    position: relative;
}
    • This reply was modified 1 year, 9 months ago by luishporras.
    • This reply was modified 1 year, 9 months ago by luishporras.

    This is from a theme I wrote that sets the style.css to be applied to the backend. 

    function add_block_styles(){
    add_editor_style('style.css');

}

add_action('after_setup_theme','add_block_styles');

    check to see if it works for you.

    This is used in the functions.php file

    • This reply was modified 1 year, 9 months ago by mrtom414.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Best practices to add custom CSS code to Block Theme’ is closed to new replies.

Tags