Wordpress eklenti geliştirme js de php kullanma

wordpress eklentimizde var defaultImageUrl = "<?php echo esc_url($image_url); ?>"; tarzı bir kod var bu sayede kullanıcı eklenti ayar sayfasından resim yükleyince js de çalıştırabiliyoruz ama wordpress.org da listelenmek istediğimizde bunu sorun yaptılar js dosyasına atın wordpress koduyla js i ekleyin tarzı bir şey dediler diğer js ler farklı dosyada ama bunu bir türlü çözemedik bilgisi olan var mı?
Fonksiyon şu şekilde;

function plexorin_default_image_callback() {
    $options = get_option('plexorin_settings');
    $image_id = $options['default_image'];
    $image_url = $image_id ? wp_get_attachment_url($image_id) : 'https://plexorin.com/assets/img/default.webp';
    ?>
    <div class="api-dependent">
        <p><?php esc_html_e('Bir gönderinin öne çıkan görseli yoksa kullanılacak varsayılan öne çıkan görselin linkini girin veya medya kitaplığından bir görsel seçin.', 'plexorin'); ?></p>
        <input type="hidden" id="plexorin_default_image" name="plexorin_settings[default_image]" value="<?php echo esc_attr($image_id); ?>">
        <img id="plexorin_default_image_preview" src="<?php echo esc_url($image_url); ?>" style="max-width: 300px; display: <?php echo $image_url ? 'block' : 'none'; ?>;" />
        <br>
        <button type="button" class="button" id="plexorin_default_image_button"><?php esc_html_e('Resim Seç', 'plexorin'); ?></button>
        <button type="button" class="button" id="plexorin_default_image_remove" style="display: <?php echo $image_url ? 'inline-block' : 'none'; ?>;"><?php esc_html_e('Resmi Sil', 'plexorin'); ?></button>
    </div>
    <script type="text/javascript">
        var defaultImageUrl = "<?php echo esc_url($image_url); ?>";
        document.addEventListener('DOMContentLoaded', function() {
            var images = document.querySelectorAll('.content-url');
            images.forEach(function(img) {
                img.src = defaultImageUrl;
            });

            var frame;
            document.getElementById('plexorin_default_image_button').addEventListener('click', function(e) {
                e.preventDefault();
                if (frame) {
                    frame.open();
                    return;
                }
                frame = wp.media({
                    title: 'Select or Upload Media',
                    button: {
                        text: 'Use this media'
                    },
                    multiple: false
                });

                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    document.getElementById('plexorin_default_image').value = attachment.id;
                    var imageUrl = attachment.url;
                    document.getElementById('plexorin_default_image_preview').src = imageUrl;
                    document.getElementById('plexorin_default_image_preview').style.display = 'block';
                    document.getElementById('plexorin_default_image_remove').style.display = 'inline-block';

                    // Update the preview images
                    images.forEach(function(img) {
                        img.src = imageUrl;
                    });
                });

                frame.open();
            });

            document.getElementById('plexorin_default_image_remove').addEventListener('click', function(e) {
                e.preventDefault();
                document.getElementById('plexorin_default_image').value = '';
                document.getElementById('plexorin_default_image_preview').style.display = 'none';
                this.style.display = 'none';

                // Reset the preview images to default
                images.forEach(function(img) {
                    img.src = defaultImageUrl;
                });
            });
        });
    </script>
    <?php
}

script tagı ve içeriğini kaldırdıktan sonra aşağıda ki kodu js dosyasına ekleyip deneyebilirmisin

var defaultImageUrl = document.getElementById('plexorin_default_image_preview').src;
        document.addEventListener('DOMContentLoaded', function() {
            var images = document.querySelectorAll('.content-url');
            images.forEach(function(img) {
                img.src = defaultImageUrl;
            });
 
            var frame;
            document.getElementById('plexorin_default_image_button').addEventListener('click', function(e) {
                e.preventDefault();
                if (frame) {
                    frame.open();
                    return;
                }
                frame = wp.media({
                    title: 'Select or Upload Media',
                    button: {
                        text: 'Use this media'
                    },
                    multiple: false
                });
 
                frame.on('select', function() {
                    var attachment = frame.state().get('selection').first().toJSON();
                    document.getElementById('plexorin_default_image').value = attachment.id;
                    var imageUrl = attachment.url;
                    document.getElementById('plexorin_default_image_preview').src = imageUrl;
                    document.getElementById('plexorin_default_image_preview').style.display = 'block';
                    document.getElementById('plexorin_default_image_remove').style.display = 'inline-block';
 
                    // Update the preview images
                    images.forEach(function(img) {
                        img.src = imageUrl;
                    });
                });
 
                frame.open();
            });
 
            document.getElementById('plexorin_default_image_remove').addEventListener('click', function(e) {
                e.preventDefault();
                document.getElementById('plexorin_default_image').value = '';
                document.getElementById('plexorin_default_image_preview').style.display = 'none';
                this.style.display = 'none';
 
                // Reset the preview images to default
                images.forEach(function(img) {
                    img.src = defaultImageUrl;
                });
            });
        });

peki en başta defaultImageUrl değişkenini tanımlamayınca bu nasıl o js dosyasına aktarılacak yani dinamik olarak php deki gibi ?? ile şart yapılıyor çünkü

Verdiğim kod da tanımlanıyor. Herhangi bir resim yoksa null değeri alır

şimdi fark ettim hocam zaten php ile src ye atıyorum saat geç yorgunluk var gözümden kaçmış

Bunun gibi bişey mi diyorsun

var defaultImageUrl = document.getElementById('plexorin_default_image_preview').src != undefined && document.getElementById('plexorin_default_image_preview').src?.length > 0  ? document.getElementById('plexorin_default_image_preview').src : "https://plexorin.com/assets/img/default.webp";

aynen ama zaten php ile src ye atıyormuşum yani aslında src zaten undefined olmuyor hiçbir zaman

Evet ilk attığım kodu onu düşünerek atmıştım