当使用 AJAX 请求获取内容时，古腾堡块的内联样式不会呈现

Question

我需要the_content()通过 AJAX 请求获取并在页面中呈现所有古腾堡块及其内联样式。

问题是，独特的块类被添加到主题模板的页脚中。

.wp-container-5 {
  display: flex;
  gap: 2em;
  flex-wrap: nowrap;
  align-items: center;
}

当get_the_content()通过 AJAX 请求使用时，不会呈现该独特的块样式。我猜这是因为内联块样式依赖于某种不会被 AJAX 请求触发的钩子。do_blocks()不渲染内联样式。

我搜索了数据库并搜索了 WordPress 源文件，但找不到类似的类.wp-container-5来自哪里。我想如果我能找到内联样式的位置，我可以简单地查询它并将其呈现在页面中。

有谁知道独特的块样式存储在哪里和/或如何查询它们并通过 AJAX 请求包含它们？

Answer 1

经过几个小时的挫折后我设法解决了这个问题。

里面wp-includes/block-supports/layout.php有一个函数叫wp_render_layout_support_flag(). 该函数获取块的内容和块对象，并wp-container-在末尾分配具有唯一 ID 的唯一类。然后，它使用该函数渲染内联样式wp_get_layout_style()，并使用 将该样式排入队列wp_enqueue_block_support_styles()。

问题是，wp_render_layout_support_flag()不返回样式。它返回带有 CSS 类的块内容，并使用匹配的 CSS 类将样式插入页脚。因此，它并不像调用那么简单wp_get_layout_style()，因为分配了一个唯一的 ID wp_render_layout_support_flag()，仅在函数wp_get_layout_style()内部调用时才匹配wp_render_layout_support_flag()。

解决方案是复制并粘贴（不理想但有效）该wp_render_layout_support_flag()函数并稍微改变它。

function my_render_layout_support_flag( $block_content, $block ) {
    $block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
    $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );

    if ( ! $support_layout ) {
        return $block_content;
    }

    $block_gap             = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
    $default_layout        = wp_get_global_settings( array( 'layout' ) );
    $has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
    $default_block_layout  = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
    $used_layout           = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
    if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
        if ( ! $default_layout ) {
            return $block_content;
        }
        $used_layout = $default_layout;
    }

    $class_name = wp_unique_id( 'wp-container-' );
    $gap_value  = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
    // Skip if gap value contains unsupported characters.
    // Regex for CSS value borrowed from `safecss_filter_attr`, and used here
    // because we only want to match against the value, not the CSS attribute.
    if ( is_array( $gap_value ) ) {
        foreach ( $gap_value as $key => $value ) {
            $gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
        }
    } else {
        $gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
    }

    $fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );

    // If a block's block.json skips serialization for spacing or spacing.blockGap,
    // don't apply the user-defined value to the styles.
    $should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
    $style                         = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
    // This assumes the hook only applies to blocks with a single wrapper.
    // I think this is a reasonable limitation for that particular hook.
    $content = preg_replace(
        '/' . preg_quote( 'class="', '/' ) . '/',
        'class="' . esc_attr( $class_name ) . ' ',
        $block_content,
        1
    );

    // This is where the changes happen

    return '<style>' . $style . '</style>' . $content;
}

唯一的变化是在接近尾声的地方wp_enqueue_block_support_styles()被删除，现在样式和内容被返回。

现在，使用 AJAX 调用时可以呈现古腾堡块并具有正确的样式！

$content = get_the_content(null, true, $post_id);
$blocks = parse_blocks( $content );

foreach ($blocks as $block) {
    echo my_render_layout_support_flag( render_block($block), $block );
}

这个解决方案感觉有点可笑，但它确实有效……WordPress 确实应该支持异步渲染块。