带有 acf 字段的页面上的 foreach 块答案

【问题标题】：foreach block on page w/ acf fields带有 acf 字段的页面上的 foreach 块
【发布时间】：2021-11-09 01:03:51
【问题描述】：

我正在尝试添加一个“边距”块，以便更轻松地定义块上方或下方的填充。这是使用 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 
    
}

【问题讨论】：

嗯，你显然必须在你的 CSS 中编写更具体的选择器，只针对有问题的元素。 .margin-block 选择具有该类的所有元素，并且 CSS 规则重复相同的选择器并设置相同的属性将相互覆盖，你从一开始就不清楚吗？跨度>
也许您不应该为每个元素编写单独的规则。在样式表中使用 CSS 变量，然后通过元素本身的内联样式设置该变量。

标签： php wordpress wordpress-gutenberg

【解决方案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 
    
}

【讨论】：