apply_filters( ‘render_block’, string $block_content, array $block, WP_Block $instance )

User Contributed Notes

1. Skip to note 5 content

   Khoi Pro 6 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 6You must log in to vote on the helpfulness of this note

   To add a div wrapper outside of some blocks (like core/paragraph or core/heading), you can add filter to render_block:

   // functions.php
   function wporg_block_wrapper( $block_content, $block ) {
   	if ( $block['blockName'] === 'core/paragraph' ) {
   		$content = '<div class="wp-block-paragraph">';
   		$content .= $block_content;
   		$content .= '</div>';
   		return $content;
   	} elseif ( $block['blockName'] === 'core/heading' ) {
   		$content = '<div class="wp-block-heading">';
   		$content .= $block_content;
   		$content .= '</div>';
   		return $content;
   	}
   	return $block_content;
   }
   
   add_filter( 'render_block', 'wporg_block_wrapper', 10, 2 );

   • This doesn’t work anymore I’m afraid as all core blocks have their `blockName` set to null for some obscure reason :( https://github.com/WordPress/WordPress/blob/master/wp-includes/blocks.php#L697

     petrey 4 years ago
2. Skip to note 6 content

   Marie Comet 3 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 4You must log in to vote on the helpfulness of this note

   $block
(array) The full block, including name and attributes.

   Good to know that $block['attrs'] do not include attributes declared in block.json with “source” set to “attribute”.

   For example, in a block.json :

   "attributes": {
       "url": {
           "type": "string",
           "source": "attribute",
           "selector": "a",
           "attribute": "href"
       },
       "width": {
           "type": "number"
       }
   }

   $block['attrs'] only include width, not url.
3. Skip to note 7 content

   Phil Johnston 3 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 4You must log in to vote on the helpfulness of this note

   Here’s a quick/rough example of how you can render any block in any way with this filter. Note that the example uses an attribute called `name_of_attribute_here`. You’ll want to use an actual attribute that belongs to that block.

   A quick/easy way to discover what’s available to you is to `print_r( $block );` inside the function, refresh the frontend page where the block sits, and see what’s available in the `attrs`.

   /**
    * Modify the rendered output of any block.
    *
    * @param string $block_content The normal block HTML that would be sent to the screen.
    * @param array  $block An array of data about the block, and the way the user configured it.
    */
   function my_custom_render( $block_content, $block ) {
   
   	// For the block in question, render whatever you want, and pull any attrinute you need from $block['attrs'].
   	if ( $block['blockName'] === 'core/image' ) {
   		return 'Anything I want with any attribute value here: ' . $block['attrs']['name_of_attribute_here'] . '.';
   	}
   
   	// For any other block, just return normal block output.
   	return $block_content;
   
   }
   add_filter( 'render_block', 'my_custom_render', 10, 2 );
4. Skip to note 8 content

   Benjamin Intal 2 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   $block_content and $block can become null, so be sure to handle these cases.

   function wpdocs_render_block( $block_content, $block ) {
   	if ( is_null( $block_content ) ) {
   		// Handle null
   	}
   
   	if ( isset( $block['blockName'] ) && 'wpdocs/block' === $block['blockName'] ) {
   		// Do something
   	}
   
   	return $block_content;
   }
   add_filter( 'render_block', 'wpdocs_render_block', 10, 2 );