テーマのスタイルをブロックごとのCSSに付加して読み込む - WordPress 5.8

…
 <link rel="stylesheet" id="snow-monkey-blocks/alert-css" href="…/plugins/snow-monkey-blocks/dist/block/alert/style.css?ver=1626331159" media="all">
 <style id="wp-block-image-inline-css">…</style>
 <style id="global-styles-inline-css">…</style>
</body>
</html>

/* カラムブロックのレスポンシブ（P.300） */
@media (min-width: 600px) and (max-width: 781px) {
  .myresp {
    flex-wrap: nowrap;
  }

  .myresp > *:not(:first-child) {
    margin-left: 10px;
  }
}

/**
 * Attach extra styles to multiple blocks.
 */
function my_theme_enqueue_block_styles() {
    // An array of blocks.
    $styled_blocks = [ 'columns' ];

    foreach ( $styled_blocks as $block_name ) {
        // Get the stylesheet handle. This is backwards-compatible and checks the
        // availability of the `wp_should_load_separate_core_block_assets` function,
        // and whether we want to load separate styles per-block or not.
        $handle = (
            function_exists( 'wp_should_load_separate_core_block_assets' ) &&
            wp_should_load_separate_core_block_assets()
        ) ? "wp-block-$block_name" : 'wp-block-library';

        // Get the styles.
        $styles = file_get_contents( get_theme_file_path( "styles/blocks/$block_name.min.css" ) );

        // Add frontend styles.
        wp_add_inline_style( $handle, $styles );

        // Add editor styles.
        add_editor_style( "styles/blocks/$block_name.min.css" );
        if ( file_exists( get_theme_file_path( "styles/blocks/$block_name-editor.min.css" ) ) ) {
            add_editor_style( "styles/blocks/$block_name-editor.min.css" );
        }
    }
}
// Add frontend styles.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_block_styles' );
// Add editor styles.
add_action( 'admin_init', 'my_theme_enqueue_block_styles' );

/* カラムブロックのレスポンシブ（P.300） */
@media (min-width: 600px) and (max-width: 781px) {
  .myresp {
    flex-wrap: nowrap;
  }

  .myresp > *:not(:first-child) {
    margin-left: 10px;
  }
}

…
    <style id="wp-block-columns-inline-css">
    .wp-block-columns{display:flex;margin-bottom:1.75em;box-sizing:
    … .wp-block-column.is-vertically-aligned-top{width:100%}
    /* カラムブロックのレスポンシブ（P.300） */
    @media (min-width: 600px) and (max-width: 781px) {
        .myresp {
            flex-wrap: nowrap;
        }

        .myresp > *:not(:first-child) {
            margin-left: 10px;
        }
    }
    </style>
    <style id="wp-block-image-inline-css">…</style>
    <style id="global-styles-inline-css">…</style>
</body>
</html>