The render_block() function is responsible for rendering each individual block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. into an HTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. string. There are several filters available that allow plugins and themes to alter how the block is rendered.
pre_render_block: Allows render_block() to be short-circuited, by returning a non-null value.render_block_data: Filters the block being rendered in render_block(), before it’s processed.render_block_context: Filters the default context provided to a rendered block.render_block: Filters the content of a single block.
While these filters grant a large amount of control over how an individual block is rendered, hooked functions need to perform some verification that the block being rendered is of the desired block type before making any modifications.
In WordPress 5.7, a new dynamic filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., render_block_{$this->name}, will be introduced, allowing a function to be hooked only to blocks of a specific type. In the new filter, {$this->name} represents the name or slug of the block as it was registered. For example, the paragraph block, registered with a name of core/paragraph can be filtered using render_block_core/paragraph.
This reduces the amount of code previously needed to target the rendering of specific block types.
Usage examples
The following example will filter all core/paragraph blocks, wrapping them in a <div> element.
/**
* Wrap all core/paragragh blocks in a <div>.
*
* @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 wporg_paragraph_block_wrapper( $block_content, $block ) {
$content = '<div class="my-custom-wrapper">' . $block_content . '</div>';
return $content;
}
add_filter( 'render_block_core/paragraph', 'wporg_paragraph_block_wrapper', 10, 2 );
Result:
<div class="my-custom-wrapper">
<!-- block content -->
</div>
Note: The names of all WordPress Core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block types are prefixed with core/. For custom block types declared in a plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or theme, the name of the filter may be something like render_block_my-plugin/my-custom-block.
In this example, only paragraphs using the large font size keyword will be wrapped into a <div> element:
/**
* Wrap all core/paragraph blocks with large font size in a <div>.
*
* @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 wporg_large_sized_paragraph_block_wrapper( $block_content, $block ) {
if ( isset( $block['attrs']['fontSize'] ) && 'large' === $block['attrs']['fontSize'] ) {
$block_content = '<div class="my-large-paragraph">' . $block_content . '</div>';
}
return $block_content;
}
add_filter( 'render_block_core/paragraph', 'wporg_large_sized_paragraph_block_wrapper', 10, 2 );
Result:
<div class="my-large-paragraph">
<p class="has-large-font-size">
<!-- block content -->
</p>
</div>
For more information on this change, see ticket Created for both bug reports and feature development on the bug tracker. #46187 on Trac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress..
Props @chaton666 and @desrosj for proofreading.
#5-7, #dev-notes
