如何检查第一个块是左对齐还是右对齐的图像？

时间：2021-04-16 作者：Greg

我需要知道第一个块是否是图像，它是右对齐还是左对齐。我打印了$first_block_attrs 变量，可以看到输出是Array ( [align] => center [id] => 450 [sizeSlug] => large [linkDestination] => none ) 但我不知道如何检查[align] 属性为“left”或“right”。或者如何检查not \'“居中”或甚至未设置。感谢您的帮助！

if ( has_blocks( $post->post_content ) ) {
    $blocks = parse_blocks( $post->post_content );
    if ( $blocks[0][\'blockName\'] === \'acf/slideshow-block\' || $blocks[0][\'blockName\'] === \'core/image\' || is_page(array(9,11)) ) {
        if ($blocks[0][\'blockName\'] === \'core/image\') {
            $first_block_attrs = $blocks[0][\'attrs\'];
            // Testing if \'align\' is set
            if(array_key_exists(\'align\', $first_block_attrs)) {
                //print_r($first_block_attrs);
            }
            // This is what I need help with
            if ( \'image block is aligned right or left\' ) {
            }
        }
    }
}

1 个回复

SO网友:Tom J Nowell

使用CSS和一个小过滤器可以解决您的问题。您提出的解决方案不可行。

您可以检查某些块的属性，但如果块的HTML是由javascript生成的，则更改这些属性不会重新呈现该块。这意味着大多数标准块不能以这种方式修改，修改class属性不会更改前端上的标记。

然而，这是没有必要的。CSS可以使用各种CSS3+选择器处理各种情况。由于您不愿意分享问题的细节，我不得不通过详细说明每一种可能的组合来强制解决方案。

向图像块添加对齐数据属性，但首先，左对齐和右对齐的图像在其父容器上没有类，只有全宽和宽图像，因此我们将通过添加数据属性来解决这一问题：

/**
 * Ensure all image blocks have an alignment class.
 *
 * @param string $block_content The block content about to be appended.
 * @param array  $block         The full block, including name and attributes.
 * @return string Modified block content.
 */
function tomjn_add_align_class( $block_content, $block ) {
    $alignment = \'none\';
    if ( ! empty( $block[\'attrs\'][\'align\'] ) ) {
        $alignment = $block[\'attrs\'][\'align\'];
    }
    $content = str_replace(
        \'class="wp-block-image\',
        \'data-align="\' . esc_attr( $alignment ) .\'" class="wp-block-image\',
        $block_content
    );
    return $content;
}
add_filter( \'render_block_core/image\', \'tomjn_add_align_class\', 10, 2 );

这允许我们在其余部分使用纯CSS。请注意，在使用块渲染过滤器时，我们无法知道下一个是哪个块，因此这不能用于实现最初提出的解决方案。当渲染多篇文章时，这也会导致问题，例如，如果文章的最后一块是图像，则下一篇文章的第一块将错误地获取类。

设置块的样式在图像块之后立即选择块

.wp-block-image + * {
    color: hotpink;
}

在Post中第一个块的图像块之后选择块IMeditaley

.entry-content > .wp-block-image:first-child + * {
    color: hotpink;
}

注意> 是必需的，如果没有它，也将选择嵌套块中的第一个图像块。调整.entry-content 到包含您的内容的类。

在左对齐的图像块之后立即选择块

.wp-block-image[data-align="left"] + * {
    color: hotpink;
}

在右对齐的图像块之后立即选择块

.wp-block-image[data-align="right"] + * {
    color: hotpink;
}

在居中对齐的图像块之后立即选择块

.wp-block-image[data-align="center"] + * {
    color: hotpink;
}

在宽对齐图像块之后立即选择块

.wp-block-image.alignwide + * {
    color: hotpink;
}

在全宽图像块之后立即选择块

.wp-block-image.alignfull + * {
    color: hotpink;
}

在没有对齐的图像块之后立即选择块

.wp-block-image[data-align="none"] + * {
    color: hotpink;
}

等等，您可以进一步扩展：

使用~ 而不是+ 将选择所有块，而不是您可以更改的下一个相邻块+ * 使用更具体的选择器，例如。.wp-block-image[data-align="none"] + ul { 将选择不对齐的图像块之后的所有列表。您可以将它们链接在一起，例如，您可以使用.wp-block-image[data-align="none"] + * + * {

小码农CODE