-
-
Save KevinBatdorf/daec9345115279f1c9fe49deb589882f to your computer and use it in GitHub Desktop.
Render WP block with inline styling - headless
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_filter('render_block', function ($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; | |
} | |
$id = uniqid(); | |
$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. | |
$gap_value = preg_match('%[\\\(&=}]|/\*%', $gap_value) ? null : $gap_value; | |
$style = wp_get_layout_style(".wp-container-$id", $used_layout, $has_block_gap_support, $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="wp-container-' . $id . ' ', | |
$block_content, | |
1 | |
); | |
// This is all that's really being modified here | |
return $content . ($style ? '<style>' . $style . '</style>' : ''); | |
}, 10, 2); |
Yes of course, I understand you.
After that I'll do some tests by modifying the code.
However I can confirm that up to the wp 6.0 version it worked perfectly.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Weird. Not sure why it still works for me, but I may need to go and reconfirm it.
I think you will have to look into the render function and use the filter to pull in the styles another way.
https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/class-wp-block.php#L293
Right now it's using
wp_enqueue_style( $style_handle );
to enqueue all the stylesMaybe there's an easier way now to use that information to grab the styles directly. The filter can accept
$block_content, $this->parsed_block, $this
which should hopefully be enough context. Do you know what I mean?