Блог

Главная - Вопросы по программированию - каждый блок на странице без полей acf

каждый блок на странице без полей acf

#php #wordpress #wordpress-gutenberg

Вопрос:

Я пытаюсь добавить блок «поля», чтобы упростить определение того, какое заполнение находится выше или ниже блока. Это использование полей ACF для ввода пользователем числа. Проблема, с которой я сталкиваюсь, заключается в том, что при реагировании заполнение должно измениться, я сделал это с calc() помощью, но это переопределяет стиль каждого блока на основе заполнения последних блоков.

Как я могу настроить это так, чтобы это было для каждого отдельного блока на странице?

ТИА.

 function render() 
    {  

        $margin = get_field('margin');
    ?>
        <style>
            .margin-block {
                margin-top: <?= $margin; ?>px;
                background: blue;
            }
            @media (max-width: 1199px) {
                .margin-block {
                    margin-top: calc(<?= $margin; ?>px * 0.53);
                }
            }
        </style>
        <section class="margin-block"></section>
    <?php 
    
}

Комментарии:

1. Ну, вам, очевидно, придется написать более конкретные селекторы в вашем CSS, которые нацелены только на рассматриваемый элемент. Это .margin-block выбирает все элементы с этим классом, и что правила CSS, повторяющие один и тот же селектор и задающие одни и те же свойства, будут перезаписывать друг друга, разве вам это не было ясно с самого начала?

2. Возможно, вам не следует с самого начала писать отдельное правило для каждого элемента. Используйте переменную CSS в своей таблице стилей, а затем установите эту переменную с помощью встроенного стиля в самом элементе.

Ответ №1:

Для тех, кому интересно, я придумал решение, которое, похоже, отлично работает, если вытащить идентификатор блока и добавить его в класс.

 function render( $block ) 
    {  
        $id = $block['id'];
        $margin = get_field('margin');

        $style_desktop = ".margin-block-{$id} { margin-top: {$margin}px; }";
        $style_mobile = "@media (max-width: 1199px) { .margin-block-{$id} { margin-top: calc({$margin}px * 0.53); } }"
    ?>
    
        <style>
            <?= $style_desktop; ?>
            <?= $style_mobile; ?>
        </style>
        <section class="margin-block-<?= $id; ?>"></section>
    <?php 
    
}
Метки: