[英]Inline styles for Gutenberg blocks not rendering when content fetched with AJAX request
我需要通过 AJAX 请求获取the_content()
并在页面中呈现所有 Gutenberg 块及其内联样式。
问题是,独特的块类被添加到主题模板的页脚中。
.wp-container-5 {
display: flex;
gap: 2em;
flex-wrap: nowrap;
align-items: center;
}
当通过 AJAX 请求使用get_the_content()
时,不会呈现该独特的块样式。 我猜这是因为内联块样式依赖于某种不会被 AJAX 请求触发的钩子。 do_blocks()
不呈现内联样式。
我搜索了数据库并搜索了 WordPress 源文件,但找不到像.wp-container-5
这样的类的来源。 我想如果我能找到内联样式的位置,我可以简单地查询它并在页面中呈现它。
有谁知道唯一块 styles 的存储位置和/或如何通过 AJAX 请求查询和包含它们?
经过数小时的挫折后,我设法解决了这个问题。
在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()
那样简单,因为在wp_render_layout_support_flag()
中分配了一个唯一 ID,只有在wp_render_layout_support_flag()
函数内部调用wp_get_layout_style()
时才会匹配该 ID。
解决方案是复制和粘贴(不理想,但它有效) 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 确实应该支持异步渲染块。
I have not tested this within the response from an AJAX request using the old admin-ajax.php
method, however, I had been trying to accomplish this same thing within a response from the REST API.
找到了这个线程并阅读了Myles 提供的解决方案——谢谢你的详细信息,顺便说一句——并进一步研究了wp_render_layout_support_flag
function,我想出了一个潜在的替代方案。
通常,使用 REST API,您可以添加如下内容:
register_rest_field('post', 'styles', [
'get_callback' => function ($post) {
ob_start();
do_action('wp_footer');
$content = ob_get_clean();
// perform any needed manipulation
return $content;
},
'schema' => [
'description' => __('Styles'),
'type' => 'string',
],
]);
如果您有其他功能推送将出现在wp_footer
中的内容,您可能希望在结果中去除非样式内容。
也许这样的事情会让你得到你正在寻找的东西:
ob_start();
the_content();
do_action('wp_footer');
$content = ob_get_clean();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.