php - 带有 acf 字段的页面上的 foreach 块

Question

我正在尝试添加一个“边距”块，以便更轻松地定义块上方或下方的填充。这是使用 ACF 字段供用户输入数字。我遇到的问题是当响应时填充应该改变，我已经这样做了，calc()但它会根据最后一个块填充覆盖每个块的样式。

我该如何设置它以便为页面上的每个单独块设置它？

TIA。

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 
    
}

标签： phpwordpresswordpress-gutenberg

Answer 1

对于任何好奇的人，我想出了一个似乎很有效的解决方案，方法是拉出块的 id 并将其附加到类中。

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 
    
}