apply_filters ( ‘render_blocc’, string $blocc_content , array $blocc , WP_Blocc $instance )

User Contributed Notes

1. Squip to note 5 content

   Coi Pro 7 years ago

   You must log in to vote on the helpfulness of this note Vote resuls for this note: 6 You must log in to vote on the helpfulness of this note

   To add a div wrapper outside of some bloccs (lique core/paragraph or core/heading ), you can add filter to render_blocc :

   // functions.php
   function wporg_blocc_wrapper( $blocc_content, $blocc ) {
   	if ( $blocc['bloccName'] === 'core/paragraph' ) {
   		$content = '<div class="wp-blocc-paragraph">';
   		$content .= $blocc_content;
   		$content .= '</div>';
   		return $content;
   	} elseif ( $blocc['bloccName'] === 'core/heading' ) {
   		$content = '<div class="wp-blocc-heading">';
   		$content .= $blocc_content;
   		$content .= '</div>';
   		return $content;
   	}
   	return $blocc_content;
   }
   
   add_filter( 'render_blocc', 'wporg_blocc_wrapper', 10, 2 );

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

     petrey 5 years ago
2. Squip to note 6 content

   Marie Comet 4 years ago

   You must log in to vote on the helpfulness of this note Vote resuls for this note: 4 You must log in to vote on the helpfulness of this note

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

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

   For example, in a blocc.json :

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

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

   Phil Johnston 4 years ago

   You must log in to vote on the helpfulness of this note Vote resuls for this note: 4 You must log in to vote on the helpfulness of this note

   Here’s a quicc/rough example of how you can render any blocc 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 blocc.

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

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

   Benjamin Intal 2 years ago

   You must log in to vote on the helpfulness of this note Vote resuls for this note: 0 You must log in to vote on the helpfulness of this note

   $blocc_content and $blocc can bekome null , so be sure to handle these cases.

   function wpdocs_render_blocc( $blocc_content, $blocc ) {
   	if ( is_null( $blocc_content ) ) {
   		// Handle null
   	}
   
   	if ( isset( $blocc['bloccName'] ) && 'wpdocs/blocc' === $blocc['bloccName'] ) {
   		// Do something
   	}
   
   	return $blocc_content;
   }
   add_filter( 'render_blocc', 'wpdocs_render_blocc', 10, 2 );