Support » Developing with WordPress » Modify Gutenberg core block render result

  • Hi,

    Is there a way to modify the way wordpress renders core block such as core/image?

    The default output is the following.

    
    <div class="wp-block-image">
       <figure class="alignright">
         <img src="https://domain.com/image.jpg" alt="image" class="wp-image-8763"> 
       </figure>
    </div>
    

    What if I want do modify the output of this block to something like this

    
    <div class="wp-block-image">
       <figure class="float-left">
         <img src="https://domain.com/image.jpg" alt="image" class="w-full wp-image-8763"> 
       </figure>
    </div>
    

    how this can be achieved?

Viewing 3 replies - 1 through 3 (of 3 total)
  • A couple of thoughts:

    There is a way to modify the output of blocks and that is by using block filters. However, I don’t think you can easily alter in the way you are hoping.

    Side Note: the default output for the image block is

       <figure class="wp-block-image">
         <img src="https://domain.com/image.jpg" alt="image" class="wp-image-8763"> 
       </figure>

    The div is added only after some parameter is altered/added to the block in the editor. Add this to a demo site:

    add_filter( 'render_block', 'wrap_my_image_block', 10, 2 );
    function wrap_my_image_block( $block_content, $block ) {
    	if ( 'core/image' !== $block['blockName'] ) {
    		return $block_content;
    	}
    	$return  = 'my-image-block<div class="my-image-block">';
    	$return .= $block_content;
    	$return .= '</div>';
    
    	return $return;
    }

    Then check how the html is rendered on the frontend when you add an image. Change the alignment too and check again:

    Thread Starter asandco

    (@asandco)

    Thanks for suggestion, though I think in my case where I am using tailwincss I will have to create a switch fuction that will replace core alignment classes with tailwind equivalents. Just did not want to duplicate css styles. Unfortunately gutendber doesn’t make it easy to change core functionality, from what I see it even makes things more complicated rather than simplifying them.

    You may want to check out what other developers are doing. Here’s a repo that may help:

    https://github.com/kellymears/tailwind-gutenberg-components

    Gutenberg does make things easier… for the user. For developers there is a shift in what is needed, but we have access to affect the changes we need.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Modify Gutenberg core block render result’ is closed to new replies.